PDF rausgenommen
This commit is contained in:
aschwarz
773
msd2/wordpress/wp-includes/js/customize-preview-widgets.js
Normal file
773
msd2/wordpress/wp-includes/js/customize-preview-widgets.js
Normal file
@ -0,0 +1,773 @@
|
||||
/**
|
||||
* @output wp-includes/js/customize-preview-widgets.js
|
||||
*/
|
||||
|
||||
/* global _wpWidgetCustomizerPreviewSettings */
|
||||
|
||||
/**
|
||||
* Handles the initialization, refreshing and rendering of widget partials and sidebar widgets.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @namespace wp.customize.widgetsPreview
|
||||
*
|
||||
* @param {jQuery} $ The jQuery object.
|
||||
* @param {Object} _ The utilities library.
|
||||
* @param {Object} wp Current WordPress environment instance.
|
||||
* @param {Object} api Information from the API.
|
||||
*
|
||||
* @returns {Object} Widget-related variables.
|
||||
*/
|
||||
wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function( $, _, wp, api ) {
|
||||
|
||||
var self;
|
||||
|
||||
self = {
|
||||
renderedSidebars: {},
|
||||
renderedWidgets: {},
|
||||
registeredSidebars: [],
|
||||
registeredWidgets: {},
|
||||
widgetSelectors: [],
|
||||
preview: null,
|
||||
l10n: {
|
||||
widgetTooltip: ''
|
||||
},
|
||||
selectiveRefreshableWidgets: {}
|
||||
};
|
||||
|
||||
/**
|
||||
* Initializes the widgets preview.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
self.init = function() {
|
||||
var self = this;
|
||||
|
||||
self.preview = api.preview;
|
||||
if ( ! _.isEmpty( self.selectiveRefreshableWidgets ) ) {
|
||||
self.addPartials();
|
||||
}
|
||||
|
||||
self.buildWidgetSelectors();
|
||||
self.highlightControls();
|
||||
|
||||
self.preview.bind( 'highlight-widget', self.highlightWidget );
|
||||
|
||||
api.preview.bind( 'active', function() {
|
||||
self.highlightControls();
|
||||
} );
|
||||
|
||||
/*
|
||||
* Refresh a partial when the controls pane requests it. This is used currently just by the
|
||||
* Gallery widget so that when an attachment's caption is updated in the media modal,
|
||||
* the widget in the preview will then be refreshed to show the change. Normally doing this
|
||||
* would not be necessary because all of the state should be contained inside the changeset,
|
||||
* as everything done in the Customizer should not make a change to the site unless the
|
||||
* changeset itself is published. Attachments are a current exception to this rule.
|
||||
* For a proposal to include attachments in the customized state, see #37887.
|
||||
*/
|
||||
api.preview.bind( 'refresh-widget-partial', function( widgetId ) {
|
||||
var partialId = 'widget[' + widgetId + ']';
|
||||
if ( api.selectiveRefresh.partial.has( partialId ) ) {
|
||||
api.selectiveRefresh.partial( partialId ).refresh();
|
||||
} else if ( self.renderedWidgets[ widgetId ] ) {
|
||||
api.preview.send( 'refresh' ); // Fallback in case theme does not support 'customize-selective-refresh-widgets'.
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
self.WidgetPartial = api.selectiveRefresh.Partial.extend(/** @lends wp.customize.widgetsPreview.WidgetPartial.prototype */{
|
||||
|
||||
/**
|
||||
* Represents a partial widget instance.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @constructs
|
||||
* @augments wp.customize.selectiveRefresh.Partial
|
||||
*
|
||||
* @alias wp.customize.widgetsPreview.WidgetPartial
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @param {string} id The partial's ID.
|
||||
* @param {Object} options Options used to initialize the partial's
|
||||
* instance.
|
||||
* @param {Object} options.params The options parameters.
|
||||
*/
|
||||
initialize: function( id, options ) {
|
||||
var partial = this, matches;
|
||||
matches = id.match( /^widget\[(.+)]$/ );
|
||||
if ( ! matches ) {
|
||||
throw new Error( 'Illegal id for widget partial.' );
|
||||
}
|
||||
|
||||
partial.widgetId = matches[1];
|
||||
partial.widgetIdParts = self.parseWidgetId( partial.widgetId );
|
||||
options = options || {};
|
||||
options.params = _.extend(
|
||||
{
|
||||
settings: [ self.getWidgetSettingId( partial.widgetId ) ],
|
||||
containerInclusive: true
|
||||
},
|
||||
options.params || {}
|
||||
);
|
||||
|
||||
api.selectiveRefresh.Partial.prototype.initialize.call( partial, id, options );
|
||||
},
|
||||
|
||||
/**
|
||||
* Refreshes the widget partial.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {Promise|void} Either a promise postponing the refresh, or void.
|
||||
*/
|
||||
refresh: function() {
|
||||
var partial = this, refreshDeferred;
|
||||
if ( ! self.selectiveRefreshableWidgets[ partial.widgetIdParts.idBase ] ) {
|
||||
refreshDeferred = $.Deferred();
|
||||
refreshDeferred.reject();
|
||||
partial.fallback();
|
||||
return refreshDeferred.promise();
|
||||
} else {
|
||||
return api.selectiveRefresh.Partial.prototype.refresh.call( partial );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sends the widget-updated message to the parent so the spinner will get
|
||||
* removed from the widget control.
|
||||
*
|
||||
* @inheritDoc
|
||||
* @param {wp.customize.selectiveRefresh.Placement} placement The placement
|
||||
* function.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
renderContent: function( placement ) {
|
||||
var partial = this;
|
||||
if ( api.selectiveRefresh.Partial.prototype.renderContent.call( partial, placement ) ) {
|
||||
api.preview.send( 'widget-updated', partial.widgetId );
|
||||
api.selectiveRefresh.trigger( 'widget-updated', partial );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
self.SidebarPartial = api.selectiveRefresh.Partial.extend(/** @lends wp.customize.widgetsPreview.SidebarPartial.prototype */{
|
||||
|
||||
/**
|
||||
* Represents a partial widget area.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @class
|
||||
* @augments wp.customize.selectiveRefresh.Partial
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
* @alias wp.customize.widgetsPreview.SidebarPartial
|
||||
*
|
||||
* @param {string} id The partial's ID.
|
||||
* @param {Object} options Options used to initialize the partial's instance.
|
||||
* @param {Object} options.params The options parameters.
|
||||
*/
|
||||
initialize: function( id, options ) {
|
||||
var partial = this, matches;
|
||||
matches = id.match( /^sidebar\[(.+)]$/ );
|
||||
if ( ! matches ) {
|
||||
throw new Error( 'Illegal id for sidebar partial.' );
|
||||
}
|
||||
partial.sidebarId = matches[1];
|
||||
|
||||
options = options || {};
|
||||
options.params = _.extend(
|
||||
{
|
||||
settings: [ 'sidebars_widgets[' + partial.sidebarId + ']' ]
|
||||
},
|
||||
options.params || {}
|
||||
);
|
||||
|
||||
api.selectiveRefresh.Partial.prototype.initialize.call( partial, id, options );
|
||||
|
||||
if ( ! partial.params.sidebarArgs ) {
|
||||
throw new Error( 'The sidebarArgs param was not provided.' );
|
||||
}
|
||||
if ( partial.params.settings.length > 1 ) {
|
||||
throw new Error( 'Expected SidebarPartial to only have one associated setting' );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets up the partial.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
ready: function() {
|
||||
var sidebarPartial = this;
|
||||
|
||||
// Watch for changes to the sidebar_widgets setting.
|
||||
_.each( sidebarPartial.settings(), function( settingId ) {
|
||||
api( settingId ).bind( _.bind( sidebarPartial.handleSettingChange, sidebarPartial ) );
|
||||
} );
|
||||
|
||||
// Trigger an event for this sidebar being updated whenever a widget inside is rendered.
|
||||
api.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
|
||||
var isAssignedWidgetPartial = (
|
||||
placement.partial.extended( self.WidgetPartial ) &&
|
||||
( -1 !== _.indexOf( sidebarPartial.getWidgetIds(), placement.partial.widgetId ) )
|
||||
);
|
||||
if ( isAssignedWidgetPartial ) {
|
||||
api.selectiveRefresh.trigger( 'sidebar-updated', sidebarPartial );
|
||||
}
|
||||
} );
|
||||
|
||||
// Make sure that a widget partial has a container in the DOM prior to a refresh.
|
||||
api.bind( 'change', function( widgetSetting ) {
|
||||
var widgetId, parsedId;
|
||||
parsedId = self.parseWidgetSettingId( widgetSetting.id );
|
||||
if ( ! parsedId ) {
|
||||
return;
|
||||
}
|
||||
widgetId = parsedId.idBase;
|
||||
if ( parsedId.number ) {
|
||||
widgetId += '-' + String( parsedId.number );
|
||||
}
|
||||
if ( -1 !== _.indexOf( sidebarPartial.getWidgetIds(), widgetId ) ) {
|
||||
sidebarPartial.ensureWidgetPlacementContainers( widgetId );
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the before/after boundary nodes for all instances of this sidebar
|
||||
* (usually one).
|
||||
*
|
||||
* Note that TreeWalker is not implemented in IE8.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {Array.<{before: Comment, after: Comment, instanceNumber: number}>}
|
||||
* An array with an object for each sidebar instance, containing the
|
||||
* node before and after the sidebar instance and its instance number.
|
||||
*/
|
||||
findDynamicSidebarBoundaryNodes: function() {
|
||||
var partial = this, regExp, boundaryNodes = {}, recursiveCommentTraversal;
|
||||
regExp = /^(dynamic_sidebar_before|dynamic_sidebar_after):(.+):(\d+)$/;
|
||||
recursiveCommentTraversal = function( childNodes ) {
|
||||
_.each( childNodes, function( node ) {
|
||||
var matches;
|
||||
if ( 8 === node.nodeType ) {
|
||||
matches = node.nodeValue.match( regExp );
|
||||
if ( ! matches || matches[2] !== partial.sidebarId ) {
|
||||
return;
|
||||
}
|
||||
if ( _.isUndefined( boundaryNodes[ matches[3] ] ) ) {
|
||||
boundaryNodes[ matches[3] ] = {
|
||||
before: null,
|
||||
after: null,
|
||||
instanceNumber: parseInt( matches[3], 10 )
|
||||
};
|
||||
}
|
||||
if ( 'dynamic_sidebar_before' === matches[1] ) {
|
||||
boundaryNodes[ matches[3] ].before = node;
|
||||
} else {
|
||||
boundaryNodes[ matches[3] ].after = node;
|
||||
}
|
||||
} else if ( 1 === node.nodeType ) {
|
||||
recursiveCommentTraversal( node.childNodes );
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
recursiveCommentTraversal( document.body.childNodes );
|
||||
return _.values( boundaryNodes );
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the placements for this partial.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {Array} An array containing placement objects for each of the
|
||||
* dynamic sidebar boundary nodes.
|
||||
*/
|
||||
placements: function() {
|
||||
var partial = this;
|
||||
return _.map( partial.findDynamicSidebarBoundaryNodes(), function( boundaryNodes ) {
|
||||
return new api.selectiveRefresh.Placement( {
|
||||
partial: partial,
|
||||
container: null,
|
||||
startNode: boundaryNodes.before,
|
||||
endNode: boundaryNodes.after,
|
||||
context: {
|
||||
instanceNumber: boundaryNodes.instanceNumber
|
||||
}
|
||||
} );
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the list of widget IDs associated with this widget area.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @throws {Error} If there's no settingId.
|
||||
* @throws {Error} If the setting doesn't exist in the API.
|
||||
* @throws {Error} If the API doesn't pass an array of widget ids.
|
||||
*
|
||||
* @returns {Array} A shallow copy of the array containing widget IDs.
|
||||
*/
|
||||
getWidgetIds: function() {
|
||||
var sidebarPartial = this, settingId, widgetIds;
|
||||
settingId = sidebarPartial.settings()[0];
|
||||
if ( ! settingId ) {
|
||||
throw new Error( 'Missing associated setting.' );
|
||||
}
|
||||
if ( ! api.has( settingId ) ) {
|
||||
throw new Error( 'Setting does not exist.' );
|
||||
}
|
||||
widgetIds = api( settingId ).get();
|
||||
if ( ! _.isArray( widgetIds ) ) {
|
||||
throw new Error( 'Expected setting to be array of widget IDs' );
|
||||
}
|
||||
return widgetIds.slice( 0 );
|
||||
},
|
||||
|
||||
/**
|
||||
* Reflows widgets in the sidebar, ensuring they have the proper position in the
|
||||
* DOM.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {Array.<wp.customize.selectiveRefresh.Placement>} List of placements
|
||||
* that were reflowed.
|
||||
*/
|
||||
reflowWidgets: function() {
|
||||
var sidebarPartial = this, sidebarPlacements, widgetIds, widgetPartials, sortedSidebarContainers = [];
|
||||
widgetIds = sidebarPartial.getWidgetIds();
|
||||
sidebarPlacements = sidebarPartial.placements();
|
||||
|
||||
widgetPartials = {};
|
||||
_.each( widgetIds, function( widgetId ) {
|
||||
var widgetPartial = api.selectiveRefresh.partial( 'widget[' + widgetId + ']' );
|
||||
if ( widgetPartial ) {
|
||||
widgetPartials[ widgetId ] = widgetPartial;
|
||||
}
|
||||
} );
|
||||
|
||||
_.each( sidebarPlacements, function( sidebarPlacement ) {
|
||||
var sidebarWidgets = [], needsSort = false, thisPosition, lastPosition = -1;
|
||||
|
||||
// Gather list of widget partial containers in this sidebar, and determine if a sort is needed.
|
||||
_.each( widgetPartials, function( widgetPartial ) {
|
||||
_.each( widgetPartial.placements(), function( widgetPlacement ) {
|
||||
|
||||
if ( sidebarPlacement.context.instanceNumber === widgetPlacement.context.sidebar_instance_number ) {
|
||||
thisPosition = widgetPlacement.container.index();
|
||||
sidebarWidgets.push( {
|
||||
partial: widgetPartial,
|
||||
placement: widgetPlacement,
|
||||
position: thisPosition
|
||||
} );
|
||||
if ( thisPosition < lastPosition ) {
|
||||
needsSort = true;
|
||||
}
|
||||
lastPosition = thisPosition;
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
if ( needsSort ) {
|
||||
_.each( sidebarWidgets, function( sidebarWidget ) {
|
||||
sidebarPlacement.endNode.parentNode.insertBefore(
|
||||
sidebarWidget.placement.container[0],
|
||||
sidebarPlacement.endNode
|
||||
);
|
||||
|
||||
// @todo Rename partial-placement-moved?
|
||||
api.selectiveRefresh.trigger( 'partial-content-moved', sidebarWidget.placement );
|
||||
} );
|
||||
|
||||
sortedSidebarContainers.push( sidebarPlacement );
|
||||
}
|
||||
} );
|
||||
|
||||
if ( sortedSidebarContainers.length > 0 ) {
|
||||
api.selectiveRefresh.trigger( 'sidebar-updated', sidebarPartial );
|
||||
}
|
||||
|
||||
return sortedSidebarContainers;
|
||||
},
|
||||
|
||||
/**
|
||||
* Makes sure there is a widget instance container in this sidebar for the given
|
||||
* widget ID.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @param {string} widgetId The widget ID.
|
||||
*
|
||||
* @returns {wp.customize.selectiveRefresh.Partial} The widget instance partial.
|
||||
*/
|
||||
ensureWidgetPlacementContainers: function( widgetId ) {
|
||||
var sidebarPartial = this, widgetPartial, wasInserted = false, partialId = 'widget[' + widgetId + ']';
|
||||
widgetPartial = api.selectiveRefresh.partial( partialId );
|
||||
if ( ! widgetPartial ) {
|
||||
widgetPartial = new self.WidgetPartial( partialId, {
|
||||
params: {}
|
||||
} );
|
||||
}
|
||||
|
||||
// Make sure that there is a container element for the widget in the sidebar, if at least a placeholder.
|
||||
_.each( sidebarPartial.placements(), function( sidebarPlacement ) {
|
||||
var foundWidgetPlacement, widgetContainerElement;
|
||||
|
||||
foundWidgetPlacement = _.find( widgetPartial.placements(), function( widgetPlacement ) {
|
||||
return ( widgetPlacement.context.sidebar_instance_number === sidebarPlacement.context.instanceNumber );
|
||||
} );
|
||||
if ( foundWidgetPlacement ) {
|
||||
return;
|
||||
}
|
||||
|
||||
widgetContainerElement = $(
|
||||
sidebarPartial.params.sidebarArgs.before_widget.replace( /%1\$s/g, widgetId ).replace( /%2\$s/g, 'widget' ) +
|
||||
sidebarPartial.params.sidebarArgs.after_widget
|
||||
);
|
||||
|
||||
// Handle rare case where before_widget and after_widget are empty.
|
||||
if ( ! widgetContainerElement[0] ) {
|
||||
return;
|
||||
}
|
||||
|
||||
widgetContainerElement.attr( 'data-customize-partial-id', widgetPartial.id );
|
||||
widgetContainerElement.attr( 'data-customize-partial-type', 'widget' );
|
||||
widgetContainerElement.attr( 'data-customize-widget-id', widgetId );
|
||||
|
||||
/*
|
||||
* Make sure the widget container element has the customize-container context data.
|
||||
* The sidebar_instance_number is used to disambiguate multiple instances of the
|
||||
* same sidebar are rendered onto the template, and so the same widget is embedded
|
||||
* multiple times.
|
||||
*/
|
||||
widgetContainerElement.data( 'customize-partial-placement-context', {
|
||||
'sidebar_id': sidebarPartial.sidebarId,
|
||||
'sidebar_instance_number': sidebarPlacement.context.instanceNumber
|
||||
} );
|
||||
|
||||
sidebarPlacement.endNode.parentNode.insertBefore( widgetContainerElement[0], sidebarPlacement.endNode );
|
||||
wasInserted = true;
|
||||
} );
|
||||
|
||||
api.selectiveRefresh.partial.add( widgetPartial );
|
||||
|
||||
if ( wasInserted ) {
|
||||
sidebarPartial.reflowWidgets();
|
||||
}
|
||||
|
||||
return widgetPartial;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles changes to the sidebars_widgets[] setting.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @param {Array} newWidgetIds New widget IDs.
|
||||
* @param {Array} oldWidgetIds Old widget IDs.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
handleSettingChange: function( newWidgetIds, oldWidgetIds ) {
|
||||
var sidebarPartial = this, needsRefresh, widgetsRemoved, widgetsAdded, addedWidgetPartials = [];
|
||||
|
||||
needsRefresh = (
|
||||
( oldWidgetIds.length > 0 && 0 === newWidgetIds.length ) ||
|
||||
( newWidgetIds.length > 0 && 0 === oldWidgetIds.length )
|
||||
);
|
||||
if ( needsRefresh ) {
|
||||
sidebarPartial.fallback();
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle removal of widgets.
|
||||
widgetsRemoved = _.difference( oldWidgetIds, newWidgetIds );
|
||||
_.each( widgetsRemoved, function( removedWidgetId ) {
|
||||
var widgetPartial = api.selectiveRefresh.partial( 'widget[' + removedWidgetId + ']' );
|
||||
if ( widgetPartial ) {
|
||||
_.each( widgetPartial.placements(), function( placement ) {
|
||||
var isRemoved = (
|
||||
placement.context.sidebar_id === sidebarPartial.sidebarId ||
|
||||
( placement.context.sidebar_args && placement.context.sidebar_args.id === sidebarPartial.sidebarId )
|
||||
);
|
||||
if ( isRemoved ) {
|
||||
placement.container.remove();
|
||||
}
|
||||
} );
|
||||
}
|
||||
delete self.renderedWidgets[ removedWidgetId ];
|
||||
} );
|
||||
|
||||
// Handle insertion of widgets.
|
||||
widgetsAdded = _.difference( newWidgetIds, oldWidgetIds );
|
||||
_.each( widgetsAdded, function( addedWidgetId ) {
|
||||
var widgetPartial = sidebarPartial.ensureWidgetPlacementContainers( addedWidgetId );
|
||||
addedWidgetPartials.push( widgetPartial );
|
||||
self.renderedWidgets[ addedWidgetId ] = true;
|
||||
} );
|
||||
|
||||
_.each( addedWidgetPartials, function( widgetPartial ) {
|
||||
widgetPartial.refresh();
|
||||
} );
|
||||
|
||||
api.selectiveRefresh.trigger( 'sidebar-updated', sidebarPartial );
|
||||
},
|
||||
|
||||
/**
|
||||
* Refreshes the sidebar partial.
|
||||
*
|
||||
* Note that the meat is handled in handleSettingChange because it has the
|
||||
* context of which widgets were removed.
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {Promise} A promise postponing the refresh.
|
||||
*/
|
||||
refresh: function() {
|
||||
var partial = this, deferred = $.Deferred();
|
||||
|
||||
deferred.fail( function() {
|
||||
partial.fallback();
|
||||
} );
|
||||
|
||||
if ( 0 === partial.placements().length ) {
|
||||
deferred.reject();
|
||||
} else {
|
||||
_.each( partial.reflowWidgets(), function( sidebarPlacement ) {
|
||||
api.selectiveRefresh.trigger( 'partial-content-rendered', sidebarPlacement );
|
||||
} );
|
||||
deferred.resolve();
|
||||
}
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
});
|
||||
|
||||
api.selectiveRefresh.partialConstructor.sidebar = self.SidebarPartial;
|
||||
api.selectiveRefresh.partialConstructor.widget = self.WidgetPartial;
|
||||
|
||||
/**
|
||||
* Adds partials for the registered widget areas (sidebars).
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
self.addPartials = function() {
|
||||
_.each( self.registeredSidebars, function( registeredSidebar ) {
|
||||
var partial, partialId = 'sidebar[' + registeredSidebar.id + ']';
|
||||
partial = api.selectiveRefresh.partial( partialId );
|
||||
if ( ! partial ) {
|
||||
partial = new self.SidebarPartial( partialId, {
|
||||
params: {
|
||||
sidebarArgs: registeredSidebar
|
||||
}
|
||||
} );
|
||||
api.selectiveRefresh.partial.add( partial );
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the selector for the sidebar's widgets based on the registered
|
||||
* sidebar's info.
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @since 3.9.0
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
self.buildWidgetSelectors = function() {
|
||||
var self = this;
|
||||
|
||||
$.each( self.registeredSidebars, function( i, sidebar ) {
|
||||
var widgetTpl = [
|
||||
sidebar.before_widget,
|
||||
sidebar.before_title,
|
||||
sidebar.after_title,
|
||||
sidebar.after_widget
|
||||
].join( '' ),
|
||||
emptyWidget,
|
||||
widgetSelector,
|
||||
widgetClasses;
|
||||
|
||||
emptyWidget = $( widgetTpl );
|
||||
widgetSelector = emptyWidget.prop( 'tagName' ) || '';
|
||||
widgetClasses = emptyWidget.prop( 'className' ) || '';
|
||||
|
||||
// Prevent a rare case when before_widget, before_title, after_title and after_widget is empty.
|
||||
if ( ! widgetClasses ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove class names that incorporate the string formatting placeholders %1$s and %2$s.
|
||||
widgetClasses = widgetClasses.replace( /\S*%[12]\$s\S*/g, '' );
|
||||
widgetClasses = widgetClasses.replace( /^\s+|\s+$/g, '' );
|
||||
if ( widgetClasses ) {
|
||||
widgetSelector += '.' + widgetClasses.split( /\s+/ ).join( '.' );
|
||||
}
|
||||
self.widgetSelectors.push( widgetSelector );
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Highlights the widget on widget updates or widget control mouse overs.
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @since 3.9.0
|
||||
* @param {string} widgetId ID of the widget.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
self.highlightWidget = function( widgetId ) {
|
||||
var $body = $( document.body ),
|
||||
$widget = $( '#' + widgetId );
|
||||
|
||||
$body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
|
||||
|
||||
$widget.addClass( 'widget-customizer-highlighted-widget' );
|
||||
setTimeout( function() {
|
||||
$widget.removeClass( 'widget-customizer-highlighted-widget' );
|
||||
}, 500 );
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a title and highlights widgets on hover. On shift+clicking focuses the
|
||||
* widget control.
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @since 3.9.0
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
self.highlightControls = function() {
|
||||
var self = this,
|
||||
selector = this.widgetSelectors.join( ',' );
|
||||
|
||||
// Skip adding highlights if not in the customizer preview iframe.
|
||||
if ( ! api.settings.channel ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$( selector ).attr( 'title', this.l10n.widgetTooltip );
|
||||
// Highlights widget when entering the widget editor.
|
||||
$( document ).on( 'mouseenter', selector, function() {
|
||||
self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
|
||||
});
|
||||
|
||||
// Open expand the widget control when shift+clicking the widget element
|
||||
$( document ).on( 'click', selector, function( e ) {
|
||||
if ( ! e.shiftKey ) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses a widget ID.
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @param {string} widgetId The widget ID.
|
||||
*
|
||||
* @returns {{idBase: string, number: number|null}} An object containing the
|
||||
* idBase and number of the parsed widget ID.
|
||||
*/
|
||||
self.parseWidgetId = function( widgetId ) {
|
||||
var matches, parsed = {
|
||||
idBase: '',
|
||||
number: null
|
||||
};
|
||||
|
||||
matches = widgetId.match( /^(.+)-(\d+)$/ );
|
||||
if ( matches ) {
|
||||
parsed.idBase = matches[1];
|
||||
parsed.number = parseInt( matches[2], 10 );
|
||||
} else {
|
||||
parsed.idBase = widgetId; // Likely an old single widget.
|
||||
}
|
||||
|
||||
return parsed;
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses a widget setting ID.
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @param {string} settingId Widget setting ID.
|
||||
*
|
||||
* @returns {{idBase: string, number: number|null}|null} Either an object
|
||||
* containing the idBase and number of the parsed widget setting ID, or
|
||||
* null.
|
||||
*/
|
||||
self.parseWidgetSettingId = function( settingId ) {
|
||||
var matches, parsed = {
|
||||
idBase: '',
|
||||
number: null
|
||||
};
|
||||
|
||||
matches = settingId.match( /^widget_([^\[]+?)(?:\[(\d+)])?$/ );
|
||||
if ( ! matches ) {
|
||||
return null;
|
||||
}
|
||||
parsed.idBase = matches[1];
|
||||
if ( matches[2] ) {
|
||||
parsed.number = parseInt( matches[2], 10 );
|
||||
}
|
||||
return parsed;
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a widget ID into a Customizer setting ID.
|
||||
*
|
||||
* @memberOf wp.customize.widgetsPreview
|
||||
*
|
||||
* @since 4.5.0
|
||||
*
|
||||
* @param {string} widgetId The widget ID.
|
||||
*
|
||||
* @returns {string} The setting ID.
|
||||
*/
|
||||
self.getWidgetSettingId = function( widgetId ) {
|
||||
var parsed = this.parseWidgetId( widgetId ), settingId;
|
||||
|
||||
settingId = 'widget_' + parsed.idBase;
|
||||
if ( parsed.number ) {
|
||||
settingId += '[' + String( parsed.number ) + ']';
|
||||
}
|
||||
|
||||
return settingId;
|
||||
};
|
||||
|
||||
api.bind( 'preview-ready', function() {
|
||||
$.extend( self, _wpWidgetCustomizerPreviewSettings );
|
||||
self.init();
|
||||
});
|
||||
|
||||
return self;
|
||||
})( jQuery, _, wp, wp.customize );
|
||||
Reference in New Issue
Block a user