balmet.com

customize-selective-refresh.js (33332B)

---

 /**
  * @output wp-includes/js/customize-selective-refresh.js
  */
 
 /* global jQuery, JSON, _customizePartialRefreshExports, console */
 
 /** @namespace wp.customize.selectiveRefresh */
 wp.customize.selectiveRefresh = ( function( $, api ) {
 	'use strict';
 	var self, Partial, Placement;
 
 	self = {
 		ready: $.Deferred(),
 		editShortcutVisibility: new api.Value(),
 		data: {
 			partials: {},
 			renderQueryVar: '',
 			l10n: {
 				shiftClickToEdit: ''
 			}
 		},
 		currentRequest: null
 	};
 
 	_.extend( self, api.Events );
 
 	/**
 	 * A Customizer Partial.
 	 *
 	 * A partial provides a rendering of one or more settings according to a template.
 	 *
 	 * @memberOf wp.customize.selectiveRefresh
 	 *
 	 * @see PHP class WP_Customize_Partial.
 	 *
 	 * @class
 	 * @augments wp.customize.Class
 	 * @since 4.5.0
 	 */
 	Partial = self.Partial = api.Class.extend(/** @lends wp.customize.SelectiveRefresh.Partial.prototype */{
 
 		id: null,
 
 		/**
 		 * Default params.
 		 *
 		 * @since 4.9.0
 		 * @var {object}
 		 */
 		defaults: {
 			selector: null,
 			primarySetting: null,
 			containerInclusive: false,
 			fallbackRefresh: true // Note this needs to be false in a front-end editing context.
 		},
 
 		/**
 		 * Constructor.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @param {string}  id                      - Unique identifier for the partial instance.
 		 * @param {Object}  options                 - Options hash for the partial instance.
 		 * @param {string}  options.type            - Type of partial (e.g. nav_menu, widget, etc)
 		 * @param {string}  options.selector        - jQuery selector to find the container element in the page.
 		 * @param {Array}   options.settings        - The IDs for the settings the partial relates to.
 		 * @param {string}  options.primarySetting  - The ID for the primary setting the partial renders.
 		 * @param {boolean} options.fallbackRefresh - Whether to refresh the entire preview in case of a partial refresh failure.
 		 * @param {Object}  [options.params]        - Deprecated wrapper for the above properties.
 		 */
 		initialize: function( id, options ) {
 			var partial = this;
 			options = options || {};
 			partial.id = id;
 
 			partial.params = _.extend(
 				{
 					settings: []
 				},
 				partial.defaults,
 				options.params || options
 			);
 
 			partial.deferred = {};
 			partial.deferred.ready = $.Deferred();
 
 			partial.deferred.ready.done( function() {
 				partial.ready();
 			} );
 		},
 
 		/**
 		 * Set up the partial.
 		 *
 		 * @since 4.5.0
 		 */
 		ready: function() {
 			var partial = this;
 			_.each( partial.placements(), function( placement ) {
 				$( placement.container ).attr( 'title', self.data.l10n.shiftClickToEdit );
 				partial.createEditShortcutForPlacement( placement );
 			} );
 			$( document ).on( 'click', partial.params.selector, function( e ) {
 				if ( ! e.shiftKey ) {
 					return;
 				}
 				e.preventDefault();
 				_.each( partial.placements(), function( placement ) {
 					if ( $( placement.container ).is( e.currentTarget ) ) {
 						partial.showControl();
 					}
 				} );
 			} );
 		},
 
 		/**
 		 * Create and show the edit shortcut for a given partial placement container.
 		 *
 		 * @since 4.7.0
 		 * @access public
 		 *
 		 * @param {Placement} placement The placement container element.
 		 * @return {void}
 		 */
 		createEditShortcutForPlacement: function( placement ) {
 			var partial = this, $shortcut, $placementContainer, illegalAncestorSelector, illegalContainerSelector;
 			if ( ! placement.container ) {
 				return;
 			}
 			$placementContainer = $( placement.container );
 			illegalAncestorSelector = 'head';
 			illegalContainerSelector = 'area, audio, base, bdi, bdo, br, button, canvas, col, colgroup, command, datalist, embed, head, hr, html, iframe, img, input, keygen, label, link, map, math, menu, meta, noscript, object, optgroup, option, param, progress, rp, rt, ruby, script, select, source, style, svg, table, tbody, textarea, tfoot, thead, title, tr, track, video, wbr';
 			if ( ! $placementContainer.length || $placementContainer.is( illegalContainerSelector ) || $placementContainer.closest( illegalAncestorSelector ).length ) {
 				return;
 			}
 			$shortcut = partial.createEditShortcut();
 			$shortcut.on( 'click', function( event ) {
 				event.preventDefault();
 				event.stopPropagation();
 				partial.showControl();
 			} );
 			partial.addEditShortcutToPlacement( placement, $shortcut );
 		},
 
 		/**
 		 * Add an edit shortcut to the placement container.
 		 *
 		 * @since 4.7.0
 		 * @access public
 		 *
 		 * @param {Placement} placement The placement for the partial.
 		 * @param {jQuery} $editShortcut The shortcut element as a jQuery object.
 		 * @return {void}
 		 */
 		addEditShortcutToPlacement: function( placement, $editShortcut ) {
 			var $placementContainer = $( placement.container );
 			$placementContainer.prepend( $editShortcut );
 			if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
 				$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
 			}
 		},
 
 		/**
 		 * Return the unique class name for the edit shortcut button for this partial.
 		 *
 		 * @since 4.7.0
 		 * @access public
 		 *
 		 * @return {string} Partial ID converted into a class name for use in shortcut.
 		 */
 		getEditShortcutClassName: function() {
 			var partial = this, cleanId;
 			cleanId = partial.id.replace( /]/g, '' ).replace( /\[/g, '-' );
 			return 'customize-partial-edit-shortcut-' + cleanId;
 		},
 
 		/**
 		 * Return the appropriate translated string for the edit shortcut button.
 		 *
 		 * @since 4.7.0
 		 * @access public
 		 *
 		 * @return {string} Tooltip for edit shortcut.
 		 */
 		getEditShortcutTitle: function() {
 			var partial = this, l10n = self.data.l10n;
 			switch ( partial.getType() ) {
 				case 'widget':
 					return l10n.clickEditWidget;
 				case 'blogname':
 					return l10n.clickEditTitle;
 				case 'blogdescription':
 					return l10n.clickEditTitle;
 				case 'nav_menu':
 					return l10n.clickEditMenu;
 				default:
 					return l10n.clickEditMisc;
 			}
 		},
 
 		/**
 		 * Return the type of this partial
 		 *
 		 * Will use `params.type` if set, but otherwise will try to infer type from settingId.
 		 *
 		 * @since 4.7.0
 		 * @access public
 		 *
 		 * @return {string} Type of partial derived from type param or the related setting ID.
 		 */
 		getType: function() {
 			var partial = this, settingId;
 			settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown';
 			if ( partial.params.type ) {
 				return partial.params.type;
 			}
 			if ( settingId.match( /^nav_menu_instance\[/ ) ) {
 				return 'nav_menu';
 			}
 			if ( settingId.match( /^widget_.+\[\d+]$/ ) ) {
 				return 'widget';
 			}
 			return settingId;
 		},
 
 		/**
 		 * Create an edit shortcut button for this partial.
 		 *
 		 * @since 4.7.0
 		 * @access public
 		 *
 		 * @return {jQuery} The edit shortcut button element.
 		 */
 		createEditShortcut: function() {
 			var partial = this, shortcutTitle, $buttonContainer, $button, $image;
 			shortcutTitle = partial.getEditShortcutTitle();
 			$buttonContainer = $( '<span>', {
 				'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
 			} );
 			$button = $( '<button>', {
 				'aria-label': shortcutTitle,
 				'title': shortcutTitle,
 				'class': 'customize-partial-edit-shortcut-button'
 			} );
 			$image = $( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"/></svg>' );
 			$button.append( $image );
 			$buttonContainer.append( $button );
 			return $buttonContainer;
 		},
 
 		/**
 		 * Find all placements for this partial in the document.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @return {Array.<Placement>}
 		 */
 		placements: function() {
 			var partial = this, selector;
 
 			selector = partial.params.selector || '';
 			if ( selector ) {
 				selector += ', ';
 			}
 			selector += '[data-customize-partial-id="' + partial.id + '"]'; // @todo Consider injecting customize-partial-id-${id} classnames instead.
 
 			return $( selector ).map( function() {
 				var container = $( this ), context;
 
 				context = container.data( 'customize-partial-placement-context' );
 				if ( _.isString( context ) && '{' === context.substr( 0, 1 ) ) {
 					throw new Error( 'context JSON parse error' );
 				}
 
 				return new Placement( {
 					partial: partial,
 					container: container,
 					context: context
 				} );
 			} ).get();
 		},
 
 		/**
 		 * Get list of setting IDs related to this partial.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @return {string[]}
 		 */
 		settings: function() {
 			var partial = this;
 			if ( partial.params.settings && 0 !== partial.params.settings.length ) {
 				return partial.params.settings;
 			} else if ( partial.params.primarySetting ) {
 				return [ partial.params.primarySetting ];
 			} else {
 				return [ partial.id ];
 			}
 		},
 
 		/**
 		 * Return whether the setting is related to the partial.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @param {wp.customize.Value|string} setting  ID or object for setting.
 		 * @return {boolean} Whether the setting is related to the partial.
 		 */
 		isRelatedSetting: function( setting /*... newValue, oldValue */ ) {
 			var partial = this;
 			if ( _.isString( setting ) ) {
 				setting = api( setting );
 			}
 			if ( ! setting ) {
 				return false;
 			}
 			return -1 !== _.indexOf( partial.settings(), setting.id );
 		},
 
 		/**
 		 * Show the control to modify this partial's setting(s).
 		 *
 		 * This may be overridden for inline editing.
 		 *
 		 * @since 4.5.0
 		 */
 		showControl: function() {
 			var partial = this, settingId = partial.params.primarySetting;
 			if ( ! settingId ) {
 				settingId = _.first( partial.settings() );
 			}
 			if ( partial.getType() === 'nav_menu' ) {
 				if ( partial.params.navMenuArgs.theme_location ) {
 					settingId = 'nav_menu_locations[' + partial.params.navMenuArgs.theme_location + ']';
 				} else if ( partial.params.navMenuArgs.menu )   {
 					settingId = 'nav_menu[' + String( partial.params.navMenuArgs.menu ) + ']';
 				}
 			}
 			api.preview.send( 'focus-control-for-setting', settingId );
 		},
 
 		/**
 		 * Prepare container for selective refresh.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @param {Placement} placement
 		 */
 		preparePlacement: function( placement ) {
 			$( placement.container ).addClass( 'customize-partial-refreshing' );
 		},
 
 		/**
 		 * Reference to the pending promise returned from self.requestPartial().
 		 *
 		 * @since 4.5.0
 		 * @private
 		 */
 		_pendingRefreshPromise: null,
 
 		/**
 		 * Request the new partial and render it into the placements.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @this {wp.customize.selectiveRefresh.Partial}
 		 * @return {jQuery.Promise}
 		 */
 		refresh: function() {
 			var partial = this, refreshPromise;
 
 			refreshPromise = self.requestPartial( partial );
 
 			if ( ! partial._pendingRefreshPromise ) {
 				_.each( partial.placements(), function( placement ) {
 					partial.preparePlacement( placement );
 				} );
 
 				refreshPromise.done( function( placements ) {
 					_.each( placements, function( placement ) {
 						partial.renderContent( placement );
 					} );
 				} );
 
 				refreshPromise.fail( function( data, placements ) {
 					partial.fallback( data, placements );
 				} );
 
 				// Allow new request when this one finishes.
 				partial._pendingRefreshPromise = refreshPromise;
 				refreshPromise.always( function() {
 					partial._pendingRefreshPromise = null;
 				} );
 			}
 
 			return refreshPromise;
 		},
 
 		/**
 		 * Apply the addedContent in the placement to the document.
 		 *
 		 * Note the placement object will have its container and removedNodes
 		 * properties updated.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @param {Placement}             placement
 		 * @param {Element|jQuery}        [placement.container]  - This param will be empty if there was no element matching the selector.
 		 * @param {string|Object|boolean} placement.addedContent - Rendered HTML content, a data object for JS templates to render, or false if no render.
 		 * @param {Object}                [placement.context]    - Optional context information about the container.
 		 * @return {boolean} Whether the rendering was successful and the fallback was not invoked.
 		 */
 		renderContent: function( placement ) {
 			var partial = this, content, newContainerElement;
 			if ( ! placement.container ) {
 				partial.fallback( new Error( 'no_container' ), [ placement ] );
 				return false;
 			}
 			placement.container = $( placement.container );
 			if ( false === placement.addedContent ) {
 				partial.fallback( new Error( 'missing_render' ), [ placement ] );
 				return false;
 			}
 
 			// Currently a subclass needs to override renderContent to handle partials returning data object.
 			if ( ! _.isString( placement.addedContent ) ) {
 				partial.fallback( new Error( 'non_string_content' ), [ placement ] );
 				return false;
 			}
 
 			/* jshint ignore:start */
 			self.orginalDocumentWrite = document.write;
 			document.write = function() {
 				throw new Error( self.data.l10n.badDocumentWrite );
 			};
 			/* jshint ignore:end */
 			try {
 				content = placement.addedContent;
 				if ( wp.emoji && wp.emoji.parse && ! $.contains( document.head, placement.container[0] ) ) {
 					content = wp.emoji.parse( content );
 				}
 
 				if ( partial.params.containerInclusive ) {
 
 					// Note that content may be an empty string, and in this case jQuery will just remove the oldContainer.
 					newContainerElement = $( content );
 
 					// Merge the new context on top of the old context.
 					placement.context = _.extend(
 						placement.context,
 						newContainerElement.data( 'customize-partial-placement-context' ) || {}
 					);
 					newContainerElement.data( 'customize-partial-placement-context', placement.context );
 
 					placement.removedNodes = placement.container;
 					placement.container = newContainerElement;
 					placement.removedNodes.replaceWith( placement.container );
 					placement.container.attr( 'title', self.data.l10n.shiftClickToEdit );
 				} else {
 					placement.removedNodes = document.createDocumentFragment();
 					while ( placement.container[0].firstChild ) {
 						placement.removedNodes.appendChild( placement.container[0].firstChild );
 					}
 
 					placement.container.html( content );
 				}
 
 				placement.container.removeClass( 'customize-render-content-error' );
 			} catch ( error ) {
 				if ( 'undefined' !== typeof console && console.error ) {
 					console.error( partial.id, error );
 				}
 				partial.fallback( error, [ placement ] );
 			}
 			/* jshint ignore:start */
 			document.write = self.orginalDocumentWrite;
 			self.orginalDocumentWrite = null;
 			/* jshint ignore:end */
 
 			partial.createEditShortcutForPlacement( placement );
 			placement.container.removeClass( 'customize-partial-refreshing' );
 
 			// Prevent placement container from being re-triggered as being rendered among nested partials.
 			placement.container.data( 'customize-partial-content-rendered', true );
 
 			/*
 			 * Note that the 'wp_audio_shortcode_library' and 'wp_video_shortcode_library' filters
 			 * will determine whether or not wp.mediaelement is loaded and whether it will
 			 * initialize audio and video respectively. See also https://core.trac.wordpress.org/ticket/40144
 			 */
 			if ( wp.mediaelement ) {
 				wp.mediaelement.initialize();
 			}
 
 			if ( wp.playlist ) {
 				wp.playlist.initialize();
 			}
 
 			/**
 			 * Announce when a partial's placement has been rendered so that dynamic elements can be re-built.
 			 */
 			self.trigger( 'partial-content-rendered', placement );
 			return true;
 		},
 
 		/**
 		 * Handle fail to render partial.
 		 *
 		 * The first argument is either the failing jqXHR or an Error object, and the second argument is the array of containers.
 		 *
 		 * @since 4.5.0
 		 */
 		fallback: function() {
 			var partial = this;
 			if ( partial.params.fallbackRefresh ) {
 				self.requestFullRefresh();
 			}
 		}
 	} );
 
 	/**
 	 * A Placement for a Partial.
 	 *
 	 * A partial placement is the actual physical representation of a partial for a given context.
 	 * It also may have information in relation to how a placement may have just changed.
 	 * The placement is conceptually similar to a DOM Range or MutationRecord.
 	 *
 	 * @memberOf wp.customize.selectiveRefresh
 	 *
 	 * @class Placement
 	 * @augments wp.customize.Class
 	 * @since 4.5.0
 	 */
 	self.Placement = Placement = api.Class.extend(/** @lends wp.customize.selectiveRefresh.prototype */{
 
 		/**
 		 * The partial with which the container is associated.
 		 *
 		 * @param {wp.customize.selectiveRefresh.Partial}
 		 */
 		partial: null,
 
 		/**
 		 * DOM element which contains the placement's contents.
 		 *
 		 * This will be null if the startNode and endNode do not point to the same
 		 * DOM element, such as in the case of a sidebar partial.
 		 * This container element itself will be replaced for partials that
 		 * have containerInclusive param defined as true.
 		 */
 		container: null,
 
 		/**
 		 * DOM node for the initial boundary of the placement.
 		 *
 		 * This will normally be the same as endNode since most placements appear as elements.
 		 * This is primarily useful for widget sidebars which do not have intrinsic containers, but
 		 * for which an HTML comment is output before to mark the starting position.
 		 */
 		startNode: null,
 
 		/**
 		 * DOM node for the terminal boundary of the placement.
 		 *
 		 * This will normally be the same as startNode since most placements appear as elements.
 		 * This is primarily useful for widget sidebars which do not have intrinsic containers, but
 		 * for which an HTML comment is output before to mark the ending position.
 		 */
 		endNode: null,
 
 		/**
 		 * Context data.
 		 *
 		 * This provides information about the placement which is included in the request
 		 * in order to render the partial properly.
 		 *
 		 * @param {object}
 		 */
 		context: null,
 
 		/**
 		 * The content for the partial when refreshed.
 		 *
 		 * @param {string}
 		 */
 		addedContent: null,
 
 		/**
 		 * DOM node(s) removed when the partial is refreshed.
 		 *
 		 * If the partial is containerInclusive, then the removedNodes will be
 		 * the single Element that was the partial's former placement. If the
 		 * partial is not containerInclusive, then the removedNodes will be a
 		 * documentFragment containing the nodes removed.
 		 *
 		 * @param {Element|DocumentFragment}
 		 */
 		removedNodes: null,
 
 		/**
 		 * Constructor.
 		 *
 		 * @since 4.5.0
 		 *
 		 * @param {Object}                   args
 		 * @param {Partial}                  args.partial
 		 * @param {jQuery|Element}           [args.container]
 		 * @param {Node}                     [args.startNode]
 		 * @param {Node}                     [args.endNode]
 		 * @param {Object}                   [args.context]
 		 * @param {string}                   [args.addedContent]
 		 * @param {jQuery|DocumentFragment}  [args.removedNodes]
 		 */
 		initialize: function( args ) {
 			var placement = this;
 
 			args = _.extend( {}, args || {} );
 			if ( ! args.partial || ! args.partial.extended( Partial ) ) {
 				throw new Error( 'Missing partial' );
 			}
 			args.context = args.context || {};
 			if ( args.container ) {
 				args.container = $( args.container );
 			}
 
 			_.extend( placement, args );
 		}
 
 	});
 
 	/**
 	 * Mapping of type names to Partial constructor subclasses.
 	 *
 	 * @since 4.5.0
 	 *
 	 * @type {Object.<string, wp.customize.selectiveRefresh.Partial>}
 	 */
 	self.partialConstructor = {};
 
 	self.partial = new api.Values({ defaultConstructor: Partial });
 
 	/**
 	 * Get the POST vars for a Customizer preview request.
 	 *
 	 * @since 4.5.0
 	 * @see wp.customize.previewer.query()
 	 *
 	 * @return {Object}
 	 */
 	self.getCustomizeQuery = function() {
 		var dirtyCustomized = {};
 		api.each( function( value, key ) {
 			if ( value._dirty ) {
 				dirtyCustomized[ key ] = value();
 			}
 		} );
 
 		return {
 			wp_customize: 'on',
 			nonce: api.settings.nonce.preview,
 			customize_theme: api.settings.theme.stylesheet,
 			customized: JSON.stringify( dirtyCustomized ),
 			customize_changeset_uuid: api.settings.changeset.uuid
 		};
 	};
 
 	/**
 	 * Currently-requested partials and their associated deferreds.
 	 *
 	 * @since 4.5.0
 	 * @type {Object<string, { deferred: jQuery.Promise, partial: wp.customize.selectiveRefresh.Partial }>}
 	 */
 	self._pendingPartialRequests = {};
 
 	/**
 	 * Timeout ID for the current requesr, or null if no request is current.
 	 *
 	 * @since 4.5.0
 	 * @type {number|null}
 	 * @private
 	 */
 	self._debouncedTimeoutId = null;
 
 	/**
 	 * Current jqXHR for the request to the partials.
 	 *
 	 * @since 4.5.0
 	 * @type {jQuery.jqXHR|null}
 	 * @private
 	 */
 	self._currentRequest = null;
 
 	/**
 	 * Request full page refresh.
 	 *
 	 * When selective refresh is embedded in the context of front-end editing, this request
 	 * must fail or else changes will be lost, unless transactions are implemented.
 	 *
 	 * @since 4.5.0
 	 */
 	self.requestFullRefresh = function() {
 		api.preview.send( 'refresh' );
 	};
 
 	/**
 	 * Request a re-rendering of a partial.
 	 *
 	 * @since 4.5.0
 	 *
 	 * @param {wp.customize.selectiveRefresh.Partial} partial
 	 * @return {jQuery.Promise}
 	 */
 	self.requestPartial = function( partial ) {
 		var partialRequest;
 
 		if ( self._debouncedTimeoutId ) {
 			clearTimeout( self._debouncedTimeoutId );
 			self._debouncedTimeoutId = null;
 		}
 		if ( self._currentRequest ) {
 			self._currentRequest.abort();
 			self._currentRequest = null;
 		}
 
 		partialRequest = self._pendingPartialRequests[ partial.id ];
 		if ( ! partialRequest || 'pending' !== partialRequest.deferred.state() ) {
 			partialRequest = {
 				deferred: $.Deferred(),
 				partial: partial
 			};
 			self._pendingPartialRequests[ partial.id ] = partialRequest;
 		}
 
 		// Prevent leaking partial into debounced timeout callback.
 		partial = null;
 
 		self._debouncedTimeoutId = setTimeout(
 			function() {
 				var data, partialPlacementContexts, partialsPlacements, request;
 
 				self._debouncedTimeoutId = null;
 				data = self.getCustomizeQuery();
 
 				/*
 				 * It is key that the containers be fetched exactly at the point of the request being
 				 * made, because the containers need to be mapped to responses by array indices.
 				 */
 				partialsPlacements = {};
 
 				partialPlacementContexts = {};
 
 				_.each( self._pendingPartialRequests, function( pending, partialId ) {
 					partialsPlacements[ partialId ] = pending.partial.placements();
 					if ( ! self.partial.has( partialId ) ) {
 						pending.deferred.rejectWith( pending.partial, [ new Error( 'partial_removed' ), partialsPlacements[ partialId ] ] );
 					} else {
 						/*
 						 * Note that this may in fact be an empty array. In that case, it is the responsibility
 						 * of the Partial subclass instance to know where to inject the response, or else to
 						 * just issue a refresh (default behavior). The data being returned with each container
 						 * is the context information that may be needed to render certain partials, such as
 						 * the contained sidebar for rendering widgets or what the nav menu args are for a menu.
 						 */
 						partialPlacementContexts[ partialId ] = _.map( partialsPlacements[ partialId ], function( placement ) {
 							return placement.context || {};
 						} );
 					}
 				} );
 
 				data.partials = JSON.stringify( partialPlacementContexts );
 				data[ self.data.renderQueryVar ] = '1';
 
 				request = self._currentRequest = wp.ajax.send( null, {
 					data: data,
 					url: api.settings.url.self
 				} );
 
 				request.done( function( data ) {
 
 					/**
 					 * Announce the data returned from a request to render partials.
 					 *
 					 * The data is filtered on the server via customize_render_partials_response
 					 * so plugins can inject data from the server to be utilized
 					 * on the client via this event. Plugins may use this filter
 					 * to communicate script and style dependencies that need to get
 					 * injected into the page to support the rendered partials.
 					 * This is similar to the 'saved' event.
 					 */
 					self.trigger( 'render-partials-response', data );
 
 					// Relay errors (warnings) captured during rendering and relay to console.
 					if ( data.errors && 'undefined' !== typeof console && console.warn ) {
 						_.each( data.errors, function( error ) {
 							console.warn( error );
 						} );
 					}
 
 					/*
 					 * Note that data is an array of items that correspond to the array of
 					 * containers that were submitted in the request. So we zip up the
 					 * array of containers with the array of contents for those containers,
 					 * and send them into .
 					 */
 					_.each( self._pendingPartialRequests, function( pending, partialId ) {
 						var placementsContents;
 						if ( ! _.isArray( data.contents[ partialId ] ) ) {
 							pending.deferred.rejectWith( pending.partial, [ new Error( 'unrecognized_partial' ), partialsPlacements[ partialId ] ] );
 						} else {
 							placementsContents = _.map( data.contents[ partialId ], function( content, i ) {
 								var partialPlacement = partialsPlacements[ partialId ][ i ];
 								if ( partialPlacement ) {
 									partialPlacement.addedContent = content;
 								} else {
 									partialPlacement = new Placement( {
 										partial: pending.partial,
 										addedContent: content
 									} );
 								}
 								return partialPlacement;
 							} );
 							pending.deferred.resolveWith( pending.partial, [ placementsContents ] );
 						}
 					} );
 					self._pendingPartialRequests = {};
 				} );
 
 				request.fail( function( data, statusText ) {
 
 					/*
 					 * Ignore failures caused by partial.currentRequest.abort()
 					 * The pending deferreds will remain in self._pendingPartialRequests
 					 * for re-use with the next request.
 					 */
 					if ( 'abort' === statusText ) {
 						return;
 					}
 
 					_.each( self._pendingPartialRequests, function( pending, partialId ) {
 						pending.deferred.rejectWith( pending.partial, [ data, partialsPlacements[ partialId ] ] );
 					} );
 					self._pendingPartialRequests = {};
 				} );
 			},
 			api.settings.timeouts.selectiveRefresh
 		);
 
 		return partialRequest.deferred.promise();
 	};
 
 	/**
 	 * Add partials for any nav menu container elements in the document.
 	 *
 	 * This method may be called multiple times. Containers that already have been
 	 * seen will be skipped.
 	 *
 	 * @since 4.5.0
 	 *
 	 * @param {jQuery|HTMLElement} [rootElement]
 	 * @param {object}             [options]
 	 * @param {boolean=true}       [options.triggerRendered]
 	 */
 	self.addPartials = function( rootElement, options ) {
 		var containerElements;
 		if ( ! rootElement ) {
 			rootElement = document.documentElement;
 		}
 		rootElement = $( rootElement );
 		options = _.extend(
 			{
 				triggerRendered: true
 			},
 			options || {}
 		);
 
 		containerElements = rootElement.find( '[data-customize-partial-id]' );
 		if ( rootElement.is( '[data-customize-partial-id]' ) ) {
 			containerElements = containerElements.add( rootElement );
 		}
 		containerElements.each( function() {
 			var containerElement = $( this ), partial, placement, id, Constructor, partialOptions, containerContext;
 			id = containerElement.data( 'customize-partial-id' );
 			if ( ! id ) {
 				return;
 			}
 			containerContext = containerElement.data( 'customize-partial-placement-context' ) || {};
 
 			partial = self.partial( id );
 			if ( ! partial ) {
 				partialOptions = containerElement.data( 'customize-partial-options' ) || {};
 				partialOptions.constructingContainerContext = containerElement.data( 'customize-partial-placement-context' ) || {};
 				Constructor = self.partialConstructor[ containerElement.data( 'customize-partial-type' ) ] || self.Partial;
 				partial = new Constructor( id, partialOptions );
 				self.partial.add( partial );
 			}
 
 			/*
 			 * Only trigger renders on (nested) partials that have been not been
 			 * handled yet. An example where this would apply is a nav menu
 			 * embedded inside of a navigation menu widget. When the widget's title
 			 * is updated, the entire widget will re-render and then the event
 			 * will be triggered for the nested nav menu to do any initialization.
 			 */
 			if ( options.triggerRendered && ! containerElement.data( 'customize-partial-content-rendered' ) ) {
 
 				placement = new Placement( {
 					partial: partial,
 					context: containerContext,
 					container: containerElement
 				} );
 
 				$( placement.container ).attr( 'title', self.data.l10n.shiftClickToEdit );
 				partial.createEditShortcutForPlacement( placement );
 
 				/**
 				 * Announce when a partial's nested placement has been re-rendered.
 				 */
 				self.trigger( 'partial-content-rendered', placement );
 			}
 			containerElement.data( 'customize-partial-content-rendered', true );
 		} );
 	};
 
 	api.bind( 'preview-ready', function() {
 		var handleSettingChange, watchSettingChange, unwatchSettingChange;
 
 		_.extend( self.data, _customizePartialRefreshExports );
 
 		// Create the partial JS models.
 		_.each( self.data.partials, function( data, id ) {
 			var Constructor, partial = self.partial( id );
 			if ( ! partial ) {
 				Constructor = self.partialConstructor[ data.type ] || self.Partial;
 				partial = new Constructor(
 					id,
 					_.extend( { params: data }, data ) // Inclusion of params alias is for back-compat for custom partials that expect to augment this property.
 				);
 				self.partial.add( partial );
 			} else {
 				_.extend( partial.params, data );
 			}
 		} );
 
 		/**
 		 * Handle change to a setting.
 		 *
 		 * Note this is largely needed because adding a 'change' event handler to wp.customize
 		 * will only include the changed setting object as an argument, not including the
 		 * new value or the old value.
 		 *
 		 * @since 4.5.0
 		 * @this {wp.customize.Setting}
 		 *
 		 * @param {*|null} newValue New value, or null if the setting was just removed.
 		 * @param {*|null} oldValue Old value, or null if the setting was just added.
 		 */
 		handleSettingChange = function( newValue, oldValue ) {
 			var setting = this;
 			self.partial.each( function( partial ) {
 				if ( partial.isRelatedSetting( setting, newValue, oldValue ) ) {
 					partial.refresh();
 				}
 			} );
 		};
 
 		/**
 		 * Trigger the initial change for the added setting, and watch for changes.
 		 *
 		 * @since 4.5.0
 		 * @this {wp.customize.Values}
 		 *
 		 * @param {wp.customize.Setting} setting
 		 */
 		watchSettingChange = function( setting ) {
 			handleSettingChange.call( setting, setting(), null );
 			setting.bind( handleSettingChange );
 		};
 
 		/**
 		 * Trigger the final change for the removed setting, and unwatch for changes.
 		 *
 		 * @since 4.5.0
 		 * @this {wp.customize.Values}
 		 *
 		 * @param {wp.customize.Setting} setting
 		 */
 		unwatchSettingChange = function( setting ) {
 			handleSettingChange.call( setting, null, setting() );
 			setting.unbind( handleSettingChange );
 		};
 
 		api.bind( 'add', watchSettingChange );
 		api.bind( 'remove', unwatchSettingChange );
 		api.each( function( setting ) {
 			setting.bind( handleSettingChange );
 		} );
 
 		// Add (dynamic) initial partials that are declared via data-* attributes.
 		self.addPartials( document.documentElement, {
 			triggerRendered: false
 		} );
 
 		// Add new dynamic partials when the document changes.
 		if ( 'undefined' !== typeof MutationObserver ) {
 			self.mutationObserver = new MutationObserver( function( mutations ) {
 				_.each( mutations, function( mutation ) {
 					self.addPartials( $( mutation.target ) );
 				} );
 			} );
 			self.mutationObserver.observe( document.documentElement, {
 				childList: true,
 				subtree: true
 			} );
 		}
 
 		/**
 		 * Handle rendering of partials.
 		 *
 		 * @param {api.selectiveRefresh.Placement} placement
 		 */
 		api.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
 			if ( placement.container ) {
 				self.addPartials( placement.container );
 			}
 		} );
 
 		/**
 		 * Handle setting validities in partial refresh response.
 		 *
 		 * @param {object} data Response data.
 		 * @param {object} data.setting_validities Setting validities.
 		 */
 		api.selectiveRefresh.bind( 'render-partials-response', function handleSettingValiditiesResponse( data ) {
 			if ( data.setting_validities ) {
 				api.preview.send( 'selective-refresh-setting-validities', data.setting_validities );
 			}
 		} );
 
 		api.preview.bind( 'edit-shortcut-visibility', function( visibility ) {
 			api.selectiveRefresh.editShortcutVisibility.set( visibility );
 		} );
 		api.selectiveRefresh.editShortcutVisibility.bind( function( visibility ) {
 			var body = $( document.body ), shouldAnimateHide;
 
 			shouldAnimateHide = ( 'hidden' === visibility && body.hasClass( 'customize-partial-edit-shortcuts-shown' ) && ! body.hasClass( 'customize-partial-edit-shortcuts-hidden' ) );
 			body.toggleClass( 'customize-partial-edit-shortcuts-hidden', shouldAnimateHide );
 			body.toggleClass( 'customize-partial-edit-shortcuts-shown', 'visible' === visibility );
 		} );
 
 		api.preview.bind( 'active', function() {
 
 			// Make all partials ready.
 			self.partial.each( function( partial ) {
 				partial.deferred.ready.resolve();
 			} );
 
 			// Make all partials added henceforth as ready upon add.
 			self.partial.bind( 'add', function( partial ) {
 				partial.deferred.ready.resolve();
 			} );
 		} );
 
 	} );
 
 	return self;
 }( jQuery, wp.customize ) );