WordPress.org

Make WordPress Core

Changeset 39120


Ignore:
Timestamp:
11/03/2016 06:18:35 AM (3 years ago)
Author:
westonruter
Message:

Customize: Prevent collapsing expanded panel/section/control when Esc is pressed on another closable UI element.

Prevents collapsing constructs when hitting Esc on a TinyMCE toolbar, lightbox, or expanded color picker.

See #22237.
Fixes #38091.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r39112 r39120  
    11241124
    11251125            // Bind global keyboard events.
    1126             $( 'body' ).on( 'keyup', function( event ) {
     1126            section.container.on( 'keydown', function( event ) {
    11271127                if ( ! section.overlay.find( '.theme-wrap' ).is( ':visible' ) ) {
    11281128                    return;
     
    11421142                if ( 27 === event.keyCode ) {
    11431143                    section.closeDetails();
     1144                    event.stopPropagation(); // Prevent section from being collapsed.
    11441145                }
    11451146            });
     
    28652866            }
    28662867
    2867             this.setting.bind( function ( value ) {
     2868            control.setting.bind( function ( value ) {
    28682869                // bail if the update came from the control itself
    28692870                if ( updating ) {
     
    28722873                picker.val( value );
    28732874                picker.wpColorPicker( 'color', value );
     2875            } );
     2876
     2877            // Collapse color picker when hitting Esc instead of collapsing the current section.
     2878            control.container.on( 'keydown', function( event ) {
     2879                var pickerContainer;
     2880                if ( 27 !== event.which ) { // Esc.
     2881                    return;
     2882                }
     2883                pickerContainer = control.container.find( '.wp-picker-container' );
     2884                if ( pickerContainer.hasClass( 'wp-picker-active' ) ) {
     2885                    picker.wpColorPicker( 'close' );
     2886                    control.container.find( '.wp-color-result' ).focus();
     2887                    event.stopPropagation(); // Prevent section from being collapsed.
     2888                }
    28742889            } );
    28752890        }
     
    53025317            }
    53035318
     5319            /*
     5320             * Abort if the event target is not the body (the default) and not inside of #customize-controls.
     5321             * This ensures that ESC meant to collapse a modal dialog or a TinyMCE toolbar won't collapse something else.
     5322             */
     5323            if ( ! $( event.target ).is( 'body' ) && ! $.contains( $( '#customize-controls' )[0], event.target ) ) {
     5324                return;
     5325            }
     5326
    53045327            // Check for expanded expandable controls (e.g. widgets and nav menus items), sections, and panels.
    53055328            api.control.each( function( control ) {
Note: See TracChangeset for help on using the changeset viewer.