From 7a5d0cc29b9e8bb8f7809de7f7ea7063229957dd Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamsilverstein@git.wordpress.org>
Date: Thu, 21 Sep 2017 22:44:38 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41557 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/media-views.js         | 24 ++++++++++++++++++++---
 src/wp-includes/js/media/views/cropper.js | 24 ++++++++++++++++++++---
 2 files changed, 42 insertions(+), 6 deletions(-)

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');