Ticket #22237: 22237.3.diff

src/wp-admin/js/customize-controls.js

@@ -3628 +3628 @@
                         overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
                 });
 
+                // Keyboard shortcuts - esc to exit section/panel.
+                $( 'body' ).on( 'keydown', function( event ) {
+                        var collapsedObject, expandedControls = [], expandedSections = [], expandedPanels = [];
+
+                        if ( 27 !== event.which ) { // Esc.
+                                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 ) ) {
+                                        expandedControls.push( control );
+                                }
+                        });
+                        api.section.each( function( section ) {
+                                if ( section.expanded() ) {
+                                        expandedSections.push( section );
+                                }
+                        });
+                        api.panel.each( function( panel ) {
+                                if ( panel.expanded() ) {
+                                        expandedPanels.push( panel );
+                                }
+                        });
+
+                        // Skip collapsing expanded controls if there are no expanded sections.
+                        if ( expandedControls.length > 0 && 0 === expandedSections.length ) {
+                                expandedControls.length = 0;
+                        }
+
+                        // Collapse the most granular expanded object.
+                        collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
+                        if ( collapsedObject ) {
+                                collapsedObject.collapse();
+                                event.preventDefault();
+                        }
+                });
+
                 $( '.customize-controls-preview-toggle' ).on( 'click', function() {
                         overlay.toggleClass( 'preview-only' );
                 });

src/wp-admin/js/customize-nav-menus.js

@@ -993 +993 @@
                  */
                 initialize: function( id, options ) {
                         var control = this;
+                        control.expanded = new api.Value( false );
+                        control.expandedArgumentsQueue = [];
+                        control.expanded.bind( function( expanded ) {
+                                var args = control.expandedArgumentsQueue.shift();
+                                args = $.extend( {}, control.defaultExpandedArguments, args );
+                                control.onChangeExpanded( expanded, args );
+                        });
                         api.Control.prototype.initialize.call( control, id, options );
                         control.active.validate = function() {
                                 var value, section = api.section( control.section() );
@@ -1370 +1377 @@
                 },
 
                 /**
+                 * @since 4.6.0
+                 *
+                 * @param {Boolean} expanded
+                 * @param {Object} [params]
+                 * @returns {Boolean} false if state already applied
+                 */
+                _toggleExpanded: api.Section.prototype._toggleExpanded,
+
+                /**
+                 * @since 4.6.0
+                 *
+                 * @param {Object} [params]
+                 * @returns {Boolean} false if already expanded
+                 */
+                expand: api.Section.prototype.expand,
+
+                /**
                  * Expand the menu item form control.
                  *
                  * @since 4.5.0 Added params.completeCallback.
@@ -1378 +1402 @@
                  * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
                  */
                 expandForm: function( params ) {
-                        this.toggleForm( true, params );
+                        this.expand( params );
                 },
 
                 /**
+                 * @since 4.6.0
+                 *
+                 * @param {Object} [params]
+                 * @returns {Boolean} false if already collapsed
+                 */
+                collapse: api.Section.prototype.collapse,
+
+                /**
                  * Collapse the menu item form control.
                  *
                  * @since 4.5.0 Added params.completeCallback.
@@ -1390 +1422 @@
                  * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
                  */
                 collapseForm: function( params ) {
-                        this.toggleForm( false, params );
+                        this.collapse( params );
                 },
 
                 /**
                  * Expand or collapse the menu item control.
                  *
-                 * @since 4.5.0 Added params.completeCallback.
+                 * @deprecated this is poor naming, and it is better to directly set control.expanded( showOrHide )
                  *
+                 * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
+                 */
+                toggleForm: function( showOrHide ) {
+                        if ( typeof showOrHide === 'undefined' ) {
+                                showOrHide = ! this.expanded();
+                        }
+                        this.expanded( showOrHide );
+                },
+
+                /**
+                 * Expand or collapse the menu item control.
+                 *
+                 * @since 4.6.0
                  * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
                  * @param {Object}   [params] - Optional params.
                  * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
                  */
-                toggleForm: function( showOrHide, params ) {
+                onChangeExpanded: function( showOrHide, params ) {
                         var self = this, $menuitem, $inside, complete;
 
                         $menuitem = this.container;