;(function($) {
$.fn.extend({
colorpicker: function(options) {
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
if (typeof options == "string") {
var inst = $.data(this, "colorpicker");
if(inst) inst[options].apply(inst, args);
} else if(!$.data(this, "colorpicker"))
new $.ui.colorpicker(this, options);
});
}
});
$.ui.colorpicker = function(element, options) {
//Initialize needed constants
var self = this;
this.element = $(element);
var o = this.options = $.extend({}, options);
$.data(element, "colorpicker", this);
this.element.addClass("ui-colorpicker")
.append('
')
.find('div.ui-colorpicker-color').append('
').end()
.append('
')
.find('div.ui-colorpicker-hue').append('
').end()
.append('
')
.find('div.ui-colorpicker-current').append('
').end()
.append('
')
.find('div.ui-colorpicker-values').append('
')
.find('table')
.append('R: | |
')
.append('G: | |
')
.append('B: | |
')
.append('# | |
')
.end()
.end()
;
$(element).bind("setData.colorpicker", function(event, key, value){
self.options[key] = value;
}).bind("getData.colorpicker", function(event, key){
return self.options[key];
});
this.baseColor = {r:255,g:0,b:0};
this.currentColor = {r:255,g:255,b:255};
this.lastValues = [0,0];
this.colorfieldCurrent = $('div.ui-colorpicker-current', this.element);
this.colorfieldLast = $('div.ui-colorpicker-last', this.element);
$('div.ui-colorpicker-color', this.element).slider({
handle: "div",
axis: "both",
distance: 0,
slide : function(e, ui) {
self.lastValues = [parseInt(ui.value.x * 255/100),parseInt(ui.value.y * 255/100)];
self.setGradientColor();
self.propagate("picking", e);
},
change : function(e) {
self.colorfieldLast.css("backgroundColor", 'rgb(' + self.currentColor.r + ',' + self.currentColor.g + ',' + self.currentColor.b + ')');
self.propagate("change", e);
},
stop: function(e) { self.propagate("pick", e); },
start: function(e) { self.propagate("start", e); }
});
$('div.ui-colorpicker-hue', this.element).slider({
handle: "div",
distance: 0,
slide : function(e, ui) {
self.setVertColor(parseInt(ui.value * 255 / 100));
self.setGradientColor();
self.propagate("picking", e);
},
change : function(e) {
self.colorfieldLast.css("backgroundColor", 'rgb(' + self.currentColor.r + ',' + self.currentColor.g + ',' + self.currentColor.b + ')');
self.propagate("change", e);
},
stop: function(e) { self.propagate("pick", e); },
start: function(e) { self.propagate("start", e); }
});
};
$.extend($.ui.colorpicker.prototype, {
plugins: {},
ui: function(e) {
return {
instance: this,
options: this.options,
element: this.element,
rgb: this.currentColor,
hex: (this.toHex(this.currentColor.r) + this.toHex(this.currentColor.g) + this.toHex(this.currentColor.b)).toUpperCase()
};
},
propagate: function(n,e) {
$.ui.plugin.call(this, n, [e, this.ui()]);
return this.element.triggerHandler(n == "pick" ? n : "pick"+n, [e, this.ui()], this.options[n]);
},
destroy: function() {
if(!$.data(this.element[0], 'colorpicker')) return;
this.element
.removeClass("ui-colorpicker ui-colorpicker-disabled")
.removeData("colorpicker")
.unbind(".colorpicker");
},
enable: function() {
this.element.removeClass("ui-colorpicker-disabled");
this.options.disabled = false;
},
disable: function() {
this.element.addClass("ui-colorpicker-disabled");
this.options.disabled = true;
},
setVertColor: function(indic){
var n=256/6, j=256/n, C=indic, c=C%n;
this.baseColor = {
r : parseInt(C