Changeset 41557

Timestamp:

09/21/2017 10:44:38 PM (9 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() {