equal
deleted
inserted
replaced
14 * @param {jQuery} $ The jQuery object. |
14 * @param {jQuery} $ The jQuery object. |
15 * @param {Object} _ The utilities library. |
15 * @param {Object} _ The utilities library. |
16 * @param {Object} wp Current WordPress environment instance. |
16 * @param {Object} wp Current WordPress environment instance. |
17 * @param {Object} api Information from the API. |
17 * @param {Object} api Information from the API. |
18 * |
18 * |
19 * @returns {Object} Widget-related variables. |
19 * @return {Object} Widget-related variables. |
20 */ |
20 */ |
21 wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function( $, _, wp, api ) { |
21 wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function( $, _, wp, api ) { |
22 |
22 |
23 var self; |
23 var self; |
24 |
24 |
40 * |
40 * |
41 * @since 4.5.0 |
41 * @since 4.5.0 |
42 * |
42 * |
43 * @memberOf wp.customize.widgetsPreview |
43 * @memberOf wp.customize.widgetsPreview |
44 * |
44 * |
45 * @returns {void} |
45 * @return {void} |
46 */ |
46 */ |
47 self.init = function() { |
47 self.init = function() { |
48 var self = this; |
48 var self = this; |
49 |
49 |
50 self.preview = api.preview; |
50 self.preview = api.preview; |
122 /** |
122 /** |
123 * Refreshes the widget partial. |
123 * Refreshes the widget partial. |
124 * |
124 * |
125 * @since 4.5.0 |
125 * @since 4.5.0 |
126 * |
126 * |
127 * @returns {Promise|void} Either a promise postponing the refresh, or void. |
127 * @return {Promise|void} Either a promise postponing the refresh, or void. |
128 */ |
128 */ |
129 refresh: function() { |
129 refresh: function() { |
130 var partial = this, refreshDeferred; |
130 var partial = this, refreshDeferred; |
131 if ( ! self.selectiveRefreshableWidgets[ partial.widgetIdParts.idBase ] ) { |
131 if ( ! self.selectiveRefreshableWidgets[ partial.widgetIdParts.idBase ] ) { |
132 refreshDeferred = $.Deferred(); |
132 refreshDeferred = $.Deferred(); |
144 * |
144 * |
145 * @inheritDoc |
145 * @inheritDoc |
146 * @param {wp.customize.selectiveRefresh.Placement} placement The placement |
146 * @param {wp.customize.selectiveRefresh.Placement} placement The placement |
147 * function. |
147 * function. |
148 * |
148 * |
149 * @returns {void} |
149 * @return {void} |
150 */ |
150 */ |
151 renderContent: function( placement ) { |
151 renderContent: function( placement ) { |
152 var partial = this; |
152 var partial = this; |
153 if ( api.selectiveRefresh.Partial.prototype.renderContent.call( partial, placement ) ) { |
153 if ( api.selectiveRefresh.Partial.prototype.renderContent.call( partial, placement ) ) { |
154 api.preview.send( 'widget-updated', partial.widgetId ); |
154 api.preview.send( 'widget-updated', partial.widgetId ); |
203 /** |
203 /** |
204 * Sets up the partial. |
204 * Sets up the partial. |
205 * |
205 * |
206 * @since 4.5.0 |
206 * @since 4.5.0 |
207 * |
207 * |
208 * @returns {void} |
208 * @return {void} |
209 */ |
209 */ |
210 ready: function() { |
210 ready: function() { |
211 var sidebarPartial = this; |
211 var sidebarPartial = this; |
212 |
212 |
213 // Watch for changes to the sidebar_widgets setting. |
213 // Watch for changes to the sidebar_widgets setting. |
249 * |
249 * |
250 * Note that TreeWalker is not implemented in IE8. |
250 * Note that TreeWalker is not implemented in IE8. |
251 * |
251 * |
252 * @since 4.5.0 |
252 * @since 4.5.0 |
253 * |
253 * |
254 * @returns {Array.<{before: Comment, after: Comment, instanceNumber: number}>} |
254 * @return {Array.<{before: Comment, after: Comment, instanceNumber: number}>} |
255 * An array with an object for each sidebar instance, containing the |
255 * An array with an object for each sidebar instance, containing the |
256 * node before and after the sidebar instance and its instance number. |
256 * node before and after the sidebar instance and its instance number. |
257 */ |
257 */ |
258 findDynamicSidebarBoundaryNodes: function() { |
258 findDynamicSidebarBoundaryNodes: function() { |
259 var partial = this, regExp, boundaryNodes = {}, recursiveCommentTraversal; |
259 var partial = this, regExp, boundaryNodes = {}, recursiveCommentTraversal; |
260 regExp = /^(dynamic_sidebar_before|dynamic_sidebar_after):(.+):(\d+)$/; |
260 regExp = /^(dynamic_sidebar_before|dynamic_sidebar_after):(.+):(\d+)$/; |
261 recursiveCommentTraversal = function( childNodes ) { |
261 recursiveCommentTraversal = function( childNodes ) { |
291 /** |
291 /** |
292 * Gets the placements for this partial. |
292 * Gets the placements for this partial. |
293 * |
293 * |
294 * @since 4.5.0 |
294 * @since 4.5.0 |
295 * |
295 * |
296 * @returns {Array} An array containing placement objects for each of the |
296 * @return {Array} An array containing placement objects for each of the |
297 * dynamic sidebar boundary nodes. |
297 * dynamic sidebar boundary nodes. |
298 */ |
298 */ |
299 placements: function() { |
299 placements: function() { |
300 var partial = this; |
300 var partial = this; |
301 return _.map( partial.findDynamicSidebarBoundaryNodes(), function( boundaryNodes ) { |
301 return _.map( partial.findDynamicSidebarBoundaryNodes(), function( boundaryNodes ) { |
302 return new api.selectiveRefresh.Placement( { |
302 return new api.selectiveRefresh.Placement( { |
316 * |
316 * |
317 * @since 4.5.0 |
317 * @since 4.5.0 |
318 * |
318 * |
319 * @throws {Error} If there's no settingId. |
319 * @throws {Error} If there's no settingId. |
320 * @throws {Error} If the setting doesn't exist in the API. |
320 * @throws {Error} If the setting doesn't exist in the API. |
321 * @throws {Error} If the API doesn't pass an array of widget ids. |
321 * @throws {Error} If the API doesn't pass an array of widget IDs. |
322 * |
322 * |
323 * @returns {Array} A shallow copy of the array containing widget IDs. |
323 * @return {Array} A shallow copy of the array containing widget IDs. |
324 */ |
324 */ |
325 getWidgetIds: function() { |
325 getWidgetIds: function() { |
326 var sidebarPartial = this, settingId, widgetIds; |
326 var sidebarPartial = this, settingId, widgetIds; |
327 settingId = sidebarPartial.settings()[0]; |
327 settingId = sidebarPartial.settings()[0]; |
328 if ( ! settingId ) { |
328 if ( ! settingId ) { |
342 * Reflows widgets in the sidebar, ensuring they have the proper position in the |
342 * Reflows widgets in the sidebar, ensuring they have the proper position in the |
343 * DOM. |
343 * DOM. |
344 * |
344 * |
345 * @since 4.5.0 |
345 * @since 4.5.0 |
346 * |
346 * |
347 * @returns {Array.<wp.customize.selectiveRefresh.Placement>} List of placements |
347 * @return {Array.<wp.customize.selectiveRefresh.Placement>} List of placements |
348 * that were reflowed. |
348 * that were reflowed. |
349 */ |
349 */ |
350 reflowWidgets: function() { |
350 reflowWidgets: function() { |
351 var sidebarPartial = this, sidebarPlacements, widgetIds, widgetPartials, sortedSidebarContainers = []; |
351 var sidebarPartial = this, sidebarPlacements, widgetIds, widgetPartials, sortedSidebarContainers = []; |
352 widgetIds = sidebarPartial.getWidgetIds(); |
352 widgetIds = sidebarPartial.getWidgetIds(); |
353 sidebarPlacements = sidebarPartial.placements(); |
353 sidebarPlacements = sidebarPartial.placements(); |
410 * |
410 * |
411 * @since 4.5.0 |
411 * @since 4.5.0 |
412 * |
412 * |
413 * @param {string} widgetId The widget ID. |
413 * @param {string} widgetId The widget ID. |
414 * |
414 * |
415 * @returns {wp.customize.selectiveRefresh.Partial} The widget instance partial. |
415 * @return {wp.customize.selectiveRefresh.Partial} The widget instance partial. |
416 */ |
416 */ |
417 ensureWidgetPlacementContainers: function( widgetId ) { |
417 ensureWidgetPlacementContainers: function( widgetId ) { |
418 var sidebarPartial = this, widgetPartial, wasInserted = false, partialId = 'widget[' + widgetId + ']'; |
418 var sidebarPartial = this, widgetPartial, wasInserted = false, partialId = 'widget[' + widgetId + ']'; |
419 widgetPartial = api.selectiveRefresh.partial( partialId ); |
419 widgetPartial = api.selectiveRefresh.partial( partialId ); |
420 if ( ! widgetPartial ) { |
420 if ( ! widgetPartial ) { |
478 * @since 4.5.0 |
478 * @since 4.5.0 |
479 * |
479 * |
480 * @param {Array} newWidgetIds New widget IDs. |
480 * @param {Array} newWidgetIds New widget IDs. |
481 * @param {Array} oldWidgetIds Old widget IDs. |
481 * @param {Array} oldWidgetIds Old widget IDs. |
482 * |
482 * |
483 * @returns {void} |
483 * @return {void} |
484 */ |
484 */ |
485 handleSettingChange: function( newWidgetIds, oldWidgetIds ) { |
485 handleSettingChange: function( newWidgetIds, oldWidgetIds ) { |
486 var sidebarPartial = this, needsRefresh, widgetsRemoved, widgetsAdded, addedWidgetPartials = []; |
486 var sidebarPartial = this, needsRefresh, widgetsRemoved, widgetsAdded, addedWidgetPartials = []; |
487 |
487 |
488 needsRefresh = ( |
488 needsRefresh = ( |
533 * Note that the meat is handled in handleSettingChange because it has the |
533 * Note that the meat is handled in handleSettingChange because it has the |
534 * context of which widgets were removed. |
534 * context of which widgets were removed. |
535 * |
535 * |
536 * @since 4.5.0 |
536 * @since 4.5.0 |
537 * |
537 * |
538 * @returns {Promise} A promise postponing the refresh. |
538 * @return {Promise} A promise postponing the refresh. |
539 */ |
539 */ |
540 refresh: function() { |
540 refresh: function() { |
541 var partial = this, deferred = $.Deferred(); |
541 var partial = this, deferred = $.Deferred(); |
542 |
542 |
543 deferred.fail( function() { |
543 deferred.fail( function() { |
563 /** |
563 /** |
564 * Adds partials for the registered widget areas (sidebars). |
564 * Adds partials for the registered widget areas (sidebars). |
565 * |
565 * |
566 * @since 4.5.0 |
566 * @since 4.5.0 |
567 * |
567 * |
568 * @returns {void} |
568 * @return {void} |
569 */ |
569 */ |
570 self.addPartials = function() { |
570 self.addPartials = function() { |
571 _.each( self.registeredSidebars, function( registeredSidebar ) { |
571 _.each( self.registeredSidebars, function( registeredSidebar ) { |
572 var partial, partialId = 'sidebar[' + registeredSidebar.id + ']'; |
572 var partial, partialId = 'sidebar[' + registeredSidebar.id + ']'; |
573 partial = api.selectiveRefresh.partial( partialId ); |
573 partial = api.selectiveRefresh.partial( partialId ); |
588 * |
588 * |
589 * @memberOf wp.customize.widgetsPreview |
589 * @memberOf wp.customize.widgetsPreview |
590 * |
590 * |
591 * @since 3.9.0 |
591 * @since 3.9.0 |
592 * |
592 * |
593 * @returns {void} |
593 * @return {void} |
594 */ |
594 */ |
595 self.buildWidgetSelectors = function() { |
595 self.buildWidgetSelectors = function() { |
596 var self = this; |
596 var self = this; |
597 |
597 |
598 $.each( self.registeredSidebars, function( i, sidebar ) { |
598 $.each( self.registeredSidebars, function( i, sidebar ) { |
629 * Highlights the widget on widget updates or widget control mouse overs. |
629 * Highlights the widget on widget updates or widget control mouse overs. |
630 * |
630 * |
631 * @memberOf wp.customize.widgetsPreview |
631 * @memberOf wp.customize.widgetsPreview |
632 * |
632 * |
633 * @since 3.9.0 |
633 * @since 3.9.0 |
634 * @param {string} widgetId ID of the widget. |
634 * @param {string} widgetId ID of the widget. |
635 * |
635 * |
636 * @returns {void} |
636 * @return {void} |
637 */ |
637 */ |
638 self.highlightWidget = function( widgetId ) { |
638 self.highlightWidget = function( widgetId ) { |
639 var $body = $( document.body ), |
639 var $body = $( document.body ), |
640 $widget = $( '#' + widgetId ); |
640 $widget = $( '#' + widgetId ); |
641 |
641 |
653 * |
653 * |
654 * @memberOf wp.customize.widgetsPreview |
654 * @memberOf wp.customize.widgetsPreview |
655 * |
655 * |
656 * @since 3.9.0 |
656 * @since 3.9.0 |
657 * |
657 * |
658 * @returns {void} |
658 * @return {void} |
659 */ |
659 */ |
660 self.highlightControls = function() { |
660 self.highlightControls = function() { |
661 var self = this, |
661 var self = this, |
662 selector = this.widgetSelectors.join( ',' ); |
662 selector = this.widgetSelectors.join( ',' ); |
663 |
663 |
670 // Highlights widget when entering the widget editor. |
670 // Highlights widget when entering the widget editor. |
671 $( document ).on( 'mouseenter', selector, function() { |
671 $( document ).on( 'mouseenter', selector, function() { |
672 self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) ); |
672 self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) ); |
673 }); |
673 }); |
674 |
674 |
675 // Open expand the widget control when shift+clicking the widget element |
675 // Open expand the widget control when shift+clicking the widget element. |
676 $( document ).on( 'click', selector, function( e ) { |
676 $( document ).on( 'click', selector, function( e ) { |
677 if ( ! e.shiftKey ) { |
677 if ( ! e.shiftKey ) { |
678 return; |
678 return; |
679 } |
679 } |
680 e.preventDefault(); |
680 e.preventDefault(); |
690 * |
690 * |
691 * @since 4.5.0 |
691 * @since 4.5.0 |
692 * |
692 * |
693 * @param {string} widgetId The widget ID. |
693 * @param {string} widgetId The widget ID. |
694 * |
694 * |
695 * @returns {{idBase: string, number: number|null}} An object containing the |
695 * @return {{idBase: string, number: number|null}} An object containing the idBase |
696 * idBase and number of the parsed widget ID. |
696 * and number of the parsed widget ID. |
697 */ |
697 */ |
698 self.parseWidgetId = function( widgetId ) { |
698 self.parseWidgetId = function( widgetId ) { |
699 var matches, parsed = { |
699 var matches, parsed = { |
700 idBase: '', |
700 idBase: '', |
701 number: null |
701 number: null |
719 * |
719 * |
720 * @since 4.5.0 |
720 * @since 4.5.0 |
721 * |
721 * |
722 * @param {string} settingId Widget setting ID. |
722 * @param {string} settingId Widget setting ID. |
723 * |
723 * |
724 * @returns {{idBase: string, number: number|null}|null} Either an object |
724 * @return {{idBase: string, number: number|null}|null} Either an object containing the idBase |
725 * containing the idBase and number of the parsed widget setting ID, or |
725 * and number of the parsed widget setting ID, |
726 * null. |
726 * or null. |
727 */ |
727 */ |
728 self.parseWidgetSettingId = function( settingId ) { |
728 self.parseWidgetSettingId = function( settingId ) { |
729 var matches, parsed = { |
729 var matches, parsed = { |
730 idBase: '', |
730 idBase: '', |
731 number: null |
731 number: null |
749 * |
749 * |
750 * @since 4.5.0 |
750 * @since 4.5.0 |
751 * |
751 * |
752 * @param {string} widgetId The widget ID. |
752 * @param {string} widgetId The widget ID. |
753 * |
753 * |
754 * @returns {string} The setting ID. |
754 * @return {string} The setting ID. |
755 */ |
755 */ |
756 self.getWidgetSettingId = function( widgetId ) { |
756 self.getWidgetSettingId = function( widgetId ) { |
757 var parsed = this.parseWidgetId( widgetId ), settingId; |
757 var parsed = this.parseWidgetId( widgetId ), settingId; |
758 |
758 |
759 settingId = 'widget_' + parsed.idBase; |
759 settingId = 'widget_' + parsed.idBase; |