2 * (c) 2005-2009 Richard Cowin (http://openrico.org)
3 * (c) 2005-2009 Matt Brown (http://dowdybrown.com)
5 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
6 * file except in compliance with the License. You may obtain a copy of the License at
8 * http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software distributed under the
11 * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
12 * either express or implied. See the License for the specific language governing permissions
13 * and limitations under the License.
16 // ===================================================================
17 // Adapted to Rico by Matt Brown from code
18 // published by Matt Kruse http://www.mattkruse.com/
19 // ===================================================================
21 Rico.ColorPicker = function(id,options) {
22 this.initialize(id,options);
25 Rico.ColorPicker.prototype = {
27 * @class Implements a pop-up color picker control.
30 * @param id unique identifier
31 * @param options object may contain any of the following:<dl>
32 * <dt>showColorCode</dt><dd> show hex color code as user hovers over color grid? default=false</dd>
33 * <dt>cellsPerRow </dt><dd> number of colors per row in the grid? default=18</dd>
34 * <dt>palette </dt><dd> array of 6 digit hex values, default=216 "web safe" colors</dd>
37 initialize: function(id,options) {
39 this.currentValue = "#FFFFFF";
40 Rico.extend(this, new Rico.Popup());
41 Rico.extend(this.options, {
42 showColorCode : false,
46 var hexvals=['00','33','66','99','CC','FF'];
47 for (var g=0; g<hexvals.length; g++) {
48 for (var r=0; r<hexvals.length; r++) {
49 for (var b=0; b<hexvals.length; b++) {
50 this.options.palette.push(hexvals[r]+hexvals[g]+hexvals[b]);
54 Rico.extend(this.options, options || {});
58 this.createContainer();
59 this.content.className='ricoColorPicker';
60 var width = this.options.cellsPerRow;
61 var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
62 for (var i=0; i<this.options.palette.length; i++) {
63 if ((i % width) == 0) { cp_contents += "<TR>"; }
64 cp_contents += '<TD BGCOLOR="#'+this.options.palette[i]+'"> </TD>';
65 if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
66 cp_contents += "</TR>";
69 var halfwidth = Math.floor(width/2);
70 if (this.options.showColorCode) {
71 cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'> </TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
73 cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'> </TD></TR>";
75 cp_contents += "</TABLE>";
76 this.content.innerHTML=cp_contents;
81 this.open=this.openPopup;
83 * alias for closePopup
86 this.close=this.closePopup;
87 Rico.eventBind(this.container,"mouseover", Rico.eventHandle(this,'highlightColor'), false);
88 Rico.eventBind(this.container,"click", Rico.eventHandle(this,'selectColor'), false);
93 selectColor: function(e) {
95 if (this.returnValue) this.returnValue(this.currentValue);
99 /* This function runs when you move your mouse over a color block */
101 highlightColor: function(e) {
102 var elem = Rico.eventElement(e);
103 if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
104 var c=Rico.Color.createColorFromBackground(elem).toString();
105 this.currentValue = c;
106 Rico.setStyle('colorPickerSelectedColor', {backgroundColor:c});
107 var d = Rico.$("colorPickerSelectedColorValue");
108 if (d) d.innerHTML = c;