Changeset 37347

Timestamp:

05/02/2016 07:52:01 PM (10 years ago)

Author:

westonruter

Message:

Customize: Allow Esc key to collapse the currently-expanded panel, section (or control).

Pressing Esc collapses any expanded widget or nav menu item controls, or any control that implements the expanding interface. Also improves alignment between WidgetControl and MenuItemControl, adding the expanded state and associated expand/collapse methods to nav menu items.

Props purcebr, celloexpressions, westonruter.
Fixes #22237.

Location:

trunk/src/wp-admin/js

Files:

• customize-controls.js (modified) (1 diff)
• customize-nav-menus.js (modified) (6 diffs)

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

@@ -3648 +3648 @@
                 });
 
+                // 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' );

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

@@ -994 +994 @@
                 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() {
@@ -1371 +1378 @@
 
                 /**
+                 * @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.
                  *
@@ -1379 +1403 @@
                  */
                 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,
 
                 /**
@@ -1391 +1423 @@
                  */
                 collapseForm: function( params ) {
-                        this.toggleForm( false, params );
+                        this.collapse( params );
                 },
 
@@ -1397 +1429 @@
                  * Expand or collapse the menu item control.
                  *
+                 * @deprecated this is poor naming, and it is better to directly set control.expanded( showOrHide )
                  * @since 4.5.0 Added params.completeCallback.
                  *
@@ -1404 +1437 @@
                  */
                 toggleForm: function( showOrHide, params ) {
+                        if ( typeof showOrHide === 'undefined' ) {
+                                showOrHide = ! this.expanded();
+                        }
+                        if ( showOrHide ) {
+                                this.expand( params );
+                        } else {
+                                this.collapse( params );
+                        }
+                },
+
+                /**
+                 * 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.
+                 */
+                onChangeExpanded: function( showOrHide, params ) {
                         var self = this, $menuitem, $inside, complete;