WordPress.org

Make WordPress Core

Changeset 42404


Ignore:
Timestamp:
12/15/2017 10:02:02 PM (5 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/image-edit.php

    r42343 r42404  
    191191        <?php echo $note; ?>
    192192        <div class="imgedit-menu wp-clearfix">
    193             <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>
     193            <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>
    194194                                                                        <?php
    195195
  • trunk/src/wp-admin/js/image-edit.js

    r42403 r42404  
    1818    postid : '',
    1919    _view : false,
     20
     21    /**
     22     * Handle crop tool clicks.
     23     */
     24    handleCropToolClick: function( postid, nonce, cropButton ) {
     25        var img = $( '#image-preview-' + postid ),
     26            selection = this.iasapi.getSelection();
     27
     28        // Ensure selection is available, otherwise reset to full image.
     29        if ( isNaN( selection.x1 ) ) {
     30            this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
     31            selection = this.iasapi.getSelection();
     32        }
     33
     34        // If we don't already have a selection, select the entire image.
     35        if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
     36            this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
     37            this.iasapi.setOptions( { show: true } );
     38            this.iasapi.update();
     39        } else {
     40
     41            // Otherwise, perform the crop.
     42            imageEdit.crop( postid, nonce , cropButton );
     43        }
     44    },
    2045
    2146    /**
     
    352377
    353378                t.initCrop(postid, img, parent);
    354                 t.setCropSelection(postid, 0);
    355379
    356380                if ( (typeof callback !== 'undefined') && callback !== null ) {
     
    580604
    581605        this.initCrop(postid, img, parent);
    582         this.setCropSelection(postid, 0);
     606        this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } );
     607
    583608        this.toggleEditor(postid, 0);
    584609        // Editor is ready, move focus to the first focusable element.
     
    704729
    705730        if ( !c || ( c.width < 3 && c.height < 3 ) ) {
    706             this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
    707             this.setDisabled($('#imgedit-crop-sel-' + postid), 0);
     731            this.setDisabled( $( '.imgedit-crop', '#imgedit-panel-' + postid ), 1 );
     732            this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
    708733            $('#imgedit-sel-width-' + postid).val('');
    709734            $('#imgedit-sel-height-' + postid).val('');
Note: See TracChangeset for help on using the changeset viewer.