WordPress.org

Make WordPress Core

Changeset 42404


Ignore:
Timestamp:
12/15/17 22:02:02 (5 weeks 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.