2 * (c) 2005-2011 Richard Cowin (http://openrico.org)
3 * (c) 2005-2011 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 || {});
56 Rico.onLoad(function() { self.atLoad(); })
60 this.createContainer();
61 this.content.className='ricoColorPicker';
62 var width = this.options.cellsPerRow;
63 var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
64 for (var i=0; i<this.options.palette.length; i++) {
65 if ((i % width) == 0) { cp_contents += "<TR>"; }
66 cp_contents += '<TD BGCOLOR="#'+this.options.palette[i]+'"> </TD>';
67 if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
68 cp_contents += "</TR>";
71 var halfwidth = Math.floor(width/2);
72 if (this.options.showColorCode) {
73 cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'> </TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
75 cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'> </TD></TR>";
77 cp_contents += "</TABLE>";
78 this.content.innerHTML=cp_contents;
83 this.open=this.openPopup;
85 * alias for closePopup
88 this.close=this.closePopup;
89 Rico.eventBind(this.container,"mouseover", Rico.eventHandle(this,'highlightColor'), false);
90 Rico.eventBind(this.container,"click", Rico.eventHandle(this,'selectColor'), false);
95 selectColor: function(e) {
97 if (this.returnValue) this.returnValue(this.currentValue);
101 /* This function runs when you move your mouse over a color block */
103 highlightColor: function(e) {
104 var elem = Rico.eventElement(e);
105 if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
106 var c=Rico.Color.createColorFromBackground(elem).toString();
107 this.currentValue = c;
108 Rico.setStyle('colorPickerSelectedColor', {backgroundColor:c});
109 var d = Rico.$("colorPickerSelectedColorValue");
110 if (d) d.innerHTML = c;