sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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

See #22237.
Fixes #38091.


git-svn-id: https://develop.svn.wordpress.org/trunk@39120 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-11-03 06:18:35 +00:00
parent 40197b63d9
commit 144f0cb317
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/wp-admin/js/customize-controls.js
View File

@ -1123,7 +1123,7 @@
section.template = wp.template( 'customize-themes-details-view' );
// Bind global keyboard events.
$( 'body' ).on( 'keyup', function( event ) {
section.container.on( 'keydown', function( event ) {
if ( ! section.overlay.find( '.theme-wrap' ).is( ':visible' ) ) {
return;
}
@ -1141,6 +1141,7 @@
// Pressing the escape key fires a theme:collapse event
if ( 27 === event.keyCode ) {
section.closeDetails();
event.stopPropagation(); // Prevent section from being collapsed.
}
});
@ -2864,7 +2865,7 @@
});
}
this.setting.bind( function ( value ) {
control.setting.bind( function ( value ) {
// bail if the update came from the control itself
if ( updating ) {
return;
@ -2872,6 +2873,20 @@
picker.val( value );
picker.wpColorPicker( 'color', value );
} );
// Collapse color picker when hitting Esc instead of collapsing the current section.
control.container.on( 'keydown', function( event ) {
var pickerContainer;
if ( 27 !== event.which ) { // Esc.
return;
}
pickerContainer = control.container.find( '.wp-picker-container' );
if ( pickerContainer.hasClass( 'wp-picker-active' ) ) {
picker.wpColorPicker( 'close' );
control.container.find( '.wp-color-result' ).focus();
event.stopPropagation(); // Prevent section from being collapsed.
}
} );
}
});
@ -5301,6 +5316,14 @@
return;
}
/*
* Abort if the event target is not the body (the default) and not inside of #customize-controls.
* This ensures that ESC meant to collapse a modal dialog or a TinyMCE toolbar won't collapse something else.
*/
if ( ! $( event.target ).is( 'body' ) && ! $.contains( $( '#customize-controls' )[0], event.target ) ) {
return;
}
// Check for expanded expandable controls (e.g. widgets and nav menus items), sections, and panels.
api.control.each( function( control ) {
if ( control.expanded && control.expanded() && _.isFunction( control.collapse ) ) {