Use farbtastic for custom header color picker. Props rmmccue. see #5591

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

wp-admin/css/farbtastic.css

@@ -0,0 +1,32 @@
+.farbtastic {
+  position: relative;
+}
+.farbtastic * {
+  position: absolute;
+  cursor: crosshair;
+}
+.farbtastic, .farbtastic .wheel {
+  width: 195px;
+  height: 195px;
+}
+.farbtastic .color, .farbtastic .overlay {
+  top: 47px;
+  left: 47px;
+  width: 101px;
+  height: 101px;
+}
+.farbtastic .wheel {
+  background: url(../images/wheel.png) no-repeat;
+  width: 195px;
+  height: 195px;
+}
+.farbtastic .overlay {
+  background: url(../images/mask.png) no-repeat;
+}
+.farbtastic .marker {
+  width: 17px;
+  height: 17px;
+  margin: -8px 0 0 -8px;
+  overflow: hidden; 
+  background: url(../images/marker.png) no-repeat;
+}

wp-admin/custom-header.php

@@ -44,6 +44,7 @@ class Custom_Image_Header {
 		$page = add_theme_page(__('Custom Image Header'), __('Custom Image Header'), 'edit_themes', 'custom-header', array(&$this, 'admin_page'));
 
 		add_action("admin_print_scripts-$page", array(&$this, 'js_includes'));
+		add_action("admin_print_styles-$page", array(&$this, 'css_includes'));
 		add_action("admin_head-$page", array(&$this, 'take_action'), 50);
 		add_action("admin_head-$page", array(&$this, 'js'), 50);
 		add_action("admin_head-$page", $this->admin_header_callback, 51);
@@ -76,11 +77,24 @@ class Custom_Image_Header {
 		$step = $this->step();
 
 		if ( 1 == $step )
-			wp_enqueue_script('colorpicker');
+			wp_enqueue_script('farbtastic');
 		elseif ( 2 == $step )
 			wp_enqueue_script('cropper');
 	}
 
+	/**
+	 * Setup the enqueue for the CSS files
+	 *
+	 * @since 2.7
+	 */
+	function css_includes() {
+		$step = $this->step();
+
+		if ( 1 == $step ) {
+			wp_enqueue_style('farbtastic');
+		}
+	}
+
 	/**
 	 * Execute custom header modification.
 	 *
@@ -123,72 +137,72 @@ class Custom_Image_Header {
 	 */
 	function js_1() { ?>
 <script type="text/javascript">
-	var cp = new ColorPicker();
+	var buttons = ['#name', '#desc', '#pickcolor', '#defaultcolor'];
+	var farbtastic;
 
 	function pickColor(color) {
-		$('name').style.color = color;
+		jQuery('#name').css('color', color);
-		$('desc').style.color = color;
+		jQuery('#desc').css('color', color);
-		$('textcolor').value = color;
+		jQuery('#textcolor').val(color);
-	}
+		farbtastic.setColor(color);
-	function PopupWindow_hidePopup(magicword) {
-		if ( magicword != 'prettyplease' )
-			return false;
-		if (this.divName != null) {
-			if (this.use_gebi) {
-				document.getElementById(this.divName).style.visibility = "hidden";
-			}
-			else if (this.use_css) {
-				document.all[this.divName].style.visibility = "hidden";
-			}
-			else if (this.use_layers) {
-				document.layers[this.divName].visibility = "hidden";
-			}
-		}
-		else {
-			if (this.popupWindow && !this.popupWindow.closed) {
-				this.popupWindow.close();
-				this.popupWindow = null;
-			}
-		}
-		return false;
-	}
-	function colorSelect(t,p) {
-		if ( cp.p == p && document.getElementById(cp.divName).style.visibility != "hidden" ) {
-			cp.hidePopup('prettyplease');
-		} else {
-			cp.p = p;
-			cp.select(t,p);
-		}
 	}
+	
+	jQuery(document).ready(function() {
+		jQuery('#pickcolor').click(function() {
+			jQuery('#colorPickerDiv').show();
+		});
+		
+		jQuery('#hidetext').click(function() {
+			toggle_text();
+		});
+		
+		farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
+		pickColor('#<?php echo get_theme_mod('header_textcolor', HEADER_TEXTCOLOR); ?>');
+		
+		<?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
+		toggle_text();
+		<?php } ?>
+	});
+	
+	jQuery(document).mousedown(function(){
+		// Make the picker disappear, since we're using it in an independant div
+		hide_picker();
+	});
+
 	function colorDefault() {
 		pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');
 	}
 
-	function hide_text() {
+	function hide_picker(what) {
-		$('name').style.display = 'none';
+		var update = false;
-		$('desc').style.display = 'none';
+		jQuery('#colorPickerDiv').each(function(){
-		$('pickcolor').style.display = 'none';
+			var id = jQuery(this).attr('id');
-		$('defaultcolor').style.display = 'none';
+			if (id == what) {
-		$('textcolor').value = 'blank';
+				return;
-		$('hidetext').value = '<?php _e('Show Text'); ?>';
+			}
-//		$('hidetext').onclick = 'show_text()';
+			var display = jQuery(this).css('display');
-		Event.observe( $('hidetext'), 'click', show_text );
+			if (display == 'block') {
+				jQuery(this).fadeOut(2);
+			}
+		});
 	}
 
-	function show_text() {
+	function toggle_text(force) {
-		$('name').style.display = 'block';
+		if(jQuery('#textcolor').val() == 'blank') {
-		$('desc').style.display = 'block';
+			//Show text
-		$('pickcolor').style.display = 'inline';
+			jQuery( buttons.toString() ).show();
-		$('defaultcolor').style.display = 'inline';
+			jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>');
-		$('textcolor').value = '<?php echo HEADER_TEXTCOLOR; ?>';
+			jQuery('#hidetext').val('<?php _e('Hide Text'); ?>');
-		$('hidetext').value = '<?php _e('Hide Text'); ?>';
+		}
-		Event.stopObserving( $('hidetext'), 'click', show_text );
+		else {
-		Event.observe( $('hidetext'), 'click', hide_text );
+			//Hide text
+			jQuery( buttons.toString() ).hide();
+			jQuery('#textcolor').val('blank');
+			jQuery('#hidetext').val('<?php _e('Show Text'); ?>');
+		}
 	}
 
-	<?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
+
-Event.observe( window, 'load', hide_text );
-	<?php } ?>
 
 </script>
 <?php
@@ -202,43 +216,39 @@ Event.observe( window, 'load', hide_text );
 	function js_2() { ?>
 <script type="text/javascript">
 	function onEndCrop( coords, dimensions ) {
-		$( 'x1' ).value = coords.x1;
+		jQuery( '#x1' ).val(coords.x1);
-		$( 'y1' ).value = coords.y1;
+		jQuery( '#y1' ).val(coords.y1);
-		$( 'x2' ).value = coords.x2;
+		jQuery( '#x2' ).val(coords.x2);
-		$( 'y2' ).value = coords.y2;
+		jQuery( '#y2' ).val(coords.y2);
-		$( 'width' ).value = dimensions.width;
+		jQuery( '#width' ).val(dimensions.width);
-		$( 'height' ).value = dimensions.height;
+		jQuery( '#height' ).val(dimensions.height);
 	}
 
 	// with a supplied ratio
-	Event.observe(
+	jQuery(document).ready(function() {
-		window,
+		var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
-		'load',
+		var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
-		function() {
+		var ratio = xinit / yinit;
-			var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
+		var ximg = jQuery('#upload').width();
-			var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
+		var yimg = jQuery('#upload').height();
-			var ratio = xinit / yinit;
+		if ( yimg < yinit || ximg < xinit ) {
-			var ximg = $('upload').width;
+			if ( ximg / yimg > ratio ) {
-			var yimg = $('upload').height;
+				yinit = yimg;
-			if ( yimg < yinit || ximg < xinit ) {
+				xinit = yinit * ratio;
-				if ( ximg / yimg > ratio ) {
+			} else {
-					yinit = yimg;
+				xinit = ximg;
-					xinit = yinit * ratio;
+				yinit = xinit / ratio;
-				} else {
-					xinit = ximg;
-					yinit = xinit / ratio;
-				}
 			}
-			new Cropper.Img(
-				'upload',
-				{
-					ratioDim: { x: xinit, y: yinit },
-					displayOnInit: true,
-					onEndCrop: onEndCrop
-				}
-			)
 		}
-	);
+		new Cropper.Img(
+			'upload',
+			{
+				ratioDim: { x: xinit, y: yinit },
+				displayOnInit: true,
+				onEndCrop: onEndCrop
+			}
+		)
+	});
 </script>
 <?php
 	}
@@ -266,12 +276,12 @@ Event.observe( window, 'load', hide_text );
 <?php if ( !defined( 'NO_HEADER_TEXT' ) ) { ?>
 <form method="post" action="<?php echo admin_url('themes.php?page=custom-header&amp;updated=true') ?>">
 <input type="button" value="<?php _e('Hide Text'); ?>" onclick="hide_text()" id="hidetext" />
-<input type="button" value="<?php _e('Select a Text Color'); ?>" onclick="colorSelect($('textcolor'), 'pickcolor')" id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" />
+<input type="button" value="<?php _e('Select a Text Color'); ?>" id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" />
 <?php wp_nonce_field('custom-header') ?>
 <input type="hidden" name="textcolor" id="textcolor" value="#<?php attribute_escape(header_textcolor()) ?>" /><input name="submit" type="submit" value="<?php _e('Save Changes'); ?>" /></form>
 <?php } ?>
 
-<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;visibility:hidden;"> </div>
+<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div>
 </div>
 <div class="wrap">
 <h2><?php _e('Upload New Header Image'); ?></h2><p><?php _e('Here you can upload a custom header image to be shown at the top of your blog instead of the default one. On the next screen you will be able to crop the image.'); ?></p>

wp-admin/js/farbtastic.js

@@ -0,0 +1,333 @@
+// $Id: farbtastic.js,v 1.2 2007/01/08 22:53:01 unconed Exp $
+// Farbtastic 1.2
+
+var farbtastic_click = false;
+
+jQuery.fn.farbtastic = function (callback) {
+  jQuery.farbtastic(this, callback);
+  return this;
+};
+
+jQuery.farbtastic = function (container, callback) {
+  var container = jQuery(container).get(0);
+  return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
+}
+
+jQuery._farbtastic = function (container, callback) {
+  // Store farbtastic object
+  var fb = this;
+
+  // Insert markup
+  jQuery(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
+  var e = jQuery('.farbtastic', container);
+  fb.wheel = jQuery('.wheel', container).get(0);
+  // Dimensions
+  fb.radius = 84;
+  fb.square = 100;
+  fb.width = 194;
+  
+  // Fix background PNGs in IE6
+  if (navigator.appVersion.match(/MSIE [0-6]\./)) {
+    jQuery('*', e).each(function () {
+      if (this.currentStyle.backgroundImage != 'none') {
+        var image = this.currentStyle.backgroundImage;
+        image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
+        jQuery(this).css({
+          'backgroundImage': 'none',
+          'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
+        });
+      }
+    });
+  }
+
+  /**
+   * Link to the given element(s) or callback.
+   */
+  fb.linkTo = function (callback) {
+    // Unbind previous nodes
+    if (typeof fb.callback == 'object') {
+      jQuery(fb.callback).unbind('keyup', fb.updateValue);
+    }
+
+    // Reset color
+    fb.color = null;
+
+    // Bind callback or elements
+    if (typeof callback == 'function') {
+      fb.callback = callback;
+    }
+    else if (typeof callback == 'object' || typeof callback == 'string') {
+      fb.callback = jQuery(callback);
+      fb.callback.bind('keyup', fb.updateValue);
+      if (fb.callback.get(0).value) {
+        fb.setColor(fb.callback.get(0).value);
+      }
+    }
+    return this;
+  }
+  fb.updateValue = function (event) {
+    if (this.value && this.value != fb.color) {
+      fb.setColor(this.value);
+    }
+  }
+
+  /**
+   * Change color with HTML syntax #123456
+   */
+  fb.setColor = function (color) {
+    var unpack = fb.unpack(color);
+    if (fb.color != color && unpack) {
+      fb.color = color;
+      fb.rgb = unpack;
+      fb.hsl = fb.RGBToHSL(fb.rgb);
+      fb.updateDisplay();
+    }
+    return this;
+  }
+
+  /**
+   * Change color with HSL triplet [0..1, 0..1, 0..1]
+   */
+  fb.setHSL = function (hsl) {
+    fb.hsl = hsl;
+    fb.rgb = fb.HSLToRGB(hsl);
+    fb.color = fb.pack(fb.rgb);
+    fb.updateDisplay();
+    return this;
+  }
+
+  /////////////////////////////////////////////////////
+
+  /**
+   * Retrieve the coordinates of the given event relative to the center
+   * of the widget.
+   */
+  fb.widgetCoords = function (event) {
+    var x, y;
+    var el = event.target || event.srcElement;
+    var reference = fb.wheel;
+
+    if (typeof event.offsetX != 'undefined') {
+      // Use offset coordinates and find common offsetParent
+      var pos = { x: event.offsetX, y: event.offsetY };
+
+      // Send the coordinates upwards through the offsetParent chain.
+      var e = el;
+      while (e) {
+        e.mouseX = pos.x;
+        e.mouseY = pos.y;
+        pos.x += e.offsetLeft;
+        pos.y += e.offsetTop;
+        e = e.offsetParent;
+      }
+
+      // Look for the coordinates starting from the wheel widget.
+      var e = reference;
+      var offset = { x: 0, y: 0 }
+      while (e) {
+        if (typeof e.mouseX != 'undefined') {
+          x = e.mouseX - offset.x;
+          y = e.mouseY - offset.y;
+          break;
+        }
+        offset.x += e.offsetLeft;
+        offset.y += e.offsetTop;
+        e = e.offsetParent;
+      }
+
+      // Reset stored coordinates
+      e = el;
+      while (e) {
+        e.mouseX = undefined;
+        e.mouseY = undefined;
+        e = e.offsetParent;
+      }
+    }
+    else {
+      // Use absolute coordinates
+      var pos = fb.absolutePosition(reference);
+      x = (event.pageX || 0*(event.clientX + jQuery('html').get(0).scrollLeft)) - pos.x;
+      y = (event.pageY || 0*(event.clientY + jQuery('html').get(0).scrollTop)) - pos.y;
+    }
+    // Subtract distance to middle
+    return { x: x - fb.width / 2, y: y - fb.width / 2 };
+  }
+
+  /**
+   * Mousedown handler
+   */
+  fb.mousedown = function (event) {
+	farbtastic_click = true;
+    // Capture mouse
+    if (!document.dragging) {
+      jQuery(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
+      document.dragging = true;
+    }
+
+    // Check which area is being dragged
+    var pos = fb.widgetCoords(event);
+    fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
+
+    // Process
+    fb.mousemove(event);
+    return false;
+  }
+
+  /**
+   * Mousemove handler
+   */
+  fb.mousemove = function (event) {
+    // Get coordinates relative to color picker center
+    var pos = fb.widgetCoords(event);
+
+    // Set new HSL parameters
+    if (fb.circleDrag) {
+      var hue = Math.atan2(pos.x, -pos.y) / 6.28;
+      if (hue < 0) hue += 1;
+      fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
+    }
+    else {
+      var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
+      var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
+      fb.setHSL([fb.hsl[0], sat, lum]);
+    }
+    return false;
+  }
+
+  /**
+   * Mouseup handler
+   */
+  fb.mouseup = function () {
+    // Uncapture mouse
+	farbtastic_click = false;
+    jQuery(document).unbind('mousemove', fb.mousemove);
+    jQuery(document).unbind('mouseup', fb.mouseup);
+    document.dragging = false;
+  }
+
+  /**
+   * Update the markers and styles
+   */
+  fb.updateDisplay = function () {
+    // Markers
+    var angle = fb.hsl[0] * 6.28;
+    jQuery('.h-marker', e).css({
+      left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
+      top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
+    });
+
+    jQuery('.sl-marker', e).css({
+      left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
+      top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
+    });
+
+    // Saturation/Luminance gradient
+    jQuery('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
+
+    // Linked elements or callback
+    if (typeof fb.callback == 'object') {
+      // Set background/foreground color
+      jQuery(fb.callback).css({
+        backgroundColor: fb.color,
+        color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
+      });
+
+      // Change linked value
+      jQuery(fb.callback).each(function() {
+        if (this.value && this.value != fb.color) {
+          this.value = fb.color;
+        }
+      });
+    }
+    else if (typeof fb.callback == 'function') {
+      fb.callback.call(fb, fb.color);
+    }
+  }
+
+  /**
+   * Get absolute position of element
+   */
+  fb.absolutePosition = function (el) {
+    var r = { x: el.offsetLeft, y: el.offsetTop };
+    // Resolve relative to offsetParent
+    if (el.offsetParent) {
+      var tmp = fb.absolutePosition(el.offsetParent);
+      r.x += tmp.x;
+      r.y += tmp.y;
+    }
+    return r;
+  };
+
+  /* Various color utility functions */
+  fb.pack = function (rgb) {
+    var r = Math.round(rgb[0] * 255);
+    var g = Math.round(rgb[1] * 255);
+    var b = Math.round(rgb[2] * 255);
+    return '#' + (r < 16 ? '0' : '') + r.toString(16) +
+           (g < 16 ? '0' : '') + g.toString(16) +
+           (b < 16 ? '0' : '') + b.toString(16);
+  }
+
+  fb.unpack = function (color) {
+    if (color.length == 7) {
+      return [parseInt('0x' + color.substring(1, 3)) / 255,
+        parseInt('0x' + color.substring(3, 5)) / 255,
+        parseInt('0x' + color.substring(5, 7)) / 255];
+    }
+    else if (color.length == 4) {
+      return [parseInt('0x' + color.substring(1, 2)) / 15,
+        parseInt('0x' + color.substring(2, 3)) / 15,
+        parseInt('0x' + color.substring(3, 4)) / 15];
+    }
+  }
+
+  fb.HSLToRGB = function (hsl) {
+    var m1, m2, r, g, b;
+    var h = hsl[0], s = hsl[1], l = hsl[2];
+    m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
+    m1 = l * 2 - m2;
+    return [this.hueToRGB(m1, m2, h+0.33333),
+        this.hueToRGB(m1, m2, h),
+        this.hueToRGB(m1, m2, h-0.33333)];
+  }
+
+  fb.hueToRGB = function (m1, m2, h) {
+    h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
+    if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+    if (h * 2 < 1) return m2;
+    if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
+    return m1;
+  }
+
+  fb.RGBToHSL = function (rgb) {
+    var min, max, delta, h, s, l;
+    var r = rgb[0], g = rgb[1], b = rgb[2];
+    min = Math.min(r, Math.min(g, b));
+    max = Math.max(r, Math.max(g, b));
+    delta = max - min;
+    l = (min + max) / 2;
+    s = 0;
+    if (l > 0 && l < 1) {
+      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
+    }
+    h = 0;
+    if (delta > 0) {
+      if (max == r && max != g) h += (g - b) / delta;
+      if (max == g && max != b) h += (2 + (b - r) / delta);
+      if (max == b && max != r) h += (4 + (r - g) / delta);
+      h /= 6;
+    }
+    return [h, s, l];
+  }
+
+  // Install mousedown handler (the others are set on the document on-demand)
+  jQuery('*', e).mousedown(fb.mousedown);
+
+    // Init color
+  fb.setColor('#000000');
+
+  // Set linked elements/callback
+  if (callback) {
+    fb.linkTo(callback);
+  }
+}

wp-includes/script-loader.php

@@ -211,6 +211,7 @@ function wp_default_scripts( &$scripts ) {
 			'plugin_information' => __('Plugin Information:')
 		) );
 
+		$scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
 	}
 }
 
@@ -245,6 +246,7 @@ function wp_default_styles( &$styles ) {
 	$styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css', array(), '20080613' );
 	$styles->add( 'login', '/wp-admin/css/login.css' );
 	$styles->add( 'plugin-install', '/wp-admin/css/plugin-install.css' );
+	$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' );
 
 	foreach ( $rtl_styles as $rtl_style )
 		$styles->add_data( $rtl_style, 'rtl', true );