Added 3grids asp & .net examples. ricoQuery.aspx removed, as all AJAX queries in...
[infodrom/rico3] / minsrc / ricoColorPicker.js
1 /*
2  *  (c) 2005-2009 Richard Cowin (http://openrico.org)
3  *  (c) 2005-2009 Matt Brown (http://dowdybrown.com)
4  *
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
7  *
8  *         http://www.apache.org/licenses/LICENSE-2.0
9  *
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.
14  */
15
16 // ===================================================================
17 // Adapted to Rico by Matt Brown from code 
18 //   published by Matt Kruse http://www.mattkruse.com/
19 // ===================================================================
20
21 Rico.ColorPicker = function(id,options) {
22   this.initialize(id,options);
23 };
24
25 Rico.ColorPicker.prototype = {
26 /**
27  * @class Implements a pop-up color picker control.
28  * @extends Rico.Popup
29  * @constructs
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>
35  *</dl>
36  */
37   initialize: function(id,options) {
38     this.id=id;
39     this.currentValue = "#FFFFFF";
40     Rico.extend(this, new Rico.Popup());
41     Rico.extend(this.options, {
42       showColorCode : false,
43       cellsPerRow   : 18,
44       palette       : []
45     });
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]);
51         }
52       }
53     }
54     Rico.extend(this.options, options || {});
55   },
56
57   atLoad : function() {
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]+'">&nbsp;</TD>';
65       if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
66         cp_contents += "</TR>";
67       }
68     }
69     var halfwidth = Math.floor(width/2);
70     if (this.options.showColorCode) {
71       cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
72     } else {
73       cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'>&nbsp;</TD></TR>";
74     }
75     cp_contents += "</TABLE>";
76     this.content.innerHTML=cp_contents;
77     /**
78      * alias for openPopup
79      * @function
80      */
81     this.open=this.openPopup;
82     /**
83      * alias for closePopup
84      * @function
85      */
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);
89     this.close();
90   },
91
92 /** @private */
93   selectColor: function(e) {
94     Rico.eventStop(e);
95     if (this.returnValue) this.returnValue(this.currentValue);
96     this.close();
97   },
98
99 /* This function runs when you move your mouse over a color block */
100 /** @private */
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;
109   }
110 };