Make WordPress Core

Changeset 56652


Ignore:
Timestamp:
09/21/2023 05:47:42 PM (17 months ago)
Author:
joedolson
Message:

Media: Close image rotation menu when not focused.

Implement a focus monitor so that if user focus moves away from the image rotation menu, it closes and doesn't block the image editing canvas. Follow up to [56239], [55919].

Props nithi22, deepakvijayan, dharm1025, faisal03.
Fixes #58756.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/lib/image-edit.js

    r56602 r56652  
    241241            $target.find( 'button' ).first().trigger( 'focus' );
    242242        }
     243
     244        return false;
     245    },
     246
     247    /**
     248     * Observes whether the popup should remain open based on focus position.
     249     *
     250     * @since 6.4.0
     251     *
     252     * @memberof imageEdit
     253     *
     254     * @param {HTMLElement} el The activated control element.
     255     *
     256     * @return {boolean} Always returns false.
     257     */
     258    monitorPopup : function(el) {
     259        var $el     = $( el );
     260        var $parent = document.querySelector( '.imgedit-rotate-menu-container' );
     261        var $toggle = document.querySelector( '.imgedit-rotate-menu-container .imgedit-rotate' );
     262
     263        setTimeout( function() {
     264            var $focused = document.activeElement;
     265            var $contains = $parent.contains( $focused );
     266
     267            // If $focused is defined and not inside the menu container, close the popup.
     268            if ( $focused && ! $contains ) {
     269                if ( 'true' === $toggle.getAttribute( 'aria-expanded' ) ) {
     270                    imageEdit.togglePopup( $toggle );
     271                }
     272            }
     273        }, 100 );
    243274
    244275        return false;
  • trunk/src/wp-admin/includes/image-edit.php

    r56602 r56652  
    6464            <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
    6565            <div class="imgedit-rotate-menu-container">
    66                 <button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" aria-expanded="false" onclick="imageEdit.togglePopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
     66                <button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" aria-expanded="false" onclick="imageEdit.togglePopup(this)" onblur="imageEdit.monitorPopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
    6767                <div id="imgedit-rotate-menu" class="imgedit-popup-menu">
    6868            <?php
     
    7676                $note_no_rotate = '';
    7777                ?>
    78                     <button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° left' ); ?></button>
    79                     <button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° right' ); ?></button>
    80                     <button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 180°' ); ?></button>
     78                    <button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)"><?php esc_html_e( 'Rotate 90&deg; left' ); ?></button>
     79                    <button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)"><?php esc_html_e( 'Rotate 90&deg; right' ); ?></button>
     80                    <button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)"><?php esc_html_e( 'Rotate 180&deg;' ); ?></button>
    8181                <?php
    8282            } else {
     
    8989            ?>
    9090                    <hr />
    91                     <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
    92                     <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     91                    <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     92                    <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    9393                    <?php echo $note_no_rotate; ?>
    9494                </div>
Note: See TracChangeset for help on using the changeset viewer.