From 11f6751d511250715ad1c46a687c3477804edfff Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Tue, 1 Apr 2014 15:25:56 +0000 Subject: [PATCH] Widget Customizer: Use postMessage to highlight widgets in preview or sections/controls in Customizer. fixes #27622. git-svn-id: https://develop.svn.wordpress.org/trunk@27892 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/js/customize-widgets.js | 64 +++++++++++-------- .../js/customize-preview-widgets.js | 39 +++++------ 2 files changed, 57 insertions(+), 46 deletions(-) diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js index 86659dfdf2..b604f32cc6 100644 --- a/src/wp-admin/js/customize-widgets.js +++ b/src/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.highlightPreviewWidget(); + control.setting.previewer.send( 'highlight-widget', control.params.widget_id ); + //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 diff --git a/src/wp-includes/js/customize-preview-widgets.js b/src/wp-includes/js/customize-preview-widgets.js index 0706ef3e46..974a457d7b 100644 --- a/src/wp-includes/js/customize-preview-widgets.js +++ b/src/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 - * 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. + * Highlight the widget on widget updates or widget control mouse overs. * - * @param {String} widget_id - * @return {jQuery} + * @param {string} widgetId ID of the widget. */ - getWidgetElement: function ( widget_id ) { - return $( '#' + widget_id ); + highlightWidget: function( widgetId ) { + 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') ); - if ( control ) { - control.highlightSectionAndControl(); - } + self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) ); }); // 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 ) { - control.focus(); - } + + self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) ); }); } };