From 380985868b6144cac65c5230ca379805fa3e37f5 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Tue, 6 Mar 2012 02:03:50 +0000
Subject: [PATCH] Theme Customizer: Add working color pickers. First pass. see
 #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20120 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/class-wp-customize-setting.php | 15 ++++++---
 wp-includes/css/customize-controls.dev.css | 34 ++++++++++++++------
 wp-includes/js/customize-controls.dev.js   | 37 ++++++++++++++++++++--
 3 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/wp-includes/class-wp-customize-setting.php b/wp-includes/class-wp-customize-setting.php
index b39a31722..67214f6ca 100644
--- a/wp-includes/class-wp-customize-setting.php
+++ b/wp-includes/class-wp-customize-setting.php
@@ -340,10 +340,17 @@ class WP_Customize_Setting {
 				break;
 			case 'color':
 				?>
-				<label><?php echo esc_html( $this->label ); ?><br/>
-					<span class="hex-prepend">#</span>
-					<input type="text" class="hex-input" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
-					<a href="#" class="pickcolor hex-color-example"></a>
+				<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(); ?> />
+						<a href="#"></a>
+						<div class="color-picker-controls">
+							<div class="farbtastic-placeholder"></div>
+							<span>#</span>
+							<input type="text" />
+						</div>
+					</div>
 				</label>
 				<?php
 				break;
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 1cadaeeba..beef0c6f8 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -226,7 +226,29 @@ body {
 	max-width: 150px;
 }
 
-.customize-section .hex-prepend {
+/*
+ * Color Picker
+ */
+
+.customize-section .color-picker {
+	margin-top: 4px;
+}
+
+.customize-section .color-picker a {
+	display: block;
+	height: 20px;
+	width: 40px;
+	border: solid 3px rgba( 0, 0, 0, 0.1 );
+	background-color: #fff;
+
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.customize-section .color-picker .color-picker-controls {
+	display: none;
+}
+.customize-section .color-picker span {
 	float: left;
 	display: block;
 	margin: 1px -2px 0 0;
@@ -240,16 +262,8 @@ body {
 	border-radius: 3px 0 0 3px;
 }
 
-.customize-section input[type="text"].hex-input {
+.customize-section .color-picker input[type="text"] {
 	-webkit-border-radius: 0 3px 3px 0;
 	border-radius: 0 3px 3px 0;
 	width: 150px;
 }
-
-.customize-section .hex-color-example {
-	border: 1px solid #dfdfdf;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	padding: 3px 14px;
-	background-color: #ef45da
-}
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index 2f3309cfd..7854a5a8b 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -126,8 +126,8 @@
 		if ( ! api.settings )
 			return;
 
-		var previewer,
-			controls = $('[name^="' + api.settings.prefix + '"]');
+		var controls = $('[name^="' + api.settings.prefix + '"]'),
+			previewer, pickers, validateColor;
 
 		// Initialize Previewer
 		previewer = new api.Previewer({
@@ -160,6 +160,39 @@
 			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;
+
+			value.validate = validateColor;
+			text.link( value );
+			value.link( text );
+
+			farb = $.farbtastic( this, function( color ) {
+				value.set( color.replace( '#', '' ) );
+			});
+
+			value.bind( function( color ) {
+				color = '#' + color;
+				toggle.css( 'background', color );
+				farb.setColor( color );
+			});
+		});
+
+		$('.color-picker a').click( function(e) {
+			$(this).siblings('div').toggle();
+		});
+
 		// Fetch prefixed settings.
 		$('[name^="' + api.settings.prefix + '"]').each( function() {
 			// console.log( this.name );