From 37a36421838fa9205a05f41a77d856c64808a5e0 Mon Sep 17 00:00:00 2001
From: John Blackbourn <johnbillion@git.wordpress.org>
Date: Fri, 24 Oct 2014 16:31:54 +0000
Subject: [PATCH] Add the ability for a customizer control to render its
 controls via a JavaScript template. Switches the default color picker control
 to a JavaScript template. See #29572. Props celloexpressions

git-svn-id: https://develop.svn.wordpress.org/trunk@30014 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/customize.php                    |  3 +
 src/wp-admin/js/customize-controls.js         | 23 +++++-
 .../class-wp-customize-control.php            | 82 ++++++++++++++-----
 .../class-wp-customize-manager.php            | 36 ++++++++
 4 files changed, 122 insertions(+), 22 deletions(-)

diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 7828ee4e64..ed5255818e 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.php
@@ -180,6 +180,9 @@ do_action( 'customize_controls_print_scripts' );
 	<div id="customize-preview" class="wp-full-overlay-main"></div>
 	<?php
 
+	// Render control templates.
+	$wp_customize->render_control_templates();
+
 	/**
 	 * Print Customizer control scripts in the footer.
 	 *
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index fad223ee4a..812f4fac4f 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -60,7 +60,10 @@
 				}
 
 				control.setting = control.settings['default'] || null;
-				control.ready();
+				control.renderContent( function() {
+					// Don't call ready() until the content has rendered.
+					control.ready();
+				} );
 			}) );
 
 			control.elements = [];
@@ -149,6 +152,24 @@
 
 			this.setting.bind( update );
 			update( this.setting() );
+		},
+
+		/**
+		 * Render the control from its JS template, if it exists.
+		 *
+		 * The control's container must alreasy exist in the DOM.
+		 */
+		renderContent: function( callback ) {
+			var template,
+			    selector = 'customize-control-' + this.params.type + '-content',
+			    callback = callback || function(){};
+			if ( 0 !== $( '#tmpl-' + selector ).length ) {
+				template = wp.template( selector );
+				if ( template && this.container ) {
+					this.container.append( template( this.params ) );
+				}
+			}
+			callback();
 		}
 	});
 
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index 7937d2dc5f..cbb7cdde5d 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -217,8 +217,10 @@ class WP_Customize_Control {
 			$this->json['settings'][ $key ] = $setting->id;
 		}
 
-		$this->json['type'] = $this->type;
-		$this->json['active'] = $this->active();
+		$this->json['type']        = $this->type;
+		$this->json['label']       = $this->label;
+		$this->json['description'] = $this->description;
+		$this->json['active']      = $this->active();
 	}
 
 	/**
@@ -336,6 +338,8 @@ class WP_Customize_Control {
 	 * Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
 	 * Additional input types such as `email`, `url`, `number`, `hidden` and `date` are supported implicitly.
 	 *
+	 * Control content can alternately be rendered in JS. See {@see WP_Customize_Control::print_template()}.
+	 *
 	 * @since 3.4.0
 	 */
 	protected function render_content() {
@@ -443,6 +447,36 @@ class WP_Customize_Control {
 				break;
 		}
 	}
+
+	/**
+	 * Render the control's JS template.
+	 *
+	 * This function is only run for control types that have been registered with {@see WP_Customize_Manager::register_control_type()}.
+	 *
+	 * In the future, this will also print the template for the control's container element and be overridable.
+	 *
+	 * @since 4.1.0
+	 */
+	final public function print_template() {
+	        ?>
+	        <script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
+	                <?php $this->content_template(); ?>
+	        </script>
+	        <?php
+	}
+
+	/**
+	 * An Underscore (JS) template for this control's content (but not its container).
+	 *
+	 * Class variables for this control class are available in the `data` JS object;
+	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
+	 *
+	 * @see WP_Customize_Control::print_template()
+	 *
+	 * @since 4.1.0
+	 */
+	protected function content_template() {}
+
 }
 
 /**
@@ -499,33 +533,39 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 	public function to_json() {
 		parent::to_json();
 		$this->json['statuses'] = $this->statuses;
+		$this->json['defaultValue'] = $this->setting->default;
 	}
 
 	/**
-	 * Render the control's content.
+	 * Don't render the control content from PHP, as it's rendered via JS on load.
 	 *
 	 * @since 3.4.0
 	 */
-	public function render_content() {
-		$this_default = $this->setting->default;
-		$default_attr = '';
-		if ( $this_default ) {
-			if ( false === strpos( $this_default, '#' ) )
-				$this_default = '#' . $this_default;
-			$default_attr = ' data-default-color="' . esc_attr( $this_default ) . '"';
-		}
-		// The input's value gets set by JS. Don't fill it.
-		?>
-		<label>
-			<?php if ( ! empty( $this->label ) ) : ?>
-				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-			<?php endif;
-			if ( ! empty( $this->description ) ) : ?>
-				<span class="description customize-control-description"><?php echo $this->description; ?></span>
-			<?php endif; ?>
+	public function render_content() {}
 
+	/**
+	 * Render a JS template for the content of the color picker control.
+	 *
+	 * @since 4.1.0
+	 */
+	public function content_template() {
+		?>
+		<# var defaultValue = '';
+		if ( data.defaultValue ) {
+			if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
+				defaultValue = '#' + data.defaultValue;
+			}
+			defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
+		} #>
+		<label>
+			<# if ( data.label ) { #>
+				<span class="customize-control-title">{{ data.label }}</span>
+			<# } #>
+			<# if ( data.description ) { #>
+				<span class="description customize-control-description">{{ data.description }}</span>
+			<# } #>
 			<div class="customize-control-content">
-				<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>"<?php echo $default_attr; ?> />
+				<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
 			</div>
 		</label>
 		<?php
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index febd8bcc8c..17f0bad1cd 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/wp-includes/class-wp-customize-manager.php
@@ -54,6 +54,13 @@ final class WP_Customize_Manager {
 	protected $customized;
 
 	/**
+	 * Controls that may be rendered from JS templates.
+	 *
+	 * @since 4.1.0
+	 */
+	protected $registered_control_types = array();
+
+	/** 
 	 * $_POST values for Customize Settings.
 	 *
 	 * @var array
@@ -822,6 +829,32 @@ final class WP_Customize_Manager {
 	}
 
 	/**
+	 * Register a customize control type.
+	 *
+	 * Registered types are eligible to be rendered
+	 * via JS and created dynamically.
+	 *
+	 * @since 4.1.0
+	 *
+	 * @param string $control Name of a custom control which is a subclass of {@see WP_Customize_Control}.
+	 */
+	public function register_control_type( $control ) {
+		$this->registered_control_types[] = $control;
+	}
+
+	/**
+	 * Render JS templates for all registered control types.
+	 *
+	 * @since 4.1.0
+	 */
+	public function render_control_templates() {
+		foreach( $this->registered_control_types as $control_type ) {
+			$control = new $control_type( $this, 'temp', array() );
+			$control->print_template();
+		}
+	}
+
+    /** 
 	 * Helper function to compare two objects by priority.
 	 *
 	 * @since 3.4.0
@@ -927,6 +960,9 @@ final class WP_Customize_Manager {
 	 */
 	public function register_controls() {
 
+		/* Control Types (custom control classes) */
+		$this->register_control_type( 'WP_Customize_Color_Control' );
+
 		/* Site Title & Tagline */
 
 		$this->add_section( 'title_tagline', array(