1 | /** |
---|
2 | * MiniColorPicker v0.5 |
---|
3 | * By: me [at] daantje [dot] nl |
---|
4 | * |
---|
5 | * Last updated: Mon Nov 20 13:03:36 CET 2006 |
---|
6 | * |
---|
7 | * Documentation: |
---|
8 | * A realy small Photoshop like color picker in DHTML. |
---|
9 | * It should be compatible with MSIE and Mozilla based |
---|
10 | * browsers. |
---|
11 | * |
---|
12 | * License: |
---|
13 | * LGPL |
---|
14 | * |
---|
15 | * Support: |
---|
16 | * Not realy. |
---|
17 | * |
---|
18 | * Thanks to: |
---|
19 | * Robert James Ellis for the big donation! |
---|
20 | * (the Graphite Pro Control Panel project) |
---|
21 | * http://www.sddepot.com/ |
---|
22 | */ |
---|
23 | |
---|
24 | |
---|
25 | //Config ammount of colors |
---|
26 | var bit = 16; //default color depth, increase to make picker bigger (and slower) Values: 8, 16, 24 or 32 |
---|
27 | var pixel = 10; //make the picker pixels bigger or smaller. |
---|
28 | |
---|
29 | |
---|
30 | //define globals, don't change! |
---|
31 | bit = Math.round(255 / bit); |
---|
32 | var ConvArray = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'); |
---|
33 | var picked = new Array(); |
---|
34 | var pickedColorRGB = new Array(); |
---|
35 | var toolbarShow = new Array(); |
---|
36 | var donePickerInits = new Array(); |
---|
37 | var clickedPicker; |
---|
38 | var MCPtmr = new Array(); |
---|
39 | var doExtraPickerCMD = new Array(); |
---|
40 | |
---|
41 | |
---|
42 | //this function is written by Guido Socher, guido at linuxfocus dot org |
---|
43 | function dec2hex(value){ |
---|
44 | var retval = ''; |
---|
45 | var intnum; |
---|
46 | var tmpnum; |
---|
47 | var i = 0; |
---|
48 | |
---|
49 | intnum = parseInt(value,10); |
---|
50 | if (isNaN(intnum)){ |
---|
51 | retval = 'NaN'; |
---|
52 | }else{ |
---|
53 | while (intnum > 0.9){ |
---|
54 | i++; |
---|
55 | tmpnum = intnum; |
---|
56 | // cancatinate return string with new digit: |
---|
57 | retval = ConvArray[tmpnum % 16] + retval; |
---|
58 | intnum = Math.floor(tmpnum / 16); |
---|
59 | if (i > 100){ |
---|
60 | // break infinite loops |
---|
61 | retval = 'NaN'; |
---|
62 | break; |
---|
63 | } |
---|
64 | } |
---|
65 | } |
---|
66 | if(retval.length == 1) |
---|
67 | retval = '0' + retval; |
---|
68 | else if(retval.length == 0) |
---|
69 | retval = '00'; |
---|
70 | return retval; |
---|
71 | } |
---|
72 | |
---|
73 | |
---|
74 | function HEXcolor2RGB(value){ |
---|
75 | value = value.replace('#',''); |
---|
76 | pickedColorRGB[0] = value.substr(0,2); |
---|
77 | pickedColorRGB[1] = value.substr(2,2); |
---|
78 | pickedColorRGB[2] = value.substr(4,2); |
---|
79 | for(i=0;i<3;i++){ |
---|
80 | pickedColorRGB[i] = parseInt(pickedColorRGB[i],16); |
---|
81 | } |
---|
82 | return pickedColorRGB; |
---|
83 | } |
---|
84 | |
---|
85 | |
---|
86 | function buildPicker(depth){ |
---|
87 | htmlStr = "<table border=0 cellpadding=0 cellspacing=0 width="+Math.round((255/depth) * pixel)+" height="+Math.round((255/depth) * pixel)+"><tr>"; |
---|
88 | //palet |
---|
89 | for(x=0;x<=255;x=x+depth){ |
---|
90 | for(y=0;y<=255;y=y+depth){ |
---|
91 | htmlStr+= "<td id='"+depth+"_"+x+"_"+y+"' onclick=\"pickColor(picked[clickedPicker],"+x+","+y+")\" unselectable=on width="+pixel+" height="+pixel+"></td>"; |
---|
92 | } |
---|
93 | htmlStr+= "</tr><tr>"; |
---|
94 | } |
---|
95 | //grays |
---|
96 | for(x=0;x<=255;x=x+depth){ |
---|
97 | c = dec2hex(x)+dec2hex(x)+dec2hex(x); |
---|
98 | htmlStr+= "<td bgcolor=\"#"+c+"\" onclick=\"pickColor("+x+","+x+","+x+")\" unselectable=on width="+pixel+" height="+pixel+"></td>"; |
---|
99 | } |
---|
100 | htmlStr+= "</tr></table>"; |
---|
101 | |
---|
102 | return htmlStr; |
---|
103 | } |
---|
104 | |
---|
105 | |
---|
106 | function changePallet(R,depth){ |
---|
107 | depth = parseInt(depth); |
---|
108 | for(G=0;G<=255;G=G+depth){ |
---|
109 | for(B=0;B<=255;B=B+depth){ |
---|
110 | if(document.getElementById(depth+'_'+G+'_'+B)) |
---|
111 | document.getElementById(depth+'_'+G+'_'+B).style.backgroundColor = '#'+dec2hex(R)+dec2hex(G)+dec2hex(B); |
---|
112 | } |
---|
113 | } |
---|
114 | picked[clickedPicker] = R; |
---|
115 | } |
---|
116 | |
---|
117 | |
---|
118 | function changePickerHue(depth){ |
---|
119 | g = 0; |
---|
120 | b = 255; |
---|
121 | gS = 0; |
---|
122 | bS = 1; |
---|
123 | htmlStr = "<table border=0 cellpadding=0 cellspacing=0 width="+pixel+" height="+((255/depth) * pixel)+">"; |
---|
124 | for(r=0;r<=255;r=r+depth){ |
---|
125 | c = dec2hex(r)+dec2hex(g)+dec2hex(b); |
---|
126 | htmlStr+= "<tr><td bgcolor=\"#"+c+"\" onclick=\"changePallet("+r+","+depth+")\" width="+pixel+" height="+pixel+"></td></tr>"; |
---|
127 | |
---|
128 | if(g == 255) gS = 1; |
---|
129 | else if(g == 0) gS = 0; |
---|
130 | |
---|
131 | if(b == 255) bS = 1; |
---|
132 | else if(b == 0) bS = 0; |
---|
133 | |
---|
134 | if(gS == 0) |
---|
135 | g = g + (depth * 2); |
---|
136 | else |
---|
137 | g = g - (depth * 2); |
---|
138 | |
---|
139 | if(bS == 0) |
---|
140 | b = b + (depth * 4); |
---|
141 | else |
---|
142 | b = b - (depth * 4); |
---|
143 | } |
---|
144 | htmlStr+= "<tr><td bgcolor=\"#ffffff\" onclick=\"changePallet(255,"+depth+")\" width="+pixel+" height="+pixel+"></td></tr>"; |
---|
145 | htmlStr+= "</table>"; |
---|
146 | |
---|
147 | return htmlStr; |
---|
148 | } |
---|
149 | |
---|
150 | |
---|
151 | function pickColor(r,g,b){ |
---|
152 | c = '#'+dec2hex(r)+dec2hex(g)+dec2hex(b); |
---|
153 | document.getElementById(clickedPicker).style.backgroundColor = c; |
---|
154 | document.getElementById(clickedPicker+'Value').value = c; |
---|
155 | p = clickedPicker.split('_'); |
---|
156 | if(doExtraPickerCMD[clickedPicker] && c && !c.indexOf('NaN')>-1 && c.length == 7) |
---|
157 | eval(doExtraPickerCMD[clickedPicker].substring(0,doExtraPickerCMD[clickedPicker].length - 1) + (doExtraPickerCMD[clickedPicker].substr(-2) != "()" ? "," : "") + "'" + c + "')"); |
---|
158 | killPicker(1,1500); |
---|
159 | } |
---|
160 | |
---|
161 | |
---|
162 | function setPickedColorFromForm(obj,fromScript){ |
---|
163 | c = HEXcolor2RGB(obj.value); |
---|
164 | changePallet(c[0]); |
---|
165 | document.getElementById(obj.id.replace('Value','')).style.backgroundColor = obj.value; |
---|
166 | if(!fromScript && doExtraPickerCMD[obj.id.replace('Value','')] && obj.value && !obj.value.indexOf('NaN')>-1 && obj.value.length == 7) |
---|
167 | eval(doExtraPickerCMD[obj.id.replace('Value','')].substring(0,doExtraPickerCMD[obj.id.replace('Value','')].length - 1) + (doExtraPickerCMD[obj.id.replace('Value','')].substr(-2) != "()" ? "," : "") + "'" + obj.value + "')"); |
---|
168 | } |
---|
169 | |
---|
170 | |
---|
171 | function placePickerToolbar(obj,depth){ |
---|
172 | lastClickedPicker = clickedPicker; |
---|
173 | clickedPicker = obj.id; |
---|
174 | |
---|
175 | if(lastClickedPicker && lastClickedPicker != clickedPicker){ |
---|
176 | p = lastClickedPicker.split('_'); |
---|
177 | document.getElementById('colorPickerTools_'+p[1]).style.visibility = 'hidden'; |
---|
178 | toolbarShow[lastClickedPicker] = 0; |
---|
179 | } |
---|
180 | |
---|
181 | if(!depth && clickedPicker){ |
---|
182 | p = clickedPicker.split('_'); |
---|
183 | depth = p[1]; |
---|
184 | } |
---|
185 | |
---|
186 | if(MCPtmr[clickedPicker]) |
---|
187 | clearTimeout(MCPtmr[clickedPicker]); |
---|
188 | |
---|
189 | if(toolbarShow[obj.id] == 0){ |
---|
190 | toolbarShow[obj.id] = 1; |
---|
191 | |
---|
192 | t = obj.offsetTop + parseInt(obj.style.height) + 3; |
---|
193 | l = obj.offsetLeft; |
---|
194 | while(obj.offsetParent){ |
---|
195 | t+= obj.offsetParent.offsetTop; |
---|
196 | l+= obj.offsetParent.offsetLeft; |
---|
197 | obj = obj.offsetParent; |
---|
198 | } |
---|
199 | document.getElementById('colorPickerTools_'+depth).style.top = t; |
---|
200 | document.getElementById('colorPickerTools_'+depth).style.left = l; |
---|
201 | document.getElementById('colorPickerTools_'+depth).style.visibility = 'visible'; |
---|
202 | if(picked[clickedPicker] == null) |
---|
203 | changePallet(255,depth); |
---|
204 | else |
---|
205 | setPickedColorFromForm(document.getElementById(clickedPicker+'Value'),true); |
---|
206 | }else if(toolbarShow[obj.id] == 1){ |
---|
207 | document.getElementById('colorPickerTools_'+depth).style.visibility = 'hidden'; |
---|
208 | toolbarShow[obj.id] = 0; |
---|
209 | } |
---|
210 | } |
---|
211 | |
---|
212 | |
---|
213 | function killPicker(sw,t){ |
---|
214 | if(clickedPicker){ |
---|
215 | if(!t) |
---|
216 | t = 500; |
---|
217 | toolbarShow[clickedPicker] = sw; |
---|
218 | if(MCPtmr[clickedPicker]) |
---|
219 | clearTimeout(MCPtmr[clickedPicker]); |
---|
220 | if(sw == 1) |
---|
221 | MCPtmr[clickedPicker] = setTimeout('placePickerToolbar(document.getElementById(clickedPicker));',t); |
---|
222 | } |
---|
223 | } |
---|
224 | |
---|
225 | |
---|
226 | function initPicker(fieldName,fieldValue,depth,callFunc){ |
---|
227 | if(!depth) |
---|
228 | depth = bit; |
---|
229 | else |
---|
230 | depth = Math.round(255 / depth); |
---|
231 | pickerScreen = buildPicker(depth); |
---|
232 | hueScreen = changePickerHue(depth); |
---|
233 | if(!fieldValue) |
---|
234 | fieldValue = ""; |
---|
235 | |
---|
236 | if(!donePickerInits[depth]){ |
---|
237 | donePickerInits[depth] = 0; |
---|
238 | document.write("<div id=colorPickerTools_"+depth+" onmouseout=\"killPicker(1)\" onmouseover=\"killPicker(0)\" style=\"z-Index:10000;visibility:hidden;cursor:crosshair;position:absolute;border:1px solid #000000;background-color:#ffffff\"></div>"); |
---|
239 | document.getElementById('colorPickerTools_'+depth).innerHTML = '<table border=0 cellpadding=0 cellspacing=0><tr><td valign=top>'+pickerScreen+'</td><td valign=top style="border-left:1px solid #000000;">'+hueScreen+'</td></tr><tr><td colspan=2><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=50% style="background-color:#ffffff;" onclick="pickColor(255,255,255);" height='+pixel+'></td><td width=50% style="background-color:#000000;" onclick="pickColor(0,0,0);" height='+pixel+'></td></tr></table></td></tr></table>'; |
---|
240 | } |
---|
241 | s = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"; |
---|
242 | s+= "<td><div onmouseout=\"killPicker(1)\" onmouseover=\"killPicker(0)\" onclick=\"placePickerToolbar(this,"+depth+")\" style=\"width:15px;height:15px;border: 1px solid #000000;cursor:pointer;background-color:"+fieldValue+";\" id=pickedColor_"+depth+"_"+donePickerInits[depth]+"></div></td>"; |
---|
243 | s+= "<td> <input type=\"text\" name=\""+fieldName+"\" id=pickedColor_"+depth+"_"+donePickerInits[depth]+"Value value=\""+fieldValue+"\" size=7 style=\"font-size:10px;\" onchange=\"setPickedColorFromForm(this)\"></td>"; |
---|
244 | s+= "</table>"; |
---|
245 | document.write(s); |
---|
246 | |
---|
247 | oid = "pickedColor_"+depth+"_"+donePickerInits[depth]; |
---|
248 | |
---|
249 | toolbarShow[oid] = 0; |
---|
250 | if(callFunc) |
---|
251 | doExtraPickerCMD[oid] = callFunc; |
---|
252 | |
---|
253 | donePickerInits[depth]++; |
---|
254 | } |
---|
255 | |
---|
256 | function alimenta(xid,some_color) |
---|
257 | { |
---|
258 | obj = document.getElementById(xid); |
---|
259 | obj.value = some_color.split('#')[1]; |
---|
260 | } |
---|
261 | |
---|
262 | function alimenta_no_final() |
---|
263 | { |
---|
264 | document.getElementById('id_login_bg_color').value = document.getElementById('pickedColor_16_0Value').value; |
---|
265 | document.getElementById('id_login_caixa_bg_color').value = document.getElementById('pickedColor_16_1Value').value; |
---|
266 | } |
---|
267 | |
---|
268 | |
---|