Initial import.
[siap.git] / manager / inc / colorpicker / colorpicker.js
CommitLineData
696f20d5
MS
1function ColorPicker(tmp_id, tmp_defaultcolor, tmp_output,evt) {\r
2 if ($$('div_id')) {\r
3\r
4 if ($S('plugin').display == 'none') {\r
5 toggle('plugin',tmp_defaultcolor);\r
6 }\r
7 return;\r
8 }\r
9\r
10 if (!tmp_defaultcolor) {\r
11 tmp_defaultcolor = 'FFFFFF';\r
12 }\r
13 \r
14 if (agent('msie')) { \r
15 mouseX = event.clientX;\r
16 mouseY = event.clientY;\r
17 \r
18 mouseY++;\r
19 mouseY += 4;\r
20 } else {\r
21 mouseX = 500;\r
22 mouseY = 300;\r
23 }\r
24\r
25 inner = '<div id="plugin" onmousedown="HSVslide(\'drag\',\'plugin\',event)" style="Z-INDEX:102; TOP:'+mouseY+'px;left:'+mouseX+'px; DISPLAY: none;">';\r
26 inner += '<div id="plugHEX" onmousedown="stop=0; setTimeout(\'stop=1\',100);">#'+ tmp_defaultcolor +'</div><div id="plugCLOSE" onmousedown="toggle(\'plugin\',\''+tmp_defaultcolor+'\')"><font style="color:000000">x</font></div><br>';\r
27 inner += '<div id="SV" onmousedown="HSVslide(\'SVslide\',\'plugin\',event)" title="Saturation + Value">';\r
28 inner += '<div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>';\r
29 inner += '</div>';\r
30 inner += '<form id="H" onmousedown="HSVslide(\'Hslide\',\'plugin\',event)" title="Hue">';\r
31 inner += '<div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>';\r
32 inner += '<div id="Hmodel"></div>';\r
33 inner += '</form><div id="plugCURI"></div><div id="plugCUR"></div>';\r
34 inner += '</div>';\r
35\r
36 var div = document.createElement('DIV');\r
37 div.setAttribute("id", "div_id");\r
38 div.setAttribute("style", "z-index: 101");\r
39\r
40 div.innerHTML = inner;\r
41 \r
42 document.getElementsByTagName('body')[0].appendChild(div);\r
43 \r
44 if (!$$('div_all_combo')) {\r
45 var div2 = document.createElement('div');\r
46 div2.id = 'div_all_combo';\r
47 div2.className = 'div_all';\r
48 div2.style.display = '';\r
49 div2.innerHtml = '&nbsp; ';\r
50 div2.onclick = function () {\r
51 toggle('plugin',tmp_defaultcolor);\r
52 }\r
53 document.getElementsByTagName('body')[0].appendChild(div2);\r
54 }\r
55\r
56 $S('plugCUR').background='#'+tmp_defaultcolor;\r
57 $S('plugCURI').background='#'+tmp_defaultcolor;\r
58 global_output = tmp_output;\r
59\r
60 //LOAD\r
61 loadSV();\r
62 if (agent('msie')) {\r
63 $S('plugin').display='block';\r
64 }\r
65}\r
66\r
67function positionPlugin(e) {\r
68 if ($$('plugin')) {\r
69 if ($S('plugin').display == 'none') {\r
70 mouseY = e.pageY;\r
71 mouseY++;\r
72 mouseY+=4;\r
73 $S('plugin').left=e.pageX;\r
74 $S('plugin').top=mouseY;\r
75 $S('plugin').display='none';\r
76 document.onmousedown = null;\r
77 }\r
78 }\r
79}\r
80\r
81if (!agent('msie')) {\r
82 document.onmousedown=positionPlugin;\r
83}\r
84\r
85// DHTML Color Picker\r
86// Programming by Ulyses\r
87// ColorJack.com\r
88\r
89function $S(v) { return($$(v).style); }\r
90function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }\r
91function toggle(v,tmp_defaultcolor) {\r
92 if ($S(v).display == 'none') {\r
93 $S('div_all_combo').display = '';\r
94 $S(v).display = 'block';\r
95 $S('plugCURI').background='#'+tmp_defaultcolor;\r
96 \r
97 } else {\r
98 $S('div_all_combo').display = 'none';\r
99 $S(v).display = 'none'; \r
100 }\r
101}\r
102function within(v,a,z) { return((v>=a && v<=z)?true:false); }\r
103function XY(e,v) { var z=agent('msie')?[event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop]:[e.pageX,e.pageY]; return(z[zero(v)]); }\r
104function XYwin(v) { var z=agent('msie')?[document.body.clientHeight,document.body.clientWidth]:[window.innerHeight,window.innerWidth]; return(!isNaN(v)?z[v]:z); }\r
105function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); }\r
106\r
107/* PLUGIN */\r
108\r
109var maxValue={'h':360,'s':100,'v':100}, HSV={0:360,1:100,2:100};\r
110var hSV=165, wSV=162, hH=163, slideHSV={0:360,1:100,2:100}, zINDEX=15, stop=1;\r
111\r
112function HSVslide(d,o,e) {\r
113\r
114 function tXY(e) { tY=XY(e,1)-top; tX=XY(e)-left; }\r
115 function mkHSV(a,b,c) { return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); }\r
116 function ckHSV(a,b) { if(within(a,0,b)) return(a); else if(a>b) return(b); else if(a<0) return('-'+oo); }\r
117 function drag(e) { if(!stop) { if(d!='drag') tXY(e);\r
118 \r
119 if(d=='SVslide') { ds.left=ckHSV(tX-oo,wSV)+'px'; ds.top=ckHSV(tY-oo,wSV)+'px';\r
120 \r
121 slideHSV[1]=mkHSV(100,wSV,ds.left); slideHSV[2]=100-mkHSV(100,wSV,ds.top); HSVupdate();\r
122\r
123 }\r
124 else if(d=='Hslide') { var ck=ckHSV(tY-oo,hH), j, r='hsv', z={};\r
125 \r
126 ds.top=(ck-5)+'px'; slideHSV[0]=mkHSV(360,hH,ck);\r
127 \r
128 for(var i=0; i<=r.length-1; i++) { j=r.substr(i,1); z[i]=(j=='h')?maxValue[j]-mkHSV(maxValue[j],hH,ck):HSV[i]; }\r
129\r
130 HSVupdate(z); $S('SV').backgroundColor='#'+hsv2hex([HSV[0],100,100]);\r
131\r
132 }\r
133 else if(d=='drag') { ds.left=XY(e)+oX-eX+'px'; ds.top=XY(e,1)+oY-eY+'px'; }\r
134\r
135 }}\r
136\r
137 if(stop) { stop=''; var ds=$S(d!='drag'?d:o);\r
138\r
139 if(d=='drag') { var oX=parseInt(ds.left), oY=parseInt(ds.top), eX=XY(e), eY=XY(e,1); $S(o).zIndex=zINDEX++; }\r
140 else { var left=($$(o).offsetLeft+10), top=($$(o).offsetTop+22), tX, tY, oo=(d=='Hslide')?2:4; if(d=='SVslide') slideHSV[0]=HSV[0]; }\r
141\r
142 document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; }; drag(e);\r
143\r
144 }\r
145}\r
146\r
147function HSVupdate(v) { \r
148\r
149 v=hsv2hex(HSV=v?v:slideHSV);\r
150 $$('plugHEX').innerHTML='#'+v;\r
151 $S('plugCUR').background='#'+v;\r
152 $S('div_color_'+global_output).background='#'+v;\r
153 \r
154 $$(global_output).value=v;\r
155 \r
156 \r
157 return(v);\r
158\r
159}\r
160\r
161function loadSV() { var z='';\r
162\r
163 for(var i=hSV; i>=0; i--) z+="<div style=\"BACKGROUND: #"+hsv2hex([Math.round((360/hSV)*i),100,100])+";\"><br /><\/div>";\r
164 \r
165 $$('Hmodel').innerHTML=z;\r
166 \r
167}\r
168\r
169/* CONVERSIONS */\r
170\r
171function toHex(v) { v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16)); }\r
172function rgb2hex(r) { return(toHex(r[0])+toHex(r[1])+toHex(r[2])); }\r
173function hsv2hex(h) { return(rgb2hex(hsv2rgb(h))); } \r
174\r
175function hsv2rgb(r) { // easyrgb.com/math.php?MATH=M21#text21\r
176\r
177\r
178 var R,B,G,S=r[1]/100,V=r[2]/100,H=r[0]/360;\r
179\r
180 if(S>0) { if(H>=1) H=0;\r
181\r
182 H=6*H; F=H-Math.floor(H);\r
183 A=Math.round(255*V*(1.0-S));\r
184 B=Math.round(255*V*(1.0-(S*F)));\r
185 C=Math.round(255*V*(1.0-(S*(1.0-F))));\r
186 V=Math.round(255*V); \r
187\r
188 switch(Math.floor(H)) {\r
189\r
190 case 0: R=V; G=C; B=A; break;\r
191 case 1: R=B; G=V; B=A; break;\r
192 case 2: R=A; G=V; B=C; break;\r
193 case 3: R=A; G=B; B=V; break;\r
194 case 4: R=C; G=A; B=V; break;\r
195 case 5: R=V; G=A; B=B; break;\r
196\r
197 }\r
198\r
199 return([R?R:0,G?G:0,B?B:0]);\r
200\r
201 }\r
202 else return([(V=Math.round(V*255)),V,V]);\r
203\r
204}