source: companies/serpro/admin/js/jscode/MiniColorPicker.js @ 903

Revision 903, 8.5 KB checked in by niltonneto, 15 years ago (diff)

Importacao inicial do Expresso do Serpro
Line 
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
26var bit = 16;           //default color depth, increase to make picker bigger (and slower) Values: 8, 16, 24 or 32
27var pixel = 10;     //make the picker pixels bigger or smaller.
28
29
30//define globals, don't change!
31bit = Math.round(255 / bit);
32var ConvArray = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F');
33var picked = new Array();
34var pickedColorRGB = new Array();
35var toolbarShow = new Array();
36var donePickerInits = new Array();
37var clickedPicker;
38var MCPtmr = new Array();
39var doExtraPickerCMD = new Array();
40
41
42//this function is written by Guido Socher, guido at linuxfocus dot org
43function 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
74function 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
86function 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
106function 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
118function 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
151function 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
162function 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
171function 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
213function 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
226function 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>&nbsp;<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
256function alimenta(xid,some_color)
257{
258         obj = document.getElementById(xid);
259         obj.value = some_color.split('#')[1];
260}
261
262function 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
Note: See TracBrowser for help on using the repository browser.