WordPress.org

Make WordPress Core

Changeset 20128


Ignore:
Timestamp:
03/06/12 22:48:07 (3 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.