3 if ( ! wp || ! wp.customize ) { return; }
5 var api = wp.customize,
9 * wp.customize.WidgetCustomizerPreview
12 api.WidgetCustomizerPreview = {
13 renderedSidebars: {}, // @todo Make rendered a property of the Backbone model
14 renderedWidgets: {}, // @todo Make rendered a property of the Backbone model
15 registeredSidebars: [], // @todo Make a Backbone collection
16 registeredWidgets: {}, // @todo Make array, Backbone collection
23 this.buildWidgetSelectors();
24 this.highlightControls();
26 this.preview.bind( 'active', function() {
27 self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
28 self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
31 this.preview.bind( 'highlight-widget', self.highlightWidget );
35 * Calculate the selector for the sidebar's widgets based on the registered sidebar's info
37 buildWidgetSelectors: function () {
40 $.each( this.registeredSidebars, function ( i, sidebar ) {
42 sidebar.before_widget.replace('%1$s', '').replace('%2$s', ''),
51 emptyWidget = $(widgetTpl);
52 widgetSelector = emptyWidget.prop('tagName');
53 widgetClasses = emptyWidget.prop('className');
55 // Prevent a rare case when before_widget, before_title, after_title and after_widget is empty.
56 if ( ! widgetClasses ) {
60 widgetClasses = widgetClasses.replace(/^\s+|\s+$/g, '');
62 if ( widgetClasses ) {
63 widgetSelector += '.' + widgetClasses.split(/\s+/).join('.');
65 self.widgetSelectors.push(widgetSelector);
70 * Highlight the widget on widget updates or widget control mouse overs.
72 * @param {string} widgetId ID of the widget.
74 highlightWidget: function( widgetId ) {
75 var $body = $( document.body ),
76 $widget = $( '#' + widgetId );
78 $body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
80 $widget.addClass( 'widget-customizer-highlighted-widget' );
81 setTimeout( function () {
82 $widget.removeClass( 'widget-customizer-highlighted-widget' );
87 * Show a title and highlight widgets on hover. On shift+clicking
88 * focus the widget control.
90 highlightControls: function() {
92 selector = this.widgetSelectors.join(',');
94 $(selector).attr( 'title', this.l10n.widgetTooltip );
96 $(document).on( 'mouseenter', selector, function () {
97 self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
100 // Open expand the widget control when shift+clicking the widget element
101 $(document).on( 'click', selector, function ( e ) {
102 if ( ! e.shiftKey ) {
107 self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
113 * Capture the instance of the Preview since it is private
115 OldPreview = api.Preview;
116 api.Preview = OldPreview.extend( {
117 initialize: function( params, options ) {
118 api.WidgetCustomizerPreview.preview = this;
119 OldPreview.prototype.initialize.call( this, params, options );
124 var settings = window._wpWidgetCustomizerPreviewSettings;
129 $.extend( api.WidgetCustomizerPreview, settings );
131 api.WidgetCustomizerPreview.init();
134 })( window.wp, jQuery );