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.

Built from https://develop.svn.wordpress.org/trunk@36383


git-svn-id: http://core.svn.wordpress.org/trunk@36350 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/customize-controls.js

@@ -74,7 +74,7 @@
 	 * @since 4.1.0
 	 *
 	 * @param {Object}   [params]
-	 * @param {Callback} [params.completeCallback]
+	 * @param {Function} [params.completeCallback]
 	 */
 	focus = function ( params ) {
 		var construct, completeCallback, focus;

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

@@ -1363,24 +1363,38 @@
 
 		/**
 		 * Expand the menu item form control.
+		 *
+		 * @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() {
+		expandForm: function( params ) {
-			this.toggleForm( true );
+			this.toggleForm( true, params );
 		},
 
 		/**
 		 * Collapse the menu item form control.
+		 *
+		 * @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() {
+		collapseForm: function( params ) {
-			this.toggleForm( false );
+			this.toggleForm( false, params );
 		},
 
 		/**
 		 * Expand or collapse the menu item control.
 		 *
-		 * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
+		 * @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 ) {
+		toggleForm: function( showOrHide, params ) {
 			var self = this, $menuitem, $inside, complete;
 
 			$menuitem = this.container;
@@ -1391,6 +1405,9 @@
 
 			// Already expanded or collapsed.
 			if ( $inside.is( ':visible' ) === showOrHide ) {
+				if ( params && params.completeCallback ) {
+					params.completeCallback();
+				}
 				return;
 			}
 
@@ -1407,6 +1424,10 @@
 						.removeClass( 'menu-item-edit-inactive' )
 						.addClass( 'menu-item-edit-active' );
 					self.container.trigger( 'expanded' );
+
+					if ( params && params.completeCallback ) {
+						params.completeCallback();
+					}
 				};
 
 				$menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
@@ -1419,6 +1440,10 @@
 						.addClass( 'menu-item-edit-inactive' )
 						.removeClass( 'menu-item-edit-active' );
 					self.container.trigger( 'collapsed' );
+
+					if ( params && params.completeCallback ) {
+						params.completeCallback();
+					}
 				};
 
 				self.container.trigger( 'collapse' );
@@ -1431,14 +1456,31 @@
 		/**
 		 * Expand the containing menu section, expand the form, and focus on
 		 * the first input in the control.
+		 *
+		 * @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() {
+		focus: function( params ) {
-			var control = this, focusable;
+			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
+			params.completeCallback = function() {
-			focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
+				var focusable;
-			focusable.first().focus();
+
+				// 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 );
 		},
 
 		/**
@@ -2445,6 +2487,9 @@
 		api.previewer.bind( 'refresh', function() {
 			api.previewer.refresh();
 		});
+
+		// Open and focus menu control.
+		api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
 	} );
 
 	/**

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

@@ -946,6 +946,9 @@ final class WP_Customize_Nav_Menus {
 			),
 			'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.' ),
+			),
 		);
 
 		printf( '<script>var _wpCustomizePreviewNavMenusExports = %s;</script>', wp_json_encode( $exports ) );

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

@@ -19,7 +19,8 @@
 				active: false,
 				stylesheet: ''
 			},
-			navMenuInstanceArgs: {}
+			navMenuInstanceArgs: {},
+			l10n: {}
 		};
 
 	api.MenusCustomizerPreview = {
@@ -63,6 +64,8 @@
 					}
 				}
 			} );
+
+			self.highlightControls();
 		},
 
 		/**
@@ -272,6 +275,36 @@
 				}, this ),
 				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 );
 		}
 	};
 

wp-includes/js/customize-preview-nav-menus.min.js

@@ -1 +1 @@
-!function(a,b,c){"use strict";if(c&&c.customize){var d=c.customize,e={},f=200,g={},h={renderQueryVar:null,renderNonceValue:null,renderNoncePostKey:null,previewCustomizeNonce:null,requestUri:"/",theme:{active:!1,stylesheet:""},navMenuInstanceArgs:{}};d.MenusCustomizerPreview={init:function(){var a=this,c={};g=b.extend({},h),"undefined"!=typeof _wpCustomizePreviewNavMenusExports&&b.extend(g,_wpCustomizePreviewNavMenusExports),d.each(function(b,d){b.id=d,c[b.id]=!0,a.bindListener(b)}),d.preview.bind("setting",function(b){var e,f,g;b=b.slice(),e=b.shift(),f=b.shift(),g=d(e),g||(g=d.create(e,f)),g.id||(g.id=e),c[g.id]||(c[g.id]=!0,a.bindListener(g)&&g.callbacks.fireWith(g,[g(),null]))})},bindListener:function(a){var c,d;return(c=a.id.match(/^nav_menu\[(-?\d+)]$/))?(a.navMenuId=parseInt(c[1],10),a.bind(this.onChangeNavMenuSetting),!0):(c=a.id.match(/^nav_menu_item\[(-?\d+)]$/))?(a.navMenuItemId=parseInt(c[1],10),a.bind(this.onChangeNavMenuItemSetting),!0):(c=a.id.match(/^nav_menu_locations\[(.+?)]/),c?(d=c[1],a.bind(b.bind(function(){this.refreshMenuLocation(d)},this)),!0):!1)},onChangeNavMenuSetting:function(){var a=this;if(!a.navMenuId)throw new Error("Expected navMenuId property to be set.");d.MenusCustomizerPreview.refreshMenu(a.navMenuId)},onChangeNavMenuItemSetting:function(a,b){!b||!b.nav_menu_term_id||a&&b.nav_menu_term_id===a.nav_menu_term_id||d.MenusCustomizerPreview.refreshMenu(b.nav_menu_term_id),a&&a.nav_menu_term_id&&d.MenusCustomizerPreview.refreshMenu(a.nav_menu_term_id)},refreshMenu:function(a){var c=[];d.each(function(b,d){var e=d.match(/^nav_menu_locations\[(.+?)]/);e&&a===b()&&c.push(e[1])}),b.each(g.navMenuInstanceArgs,function(d,e){(a===d.menu||-1!==b.indexOf(c,d.theme_location))&&this.refreshMenuInstanceDebounced(e)},this)},refreshMenuLocation:function(a){var c=!1;b.each(g.navMenuInstanceArgs,function(b,d){a===b.theme_location&&(this.refreshMenuInstanceDebounced(d),c=!0)},this),c||d.preview.send("refresh")},refreshMenuInstance:function(e){var f,h,i,j,k,l,m,n;if(!g.navMenuInstanceArgs[e])throw new Error("unknown_instance_number");return m=g.navMenuInstanceArgs[e],n="partial-refreshable-nav-menu-"+String(e),j=a("."+n),b.isNumber(m.menu)?h=m.menu:m.theme_location&&d.has("nav_menu_locations["+m.theme_location+"]")&&(h=d("nav_menu_locations["+m.theme_location+"]").get()),h&&m.can_partial_refresh&&0!==j.length?(h=parseInt(h,10),f={nonce:g.previewCustomizeNonce,wp_customize:"on"},g.theme.active||(f.theme=g.theme.stylesheet),f[g.renderQueryVar]="1",i={},d.each(function(a,b){var c=a.get(),d=!1;d=d||/^nav_menu_locations\[/.test(b),d=d||b==="nav_menu["+String(h)+"]",d=d||/^nav_menu_item\[/.test(b)&&(!1===c||h===c.nav_menu_term_id),d&&(i[b]=c)}),f.customized=JSON.stringify(i),f[g.renderNoncePostKey]=g.renderNonceValue,l=a.extend({},m),f.wp_nav_menu_args_hash=l.args_hash,delete l.args_hash,f.wp_nav_menu_args=JSON.stringify(l),j.addClass("customize-partial-refreshing"),k=c.ajax.send(null,{data:f,url:g.requestUri}),void k.done(function(b){if(!1===b)return void d.preview.send("refresh");var c,f=j;j=a(b),j.addClass(n),j.addClass("partial-refreshable-nav-menu customize-partial-refreshing"),f.replaceWith(j),c={instanceNumber:e,wpNavArgs:l,wpNavMenuArgs:l,oldContainer:f,newContainer:j},j.removeClass("customize-partial-refreshing"),a(document).trigger("customize-preview-menu-refreshed",[c])})):void d.preview.send("refresh")},refreshMenuInstanceDebounced:function(a){e[a]&&clearTimeout(e[a]),e[a]=setTimeout(b.bind(function(){this.refreshMenuInstance(a)},this),f)}},d.bind("preview-ready",function(){d.preview.bind("active",function(){d.MenusCustomizerPreview.init()})})}}(jQuery,_,wp);
+!function(a,b,c){"use strict";if(c&&c.customize){var d=c.customize,e={},f=200,g={},h={renderQueryVar:null,renderNonceValue:null,renderNoncePostKey:null,previewCustomizeNonce:null,requestUri:"/",theme:{active:!1,stylesheet:""},navMenuInstanceArgs:{},l10n:{}};d.MenusCustomizerPreview={init:function(){var a=this,c={};g=b.extend({},h),"undefined"!=typeof _wpCustomizePreviewNavMenusExports&&b.extend(g,_wpCustomizePreviewNavMenusExports),d.each(function(b,d){b.id=d,c[b.id]=!0,a.bindListener(b)}),d.preview.bind("setting",function(b){var e,f,g;b=b.slice(),e=b.shift(),f=b.shift(),g=d(e),g||(g=d.create(e,f)),g.id||(g.id=e),c[g.id]||(c[g.id]=!0,a.bindListener(g)&&g.callbacks.fireWith(g,[g(),null]))}),a.highlightControls()},bindListener:function(a){var c,d;return(c=a.id.match(/^nav_menu\[(-?\d+)]$/))?(a.navMenuId=parseInt(c[1],10),a.bind(this.onChangeNavMenuSetting),!0):(c=a.id.match(/^nav_menu_item\[(-?\d+)]$/))?(a.navMenuItemId=parseInt(c[1],10),a.bind(this.onChangeNavMenuItemSetting),!0):(c=a.id.match(/^nav_menu_locations\[(.+?)]/),c?(d=c[1],a.bind(b.bind(function(){this.refreshMenuLocation(d)},this)),!0):!1)},onChangeNavMenuSetting:function(){var a=this;if(!a.navMenuId)throw new Error("Expected navMenuId property to be set.");d.MenusCustomizerPreview.refreshMenu(a.navMenuId)},onChangeNavMenuItemSetting:function(a,b){!b||!b.nav_menu_term_id||a&&b.nav_menu_term_id===a.nav_menu_term_id||d.MenusCustomizerPreview.refreshMenu(b.nav_menu_term_id),a&&a.nav_menu_term_id&&d.MenusCustomizerPreview.refreshMenu(a.nav_menu_term_id)},refreshMenu:function(a){var c=[];d.each(function(b,d){var e=d.match(/^nav_menu_locations\[(.+?)]/);e&&a===b()&&c.push(e[1])}),b.each(g.navMenuInstanceArgs,function(d,e){(a===d.menu||-1!==b.indexOf(c,d.theme_location))&&this.refreshMenuInstanceDebounced(e)},this)},refreshMenuLocation:function(a){var c=!1;b.each(g.navMenuInstanceArgs,function(b,d){a===b.theme_location&&(this.refreshMenuInstanceDebounced(d),c=!0)},this),c||d.preview.send("refresh")},refreshMenuInstance:function(e){var f,h,i,j,k,l,m,n;if(!g.navMenuInstanceArgs[e])throw new Error("unknown_instance_number");return m=g.navMenuInstanceArgs[e],n="partial-refreshable-nav-menu-"+String(e),j=a("."+n),b.isNumber(m.menu)?h=m.menu:m.theme_location&&d.has("nav_menu_locations["+m.theme_location+"]")&&(h=d("nav_menu_locations["+m.theme_location+"]").get()),h&&m.can_partial_refresh&&0!==j.length?(h=parseInt(h,10),f={nonce:g.previewCustomizeNonce,wp_customize:"on"},g.theme.active||(f.theme=g.theme.stylesheet),f[g.renderQueryVar]="1",i={},d.each(function(a,b){var c=a.get(),d=!1;d=d||/^nav_menu_locations\[/.test(b),d=d||b==="nav_menu["+String(h)+"]",d=d||/^nav_menu_item\[/.test(b)&&(!1===c||h===c.nav_menu_term_id),d&&(i[b]=c)}),f.customized=JSON.stringify(i),f[g.renderNoncePostKey]=g.renderNonceValue,l=a.extend({},m),f.wp_nav_menu_args_hash=l.args_hash,delete l.args_hash,f.wp_nav_menu_args=JSON.stringify(l),j.addClass("customize-partial-refreshing"),k=c.ajax.send(null,{data:f,url:g.requestUri}),void k.done(function(b){if(!1===b)return void d.preview.send("refresh");var c,f=j;j=a(b),j.addClass(n),j.addClass("partial-refreshable-nav-menu customize-partial-refreshing"),f.replaceWith(j),c={instanceNumber:e,wpNavArgs:l,wpNavMenuArgs:l,oldContainer:f,newContainer:j},j.removeClass("customize-partial-refreshing"),a(document).trigger("customize-preview-menu-refreshed",[c])})):void d.preview.send("refresh")},refreshMenuInstanceDebounced:function(a){e[a]&&clearTimeout(e[a]),e[a]=setTimeout(b.bind(function(){this.refreshMenuInstance(a)},this),f)},highlightControls:function(){var b,c=".menu-item[id^=menu-item-]";a(document).on("click",c,function(b){var c;b.shiftKey&&(c=a(this).attr("id").match(/^menu-item-(\d+)$/),c&&(b.preventDefault(),b.stopPropagation(),d.preview.send("focus-nav-menu-item-control",parseInt(c[1],10))))}),b=function(a,b){b.newContainer.find(c).attr("title",g.l10n.editNavMenuItemTooltip)},b(null,{newContainer:a(document.body)}),a(document).on("customize-preview-menu-refreshed",b)}},d.bind("preview-ready",function(){d.preview.bind("active",function(){d.MenusCustomizerPreview.init()})})}}(jQuery,_,wp);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.5-alpha-36382';
+$wp_version = '4.5-alpha-36383';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.