wp/wp-includes/js/customize-preview-widgets.js
changeset 16 a86126ab1dd4
parent 9 177826044cd9
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
    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;