💦 FULL SET: Changeset/ - Uncensored 2025

Changeset 55919


Ignore:
Timestamp:
06/14/2023 08:40:42 PM (3 years ago)
Author:
joedolson
Message:

Media: Update admin image editor design.

Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values.

A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.

Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/.env

    r54096 r55919  
    1313
    1414# Where to run WordPress from. Valid options are 'src' and 'build'.
    15 LOCAL_DIR=src
     15LOCAL_DIR=build
    1616
    1717# The PHP version to use. Valid options are 'latest', and '{version}-fpm'.
  • trunk/src/js/_enqueues/lib/image-edit.js

    r55859 r55919  
    2323
    2424    /**
    25      * Handle crop tool clicks.
    26      */
    27     handleCropToolClick: function( postid, nonce, cropButton ) {
     25     * Enable crop tool.
     26     */
     27    toggleCropTool: function( postid, nonce, cropButton ) {
    2828        var img = $( '#image-preview-' + postid ),
    2929            selection = this.iasapi.getSelection();
    3030
    31         // Ensure selection is available, otherwise reset to full image.
    32         if ( isNaN( selection.x1 ) ) {
    33             this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
    34             selection = this.iasapi.getSelection();
    35         }
    36 
    37         // If we don't already have a selection, select the entire image.
    38         if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
    39             this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
    40             this.iasapi.setOptions( { show: true } );
    41             this.iasapi.update();
     31        imageEdit.toggleControls( cropButton );
     32        var $el = $( cropButton );
     33        var state = ( $el.attr( 'aria-expanded' ) === 'true' ) ? 'true' : 'false';
     34        // Crop tools have been closed.
     35        if ( 'false' === state ) {
     36            // Cancel selection, but do not unset inputs.
     37            this.iasapi.cancelSelection();
     38            imageEdit.setDisabled($('.imgedit-crop-clear'), 0);
    4239        } else {
    43 
     40            imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     41            // Get values from inputs to restore previous selection.
     42            var startX = ( $( '#imgedit-start-x-' + postid ).val() ) ? $('#imgedit-start-x-' + postid).val() : 0;
     43            var startY = ( $( '#imgedit-start-y-' + postid ).val() ) ? $('#imgedit-start-y-' + postid).val() : 0;
     44            var width = ( $( '#imgedit-sel-width-' + postid ).val() ) ? $('#imgedit-sel-width-' + postid).val() : img.innerWidth();
     45            var height = ( $( '#imgedit-sel-height-' + postid ).val() ) ? $('#imgedit-sel-height-' + postid).val() : img.innerHeight();
     46            // Ensure selection is available, otherwise reset to full image.
     47            if ( isNaN( selection.x1 ) ) {
     48                this.setCropSelection( postid, { 'x1': startX, 'y1': startY, 'x2': width, 'y2': height, 'width': width, 'height': height } );
     49                selection = this.iasapi.getSelection();
     50            }
     51
     52            // If we don't already have a selection, select the entire image.
     53            if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
     54                this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
     55                this.iasapi.setOptions( { show: true } );
     56                this.iasapi.update();
     57            } else {
     58                this.iasapi.setSelection( startX, startY, width, height, true );
     59                this.iasapi.setOptions( { show: true } );
     60                this.iasapi.update();
     61            }
     62        }
     63    },
     64
     65    /**
     66     * Handle crop tool clicks.
     67     */
     68    handleCropToolClick: function( postid, nonce, cropButton ) {
     69
     70        if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) {
     71            this.iasapi.cancelSelection();
     72            imageEdit.setDisabled($('.imgedit-crop-apply'), 0);
     73
     74            $('#imgedit-sel-width-' + postid).val('');
     75            $('#imgedit-sel-height-' + postid).val('');
     76            $('#imgedit-start-x-' + postid).val('0');
     77            $('#imgedit-start-y-' + postid).val('0');
     78            $('#imgedit-selection-' + postid).val('');
     79        } else {
    4480            // Otherwise, perform the crop.
    4581            imageEdit.crop( postid, nonce , cropButton );
     
    123159        $('#imgedit-response-' + postid).empty();
    124160
     161        $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     162            var nonce = $( '#imgedit-nonce-' + postid ).val();
     163            if ( e.which === 26 && e.ctrlKey ) {
     164                imageEdit.undo( postid, nonce );
     165            }
     166
     167            if ( e.which === 25 && e.ctrlKey ) {
     168                imageEdit.redo( postid, nonce );
     169            }
     170        });
     171
    125172        $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126173            var k = e.keyCode;
     
    171218
    172219    /**
     220     * Shows or hides image menu popup.
     221     *
     222     * @since 6.3.0
     223     *
     224     * @memberof imageEdit
     225     *
     226     * @param {HTMLElement} el The activated control element.
     227     *
     228     * @return {boolean} Always returns false.
     229     */
     230    togglePopup : function(el) {
     231        var $el = $( el );
     232        var $targetEl = $( el ).attr( 'aria-controls' );
     233        var $target = $( '#' + $targetEl );
     234        $el
     235            .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     236        // Open menu and set z-index to appear above image crop area if it is enabled.
     237        $target
     238            .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ).css( { 'z-index' : 200000 } );
     239        // Move focus to first item in menu.
     240        $target.find( 'button' ).first().trigger( 'focus' );
     241
     242        return false;
     243    },
     244
     245    /**
     246     * Navigate popup menu by arrow keys.
     247     *
     248     * @since 6.3.0
     249     *
     250     * @memberof imageEdit
     251     *
     252     * @param {HTMLElement} el The current element.
     253     *