WordPress.org

Make WordPress Core

Changeset 27892


Ignore:
Timestamp:
04/01/14 15:25:56 (15 months ago)
Author:
ocean90
Message:

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

fixes #27622.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-widgets.js

    r27891 r27892  
    141141    self.init = function () { 
    142142        this.availableWidgetsPanel.setup(); 
     143 
     144        // Highlight widget control 
     145        this.previewer.bind( 'highlight-widget-control', self.highlightWidgetFormControl ); 
     146 
     147        // Open and focus widget control 
     148        this.previewer.bind( 'focus-widget-control', self.focusWidgetFormControl ); 
    143149    }; 
    144150    wp.customize.bind( 'ready', function () { 
     
    925931            // Highlight whenever hovering or clicking over the form 
    926932            control.container.on( 'mouseenter click', function () { 
    927                 control.highlightPreviewWidget(); 
     933                control.setting.previewer.send( 'highlight-widget', control.params.widget_id ); 
     934                //control.highlightPreviewWidget(); 
    928935            } ); 
    929936 
    930937            // Highlight when the setting is updated 
    931938            control.setting.bind( function () { 
    932                 control.scrollPreviewWidgetIntoView(); 
    933                 control.highlightPreviewWidget(); 
     939                control.setting.previewer.send( 'highlight-widget', control.params.widget_id ); 
     940                //control.highlightPreviewWidget(); 
    934941            } ); 
    935942 
     
    14831490 
    14841491        /** 
    1485          * Inverse of WidgetCustomizer.getControlInstanceForWidget 
    1486          * @return {jQuery} 
    1487          */ 
    1488         getPreviewWidgetElement: function () { 
    1489             var control = this, 
    1490                 widget_customizer_preview = self.getPreviewWindow().wp.customize.WidgetCustomizerPreview; 
    1491             return widget_customizer_preview.getWidgetElement( control.params.widget_id ); 
    1492         }, 
    1493  
    1494         /** 
    14951492         * Inside of the customizer preview, scroll the widget into view 
    14961493         */ 
     
    15151512            setTimeout( function () { 
    15161513                target_element.removeClass( 'widget-customizer-highlighted' ); 
    1517             }, 500 ); 
    1518         }, 
    1519  
    1520         /** 
    1521          * Add the widget-customizer-highlighted-widget class to the widget for 500ms 
    1522          */ 
    1523         highlightPreviewWidget: function () { 
    1524             var control = this, widget_el, root_el; 
    1525  
    1526             widget_el = control.getPreviewWidgetElement(); 
    1527             root_el = widget_el.closest( 'html' ); 
    1528             root_el.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' ); 
    1529             widget_el.addClass( 'widget-customizer-highlighted-widget' ); 
    1530             setTimeout( function () { 
    1531                 widget_el.removeClass( 'widget-customizer-highlighted-widget' ); 
    15321514            }, 500 ); 
    15331515        } 
     
    15461528        } 
    15471529    } ); 
     1530 
     1531    /** 
     1532     * Highlight a widget control. 
     1533     * 
     1534     * @param {string} widgetId 
     1535     */ 
     1536    self.highlightWidgetFormControl = function( widgetId ) { 
     1537        var control = self.getWidgetFormControlForWidget( widgetId ); 
     1538 
     1539        if ( control ) { 
     1540            control.highlightSectionAndControl(); 
     1541        } 
     1542    }, 
     1543 
     1544    /** 
     1545     * Focus a widget control. 
     1546     * 
     1547     * @param {string} widgetId 
     1548     */ 
     1549    self.focusWidgetFormControl = function( widgetId ) { 
     1550        var control = self.getWidgetFormControlForWidget( widgetId ); 
     1551 
     1552        if ( control ) { 
     1553            control.focus(); 
     1554        } 
     1555    }, 
    15481556 
    15491557    /** 
  • trunk/src/wp-includes/js/customize-preview-widgets.js

    r27653 r27892  
    2828                self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs 
    2929            } ); 
     30 
     31            this.preview.bind( 'highlight-widget', self.highlightWidget ); 
    3032        }, 
    3133 
     
    5961 
    6062        /** 
    61          * Obtain a rendered widget element. Assumes standard practice of using 
    62          * the widget ID as the ID for the DOM element. To eliminate this 
    63          * assumption, additional data-* attributes would need to be injected 
    64          * onto the rendered widget root element. 
     63         * Highlight the widget on widget updates or widget control mouse overs. 
    6564         * 
    66          * @param {String} widget_id 
    67          * @return {jQuery} 
     65         * @param  {string} widgetId ID of the widget. 
    6866         */ 
    69         getWidgetElement: function ( widget_id ) { 
    70             return $( '#' + widget_id ); 
     67        highlightWidget: function( widgetId ) { 
     68            var $body = $( document.body ), 
     69                $widget = $( '#' + widgetId ); 
     70 
     71            $body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' ); 
     72 
     73            $widget.addClass( 'widget-customizer-highlighted-widget' ); 
     74            setTimeout( function () { 
     75                $widget.removeClass( 'widget-customizer-highlighted-widget' ); 
     76            }, 500 ); 
    7177        }, 
    7278 
    7379        /** 
    74          * 
     80         * Show a title and highlight widgets on hover. On shift+clicking 
     81         * focus the widget control. 
    7582         */ 
    7683        highlightControls: function() { 
    77             var selector = this.widgetSelectors.join(','); 
     84            var self = this, 
     85                selector = this.widgetSelectors.join(','); 
    7886 
    7987            $(selector).attr( 'title', this.l10n.widgetTooltip ); 
    8088 
    8189            $(document).on( 'mouseenter', selector, function () { 
    82                 var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') ); 
    83                 if ( control ) { 
    84                     control.highlightSectionAndControl(); 
    85                 } 
     90                self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) ); 
    8691            }); 
    8792 
     
    9297                } 
    9398                e.preventDefault(); 
    94                 var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') ); 
    95                 if ( control ) { 
    96                     control.focus(); 
    97                 } 
     99 
     100                self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) ); 
    98101            }); 
    99102        } 
Note: See TracChangeset for help on using the changeset viewer.