Changeset 20128

Timestamp:

03/06/2012 10:48:07 PM (14 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:

• class-wp-customize-section.php (modified) (1 diff)
• class-wp-customize-setting.php (modified) (1 diff)
• customize-controls.php (modified) (2 diffs)
• js/customize-base.dev.js (modified) (1 diff)
• js/customize-controls.dev.js (modified) (4 diffs)

trunk/wp-includes/class-wp-customize-section.php

@@ -73 +73 @@
 
                 <?php foreach ( $this->settings as $setting ) : ?>
-                <li>
+                <li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control">
                     <?php $setting->_render(); ?>
                 </li>

trunk/wp-includes/class-wp-customize-setting.php

@@ -344 +344 @@
                     <span><?php echo esc_html( $this->label ); ?></span>
                     <div class="color-picker">
-                        <input class="color-picker-value" type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
+                        <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
                         <a href="#"></a>
                         <div class="color-picker-controls">

trunk/wp-includes/customize-controls.php

@@ -50 +50 @@
         <input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
         <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
-        
+
         <div id="customize-header-actions" class="customize-section">&nbsp;</div>
 
@@ -95 +95 @@
     $scheme = is_ssl() ? 'https' : 'http';
     $settings = array(
-        'preview' => esc_url( home_url( '/', $scheme ) ),
-        'values'  => array(),
-        'prefix'  => WP_Customize_Setting::name_prefix,
+        'preview'  => esc_url( home_url( '/', $scheme ) ),
+        'controls' => array(),
+        'prefix'   => WP_Customize_Setting::name_prefix,
     );
 
     foreach ( $this->settings as $id => $setting ) {
-        $settings['values'][ $id ] = $setting->value();
+        $settings['controls'][ $id ] = array(
+            'value'   => $setting->value(),
+            'control' => $setting->control,
+        );
     }
 

trunk/wp-includes/js/customize-base.dev.js

@@ -153 +153 @@
     api.Value = api.Class.extend({
         initialize: function( initial, options ) {
-            this._value = initial;
+            this._value = initial; // @todo: potentially change this to a this.set() call.
             this.callbacks = $.Callbacks();
 

trunk/wp-includes/js/customize-controls.dev.js

@@ -1 +1 @@
 (function( exports, $ ){
     var api = wp.customize;
+
+    /*
+     * @param options
+     * - previewer - The Previewer instance to sync with.
+     * - method    - The method to use for syncing. Supports 'refresh' and 'postMessage'.
+     */
+    api.Control = api.Value.extend({
+        initialize: function( id, value, options ) {
+            var name = '[name="' + api.settings.prefix + id + '"]';
+
+            api.Value.prototype.initialize.call( this, value, options );
+
+            this.id = id;
+            this.container = $( '#customize-control-' + id );
+            this.element = this.element || new api.Element( this.container.find( name ) );
+
+            this.method = this.method || 'refresh';
+
+            this.element.link( this );
+            this.link( this.element );
+
+            this.bind( this.sync );
+        },
+        sync: function() {
+            switch ( this.method ) {
+                case 'refresh':
+                    return this.previewer.refresh();
+                case 'postMessage':
+                    return this.previewer.send( 'setting', [ this.id, this() ] );
+            }
+        }
+    });
+
+    api.ColorControl = api.Control.extend({
+        initialize: function( id, value, options ) {
+            var self = this,
+                picker, ui, text, toggle, update;
+
+            api.Control.prototype.initialize.call( this, id, value, options );
+
+            picker = this.container.find( '.color-picker' );
+            ui     = picker.find( '.color-picker-controls' );
+            toggle = picker.find( 'a' );
+            update = function( color ) {
+                color = '#' + color;
+                toggle.css( 'background', color );
+                self.farbtastic.setColor( color );
+            };
+
+            this.input = new api.Element( ui.find( 'input' ) ); // Find text input.
+
+            this.link( this.input );
+            this.input.link( this );
+
+            picker.on( 'click', 'a', function() {
+                ui.toggle();
+            });
+
+            this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
+                self.set( color.replace( '#', '' ) );
+            });
+
+            this.bind( update );
+            update( this() );
+        },
+        validate: function( to ) {
+            return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
+        }
+    });
+
+    // Change objects contained within the main customize object to Settings.
+    api.defaultConstructor = api.Setting;
 
     api.Previewer = api.Messenger.extend({
@@ -122 +194 @@
      * ===================================================================== */
 
+    api.controls = {
+        color: api.ColorControl
+    };
+
     $( function() {
         if ( ! api.settings )
             return;
 
-        var controls = $('[name^="' + api.settings.prefix + '"]'),
-            previewer, pickers, validateColor, sendSetting;
-
         // Initialize Previewer
-        previewer = new api.Previewer({
+        var previewer = new api.Previewer({
             iframe: '#customize-preview iframe',
             form:   '#customize-controls',
@@ -136 +209 @@
         });
 
-        $.each( api.settings.values, function( id, value ) {
-            var elements = controls.filter( '[name="' + api.settings.prefix + id + '"]' ),
-                setting = api.set( id, value );
-
-            setting.control = new wp.customize.Element( elements );
-
-            setting.control.link( setting );
-            setting.link( setting.control );
-
-            setting.bind( previewer.refresh );
-
-
+        $.each( api.settings.controls, function( id, data ) {
+            var constructor = api.controls[ data.control ] || api.Control;
+            api.add( id, new constructor( id, data.value, {
+                previewer: previewer
+            } ) );
         });
 
@@ -162 +228 @@
         });
 
-        // Set up color pickers
-        pickers = $('.color-picker');
-        validateColor = function( to ) {
-            return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
-        };
-
-        $( '.farbtastic-placeholder', pickers ).each( function() {
-            var picker = $(this),
-                text   = new api.Element( picker.siblings('input') ),
-                parent = picker.parent(),
-                toggle = parent.siblings('a'),
-                value  = api( parent.siblings('input').prop('name').replace( api.settings.prefix, '' ) ),
-                farb, update;
-
-            value.validate = validateColor;
-            text.link( value );
-            value.link( text );
-
-            farb = $.farbtastic( this, function( color ) {
-                value.set( color.replace( '#', '' ) );
-            });
-
-            update = function( color ) {
-                color = '#' + color;
-                toggle.css( 'background', color );
-                farb.setColor( color );
-            };
-
-            value.bind( update );
-            update( value() );
-        });
-
-        $('.color-picker a').click( function(e) {
-            $(this).siblings('div').toggle();
-        });
-
         // Background color uses postMessage by default
-        api('background_color').unbind( previewer.refresh ).bind( function() {
-            previewer.send( 'setting', [ 'background_color', this() ] );
-        });
+        api('background_color').method = 'postMessage';
     });