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( 'highlight-widget', self.highlightWidget );
30 * Calculate the selector for the sidebar's widgets based on the registered sidebar's info
32 buildWidgetSelectors: function () {
35 $.each( this.registeredSidebars, function ( i, sidebar ) {
37 sidebar.before_widget.replace('%1$s', '').replace('%2$s', ''),
46 emptyWidget = $(widgetTpl);
47 widgetSelector = emptyWidget.prop('tagName');
48 widgetClasses = emptyWidget.prop('className');
50 // Prevent a rare case when before_widget, before_title, after_title and after_widget is empty.
51 if ( ! widgetClasses ) {
55 widgetClasses = widgetClasses.replace(/^\s+|\s+$/g, '');
57 if ( widgetClasses ) {
58 widgetSelector += '.' + widgetClasses.split(/\s+/).join('.');
60 self.widgetSelectors.push(widgetSelector);
65 * Highlight the widget on widget updates or widget control mouse overs.
67 * @param {string} widgetId ID of the widget.
69 highlightWidget: function( widgetId ) {
70 var $body = $( document.body ),
71 $widget = $( '#' + widgetId );
73 $body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
75 $widget.addClass( 'widget-customizer-highlighted-widget' );
76 setTimeout( function () {
77 $widget.removeClass( 'widget-customizer-highlighted-widget' );
82 * Show a title and highlight widgets on hover. On shift+clicking
83 * focus the widget control.
85 highlightControls: function() {
87 selector = this.widgetSelectors.join(',');
89 $(selector).attr( 'title', this.l10n.widgetTooltip );
91 $(document).on( 'mouseenter', selector, function () {
92 self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
95 // Open expand the widget control when shift+clicking the widget element
96 $(document).on( 'click', selector, function ( e ) {
102 self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
108 * Capture the instance of the Preview since it is private
110 OldPreview = api.Preview;
111 api.Preview = OldPreview.extend( {
112 initialize: function( params, options ) {
113 api.WidgetCustomizerPreview.preview = this;
114 OldPreview.prototype.initialize.call( this, params, options );
119 var settings = window._wpWidgetCustomizerPreviewSettings;
124 $.extend( api.WidgetCustomizerPreview, settings );
126 api.WidgetCustomizerPreview.init();
129 })( window.wp, jQuery );