Widget Customizer: Use postMessage to highlight widgets in preview or sections/controls in Customizer.

fixes #27622.
Built from https://develop.svn.wordpress.org/trunk@27892


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

wp-admin/js/customize-widgets.js

@@ -140,6 +140,12 @@ var WidgetCustomizer = ( function ($) {
 	 */
 	self.init = function () {
 		this.availableWidgetsPanel.setup();
+
+		// Highlight widget control
+		this.previewer.bind( 'highlight-widget-control', self.highlightWidgetFormControl );
+
+		// Open and focus widget control
+		this.previewer.bind( 'focus-widget-control', self.focusWidgetFormControl );
 	};
 	wp.customize.bind( 'ready', function () {
 		self.init();
@@ -924,13 +930,14 @@ var WidgetCustomizer = ( function ($) {
 
 			// Highlight whenever hovering or clicking over the form
 			control.container.on( 'mouseenter click', function () {
-				control.highlightPreviewWidget();
+				control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
+				//control.highlightPreviewWidget();
 			} );
 
 			// Highlight when the setting is updated
 			control.setting.bind( function () {
-				control.scrollPreviewWidgetIntoView();
+				control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
-				control.highlightPreviewWidget();
+				//control.highlightPreviewWidget();
 			} );
 
 			// Highlight when the widget form is expanded
@@ -1481,16 +1488,6 @@ var WidgetCustomizer = ( function ($) {
 			move_widget_area.toggleClass( 'active', toggle );
 		},
 
-		/**
-		 * Inverse of WidgetCustomizer.getControlInstanceForWidget
-		 * @return {jQuery}
-		 */
-		getPreviewWidgetElement: function () {
-			var control = this,
-				widget_customizer_preview = self.getPreviewWindow().wp.customize.WidgetCustomizerPreview;
-			return widget_customizer_preview.getWidgetElement( control.params.widget_id );
-		},
-
 		/**
 		 * Inside of the customizer preview, scroll the widget into view
 		 */
@@ -1515,21 +1512,6 @@ var WidgetCustomizer = ( function ($) {
 			setTimeout( function () {
 				target_element.removeClass( 'widget-customizer-highlighted' );
 			}, 500 );
-		},
-
-		/**
-		 * Add the widget-customizer-highlighted-widget class to the widget for 500ms
-		 */
-		highlightPreviewWidget: function () {
-			var control = this, widget_el, root_el;
-
-			widget_el = control.getPreviewWidgetElement();
-			root_el = widget_el.closest( 'html' );
-			root_el.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
-			widget_el.addClass( 'widget-customizer-highlighted-widget' );
-			setTimeout( function () {
-				widget_el.removeClass( 'widget-customizer-highlighted-widget' );
-			}, 500 );
 		}
 
 	} );
@@ -1546,6 +1528,32 @@ var WidgetCustomizer = ( function ($) {
 		}
 	} );
 
+	/**
+	 * Highlight a widget control.
+	 *
+	 * @param {string} widgetId
+	 */
+	self.highlightWidgetFormControl = function( widgetId ) {
+		var control = self.getWidgetFormControlForWidget( widgetId );
+
+		if ( control ) {
+			control.highlightSectionAndControl();
+		}
+	},
+
+	/**
+	 * Focus a widget control.
+	 *
+	 * @param {string} widgetId
+	 */
+	self.focusWidgetFormControl = function( widgetId ) {
+		var control = self.getWidgetFormControlForWidget( widgetId );
+
+		if ( control ) {
+			control.focus();
+		}
+	},
+
 	/**
 	 * Given a widget control, find the sidebar widgets control that contains it.
 	 * @param {string} widget_id

wp-includes/js/customize-preview-widgets.js

@@ -27,6 +27,8 @@
 				self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
 				self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
 			} );
+
+			this.preview.bind( 'highlight-widget', self.highlightWidget );
 		},
 
 		/**
@@ -58,31 +60,34 @@
 		},
 
 		/**
-		 * Obtain a rendered widget element. Assumes standard practice of using
+		 * Highlight the widget on widget updates or widget control mouse overs.
-		 * the widget ID as the ID for the DOM element. To eliminate this
-		 * assumption, additional data-* attributes would need to be injected
-		 * onto the rendered widget root element.
 		 *
-		 * @param {String} widget_id
+		 * @param  {string} widgetId ID of the widget.
-		 * @return {jQuery}
 		 */
-		getWidgetElement: function ( widget_id ) {
+		highlightWidget: function( widgetId ) {
-			return $( '#' + widget_id );
+			var $body = $( document.body ),
+				$widget = $( '#' + widgetId );
+
+			$body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
+
+			$widget.addClass( 'widget-customizer-highlighted-widget' );
+			setTimeout( function () {
+				$widget.removeClass( 'widget-customizer-highlighted-widget' );
+			}, 500 );
 		},
 
 		/**
-		 *
+		 * Show a title and highlight widgets on hover. On shift+clicking
+		 * focus the widget control.
 		 */
 		highlightControls: function() {
-			var selector = this.widgetSelectors.join(',');
+			var self = this,
+				selector = this.widgetSelectors.join(',');
 
 			$(selector).attr( 'title', this.l10n.widgetTooltip );
 
 			$(document).on( 'mouseenter', selector, function () {
-				var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') );
+				self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
-				if ( control ) {
-					control.highlightSectionAndControl();
-				}
 			});
 
 			// Open expand the widget control when shift+clicking the widget element
@@ -91,10 +96,8 @@
 					return;
 				}
 				e.preventDefault();
-				var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') );
+
-				if ( control ) {
+				self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
-					control.focus();
-				}
 			});
 		}
 	};

wp-includes/js/customize-preview-widgets.min.js

@@ -1 +1 @@
-!function(a,b){if(b&&b.customize){var c,d=b.customize;d.WidgetCustomizerPreview={renderedSidebars:{},renderedWidgets:{},registeredSidebars:[],registeredWidgets:{},widgetSelectors:[],preview:null,l10n:{},init:function(){var a=this;this.buildWidgetSelectors(),this.highlightControls(),this.preview.bind("active",function(){a.preview.send("rendered-sidebars",a.renderedSidebars),a.preview.send("rendered-widgets",a.renderedWidgets)})},buildWidgetSelectors:function(){var b=this;a.each(this.registeredSidebars,function(c,d){var e,f,g,h=[d.before_widget.replace("%1$s","").replace("%2$s",""),d.before_title,d.after_title,d.after_widget].join("");e=a(h),f=e.prop("tagName"),g=e.prop("className").replace(/^\s+|\s+$/g,""),g&&(f+="."+g.split(/\s+/).join(".")),b.widgetSelectors.push(f)})},getWidgetElement:function(b){return a("#"+b)},highlightControls:function(){var b=this.widgetSelectors.join(",");a(b).attr("title",this.l10n.widgetTooltip),a(document).on("mouseenter",b,function(){var b=parent.WidgetCustomizer.getWidgetFormControlForWidget(a(this).prop("id"));b&&b.highlightSectionAndControl()}),a(document).on("click",b,function(b){if(b.shiftKey){b.preventDefault();var c=parent.WidgetCustomizer.getWidgetFormControlForWidget(a(this).prop("id"));c&&c.focus()}})}},c=d.Preview,d.Preview=c.extend({initialize:function(a,b){d.WidgetCustomizerPreview.preview=this,c.prototype.initialize.call(this,a,b)}}),a(function(){var b=window._wpWidgetCustomizerPreviewSettings;b&&(a.extend(d.WidgetCustomizerPreview,b),d.WidgetCustomizerPreview.init())})}}(jQuery,window.wp);
+!function(a,b){if(b&&b.customize){var c,d=b.customize;d.WidgetCustomizerPreview={renderedSidebars:{},renderedWidgets:{},registeredSidebars:[],registeredWidgets:{},widgetSelectors:[],preview:null,l10n:{},init:function(){var a=this;this.buildWidgetSelectors(),this.highlightControls(),this.preview.bind("active",function(){a.preview.send("rendered-sidebars",a.renderedSidebars),a.preview.send("rendered-widgets",a.renderedWidgets)}),this.preview.bind("highlight-widget",a.highlightWidget)},buildWidgetSelectors:function(){var b=this;a.each(this.registeredSidebars,function(c,d){var e,f,g,h=[d.before_widget.replace("%1$s","").replace("%2$s",""),d.before_title,d.after_title,d.after_widget].join("");e=a(h),f=e.prop("tagName"),g=e.prop("className").replace(/^\s+|\s+$/g,""),g&&(f+="."+g.split(/\s+/).join(".")),b.widgetSelectors.push(f)})},highlightWidget:function(b){var c=a(document.body),d=a("#"+b);c.find(".widget-customizer-highlighted-widget").removeClass("widget-customizer-highlighted-widget"),d.addClass("widget-customizer-highlighted-widget"),setTimeout(function(){d.removeClass("widget-customizer-highlighted-widget")},500)},highlightControls:function(){var b=this,c=this.widgetSelectors.join(",");a(c).attr("title",this.l10n.widgetTooltip),a(document).on("mouseenter",c,function(){b.preview.send("highlight-widget-control",a(this).prop("id"))}),a(document).on("click",c,function(c){c.shiftKey&&(c.preventDefault(),b.preview.send("focus-widget-control",a(this).prop("id")))})}},c=d.Preview,d.Preview=c.extend({initialize:function(a,b){d.WidgetCustomizerPreview.preview=this,c.prototype.initialize.call(this,a,b)}}),a(function(){var b=window._wpWidgetCustomizerPreviewSettings;b&&(a.extend(d.WidgetCustomizerPreview,b),d.WidgetCustomizerPreview.init())})}}(jQuery,window.wp);