diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index b42140166c..18e6444691 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -4523,14 +4523,32 @@ Cropper = View.extend(/** @lends wp.media.view.Cropper.prototype */{ }; }, onImageLoad: function() { - var imgOptions = this.controller.get('imgSelectOptions'); + var imgOptions = this.controller.get('imgSelectOptions'), + imgSelect; + if (typeof imgOptions === 'function') { 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.controller.imgSelect = this.$image.imgAreaSelect(imgOptions); + imgSelect = this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions); }, onError: function() { var filename = this.options.attachment.get('filename'); diff --git a/src/wp-includes/js/media/views/cropper.js b/src/wp-includes/js/media/views/cropper.js index 90012552d4..4220729072 100644 --- a/src/wp-includes/js/media/views/cropper.js +++ b/src/wp-includes/js/media/views/cropper.js @@ -45,14 +45,32 @@ Cropper = View.extend(/** @lends wp.media.view.Cropper.prototype */{ }; }, onImageLoad: function() { - var imgOptions = this.controller.get('imgSelectOptions'); + var imgOptions = this.controller.get('imgSelectOptions'), + imgSelect; + if (typeof imgOptions === 'function') { 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.controller.imgSelect = this.$image.imgAreaSelect(imgOptions); + imgSelect = this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions); }, onError: function() { var filename = this.options.attachment.get('filename');