New color picker, props mattwiebe. see #21206.

Replaces Farbtastic. May change further in response to user testing.



git-svn-id: http://core.svn.wordpress.org/trunk@22030 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/color-picker.js

@@ -0,0 +1,119 @@
+( function( $, undef ){
+
+	// html stuff
+	var _before = '<a tabindex="0" class="wp-color-result" />';
+	var _after = '<div class="wp-picker-holder" />';
+	var _wrap = '<div class="wp-picker-container" />';
+	var _button = '<input type="button" class="button button-tiny hidden" />';
+
+	// jQuery UI Widget constructor
+	var ColorPicker = {
+		options: {
+			defaultColor: false,
+			change: false,
+			clear: false,
+			hide: true
+		},
+		_create: function() {
+			// bail early for IE < 8
+			if ( $.browser.msie && parseInt( $.browser.version, 10 ) < 8 )
+				return;
+			var self = this;
+			var el = self.element;
+			$.extend( self.options, el.data() );
+
+			self.initialValue = el.val();
+
+			// Set up HTML structure, hide things
+			el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
+			self.wrap = el.parent();
+			self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick ).attr( "data-current", wpColorPickerL10n.current );
+			self.pickerContainer = $( _after ).insertAfter( el );
+			self.button = $( _button );
+
+			if ( self.options.defaultColor )
+				self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
+			else
+				self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
+
+			self.button.insertAfter( el );
+
+			el.iris( {
+				target: self.pickerContainer,
+				hide: true,
+				change: function( event, ui ) {
+					self.toggler.css( { backgroundColor: ui.color.toString() } );
+					// check for a custom cb
+					if ( $.isFunction( self.options.change ) )
+						self.options.change.call( this, event, ui );
+				}
+			} );
+			el.val( self.initialValue );
+			self._addListeners();
+			if ( ! self.options.hide )
+				self.toggler.click();
+		},
+		_addListeners: function() {
+			var self = this;
+
+			self.toggler.click( function( event ){
+				event.stopPropagation();
+				self.element.toggle().iris( 'toggle' );
+				self.button.toggleClass('hidden');
+				self.toggler.toggleClass( 'wp-picker-open' );
+
+				// close picker when you click outside it
+				if ( self.toggler.hasClass( 'wp-picker-open' ) )
+					$( "body" ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener );
+				else
+					$( "body" ).off( 'click', self._bodyListener );
+			});
+
+			self.element.change(function( event ) {
+				var me = $(this),
+					val = me.val();
+				// Empty = clear
+				if ( val === '' || val === '#' ) {
+					self.toggler.css('backgroundColor', '');
+					// fire clear callback if we have one
+					if ( $.isFunction( self.options.clear ) )
+						self.options.clear.call( this, event );
+				}
+			});
+
+			// open a keyboard-focused closed picker with space or enter
+			$( document ).keydown( function( e ) {
+				if ( self.toggler.is( ':focus' ) && ( e.keyCode === 13 || e.keyCode === 32 ) ) {
+					e.preventDefault();
+					self.toggler.trigger('click').next().focus();
+				}
+			});
+
+			self.button.click( function( event ) {
+				var me = $(this);
+				if ( me.hasClass( 'wp-picker-clear' ) ) {
+					self.element.val( '' );
+					self.toggler.css('backgroundColor', '');
+					if ( $.isFunction( self.options.clear ) )
+						self.options.clear.call( this, event );
+				} else if ( me.hasClass( 'wp-picker-default' ) ) {
+					self.element.val( self.options.defaultColor ).change();
+				}
+			});
+		},
+		_bodyListener: function( event ) {
+			if ( ! event.data.wrap.find( event.target ).length )
+					event.data.toggler.click();
+		},
+		// $("#input").wpColorPicker('color') returns the current color
+		// $("#input").wpColorPicker('color', '#bada55') to set
+		color: function( newColor ) {
+			if ( newColor === undef )
+				return this.element.iris( "option", "color" );
+
+			this.element.iris( "option", "color", newColor );
+		}
+	}
+
+	$.widget( 'wp.wpColorPicker', ColorPicker );
+}( jQuery ) );

wp-admin/js/custom-background.js

@@ -1,65 +1,23 @@
-var farbtastic, pickColor;
-
 (function($) {
 
-	var defaultColor = '';
-
-	pickColor = function(color) {
-		farbtastic.setColor(color);
-		$('#background-color').val(color);
-		$('#custom-background-image').css('background-color', color);
-		// If we have a default color, and they match, then we need to hide the 'Default' link.
-		// Otherwise, we hide the 'Clear' link when it is empty.
-		if ( ( defaultColor && color === defaultColor ) || ( ! defaultColor && ( '' === color || '#' === color ) ) )
-			$('#clearcolor').hide();
-		else
-			$('#clearcolor').show();
-	}
-
 	$(document).ready(function() {
+		var bgImage = $("#custom-background-image");
 
-		defaultColor = $('#defaultcolor').val();
-
-		$('#pickcolor').click(function() {
-			$('#colorPickerDiv').show();
-			return false;
-		});
-
-		$('#clearcolor a').click( function(e) {
-			pickColor( defaultColor );
-			e.preventDefault();
-		});
-
-		$('#background-color').keyup(function() {
-			var _hex = $('#background-color').val(), hex = _hex;
-			if ( hex.charAt(0) != '#' )
-				hex = '#' + hex;
-			hex = hex.replace(/[^#a-fA-F0-9]+/, '');
-			if ( hex != _hex )
-				$('#background-color').val(hex);
-			if ( hex.length == 4 || hex.length == 7 )
-				pickColor( hex );
+		$('#background-color').wpColorPicker({
+			change: function( event, ui ) {
+				bgImage.css('background-color', ui.color.toString());
+			},
+			clear: function() {
+				bgImage.css('background-color', '');
+			}
 		});
 
 		$('input[name="background-position-x"]').change(function() {
-			$('#custom-background-image').css('background-position', $(this).val() + ' top');
+			bgImage.css('background-position', $(this).val() + ' top');
 		});
 
 		$('input[name="background-repeat"]').change(function() {
-			$('#custom-background-image').css('background-repeat', $(this).val());
-		});
-
-		farbtastic = $.farbtastic('#colorPickerDiv', function(color) {
-			pickColor(color);
-		});
-		pickColor($('#background-color').val());
-
-		$(document).mousedown(function(){
-			$('#colorPickerDiv').each(function(){
-				var display = $(this).css('display');
-				if ( display == 'block' )
-					$(this).fadeOut(2);
-			});
+			bgImage.css('background-repeat', $(this).val());
 		});
 	});
 

wp-admin/js/customize-controls.js

@@ -109,27 +109,16 @@
 	api.ColorControl = api.Control.extend({
 		ready: function() {
 			var control = this,
-				rhex, spot, input, text, update;
+				picker = this.container.find('.color-picker-hex');
 
-			rhex   = /^#([A-Fa-f0-9]{3}){0,2}$/;
-			spot   = this.container.find('.dropdown-content');
-			input  = new api.Element( this.container.find('.color-picker-hex') );
-			update = function( color ) {
-				spot.css( 'background', color );
-				control.farbtastic.setColor( color );
-			};
-
-			this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );
-
-			// Only pass through values that are valid hexes/empty.
-			input.sync( this.setting ).validate = function( to ) {
-				return rhex.test( to ) ? to : null;
-			};
-
-			this.setting.bind( update );
-			update( this.setting() );
-
-			this.dropdownInit();
+			picker.val( control.setting() ).wpColorPicker({
+				change: function( event, options ) {
+					control.setting.set( picker.wpColorPicker('color') );
+ 				},
+ 				clear: function() {
+ 					control.setting.set( false );
+ 				}
+			});
 		}
 	});