/**
* Really Simple Color Picker in jQuery
*
* Copyright (c) 2008 Lakshan Perera (www.laktek.com)
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
*/
(function($){
$.fn.colorPicker = function(){
if(this.length > 0) buildSelector();
return this.each(function(i) {
buildPicker(this)});
};
var selectorOwner;
var selectorShowing = false;
buildPicker = function(element){
//build color picker
control = $("
")
control.css('background-color', $(element).val());
//bind click event to color picker
control.bind("click", toggleSelector);
//add the color picker section
$(element).after(control);
//add even listener to input box
$(element).bind("change", function() {
selectedValue = toHex($(element).val());
$(element).next(".color_picker").css("background-color", selectedValue);
});
//hide the input box
$(element).hide();
};
buildSelector = function(){
selector = $("");
//add color pallete
$.each($.fn.colorPicker.defaultColors, function(i){
swatch = $("
")
swatch.css("background-color", "#" + this);
swatch.bind("click", function(e){ changeColor($(this).css("background-color")) });
swatch.bind("mouseover", function(e){
$(this).css("border-color", "#598FEF");
$("input#color_value").val(toHex($(this).css("background-color")));
});
swatch.bind("mouseout", function(e){
$(this).css("border-color", "#000");
$("input#color_value").val(toHex($(selectorOwner).css("background-color")));
});
swatch.appendTo(selector);
});
//add HEX value field
hex_field = $("");
hex_field.bind("keydown", function(event){
if(event.keyCode == 13) {changeColor($(this).val());}
if(event.keyCode == 27) {toggleSelector()}
});
$("").append(hex_field).appendTo(selector);
$("body").append(selector);
selector.hide();
};
checkMouse = function(event){
//check the click was on selector itself or on selectorOwner
var selector = "div#color_selector";
var selectorParent = $(event.target).parents(selector).length;
if(event.target == $(selector)[0] || event.target == selectorOwner || selectorParent > 0) return
hideSelector();
}
hideSelector = function(){
var selector = $("div#color_selector");
$(document).unbind("mousedown", checkMouse);
selector.hide();
selectorShowing = false
}
showSelector = function(){
var selector = $("div#color_selector");
//alert($(selectorOwner).offset().top);
selector.css({
top: $(selectorOwner).offset().top + ($(selectorOwner).outerHeight()),
left: $(selectorOwner).offset().left
});
hexColor = $(selectorOwner).prev("input").val();
$("input#color_value").val(hexColor);
selector.show();
//bind close event handler
$(document).bind("mousedown", checkMouse);
selectorShowing = true
}
toggleSelector = function(event){
selectorOwner = this;
selectorShowing ? hideSelector() : showSelector();
}
changeColor = function(value){
if(selectedValue = toHex(value)){
$(selectorOwner).css("background-color", selectedValue);
$(selectorOwner).prev("input").val(selectedValue).change();
//close the selector
hideSelector();
}
};
//converts RGB string to HEX - inspired by http://code.google.com/p/jquery-color-utils
toHex = function(color){
//valid HEX code is entered
if(color.match(/[0-9a-fA-F]{3}$/) || color.match(/[0-9a-fA-F]{6}$/)){
color = (color.charAt(0) == "#") ? color : ("#" + color);
}
//rgb color value is entered (by selecting a swatch)
else if(color.match(/^rgb\(([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5])\)$/)){
var c = ([parseInt(RegExp.$1),parseInt(RegExp.$2),parseInt(RegExp.$3)]);
var pad = function(str){
if(str.length < 2){
for(var i = 0,len = 2 - str.length ; i