colorpicker.js

DWR is the way for AJAX implementation

/*
 * Copyright (c) 2001-2007, TIBCO Software Inc.
 * Use, modification, and distribution subject to terms of license.
 */
jsx3.require("jsx3.gui.Block","jsx3.gui.Form");jsx3.Class.defineClass("jsx3.gui.ColorPicker",jsx3.gui.Block,[jsx3.gui.Form],function(j,q){var v=jsx3.gui.Interactive;var jc=jsx3.gui.Block;var Mb=jsx3.gui.Event;var ib=jsx3.html.selectSingleElm;j.DEFAULT_WIDTH=324;j.DEFAULT_HEIGHT=300;j.HUE=1;j.SATURATION=2;j.BRIGHTNESS=3;j.IE=16;j.Vm=8;j._v=9;j.bi=9;var hc="jsx:///images/colorpicker/";j.Pn={_drag:jsx3.resolveURI(hc+"d1arrow.gif"),_1_v:jsx3.resolveURI(hc+"hue-v.png"),_1_h:jsx3.resolveURI(hc+"hue-h.png"),_2_v:jsx3.resolveURI(hc+"saturation-v.png"),_2_h:jsx3.resolveURI(hc+"saturation-h.png"),_3_v:jsx3.resolveURI(hc+"brightness-v.png")};for(var P in j.Pn)jsx3.html.loadImages(j.Pn[P]);q.init=function(f,s,n,d,a){this.jsxsuper(f,s,n,d,a);this.jsxrgb=16711680;this.jsxaxis=j.HUE;};q.getValue=function(){return this.jsxrgb;};q.setValue=function(s){var Lb=parseInt(s);if(!isNaN(Lb)){this.setRGB(Lb);}else{if(typeof(s)=="string"){if(s.indexOf("#")==0)s=s.substring(1);Lb=parseInt("0x"+s);if(!isNaN(Lb))this.setRGB(Lb);else this.setRGB(0);}else{this.setRGB(0);}}};q.doValidate=function(){var zb=jsx3.gui.Form.STATEVALID;this.setValidationState(zb);return zb;};q.getRGB=function(){return this.jsxrgb;};q.getRgbAsHex=function(){return "0x"+(16777216+(this.jsxrgb||Number(0))).toString(16).substring(1).toUpperCase();};q.setRGB=function(c){this.jsxrgb=Math.max(0,Math.min(c,16777215));this._q(true,true);};q.getAxis=function(){return this.jsxaxis||j.HUE;};q.setAxis=function(o){this.jsxaxis=o;this.C5();return this;};q.setHSB=function(d,l,m){var bc=j.HSBtoRGB(d,l,m);this.jsxrgb=(bc[0]<<16)+(bc[1]<<8)+bc[2];this._q(true,true,[d,l,m]);};q.paint=function(){this.applyDynamicProperties();var Tb=j.RGBtoHSB(this.jsxrgb);var L=j.HSBtoRGB(Tb[0],1,1);var Z="#"+j.yq(L[0],L[1],L[2]);var pc=this.renderAttributes(null,false);var Dc=this.getAxis();var Mc=this.RL(true);Mc.setAttributes("id=\""+this.getId()+"\" class=\"jsx30colorpicker\" "+"label=\""+this.getName()+"\" "+this.CI()+this.vH()+pc+" unselectable=\"on\"");Mc.setStyles(this.d9()+this.T1()+this.MU());var yb=Mc.pQ(0);var pb=yb.pQ(0);pb.setAttributes(this.RX(Mb.MOUSEDOWN,"uh",2)+" unselectable=\"on\"");var Vb=yb.pQ(1);Vb.setAttributes(this.RX(Mb.MOUSEDOWN,"sd",2)+" unselectable=\"on\"");var rb="",gb="";var Pb=Vb.XK(),kc=Vb.P5();var z=pb.XK(),mc=pb.P5();var xb="<span unselectable=\"on\" class=\"gradient\" style=\"width:";if(Dc==j.HUE){rb=rb+(xb+z+"px;height:"+mc+"px;background-color:"+Z+";\"></span>");gb=gb+this.Yx(j.Pn["_1_v"],Pb,kc);}else{rb=rb+this.Yx(j.Pn["_1_h"],z,mc);gb=gb+(xb+Pb+"px;height:"+kc+"px;background-color:"+Z+";\"></span>");}if(Dc==j.SATURATION){rb=rb+(xb+z+"px;height:"+mc+"px;background-color:#FFFFFF;"+jsx3.html.getCSSOpacity(1-Tb[1])+"\"></span>");gb=gb+this.Yx(j.Pn["_2_v"],Pb,kc);}else{rb=rb+this.Yx(j.Pn[Dc==j.HUE?"_2_h":"_2_v"],z,mc);gb=gb+(xb+Pb+"px;height:"+kc+"px;background-color:#FFFFFF;"+jsx3.html.getCSSOpacity(1-Tb[1])+"\"></span>");}if(Dc==j.BRIGHTNESS){rb=rb+(xb+z+"px;height:"+mc+"px;background-color:#000000;"+jsx3.html.getCSSOpacity(1-Tb[2])+"\"></span>");gb=gb+this.Yx(j.Pn["_3_v"],Pb,kc);}else{rb=rb+this.Yx(j.Pn["_3_v"],z,mc);gb=gb+(xb+Pb+"px;height:"+kc+"px;background-color:#000000;"+jsx3.html.getCSSOpacity(1-Tb[2])+"\"></span>");}rb=rb+(xb+z+"px;height:"+mc+"px;\">&#160;</span>");gb=gb+(xb+Pb+"px;height:"+kc+"px;\">&#160;</span>");var E=pb.pQ(0);rb=rb+E.paint().join(E.pQ(0).paint().join(""));var Ab=yb.pQ(2);return Mc.paint().join(yb.paint().join(pb.paint().join(rb)+Vb.paint().join(gb)+Ab.paint().join("<img src=\""+j.Pn["_drag"]+"\" width=\"6\" height=\"9\"/>")+"&#160;"));};q.T5=function(f){var jb=jsx3.gui.Painted.Box;if(this.getParent()&&(f==null||isNaN(f.parentwidth)||isNaN(f.parentheight))){f=this.getParent().IO(this);}else{if(f==null){f={};}}var rb=this.getRelativePosition()!=jsx3.gui.Block.ABSOLUTE;var I=rb?null:this.getLeft();var tb=rb?null:this.getTop();var fb=j.RGBtoHSB(this.jsxrgb);var U=this.kw(fb);f.boxtype=rb?"relativebox":"box";f.tagname="span";if(f.left==null&&I!=null)f.left=I;if(f.top==null&&tb!=null)f.top=tb;f.width=this.getWidth()||j.DEFAULT_WIDTH;f.height=this.getHeight()||j.DEFAULT_HEIGHT;var G=new jb(f);var Lb=G.XK();var yc=G.P5();var cc=new jb({tagname:"div",boxtype:"inline",height:yc,width:Lb});G.W8(cc);var Z={tagname:"span",boxtype:"box",left:0,top:0,width:Lb-j.IE-j.Vm,height:"100%",border:this.getBorder(),parentwidth:Lb,parentheight:yc};var N=new jb(Z);N.setStyles("cursor:pointer;overflow:hidden;");cc.W8(N);Z={tagname:"span",boxtype:"box",left:Lb-j.IE,top:0,width:j.IE,height:"100%",border:this.getBorder(),parentwidth:Lb,parentheight:yc};var Xb=new jb(Z);Xb.setStyles("cursor:pointer;");cc.W8(Xb);var M=Math.round(U[1]*(N.XK()-1))-Math.floor(j.bi/2);var E=Math.round(U[2]*(N.P5()-1))-Math.floor(j.bi/2);Z={tagname:"span",boxtype:"box",left:M,top:E,width:j.bi,height:j.bi,border:"1px solid #CCCCCC;"};var xc=new jb(Z);xc.setStyles("overflow:hidden;");var D=new jb({tagname:"span",boxtype:"box",left:0,top:0,width:j.bi-2,height:j.bi-2,border:"1px solid #333333;"});D.setStyles("overflow:hidden;");xc.W8(D);N.W8(xc);E=Math.round(U[0]*(Xb.P5()-1))-Math.floor(j._v/2)+Xb.G_();Z={tagname:"span",boxtype:"box",left:Lb-j.IE-5,top:E,width:6,height:j._v};var wb=new jb(Z);cc.W8(wb);return G;};q.k7=function(o,l,c){this.B_(o,l,c,1);};q.ux=function(p){switch(this.getAxis()){case j.HUE:return [1-p[0],p[1],1-p[2]];case j.SATURATION:return [1-p[1],1-p[0],1-p[2]];case j.BRIGHTNESS:return [1-p[1],1-p[2],1-p[0]];default:throw new jsx3.Exception();}};q.kw=function(r){switch(this.getAxis()){case j.HUE:return [1-r[0],r[1],1-r[2]];case j.SATURATION:return [1-r[1],1-r[0],1-r[2]];case j.BRIGHTNESS:return [1-r[2],1-r[0],1-r[1]];default:throw new jsx3.Exception();}};q.Yx=function(e,k,g){if(jsx3.CLASS_LOADER.IE6){return "<span unselectable=\"on\" class=\"gradient\" style=\"width:"+k+"px;height:"+g+"px;"+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+e+"', sizingMethod='scale');\"></span>";}else{return "<img src=\""+e+"\" unselectable=\"on\" class=\"gradient\" style=\"width:"+k+"px;height:"+g+"px;\"/>";}};q.sd=function(o,m){Mb.unsubscribe(Mb.MOUSEMOVE,this);Mb.subscribe(Mb.MOUSEMOVE,this,"Oq");Mb.subscribe(Mb.MOUSEUP,this,"_4");var jb=jsx3.html.getRelativePosition(m,o.srcElement());this._jsxoffsety=o.getTrueY()-o.getOffsetY()-Math.max(0,jb.T);this.eE(o,(o.getOffsetY()+jb.T)/(m.offsetHeight-1),null,null);};q.uh=function(s,m){Mb.unsubscribe(Mb.MOUSEMOVE,this);Mb.subscribe(Mb.MOUSEMOVE,this,"By");Mb.subscribe(Mb.MOUSEUP,this,"_4");var Y=jsx3.html.getRelativePosition(m,s.srcElement());this._jsxoffsetx=s.getTrueX()-s.getOffsetX()-Math.max(0,Y.L);this._jsxoffsety=s.getTrueY()-s.getOffsetY()-Math.max(0,Y.T);this.eE(s,null,(s.getOffsetX()+Y.L)/(m.offsetWidth-1),(s.getOffsetY()+Y.T)/(m.offsetHeight-1));};q.Oq=function(s){s=s.event;var wb=s.getTrueY()-this._jsxoffsety;var Jb=ib(this.getRendered(s),0,1);wb=Math.max(0,Math.min(Jb.offsetHeight-1,wb));this.eE(s,wb/(Jb.offsetHeight-1),null,null);};q.By=function(c){c=c.event;var u=c.getTrueX()-this._jsxoffsetx;var nb=c.getTrueY()-this._jsxoffsety;var Nb=ib(this.getRendered(c),0,0);u=Math.max(0,Math.min(Nb.offsetWidth-1,u));nb=Math.max(0,Math.min(Nb.offsetHeight-1,nb));this.eE(c,null,u/(Nb.offsetWidth-1),nb/(Nb.offsetHeight-1));};q._4=function(c){Mb.unsubscribe(Mb.MOUSEMOVE,this);Mb.unsubscribe(Mb.MOUSEUP,this);delete this._jsxoffsetx;delete this._jsxoffsety;};q.eE=function(k,a,s,r){var ac=this.kw(j.RGBtoHSB(this.jsxrgb));if(a!=null)ac[0]=a;if(s!=null)ac[1]=s;if(r!=null)ac[2]=r;var fb=this.ux(ac);var Xb=j.HSBtoRGB(fb[0],fb[1],fb[2]);this.jsxrgb=(Xb[0]<<16)+(Xb[1]<<8)+Xb[2];this._q(a!=null,s!=null||r!=null,fb);this.doEvent(v.CHANGE,{objEVENT:k,intRGB:this.jsxrgb});};q._q=function(i,p,n){var xb=this.getRendered();if(xb!=null){if(n==null)n=j.RGBtoHSB(this.jsxrgb);var M=j.HSBtoRGB(n[0],1,1);var Cc=this.getAxis();var D=this.kw(n);if(i){switch(Cc){case j.HUE:ib(xb,0,0,0).style.backgroundColor="#"+j.yq(M[0],M[1],M[2]);break;case j.SATURATION:jsx3.html.updateCSSOpacity(ib(xb,0,0,1),1-n[1]);break;case j.BRIGHTNESS:jsx3.html.updateCSSOpacity(ib(xb,0,0,2),1-n[2]);break;default:throw new jsx3.Exception();}var Lc=ib(xb,0,2);var S=this.RL(true).pQ(0).pQ(1);Lc.style.top=Math.round(D[0]*(S.P5()-1))-Math.floor(j._v/2)+S.G_()+"px";}if(p){switch(Cc){case j.HUE:jsx3.html.updateCSSOpacity(ib(xb,0,1,1),1-n[1]);jsx3.html.updateCSSOpacity(ib(xb,0,1,2),1-n[2]);break;case j.SATURATION:ib(xb,0,1,0).style.backgroundColor="#"+j.yq(M[0],M[1],M[2]);jsx3.html.updateCSSOpacity(ib(xb,0,1,2),1-n[2]);break;case j.BRIGHTNESS:ib(xb,0,1,0).style.backgroundColor="#"+j.yq(M[0],M[1],M[2]);jsx3.html.updateCSSOpacity(ib(xb,0,1,1),1-n[1]);break;default:throw new jsx3.Exception();}var lc=ib(xb,0,0,4);var S=this.RL(true).pQ(0).pQ(0);lc.style.left=Math.round(D[1]*(S.XK()-1))-Math.floor(j.bi/2)+"px";lc.style.top=Math.round(D[2]*(S.P5()-1))-Math.floor(j.bi/2)+"px";}}};j.HSBtoRGB=function(h,p,d){var Rb=0,kb=0,u=0,fb;h=360*(h-Math.floor(h));var Zb=255*d;var Jb=Zb*p;var Cb=Zb-Jb;if(h>=300||h<60){if(h>=300)h=h-360;Rb=Zb;fb=h*Jb/60;if(fb<0){kb=Cb;u=kb-fb;}else{u=Cb;kb=u+fb;}}else{if(h>=60&&h<180){kb=Zb;fb=(h-120)*Jb/60;if(fb<0){u=Cb;Rb=u-fb;}else{Rb=Cb;u=Rb+fb;}}else{if(h>=180&&h<300){u=Zb;fb=(h-240)*Jb/60;if(fb<0){Rb=Cb;kb=Rb-fb;}else{kb=Cb;Rb=kb+fb;}}}}return [Math.round(Rb),Math.round(kb),Math.round(u)];};j.RGBtoHSB=function(h,s,e){if(arguments.length==1){e=h&255;s=(h&65280)>>8;h=(h&16711680)>>16;}var pc=0,J=1,Vb=1;var jb=h>s?h:s;if(e>jb)jb=e;var rb=h<s?h:s;if(e<rb)rb=e;Vb=jb/255;if(jb!=0)J=(jb-rb)/jb;else J=0;if(J==0){pc=0;}else{var xb=(jb-h)/(jb-rb);var L=(jb-s)/(jb-rb);var x=(jb-e)/(jb-rb);if(h==jb)pc=x-L;else{if(s==jb)pc=2+xb-x;else pc=4+L-xb;}pc=pc/6;if(pc<0)pc=pc+1;}return [pc,J,Vb];};j.yq=function(r,s,o){return (16777216+(r<<16)+(s<<8)+o).toString(16).substring(1);};});