WordPress.org

Make WordPress Core

Changeset 20128


Ignore:
Timestamp:
03/06/2012 10:48:07 PM (6 years ago)
Author:
koopersmith
Message:

Theme Customizer: Add a Control object to better encapsulate different UI elements and make it easy to switch between hard refreshes and postMessage. see #19910.

Location:
trunk/wp-includes
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-section.php

    r20106 r20128  
    7373
    7474                <?php foreach ( $this->settings as $setting ) : ?>
    75                 <li>
     75                <li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control">
    7676                    <?php $setting->_render(); ?>
    7777                </li>
  • trunk/wp-includes/class-wp-customize-setting.php

    r20120 r20128  
    344344                    <span><?php echo esc_html( $this->label ); ?></span>
    345345                    <div class="color-picker">
    346                         <input class="color-picker-value" type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
     346                        <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    347347                        <a href="#"></a>
    348348                        <div class="color-picker-controls">
  • trunk/wp-includes/customize-controls.php

    r20110 r20128  
    5050        <input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
    5151        <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
    52        
     52
    5353        <div id="customize-header-actions" class="customize-section">&nbsp;</div>
    5454
     
    9595    $scheme = is_ssl() ? 'https' : 'http';
    9696    $settings = array(
    97         'preview' => esc_url( home_url( '/', $scheme ) ),
    98         'values' => array(),
    99         'prefix'  => WP_Customize_Setting::name_prefix,
     97        'preview'  => esc_url( home_url( '/', $scheme ) ),
     98        'controls' => array(),
     99        'prefix'   => WP_Customize_Setting::name_prefix,
    100100    );
    101101
    102102    foreach ( $this->settings as $id => $setting ) {
    103         $settings['values'][ $id ] = $setting->value();
     103        $settings['controls'][ $id ] = array(
     104            'value'   => $setting->value(),
     105            'control' => $setting->control,
     106        );
    104107    }
    105108
  • trunk/wp-includes/js/customize-base.dev.js

    r20123 r20128  
    153153    api.Value = api.Class.extend({
    154154        initialize: function( initial, options ) {
    155             this._value = initial;
     155            this._value = initial; // @todo: potentially change this to a this.set() call.
    156156            this.callbacks = $.Callbacks();
    157157
  • trunk/wp-includes/js/customize-controls.dev.js

    r20123 r20128  
    11(function( exports, $ ){
    22    var api = wp.customize;
     3
     4    /*
     5     * @param options
     6     * - previewer - The Previewer instance to sync with.
     7     * - method    - The method to use for syncing. Supports 'refresh' and 'postMessage'.
     8     */
     9    api.Control = api.Value.extend({
     10        initialize: function( id, value, options ) {
     11            var name = '[name="' + api.settings.prefix + id + '"]';
     12
     13            api.Value.prototype.initialize.call( this, value, options );
     14
     15            this.id = id;
     16            this.container = $( '#customize-control-' + id );
     17            this.element = this.element || new api.Element( this.container.find( name ) );
     18
     19            this.method = this.method || 'refresh';
     20
     21            this.element.link( this );
     22            this.link( this.element );
     23
     24            this.bind( this.sync );
     25        },
     26        sync: function() {
     27            switch ( this.method ) {
     28                case 'refresh':
     29                    return this.previewer.refresh();
     30                case 'postMessage':
     31                    return this.previewer.send( 'setting', [ this.id, this() ] );
     32            }
     33        }
     34    });
     35
     36    api.ColorControl = api.Control.extend({
     37        initialize: function( id, value, options ) {
     38            var self = this,
     39                picker, ui, text, toggle, update;
     40
     41            api.Control.prototype.initialize.call( this, id, value, options );
     42
     43            picker = this.container.find( '.color-picker' );
     44            ui     = picker.find( '.color-picker-controls' );
     45            toggle = picker.find( 'a' );
     46            update = function( color ) {
     47                color = '#' + color;
     48                toggle.css( 'background', color );
     49                self.farbtastic.setColor( color );
     50            };
     51
     52            this.input = new api.Element( ui.find( 'input' ) ); // Find text input.
     53
     54            this.link( this.input );
     55            this.input.link( this );
     56
     57            picker.on( 'click', 'a', function() {
     58                ui.toggle();
     59            });
     60
     61            this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
     62                self.set( color.replace( '#', '' ) );
     63            });
     64
     65            this.bind( update );
     66            update( this() );
     67        },
     68        validate: function( to ) {
     69            return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
     70        }
     71    });
     72
     73    // Change objects contained within the main customize object to Settings.
     74    api.defaultConstructor = api.Setting;
    375
    476    api.Previewer = api.Messenger.extend({
     
    122194     * ===================================================================== */
    123195
     196    api.controls = {
     197        color: api.ColorControl
     198    };
     199
    124200    $( function() {
    125201        if ( ! api.settings )
    126202            return;
    127203
    128         var controls = $('[name^="' + api.settings.prefix + '"]'),
    129             previewer, pickers, validateColor, sendSetting;
    130 
    131204        // Initialize Previewer
    132         previewer = new api.Previewer({
     205        var previewer = new api.Previewer({
    133206            iframe: '#customize-preview iframe',
    134207            form:   '#customize-controls',
     
    136209        });
    137210
    138         $.each( api.settings.values, function( id, value ) {
    139             var elements = controls.filter( '[name="' + api.settings.prefix + id + '"]' ),
    140                 setting = api.set( id, value );
    141 
    142             setting.control = new wp.customize.Element( elements );
    143 
    144             setting.control.link( setting );
    145             setting.link( setting.control );
    146 
    147             setting.bind( previewer.refresh );
    148 
    149 
     211        $.each( api.settings.controls, function( id, data ) {
     212            var constructor = api.controls[ data.control ] || api.Control;
     213            api.add( id, new constructor( id, data.value, {
     214                previewer: previewer
     215            } ) );
    150216        });
    151217
     
    162228        });
    163229
    164         // Set up color pickers
    165         pickers = $('.color-picker');
    166         validateColor = function( to ) {
    167             return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
    168         };
    169 
    170         $( '.farbtastic-placeholder', pickers ).each( function() {
    171             var picker = $(this),
    172                 text   = new api.Element( picker.siblings('input') ),
    173                 parent = picker.parent(),
    174                 toggle = parent.siblings('a'),
    175                 value  = api( parent.siblings('input').prop('name').replace( api.settings.prefix, '' ) ),
    176                 farb, update;
    177 
    178             value.validate = validateColor;
    179             text.link( value );
    180             value.link( text );
    181 
    182             farb = $.farbtastic( this, function( color ) {
    183                 value.set( color.replace( '#', '' ) );
    184             });
    185 
    186             update = function( color ) {
    187                 color = '#' + color;
    188                 toggle.css( 'background', color );
    189                 farb.setColor( color );
    190             };
    191 
    192             value.bind( update );
    193             update( value() );
    194         });
    195 
    196         $('.color-picker a').click( function(e) {
    197             $(this).siblings('div').toggle();
    198         });
    199 
    200230        // Background color uses postMessage by default
    201         api('background_color').unbind( previewer.refresh ).bind( function() {
    202             previewer.send( 'setting', [ 'background_color', this() ] );
    203         });
     231        api('background_color').method = 'postMessage';
    204232    });
    205233
Note: See TracChangeset for help on using the changeset viewer.