mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-25 06:14:58 +02:00
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
parent
42ceb32c0b
commit
716393be8f
32
wp-admin/css/farbtastic.css
Normal file
32
wp-admin/css/farbtastic.css
Normal 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;
|
||||
}
|
||||
|
|
@ -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,43 +216,39 @@ 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() {
|
||||
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;
|
||||
if ( yimg < yinit || ximg < xinit ) {
|
||||
if ( ximg / yimg > ratio ) {
|
||||
yinit = yimg;
|
||||
xinit = yinit * ratio;
|
||||
} else {
|
||||
xinit = ximg;
|
||||
yinit = xinit / ratio;
|
||||
}
|
||||
jQuery(document).ready(function() {
|
||||
var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
|
||||
var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
|
||||
var ratio = xinit / yinit;
|
||||
var ximg = jQuery('#upload').width();
|
||||
var yimg = jQuery('#upload').height();
|
||||
if ( yimg < yinit || ximg < xinit ) {
|
||||
if ( ximg / yimg > ratio ) {
|
||||
yinit = yimg;
|
||||
xinit = yinit * 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&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
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
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
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
333
wp-admin/js/farbtastic.js
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 );
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user