sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customizer: retain aspect ration when cropping media w/ shift+click/drag.

Browse Source 
Enforce a 1:1 ratio when holding the shift key and dragging in the image cropping tool in the customizer context.

Props melchoyce, mikeschroder.
Fixes #40211.


git-svn-id: https://develop.svn.wordpress.org/trunk@41557 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein 2017-09-21 22:44:38 +00:00
parent 52bdeee37d
commit 7a5d0cc29b
2 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/wp-includes/js/media-views.js
View File

@ -4523,14 +4523,32 @@ Cropper = View.extend(/** @lends wp.media.view.Cropper.prototype */{
}; };
}, },
onImageLoad: function() { onImageLoad: function() {
var imgOptions = this.controller.get('imgSelectOptions'); var imgOptions = this.controller.get('imgSelectOptions'),
imgSelect;
if (typeof imgOptions === 'function') { if (typeof imgOptions === 'function') {
imgOptions = imgOptions(this.options.attachment, this.controller); imgOptions = imgOptions(this.options.attachment, this.controller);
} }
imgOptions = _.extend(imgOptions, {parent: this.$el}); imgOptions = _.extend(imgOptions, {
parent: this.$el,
onInit: function() {
this.parent.children().on( 'mousedown touchstart', function( e ){
if ( e.shiftKey ) {
imgSelect.setOptions( {
aspectRatio: '1:1'
} );
} else {
imgSelect.setOptions( {
aspectRatio: false
} );
}
} );
}
} );
this.trigger('image-loaded'); this.trigger('image-loaded');
this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions); imgSelect = this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
}, },
onError: function() { onError: function() {
var filename = this.options.attachment.get('filename'); var filename = this.options.attachment.get('filename');

24
src/wp-includes/js/media/views/cropper.js
View File

@ -45,14 +45,32 @@ Cropper = View.extend(/** @lends wp.media.view.Cropper.prototype */{
}; };
}, },
onImageLoad: function() { onImageLoad: function() {
var imgOptions = this.controller.get('imgSelectOptions'); var imgOptions = this.controller.get('imgSelectOptions'),
imgSelect;
if (typeof imgOptions === 'function') { if (typeof imgOptions === 'function') {
imgOptions = imgOptions(this.options.attachment, this.controller); imgOptions = imgOptions(this.options.attachment, this.controller);
} }
imgOptions = _.extend(imgOptions, {parent: this.$el}); imgOptions = _.extend(imgOptions, {
parent: this.$el,
onInit: function() {
this.parent.children().on( 'mousedown touchstart', function( e ){
if ( e.shiftKey ) {
imgSelect.setOptions( {
aspectRatio: '1:1'
} );
} else {
imgSelect.setOptions( {
aspectRatio: false
} );
}
} );
}
} );
this.trigger('image-loaded'); this.trigger('image-loaded');
this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions); imgSelect = this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
}, },
onError: function() { onError: function() {
var filename = this.options.attachment.get('filename'); var filename = this.options.attachment.get('filename');