Commit | Line | Data |
---|---|---|
696f20d5 MS |
1 | function 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 = ' ';\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 | |
67 | function 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 | |
81 | if (!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 | |
89 | function $S(v) { return($$(v).style); }\r | |
90 | function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }\r | |
91 | function 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 | |
102 | function within(v,a,z) { return((v>=a && v<=z)?true:false); }\r | |
103 | function 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 | |
104 | function XYwin(v) { var z=agent('msie')?[document.body.clientHeight,document.body.clientWidth]:[window.innerHeight,window.innerWidth]; return(!isNaN(v)?z[v]:z); }\r | |
105 | function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); }\r | |
106 | \r | |
107 | /* PLUGIN */\r | |
108 | \r | |
109 | var maxValue={'h':360,'s':100,'v':100}, HSV={0:360,1:100,2:100};\r | |
110 | var hSV=165, wSV=162, hH=163, slideHSV={0:360,1:100,2:100}, zINDEX=15, stop=1;\r | |
111 | \r | |
112 | function 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 | |
147 | function 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 | |
161 | function 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 | |
171 | function toHex(v) { v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16)); }\r | |
172 | function rgb2hex(r) { return(toHex(r[0])+toHex(r[1])+toHex(r[2])); }\r | |
173 | function hsv2hex(h) { return(rgb2hex(hsv2rgb(h))); } \r | |
174 | \r | |
175 | function 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 | } |