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
This commit is contained in:
ryan 2008-08-28 17:42:21 +00:00
parent 42ceb32c0b
commit 716393be8f
7 changed files with 467 additions and 90 deletions

View File

@ -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;
}

View File

@ -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;
$('desc').style.color = color;
$('textcolor').value = 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('#name').css('color', color);
jQuery('#desc').css('color', color);
jQuery('#textcolor').val(color);
farbtastic.setColor(color);
}
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() {
$('name').style.display = 'none';
$('desc').style.display = 'none';
$('pickcolor').style.display = 'none';
$('defaultcolor').style.display = 'none';
$('textcolor').value = 'blank';
$('hidetext').value = '<?php _e('Show Text'); ?>';
// $('hidetext').onclick = 'show_text()';
Event.observe( $('hidetext'), 'click', show_text );
function hide_picker(what) {
var update = false;
jQuery('#colorPickerDiv').each(function(){
var id = jQuery(this).attr('id');
if (id == what) {
return;
}
var display = jQuery(this).css('display');
if (display == 'block') {
jQuery(this).fadeOut(2);
}
});
}
function show_text() {
$('name').style.display = 'block';
$('desc').style.display = 'block';
$('pickcolor').style.display = 'inline';
$('defaultcolor').style.display = 'inline';
$('textcolor').value = '<?php echo HEADER_TEXTCOLOR; ?>';
$('hidetext').value = '<?php _e('Hide Text'); ?>';
Event.stopObserving( $('hidetext'), 'click', show_text );
Event.observe( $('hidetext'), 'click', hide_text );
function toggle_text(force) {
if(jQuery('#textcolor').val() == 'blank') {
//Show text
jQuery( buttons.toString() ).show();
jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>');
jQuery('#hidetext').val('<?php _e('Hide Text'); ?>');
}
else {
//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,24 +216,21 @@ Event.observe( window, 'load', hide_text );
function js_2() { ?>
<script type="text/javascript">
function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
jQuery( '#x1' ).val(coords.x1);
jQuery( '#y1' ).val(coords.y1);
jQuery( '#x2' ).val(coords.x2);
jQuery( '#y2' ).val(coords.y2);
jQuery( '#width' ).val(dimensions.width);
jQuery( '#height' ).val(dimensions.height);
}
// with a supplied ratio
Event.observe(
window,
'load',
function() {
jQuery(document).ready(function() {
var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
var ratio = xinit / yinit;
var ximg = $('upload').width;
var yimg = $('upload').height;
var ximg = jQuery('#upload').width();
var yimg = jQuery('#upload').height();
if ( yimg < yinit || ximg < xinit ) {
if ( ximg / yimg > ratio ) {
yinit = yimg;
@ -237,8 +248,7 @@ Event.observe( window, 'load', hide_text );
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>

BIN
wp-admin/images/marker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 652 B

BIN
wp-admin/images/mask.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
wp-admin/images/wheel.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

333
wp-admin/js/farbtastic.js Normal file
View File

@ -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);
}
}

View File

@ -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 );