Changeset 37347 for trunk/src/wp-admin/js/customize-nav-menus.js

Timestamp:

05/02/2016 07:52:01 PM (8 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.

File:

• trunk/src/wp-admin/js/customize-nav-menus.js (modified) (6 diffs)

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;