Changeset 36383

Timestamp:

01/22/2016 09:20:26 PM (9 years ago)

Author:

westonruter

Message:

Customizer: Add shift-click on nav menu items in preview to focus on corresponding nav menu item controls in pane.

Add missing params.completeCallback to MenuItemControl.focus() for parity with Control.focus(). Also adds params to MenuItemControl.expandForm, MenuItemControl.collapseForm(), and MenuItemControl.toggleForm().

Props MattGeri, westonruter.
Fixes #32681.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (1 diff)
• wp-admin/js/customize-nav-menus.js (modified) (7 diffs)
• wp-includes/class-wp-customize-nav-menus.php (modified) (1 diff)
• wp-includes/js/customize-preview-nav-menus.js (modified) (3 diffs)

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

@@ -75 +75 @@
      *
      * @param {Object}   [params]
-     * @param {Callback} [params.completeCallback]
+     * @param {Function} [params.completeCallback]
      */
     focus = function ( params ) {

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

@@ -1364 +1364 @@
         /**
          * Expand the menu item form control.
-         */
-        expandForm: function() {
-            this.toggleForm( true );
+         *
+         * @since 4.5.0 Added params.completeCallback.
+         *
+         * @param {Object}   [params] - Optional params.
+         * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
+         */
+        expandForm: function( params ) {
+            this.toggleForm( true, params );
         },
 
         /**
          * Collapse the menu item form control.
-         */
-        collapseForm: function() {
-            this.toggleForm( false );
+         *
+         * @since 4.5.0 Added params.completeCallback.
+         *
+         * @param {Object}   [params] - Optional params.
+         * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
+         */
+        collapseForm: function( params ) {
+            this.toggleForm( false, params );
         },
 
@@ -1379 +1389 @@
          * Expand or collapse the menu item control.
          *
-         * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
-         */
-        toggleForm: function( showOrHide ) {
+         * @since 4.5.0 Added params.completeCallback.
+         *
+         * @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 ) {
             var self = this, $menuitem, $inside, complete;
 
@@ -1392 +1406 @@
             // Already expanded or collapsed.
             if ( $inside.is( ':visible' ) === showOrHide ) {
+                if ( params && params.completeCallback ) {
+                    params.completeCallback();
+                }
                 return;
             }
@@ -1408 +1425 @@
                         .addClass( 'menu-item-edit-active' );
                     self.container.trigger( 'expanded' );
+
+                    if ( params && params.completeCallback ) {
+                        params.completeCallback();
+                    }
                 };
 
@@ -1420 +1441 @@
                         .removeClass( 'menu-item-edit-active' );
                     self.container.trigger( 'collapsed' );
+
+                    if ( params && params.completeCallback ) {
+                        params.completeCallback();
+                    }
                 };
 
@@ -1432 +1457 @@
          * Expand the containing menu section, expand the form, and focus on
          * the first input in the control.
-         */
-        focus: function() {
-            var control = this, focusable;
+         *
+         * @since 4.5.0 Added params.completeCallback.
+         *
+         * @param {Object}   [params] - Params object.
+         * @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
+         */
+        focus: function( params ) {
+            params = params || {};
+            var control = this, originalCompleteCallback = params.completeCallback;
+
             control.expandControlSection();
-            control.expandForm();
-            // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
-            focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
-            focusable.first().focus();
+
+            params.completeCallback = function() {
+                var focusable;
+
+                // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
+                focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
+                focusable.first().focus();
+
+                if ( originalCompleteCallback ) {
+                    originalCompleteCallback();
+                }
+            };
+
+            control.expandForm( params );
         },
 
@@ -2446 +2488 @@
             api.previewer.refresh();
         });
+
+        // Open and focus menu control.
+        api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
     } );
 

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -947 +947 @@
             'previewCustomizeNonce' => wp_create_nonce( 'preview-customize_' . $this->manager->get_stylesheet() ),
             'navMenuInstanceArgs'   => $this->preview_nav_menu_instance_args,
+            'l10n'                  => array(
+                'editNavMenuItemTooltip' => __( 'Shift-click to edit this menu item.' ),
+            ),
         );
 

trunk/src/wp-includes/js/customize-preview-nav-menus.js

@@ -20 +20 @@
                 stylesheet: ''
             },
-            navMenuInstanceArgs: {}
+            navMenuInstanceArgs: {},
+            l10n: {}
         };
 
@@ -64 +65 @@
                 }
             } );
+
+            self.highlightControls();
         },
 
@@ -273 +276 @@
                 refreshDebounceDelay
             );
+        },
+
+        /**
+         * Connect nav menu items with their corresponding controls in the pane.
+         */
+        highlightControls: function() {
+            var selector = '.menu-item[id^=menu-item-]',
+                addTooltips;
+
+            // Open expand the menu item control when shift+clicking the menu item
+            $( document ).on( 'click', selector, function( e ) {
+                var navMenuItemParts;
+                if ( ! e.shiftKey ) {
+                    return;
+                }
+
+                navMenuItemParts = $( this ).attr( 'id' ).match( /^menu-item-(\d+)$/ );
+                if ( navMenuItemParts ) {
+                    e.preventDefault();
+                    e.stopPropagation(); // Make sure a sub-nav menu item will get focused instead of parent items.
+                    api.preview.send( 'focus-nav-menu-item-control', parseInt( navMenuItemParts[1], 10 ) );
+                }
+            });
+
+            addTooltips = function( e, params ) {
+                params.newContainer.find( selector ).attr( 'title', settings.l10n.editNavMenuItemTooltip );
+            };
+
+            addTooltips( null, { newContainer: $( document.body ) } );
+            $( document ).on( 'customize-preview-menu-refreshed', addTooltips );
         }
     };