Ticket #40211: 40211.2.diff

src/wp-includes/js/media-views.js

@@ -4523 +4523 @@
                 };
         },
         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');

src/wp-includes/js/media/views/cropper.js

@@ -45 +45 @@
                 };
         },
         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');