867 lines
26 KiB
JavaScript
867 lines
26 KiB
JavaScript
/* global jQuery, JSON, _customizePartialRefreshExports, console */
|
|
|
|
wp.customize.selectiveRefresh = ( function( $, api ) {
|
|
'use strict';
|
|
var self, Partial, Placement;
|
|
|
|
self = {
|
|
ready: $.Deferred(),
|
|
data: {
|
|
partials: {},
|
|
renderQueryVar: '',
|
|
l10n: {
|
|
shiftClickToEdit: ''
|
|
},
|
|
refreshBuffer: 250
|
|
},
|
|
currentRequest: null
|
|
};
|
|
|
|
_.extend( self, api.Events );
|
|
|
|
/**
|
|
* A Customizer Partial.
|
|
*
|
|
* A partial provides a rendering of one or more settings according to a template.
|
|
*
|
|
* @see PHP class WP_Customize_Partial.
|
|
*
|
|
* @class
|
|
* @augments wp.customize.Class
|
|
* @since 4.5.0
|
|
*
|
|
* @param {string} id Unique identifier for the control instance.
|
|
* @param {object} options Options hash for the control instance.
|
|
* @param {object} options.params
|
|
* @param {string} options.params.type Type of partial (e.g. nav_menu, widget, etc)
|
|
* @param {string} options.params.selector jQuery selector to find the container element in the page.
|
|
* @param {array} options.params.settings The IDs for the settings the partial relates to.
|
|
* @param {string} options.params.primarySetting The ID for the primary setting the partial renders.
|
|
* @param {bool} options.params.fallbackRefresh Whether to refresh the entire preview in case of a partial refresh failure.
|
|
*/
|
|
Partial = self.Partial = api.Class.extend({
|
|
|
|
id: null,
|
|
|
|
/**
|
|
* Constructor.
|
|
*
|
|
* @since 4.5.0
|
|
*
|
|
* @param {string} id - Partial ID.
|
|
* @param {Object} options
|
|
* @param {Object} options.params
|
|
*/
|
|
initialize: function( id, options ) {
|
|
var partial = this;
|
|
options = options || {};
|
|
partial.id = id;
|
|
|
|
partial.params = _.extend(
|
|
{
|
|
selector: null,
|
|
settings: [],
|
|
primarySetting: null,
|
|
containerInclusive: false,
|
|
fallbackRefresh: true // Note this needs to be false in a front-end editing context.
|
|
},
|
|
options.params || {}
|
|
);
|
|
|
|
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( _.pluck( partial.placements(), 'container' ), function( container ) {
|
|
$( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
|
|
} );
|
|
$( 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();
|
|
}
|
|
} );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Find all placements for this partial int he 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() );
|
|
}
|
|
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.
|
|
* @returns {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 );
|
|
}
|
|
}
|
|
/* jshint ignore:start */
|
|
document.write = self.orginalDocumentWrite;
|
|
self.orginalDocumentWrite = null;
|
|
/* jshint ignore:end */
|
|
|
|
placement.container.removeClass( 'customize-partial-refreshing' );
|
|
|
|
// Prevent placement container from being being re-triggered as being rendered among nested partials.
|
|
placement.container.data( 'customize-partial-content-rendered', true );
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* @class
|
|
* @augments wp.customize.Class
|
|
* @since 4.5.0
|
|
*/
|
|
self.Placement = Placement = api.Class.extend({
|
|
|
|
/**
|
|
* 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,
|
|
theme: api.settings.theme.stylesheet,
|
|
customized: JSON.stringify( dirtyCustomized )
|
|
};
|
|
};
|
|
|
|
/**
|
|
* 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 = {};
|
|
} );
|
|
},
|
|
self.data.refreshBuffer
|
|
);
|
|
|
|
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, 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.id, 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 custom 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' ) ) {
|
|
|
|
/**
|
|
* Announce when a partial's nested placement has been re-rendered.
|
|
*/
|
|
self.trigger( 'partial-content-rendered', new Placement( {
|
|
partial: partial,
|
|
context: containerContext,
|
|
container: containerElement
|
|
} ) );
|
|
}
|
|
containerElement.data( 'customize-partial-content-rendered', true );
|
|
} );
|
|
};
|
|
|
|
api.bind( 'preview-ready', function() {
|
|
var handleSettingChange, watchSettingChange, unwatchSettingChange;
|
|
|
|
// Polyfill for IE8 to support the document.head attribute.
|
|
if ( ! document.head ) {
|
|
document.head = $( 'head:first' )[0];
|
|
}
|
|
|
|
_.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, { params: data } );
|
|
self.partial.add( id, 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 );
|
|
}
|
|
} );
|
|
|
|
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 ) );
|