1 // ===================================================================
\r
2 // Original author: Matt Kruse <matt@mattkruse.com>
\r
3 // WWW: http://www.mattkruse.com/
\r
5 // Adapted to Rico by Matt Brown
\r
6 // ===================================================================
\r
9 Rico.ColorPicker = Class.create();
\r
11 Rico.ColorPicker.prototype = {
\r
13 initialize: function(id,options) {
\r
15 this.currentValue = "#FFFFFF";
\r
16 Object.extend(this, new Rico.Popup());
17 Object.extend(this.options, {
\r
18 showColorCode : false,
\r
22 var hexvals=['00','33','66','99','CC','FF'];
\r
23 for (var g=0; g<hexvals.length; g++)
\r
24 for (var r=0; r<hexvals.length; r++)
\r
25 for (var b=0; b<hexvals.length; b++)
\r
26 this.options.palette.push(hexvals[r]+hexvals[g]+hexvals[b]);
\r
27 Object.extend(this.options, options || {});
\r
30 atLoad : function() {
\r
31 this.container=document.createElement("div");
\r
32 this.container.style.display="none"
\r
33 this.container.className='ricoColorPicker';
\r
34 var width = this.options.cellsPerRow;
\r
35 var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
\r
36 for (var i=0; i<this.options.palette.length; i++) {
\r
37 if ((i % width) == 0) { cp_contents += "<TR>"; }
\r
38 cp_contents += '<TD BGCOLOR="'+this.options.palette[i]+'"> </TD>';
\r
39 if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0))
\r
40 cp_contents += "</TR>";
\r
42 var halfwidth = Math.floor(width/2);
\r
43 if (this.options.showColorCode)
\r
44 cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'> </TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
\r
46 cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'> </TD></TR>";
\r
47 cp_contents += "</TABLE>";
\r
48 this.container.innerHTML=cp_contents;
\r
49 document.body.appendChild(this.container);
\r
50 this.setDiv(this.container);
\r
51 this.open=this.openPopup;
\r
52 this.close=this.closePopup;
\r
53 Event.observe(this.container,"mouseover", this.highlightColor.bindAsEventListener(this), false);
\r
54 Event.observe(this.container,"click", this.selectColor.bindAsEventListener(this), false);
\r
58 selectColor: function(e) {
\r
59 if (this.returnValue) this.returnValue(this.currentValue);
\r
63 // This function runs when you move your mouse over a color block, if you have a newer browser
\r
64 highlightColor: function(e) {
\r
65 var elem = Event.element(e);
\r
66 if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
\r
67 var c=Rico.Color.createColorFromBackground(elem).toString();
\r
68 this.currentValue = c;
\r
69 Element.setStyle('colorPickerSelectedColor',{'background-color':c});
\r
70 d = $("colorPickerSelectedColorValue");
\r
71 if (d) d.innerHTML = c;
\r
75 Rico.includeLoaded('ricoColorPicker.js');