Changeset 42404

Timestamp:

12/15/2017 10:02:02 PM (5 years ago)

Author:

adamsilverstein

Message:

Media: improve flows for cropping on attachment details screen.

On the "Attachment Details" screen:

• The crop button is always 'enabled'.
• Clicking the crop button with no selection selects the entire image.
• Clicking the crop button with the entire image selected doesn't do anything.
• Clicking the crop button with a selection crops as expected.

Props sonjanyc, afercia, mikeschroder.
Fixes #30155.

Location:

trunk/src/wp-admin

Files:

• includes/image-edit.php (modified) (1 diff)
• js/image-edit.js (modified) (4 diffs)

trunk/src/wp-admin/includes/image-edit.php

@@ -191 +191 @@
         <?php echo $note; ?>
         <div class="imgedit-menu wp-clearfix">
-            <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button>
+            <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button>
                                                                         <?php
 

trunk/src/wp-admin/js/image-edit.js

@@ -18 +18 @@
     postid : '',
     _view : false,
+
+    /**
+     * Handle crop tool clicks.
+     */
+    handleCropToolClick: function( postid, nonce, cropButton ) {
+        var img = $( '#image-preview-' + postid ),
+            selection = this.iasapi.getSelection();
+
+        // Ensure selection is available, otherwise reset to full image.
+        if ( isNaN( selection.x1 ) ) {
+            this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
+            selection = this.iasapi.getSelection();
+        }
+
+        // If we don't already have a selection, select the entire image.
+        if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
+            this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
+            this.iasapi.setOptions( { show: true } );
+            this.iasapi.update();
+        } else {
+
+            // Otherwise, perform the crop.
+            imageEdit.crop( postid, nonce , cropButton );
+        }
+    },
 
     /**
@@ -352 +377 @@
 
                 t.initCrop(postid, img, parent);
-                t.setCropSelection(postid, 0);
 
                 if ( (typeof callback !== 'undefined') && callback !== null ) {
@@ -580 +604 @@
 
         this.initCrop(postid, img, parent);
-        this.setCropSelection(postid, 0);
+        this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } );
+
         this.toggleEditor(postid, 0);
         // Editor is ready, move focus to the first focusable element.
@@ -704 +729 @@
 
         if ( !c || ( c.width < 3 && c.height < 3 ) ) {
-            this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
-            this.setDisabled($('#imgedit-crop-sel-' + postid), 0);
+            this.setDisabled( $( '.imgedit-crop', '#imgedit-panel-' + postid ), 1 );
+            this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
             $('#imgedit-sel-width-' + postid).val('');
             $('#imgedit-sel-height-' + postid).val('');