Special XML conversion code for Firefox >= 20.0
[infodrom/rico3] / minsrc / ricoColorPicker.js
1 /*
2  *  (c) 2005-2011 Richard Cowin (http://openrico.org)
3  *  (c) 2005-2011 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     var self=this;
56     Rico.onLoad(function() { self.atLoad(); })
57   },
58
59   atLoad : function() {
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]+'">&nbsp;</TD>';
67       if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
68         cp_contents += "</TR>";
69       }
70     }
71     var halfwidth = Math.floor(width/2);
72     if (this.options.showColorCode) {
73       cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
74     } else {
75       cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'>&nbsp;</TD></TR>";
76     }
77     cp_contents += "</TABLE>";
78     this.content.innerHTML=cp_contents;
79     /**
80      * alias for openPopup
81      * @function
82      */
83     this.open=this.openPopup;
84     /**
85      * alias for closePopup
86      * @function
87      */
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);
91     this.close();
92   },
93
94 /** @private */
95   selectColor: function(e) {
96     Rico.eventStop(e);
97     if (this.returnValue) this.returnValue(this.currentValue);
98     this.close();
99   },
100
101 /* This function runs when you move your mouse over a color block */
102 /** @private */
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;
111   }
112 };