WordPress.org
Get WordPress

Make WordPress Core

Changeset 32681


Ignore:
Timestamp:
06/01/2015 10:46:56 PM (9 years ago)
Author:
ocean90
Message:

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.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/js/customize-controls.js

    r32658 r32681  
    158158        defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
    159159        containerType: 'container',
     160        defaults: {
     161            title: '',
     162            description: '',
     163            priority: 100,
     164            type: 'default',
     165            content: null,
     166            active: true,
     167            instanceNumber: null
     168        },
    160169
    161170        /**
    162171         * @since 4.1.0
    163172         *
    164          * @param {String} id
    165          * @param {Object} options
     173         * @param {string}         id - The ID for the container.
     174         * @param {object}         options - Object containing one property: params.
     175         * @param {object}         options.params - Object containing the following properties.
     176         * @param {string}         options.params.title - Title shown when panel is collapsed and expanded.
     177         * @param {string=}        [options.params.description] - Description shown at the top of the panel.
     178         * @param {number=100}     [options.params.priority] - The sort priority for the panel.
     179         * @param {string=default} [options.params.type] - The type of the panel. See wp.customize.panelConstructor.
     180         * @param {string=}        [options.params.content] - The markup to be used for the panel container. If empty, a JS template is used.
     181         * @param {boolean=true}   [options.params.active] - Whether the panel is active or not.
    166182         */
    167183        initialize: function ( id, options ) {
    168184            var container = this;
    169185            container.id = id;
    170             container.params = {};
    171             $.extend( container, options || {} );
     186            options = options || {};
     187
     188            options.params = _.defaults(
     189                options.params || {},
     190                container.defaults
     191            );
     192
     193            $.extend( container, options );
    172194            container.templateSelector = 'customize-' + container.containerType + '-' + container.params.type;
    173195            container.container = $( container.params.content );
    … …  
    203225            api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
    204226
    205             container.priority.set( isNaN( container.params.priority ) ? 100 : container.params.priority );
     227            container.priority.set( container.params.priority );
    206228            container.active.set( container.params.active );
    207229            container.expanded.set( false );
    … …  
    387409            if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) {
    388410                template = wp.template( container.templateSelector );
    389                 if ( template && container.container ) {
    390                     return $.trim( template( container.params ) );
    391                 }
     411            } else {
     412                template = wp.template( 'customize-' + container.containerType + '-default' );
     413            }
     414            if ( template && container.container ) {
     415                return $.trim( template( container.params ) );
    392416            }
    393417
    … …  
    404428    api.Section = Container.extend({
    405429        containerType: 'section',
     430        defaults: {
     431            title: '',
     432            description: '',
     433            priority: 100,
     434            type: 'default',
     435            content: null,
     436            active: true,
     437            instanceNumber: null,
     438            panel: null,
     439            customizeAction: ''
     440        },
    406441
    407442        /**
    408443         * @since 4.1.0
    409444         *
    410          * @param {String} id
    411          * @param {Array}  options
     445         * @param {string}         id - The ID for the section.
     446         * @param {object}         options - Object containing one property: params.
     447         * @param {object}         options.params - Object containing the following properties.
     448         * @param {string}         options.params.title - Title shown when section is collapsed and expanded.
     449         * @param {string=}        [options.params.description] - Description shown at the top of the section.
     450         * @param {number=100}     [options.params.priority] - The sort priority for the section.
     451         * @param {string=default} [options.params.type] - The type of the section. See wp.customize.sectionConstructor.
     452         * @param {string=}        [options.params.content] - The markup to be used for the section container. If empty, a JS template is used.
     453         * @param {boolean=true}   [options.params.active] - Whether the section is active or not.
     454         * @param {string}         options.params.panel - The ID for the panel this section is associated with.
     455         * @param {string=}        [options.params.customizeAction] - Additional context information shown before the section title when expanded.
    412456         */
    413457        initialize: function ( id, options ) {
    … …  
    10101054         * @since 4.1.0
    10111055         *
    1012          * @param  {String} id
    1013          * @param  {Object} options
     1056         * @param {string}         id - The ID for the panel.
     1057         * @param {object}         options - Object containing one property: params.
     1058         * @param {object}         options.params - Object containing the following properties.
     1059         * @param {string}         options.params.title - Title shown when panel is collapsed and expanded.
     1060         * @param {string=}        [options.params.description] - Description shown at the top of the panel.
     1061         * @param {number=100}     [options.params.priority] - The sort priority for the panel.
     1062         * @param {string=default} [options.params.type] - The type of the panel. See wp.customize.panelConstructor.
     1063         * @param {string=}        [options.params.content] - The markup to be used for the panel container. If empty, a JS template is used.
     1064         * @param {boolean=true}   [options.params.active] - Whether the panel is active or not.
    10141065         */
    10151066        initialize: function ( id, options ) {
    … …  
    12171268            if ( 0 !== $( '#tmpl-' + panel.templateSelector + '-content' ).length ) {
    12181269                template = wp.template( panel.templateSelector + '-content' );
    1219                 if ( template && panel.container ) {
    1220                     panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
    1221                 }
     1270            } else {
     1271                template = wp.template( 'customize-panel-default-content' );
     1272            }
     1273            if ( template && panel.container ) {
     1274                panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
    12221275            }
    12231276        }

  • trunk/tests/qunit/fixtures/customize-settings.js

    r32658 r32681  
    5858            'title': 'Fixture titleless panel using template',
    5959            'type': 'titleless'
    60         }
     60        },
     61        'fixture-panel-reusing-default-template': {
     62            'active': true,
     63            'description': 'Lorem ipsum',
     64            'instanceNumber': 3,
     65            'priority': 110,
     66            'title': 'Fixture panel of custom type re-using default template',
     67            'type': 'reusing-default-template'
     68        },
     69        'fixture-panel-without-params': {}
    6170    },
    6271    'sections': {
    … …  
    8897            'title': 'Fixture titleless section using template',
    8998            'type': 'titleless'
    90         }
     99        },
     100        'fixture-section-reusing-default-template': {
     101            'active': true,
     102            'description': '',
     103            'instanceNumber': 4,
     104            'panel': 'fixture-panel',
     105            'priority': 20,
     106            'title': 'Fixture section of custom type re-using default template',
     107            'type': 'reusing-default-template'
     108        },
     109        'fixture-section-without-params': {}
    91110    },
    92111    'settings': {

  • trunk/tests/qunit/wp-admin/js/customize-controls.js

    r32658 r32681  
    137137        ok( 1 === section.container.find( '> .accordion-section-content' ).length );
    138138    } );
     139    module( 'Customizer Custom Type Section Lacking Specific Template' );
     140    test( 'Fixture section has expected content', function () {
     141        var id = 'fixture-section-reusing-default-template', section;
     142        section = wp.customize.section( id );
     143        ok( ! section.params.content );
     144        ok( !! section.container );
     145        ok( section.container.is( '.control-section.control-section-' + section.params.type ) );
     146        ok( 1 === section.container.find( '> .accordion-section-title' ).length );
     147        ok( 1 === section.container.find( '> .accordion-section-content' ).length );
     148    } );
     149    module( 'Customizer Section lacking any params' );
     150    test( 'Fixture section has default params supplied', function () {
     151        var id = 'fixture-section-without-params', section, defaultParams;
     152        section = wp.customize.section( id );
     153        defaultParams = {
     154            title: '',
     155            description: '',
     156            priority: 100,
     157            panel: null,
     158            type: 'default',
     159            content: null,
     160            active: true,
     161            instanceNumber: null,
     162            customizeAction: ''
     163        };
     164        jQuery.each( defaultParams, function ( key, value ) {
     165            ok( 'undefined' !== typeof section.params[ key ] );
     166            equal( value, section.params[ key ] );
     167        } );
     168    } );
     169
    139170
    140171    // Begin panels.
    … …  
    200231    } );
    201232
     233    module( 'Customizer Custom Type Panel Lacking Specific Template' );
     234    test( 'Fixture panel has expected content', function () {
     235        var id = 'fixture-panel-reusing-default-template', panel;
     236        panel = wp.customize.panel( id );
     237        ok( ! panel.params.content );
     238        ok( !! panel.container );
     239        ok( panel.container.is( '.control-panel.control-panel-' + panel.params.type ) );
     240        ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
     241        ok( 1 === panel.container.find( '> .control-panel-content' ).length );
     242    } );
     243    module( 'Customizer Panel lacking any params' );
     244    test( 'Fixture panel has default params supplied', function () {
     245        var id = 'fixture-panel-without-params', panel, defaultParams;
     246        panel = wp.customize.panel( id );
     247        defaultParams = {
     248            title: '',
     249            description: '',
     250            priority: 100,
     251            type: 'default',
     252            content: null,
     253            active: true,
     254            instanceNumber: null
     255        };
     256        jQuery.each( defaultParams, function ( key, value ) {
     257            ok( 'undefined' !== typeof panel.params[ key ] );
     258            equal( value, panel.params[ key ] );
     259        } );
     260    } );
    202261
    203262    module( 'Dynamically-created Customizer Setting Model' );
Note: See TracChangeset for help on using the changeset viewer.