Changeset 41557

Timestamp:

09/21/2017 10:44:38 PM (7 years ago)

Author:

adamsilverstein

Message:

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

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.

Location:

trunk/src/wp-includes/js

Files:

• media-views.js (modified) (1 diff)
• media/views/cropper.js (modified) (1 diff)

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

@@ -4524 +4524 @@
     },
     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() {

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

@@ -46 +46 @@
     },
     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() {