1 // ===================================================================
2 // Original author: Matt Kruse <matt@mattkruse.com>
3 // WWW: http://www.mattkruse.com/
5 // Adapted to Rico by Matt Brown
6 // ===================================================================
9 Rico.ColorPicker = Class.create(
10 /** @lends Rico.ColorPicker# */
13 * @class Implements a pop-up color picker control.
16 * @param id unique identifier
17 * @param options object may contain any of the following:<dl>
18 * <dt>showColorCode</dt><dd> show hex color code as user hovers over color grid? default=false</dd>
19 * <dt>cellsPerRow </dt><dd> number of colors per row in the grid? default=18</dd>
20 * <dt>palette </dt><dd> array of 6 digit hex values, default=216 "web safe" colors</dd>
23 initialize: function(id,options) {
25 this.currentValue = "#FFFFFF";
26 Object.extend(this, new Rico.Popup());
27 Object.extend(this.options, {
28 showColorCode : false,
32 var hexvals=['00','33','66','99','CC','FF'];
33 for (var g=0; g<hexvals.length; g++) {
34 for (var r=0; r<hexvals.length; r++) {
35 for (var b=0; b<hexvals.length; b++) {
36 this.options.palette.push(hexvals[r]+hexvals[g]+hexvals[b]);
40 Object.extend(this.options, options || {});
44 this.container=document.createElement("div");
45 this.container.style.display="none";
46 this.container.className='ricoColorPicker';
47 var width = this.options.cellsPerRow;
48 var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
49 for (var i=0; i<this.options.palette.length; i++) {
50 if ((i % width) == 0) { cp_contents += "<TR>"; }
51 cp_contents += '<TD BGCOLOR="#'+this.options.palette[i]+'"> </TD>';
52 if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
53 cp_contents += "</TR>";
56 var halfwidth = Math.floor(width/2);
57 if (this.options.showColorCode) {
58 cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'> </TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
60 cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'> </TD></TR>";
62 cp_contents += "</TABLE>";
63 this.container.innerHTML=cp_contents;
64 document.body.appendChild(this.container);
65 this.setDiv(this.container);
70 this.open=this.openPopup;
72 * alias for closePopup
75 this.close=this.closePopup;
76 Event.observe(this.container,"mouseover", this.highlightColor.bindAsEventListener(this), false);
77 Event.observe(this.container,"click", this.selectColor.bindAsEventListener(this), false);
82 selectColor: function(e) {
84 if (this.returnValue) this.returnValue(this.currentValue);
88 /* This function runs when you move your mouse over a color block */
90 highlightColor: function(e) {
91 var elem = Event.element(e);
92 if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
93 var c=Rico.Color.createColorFromBackground(elem).toString();
94 this.currentValue = c;
95 Element.setStyle('colorPickerSelectedColor', {backgroundColor:c}, true);
96 var d = $("colorPickerSelectedColorValue");
97 if (d) d.innerHTML = c;
101 Rico.includeLoaded('ricoColorPicker.js');