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.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20128 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -72,7 +72,7 @@ class WP_Customize_Section {
 				<?php endif; ?>
 
 				<?php foreach ( $this->settings as $setting ) : ?>
-				<li>
+				<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control">
 					<?php $setting->_render(); ?>
 				</li>
 				<?php endforeach; ?>

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

@@ -343,7 +343,7 @@ class WP_Customize_Setting {
 				<label>
 					<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">
 							<div class="farbtastic-placeholder"></div>

wp-includes/customize-controls.php

@@ -95,12 +95,15 @@ do_action( 'customize_controls_print_scripts' );
 	$scheme = is_ssl() ? 'https' : 'http';
 	$settings = array(
 		'preview'  => esc_url( home_url( '/', $scheme ) ),
-		'values'  => array(),
+		'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,
+		);
 	}
 
 	?>

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

@@ -152,7 +152,7 @@ if ( typeof wp === 'undefined' )
 
 	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();
 
 			$.extend( this, options || {} );

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

@@ -1,6 +1,78 @@
 (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({
 		refreshBuffer: 250,
 
@@ -121,32 +193,26 @@
 	 * Ready.
 	 * ===================================================================== */
 
+	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',
 			url:    api.settings.preview
 		});
 
-		$.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
+			} ) );
 		});
 
 		// Temporary accordion code.
@@ -161,46 +227,8 @@
 			return false;
 		});
 
-		// 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';
 	});
 
 })( wp, jQuery );