Changeset 59197

Timestamp:

10/08/2024 10:27:44 PM (22 months ago)

Author:

jorbin

Message:

Customizer: Do not force users to go through the cropping flow if the image is the correct ratio.

If a user uploads an 800x800 image and a 512x512 image is required, then they should be allowed to skip cropping. This still creates the correct crop behind the scenes but simplifies the flow a bit for users.

Props nirajgirixd, celloexpressions, westonruter, azaozz, jorbin.
Fixes #36441.

Location:

trunk/src/js

Files:

• _enqueues/wp/customize/controls.js (modified) (3 diffs)
• media/controllers/cropper.js (modified) (3 diffs)

trunk/src/js/_enqueues/wp/customize/controls.js

@@ -4603 +4603 @@
                  */
                 calculateImageSelectOptions: function( attachment, controller ) {
-                        var control    = controller.get( 'control' ),
-                                flexWidth  = !! parseInt( control.params.flex_width, 10 ),
-                                flexHeight = !! parseInt( control.params.flex_height, 10 ),
-                                realWidth  = attachment.get( 'width' ),
-                                realHeight = attachment.get( 'height' ),
-                                xInit = parseInt( control.params.width, 10 ),
-                                yInit = parseInt( control.params.height, 10 ),
-                                ratio = xInit / yInit,
-                                xImg  = xInit,
-                                yImg  = yInit,
+                        var control       = controller.get( 'control' ),
+                                flexWidth     = !! parseInt( control.params.flex_width, 10 ),
+                                flexHeight    = !! parseInt( control.params.flex_height, 10 ),
+                                realWidth     = attachment.get( 'width' ),
+                                realHeight    = attachment.get( 'height' ),
+                                xInit         = parseInt( control.params.width, 10 ),
+                                yInit         = parseInt( control.params.height, 10 ),
+                                requiredRatio = xInit / yInit,
+                                realRatio     = realWidth / realHeight,
+                                xImg          = xInit,
+                                yImg          = yInit,
                                 x1, y1, imgSelectOptions;
 
+                        controller.set( 'hasRequiredAspectRatio', control.hasRequiredAspectRatio( requiredRatio, realRatio ) );
+                        controller.set( 'suggestedCropSize', { width: realWidth, height: realHeight, x1: 0, y1: 0, x2: xInit, y2: yInit } );
                         controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) );
 
-                        if ( realWidth / realHeight > ratio ) {
+                        if ( realRatio > requiredRatio ) {
                                 yInit = realHeight;
-                                xInit = yInit * ratio;
+                                xInit = yInit * requiredRatio;
                         } else {
                                 xInit = realWidth;
-                                yInit = xInit / ratio;
+                                yInit = xInit / requiredRatio;
                         }
 
@@ -4663 +4666 @@
                  * Return whether the image must be cropped, based on required dimensions.
                  *
-                 * @param {boolean} flexW
-                 * @param {boolean} flexH
-                 * @param {number}  dstW
-                 * @param {number}  dstH
-                 * @param {number}  imgW
-                 * @param {number}  imgH
-                 * @return {boolean}
+                 * @param {boolean} flexW Width is flexible.
+                 * @param {boolean} flexH Height is flexible.
+                 * @param {number}  dstW  Required width.
+                 * @param {number}  dstH  Required height.
+                 * @param {number}  imgW  Provided image's width.
+                 * @param {number}  imgH  Provided image's height.
+                 * @return {boolean} Whether cropping is required.
                  */
                 mustBeCropped: function( flexW, flexH, dstW, dstH, imgW, imgH ) {
@@ -4693 +4696 @@
 
                         return true;
+                },
+
+                /**
+                 * Check if the image's aspect ratio essentially matches the required aspect ratio.
+                 *
+                 * Floating point precision is low, so this allows a small tolerance. This
+                 * tolerance allows for images over 100,000 px on either side to still trigger
+                 * the cropping flow.
+                 *
+                 * @param {number} requiredRatio Required image ratio.
+                 * @param {number} realRatio     Provided image ratio.
+                 * @return {boolean} Whether the image has the required aspect ratio.
+                 */
+                hasRequiredAspectRatio: function ( requiredRatio, realRatio ) {
+                        if ( Math.abs( requiredRatio - realRatio ) < 0.000001 ) {
+                                return true;
+                        }
+
+                        return false;
                 },
 

trunk/src/js/media/controllers/cropper.js

@@ -94 +94 @@
          */
         createCropToolbar: function() {
-                var canSkipCrop, toolbarOptions;
+                var canSkipCrop, hasRequiredAspectRatio, suggestedCropSize, toolbarOptions;
 
-                canSkipCrop = this.get('canSkipCrop') || false;
+                suggestedCropSize      = this.get( 'suggestedCropSize' );
+                hasRequiredAspectRatio = this.get( 'hasRequiredAspectRatio' );
+                canSkipCrop            = this.get( 'canSkipCrop' ) || false;
 
                 toolbarOptions = {
@@ -128 +130 @@
                 };
 
-                if ( canSkipCrop ) {
+                if ( canSkipCrop || hasRequiredAspectRatio ) {
                         _.extend( toolbarOptions.items, {
                                 skip: {
@@ -136 +138 @@
                                         requires:   { library: false, selection: false },
                                         click:      function() {
-                                                var selection = this.controller.state().get('selection').first();
-                                                this.controller.state().cropperView.remove();
-                                                this.controller.trigger('skippedcrop', selection);
-                                                this.controller.close();
+                                                var controller = this.controller,
+                                                        selection = controller.state().get( 'selection' ).first();
+
+                                                controller.state().cropperView.remove();
+
+                                                // Apply the suggested crop size.
+                                                if ( hasRequiredAspectRatio && !canSkipCrop ) {
+                                                        selection.set({cropDetails: suggestedCropSize});
+                                                        controller.state().doCrop( selection ).done( function( croppedImage ) {
+                                                                controller.trigger( 'cropped', croppedImage );
+                                                                controller.close();
+                                                        }).fail( function() {
+                                                                controller.trigger( 'content:error:crop' );
+                                                        });
+                                                        return;
+                                                }
+
+                                                // Skip the cropping process.
+                                                controller.trigger( 'skippedcrop', selection );
+                                                controller.close();
                                         }
                                 }