Changeset 59197

Timestamp:

10/08/2024 10:27:44 PM (3 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();
                     }
                 }