|
1 (function( wp, $ ){ |
|
2 |
|
3 if ( ! wp || ! wp.customize ) { return; } |
|
4 |
|
5 var api = wp.customize, |
|
6 OldPreview; |
|
7 |
|
8 /** |
|
9 * wp.customize.WidgetCustomizerPreview |
|
10 * |
|
11 */ |
|
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 |
|
17 widgetSelectors: [], |
|
18 preview: null, |
|
19 l10n: {}, |
|
20 |
|
21 init: function () { |
|
22 var self = this; |
|
23 this.buildWidgetSelectors(); |
|
24 this.highlightControls(); |
|
25 |
|
26 this.preview.bind( 'highlight-widget', self.highlightWidget ); |
|
27 }, |
|
28 |
|
29 /** |
|
30 * Calculate the selector for the sidebar's widgets based on the registered sidebar's info |
|
31 */ |
|
32 buildWidgetSelectors: function () { |
|
33 var self = this; |
|
34 |
|
35 $.each( this.registeredSidebars, function ( i, sidebar ) { |
|
36 var widgetTpl = [ |
|
37 sidebar.before_widget.replace('%1$s', '').replace('%2$s', ''), |
|
38 sidebar.before_title, |
|
39 sidebar.after_title, |
|
40 sidebar.after_widget |
|
41 ].join(''), |
|
42 emptyWidget, |
|
43 widgetSelector, |
|
44 widgetClasses; |
|
45 |
|
46 emptyWidget = $(widgetTpl); |
|
47 widgetSelector = emptyWidget.prop('tagName'); |
|
48 widgetClasses = emptyWidget.prop('className'); |
|
49 |
|
50 // Prevent a rare case when before_widget, before_title, after_title and after_widget is empty. |
|
51 if ( ! widgetClasses ) { |
|
52 return; |
|
53 } |
|
54 |
|
55 widgetClasses = widgetClasses.replace(/^\s+|\s+$/g, ''); |
|
56 |
|
57 if ( widgetClasses ) { |
|
58 widgetSelector += '.' + widgetClasses.split(/\s+/).join('.'); |
|
59 } |
|
60 self.widgetSelectors.push(widgetSelector); |
|
61 }); |
|
62 }, |
|
63 |
|
64 /** |
|
65 * Highlight the widget on widget updates or widget control mouse overs. |
|
66 * |
|
67 * @param {string} widgetId ID of the widget. |
|
68 */ |
|
69 highlightWidget: function( widgetId ) { |
|
70 var $body = $( document.body ), |
|
71 $widget = $( '#' + widgetId ); |
|
72 |
|
73 $body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' ); |
|
74 |
|
75 $widget.addClass( 'widget-customizer-highlighted-widget' ); |
|
76 setTimeout( function () { |
|
77 $widget.removeClass( 'widget-customizer-highlighted-widget' ); |
|
78 }, 500 ); |
|
79 }, |
|
80 |
|
81 /** |
|
82 * Show a title and highlight widgets on hover. On shift+clicking |
|
83 * focus the widget control. |
|
84 */ |
|
85 highlightControls: function() { |
|
86 var self = this, |
|
87 selector = this.widgetSelectors.join(','); |
|
88 |
|
89 $(selector).attr( 'title', this.l10n.widgetTooltip ); |
|
90 |
|
91 $(document).on( 'mouseenter', selector, function () { |
|
92 self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) ); |
|
93 }); |
|
94 |
|
95 // Open expand the widget control when shift+clicking the widget element |
|
96 $(document).on( 'click', selector, function ( e ) { |
|
97 if ( ! e.shiftKey ) { |
|
98 return; |
|
99 } |
|
100 e.preventDefault(); |
|
101 |
|
102 self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) ); |
|
103 }); |
|
104 } |
|
105 }; |
|
106 |
|
107 /** |
|
108 * Capture the instance of the Preview since it is private |
|
109 */ |
|
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 ); |
|
115 } |
|
116 } ); |
|
117 |
|
118 $(function () { |
|
119 var settings = window._wpWidgetCustomizerPreviewSettings; |
|
120 if ( ! settings ) { |
|
121 return; |
|
122 } |
|
123 |
|
124 $.extend( api.WidgetCustomizerPreview, settings ); |
|
125 |
|
126 api.WidgetCustomizerPreview.init(); |
|
127 }); |
|
128 |
|
129 })( window.wp, jQuery ); |