Changeset 27892

Timestamp:

04/01/2014 03:25:56 PM (12 years ago)

Author:

ocean90

Message:

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

fixes #27622.

Location:

trunk/src

Files:

• wp-admin/js/customize-widgets.js (modified) (5 diffs)
• wp-includes/js/customize-preview-widgets.js (modified) (3 diffs)

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

@@ -141 +141 @@
     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 () {
@@ -925 +931 @@
             // 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();
             } );
 
@@ -1483 +1490 @@
 
         /**
-         * 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 +1512 @@
             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 +1528 @@
         }
     } );
+
+    /**
+     * 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();
+        }
+    },
 
     /**

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

@@ -28 +28 @@
                 self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
             } );
+
+            this.preview.bind( 'highlight-widget', self.highlightWidget );
         },
 
@@ -59 +61 @@
 
         /**
-         * 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' ) );
             });
 
@@ -92 +97 @@
                 }
                 e.preventDefault();
-                var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') );
-                if ( control ) {
-                    control.focus();
-                }
+
+                self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
             });
         }