WordPress.org

Make WordPress Core

Changeset 27892


Ignore:
Timestamp:
04/01/2014 03:25:56 PM (4 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:
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.