Customizer: Improve JS templates for Panels and Sections added in [32658].

* Always fall back to using the default template if no custom template exists.
* Provide a set of default params when constructing new `Section` and `Panel` objects.

Includes QUnit tests.

Props celloexpressions, westonruter, ocean90.
Fixes #30737.
Built from https://develop.svn.wordpress.org/trunk@32681


git-svn-id: http://core.svn.wordpress.org/trunk@32651 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling 2015-06-01 22:47:25 +00:00
parent 02f5020d52
commit 974ca19e36
3 changed files with 71 additions and 18 deletions

View File

@ -157,18 +157,40 @@
defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
containerType: 'container',
defaults: {
title: '',
description: '',
priority: 100,
type: 'default',
content: null,
active: true,
instanceNumber: null
},
/**
* @since 4.1.0
*
* @param {String} id
* @param {Object} options
* @param {string} id - The ID for the container.
* @param {object} options - Object containing one property: params.
* @param {object} options.params - Object containing the following properties.
* @param {string} options.params.title - Title shown when panel is collapsed and expanded.
* @param {string=} [options.params.description] - Description shown at the top of the panel.
* @param {number=100} [options.params.priority] - The sort priority for the panel.
* @param {string=default} [options.params.type] - The type of the panel. See wp.customize.panelConstructor.
* @param {string=} [options.params.content] - The markup to be used for the panel container. If empty, a JS template is used.
* @param {boolean=true} [options.params.active] - Whether the panel is active or not.
*/
initialize: function ( id, options ) {
var container = this;
container.id = id;
container.params = {};
$.extend( container, options || {} );
options = options || {};
options.params = _.defaults(
options.params || {},
container.defaults
);
$.extend( container, options );
container.templateSelector = 'customize-' + container.containerType + '-' + container.params.type;
container.container = $( container.params.content );
if ( 0 === container.container.length ) {
@ -202,7 +224,7 @@
api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
container.priority.set( isNaN( container.params.priority ) ? 100 : container.params.priority );
container.priority.set( container.params.priority );
container.active.set( container.params.active );
container.expanded.set( false );
},
@ -386,9 +408,11 @@
if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) {
template = wp.template( container.templateSelector );
if ( template && container.container ) {
return $.trim( template( container.params ) );
}
} else {
template = wp.template( 'customize-' + container.containerType + '-default' );
}
if ( template && container.container ) {
return $.trim( template( container.params ) );
}
return '<li></li>';
@ -403,12 +427,32 @@
*/
api.Section = Container.extend({
containerType: 'section',
defaults: {
title: '',
description: '',
priority: 100,
type: 'default',
content: null,
active: true,
instanceNumber: null,
panel: null,
customizeAction: ''
},
/**
* @since 4.1.0
*
* @param {String} id
* @param {Array} options
* @param {string} id - The ID for the section.
* @param {object} options - Object containing one property: params.
* @param {object} options.params - Object containing the following properties.
* @param {string} options.params.title - Title shown when section is collapsed and expanded.
* @param {string=} [options.params.description] - Description shown at the top of the section.
* @param {number=100} [options.params.priority] - The sort priority for the section.
* @param {string=default} [options.params.type] - The type of the section. See wp.customize.sectionConstructor.
* @param {string=} [options.params.content] - The markup to be used for the section container. If empty, a JS template is used.
* @param {boolean=true} [options.params.active] - Whether the section is active or not.
* @param {string} options.params.panel - The ID for the panel this section is associated with.
* @param {string=} [options.params.customizeAction] - Additional context information shown before the section title when expanded.
*/
initialize: function ( id, options ) {
var section = this;
@ -1009,8 +1053,15 @@
/**
* @since 4.1.0
*
* @param {String} id
* @param {Object} options
* @param {string} id - The ID for the panel.
* @param {object} options - Object containing one property: params.
* @param {object} options.params - Object containing the following properties.
* @param {string} options.params.title - Title shown when panel is collapsed and expanded.
* @param {string=} [options.params.description] - Description shown at the top of the panel.
* @param {number=100} [options.params.priority] - The sort priority for the panel.
* @param {string=default} [options.params.type] - The type of the panel. See wp.customize.panelConstructor.
* @param {string=} [options.params.content] - The markup to be used for the panel container. If empty, a JS template is used.
* @param {boolean=true} [options.params.active] - Whether the panel is active or not.
*/
initialize: function ( id, options ) {
var panel = this;
@ -1216,9 +1267,11 @@
// Add the content to the container.
if ( 0 !== $( '#tmpl-' + panel.templateSelector + '-content' ).length ) {
template = wp.template( panel.templateSelector + '-content' );
if ( template && panel.container ) {
panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
}
} else {
template = wp.template( 'customize-panel-default-content' );
}
if ( template && panel.container ) {
panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
}
}
});

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-alpha-32680';
$wp_version = '4.3-alpha-32681';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.