diff --git a/editor/jgraduate/css/jPicker-1.0.12.css b/editor/jgraduate/css/jPicker-1.0.12.css deleted file mode 100644 index c943ae16..00000000 --- a/editor/jgraduate/css/jPicker-1.0.12.css +++ /dev/null @@ -1,191 +0,0 @@ -.jPicker_Picker { - display: inline-block; - height: 24px; /* change this value if using a different sized color picker icon */ - position: relative; /* make this element an absolute positioning container */ - text-align: left; /* make the zero width children position to the left of container */ - width: 25px; /* change this value if using a different sized color picker icon */ -} -.jPicker_Color, .jPicker_Alpha { - background-position: 2px 2px; - display: block; - height: 100%; - left: 0px; - position: absolute; - top: 0px; - width: 100%; -} -.jPicker_Icon { - background-repeat: no-repeat; - cursor: pointer; - display: block; - height: 100%; - left: 0px; - position: absolute; - top: 0px; - width: 100%; -} -.jPicker_Container { - display: none; - z-index: 10; /* make sure container draws above color picker icon in Firefox/Safari/Chrome/Opera/etc. - - IE calculates z-index so this won't work - we will hide all color picker icons placed after the selected one in code when shown in IE */ -} -.jPicker_table { - background-color: #efefef; - border: 1px outset #666; - font-family: Arial, Helvetica, Sans-Serif; - font-size: 12px; - margin: 0px; - padding: 5px; - width: 550px; -} -.jPicker_table td { - margin: 0px; - padding: 0px; - vertical-align: top; -} -.jPicker_MoveBar { - background-color: #dddddd; - border: 1px outset #aaa; - cursor: move; - height: 12px; -} -.jPicker_Title { - font-size: 11px !important; - font-weight: bold; - margin: -2px 0px 0px 0px; - padding: 0px; - text-align: center; - width: 100%; -} -.jPicker_ColorMap { - border: 2px inset #eee; - cursor: crosshair; - height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */ - margin: 0px 5px 0px 5px; - overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */ - padding: 0px; - position: relative; /* make this element an absolute positioning container */ - width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */ -} -div[class="jPicker_ColorMap"] { - height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ - width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ -} -.jPicker_ColorBar { - border: 2px inset #eee; - cursor: n-resize; - height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */ - margin: 12px 10px 0px 5px; - padding: 0px; - position: relative; - width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */ -} -div[class="jPicker_ColorBar"] { - height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ - width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ -} -.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_ColorBar_l6 { - background-color: transparent; - background-image: none; - display: block; - height: 256px; /* must specific pixel height. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar - would not be drawn if its overflow is set to hidden. */ - left: 0px; - position: absolute; - top: 0px; -} -.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3 { - width: 256px; /* must specific pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar - would not be drawn if its overflow is set to hidden. */ -} -.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_ColorBar_l6 { - width: 20px; /* must specific pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar - would not be drawn if its overflow is set to hidden. */ -} -.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorBar_l6 { - background-repeat: no-repeat; -} -.jPicker_ColorMap_l3, .jPicker_ColorBar_l5 { - background-repeat: repeat; -} -.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4 { - background-repeat: repeat-x; -} -.jPicker_ColorMap_Arrow { - display: block; - position: absolute; -} -.jPicker_ColorBar_Arrow { - display: block; - left: -10px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */ - position: absolute; -} -.jPicker_Preview { - font-size: x-small; - text-align: center; -} -.jPicker_Preview div { - border: 2px inset #eee; - height: 62px; - margin: 0px auto; - padding: 0px; - width: 62px; -} -.jPicker_Preview div span { - border: 1px solid #000; - display: block; - height: 30px; - margin: 0px auto; - padding: 0px; - width: 60px; -} -.jPicker_Preview div span.jPicker_Active { - border-bottom-width: 0px; -} -.jPicker_Preview div span.jPicker_Current { - border-top-width: 0px; - cursor: pointer; -} -.jPicker_OkCancel { - text-align: center; - width: 120px; -} -.jPicker_OkCancel input { - width: 100px; -} -.jPicker_OkCancel input.jPicker_Ok { - margin: 12px 0px 5px 0px; -} -.jPicker_Text { - text-align: left; -} -.jPicker_HueText, .jPicker_SaturationText, .jPicker_BrightnessText, .jPicker_RedText, .jPicker_GreenText, .jPicker_BlueText, .jPicker_AlphaText { - background-color: #fff; - border: 1px inset #aaa; - margin: 0px 0px 0px 5px; - text-align: left; - width: 30px; -} -.jPicker_HexText { - background-color: #fff; - border: 1px inset #aaa; - margin: 0px 0px 0px 5px; - width: 65px; -} -.jPicker_Grid { - text-align: center; -} -span.jPicker_QuickColor { - border: 1px inset #aaa; - cursor: pointer; - display: block; - float: left; - height: 13px; - line-height: 13px; - margin: 2px 2px 1px 2px; - padding: 0px; - width: 15px; -} -span[class="jPicker_QuickColor"] { - width: 13px; -} \ No newline at end of file diff --git a/editor/jgraduate/css/jPicker.css b/editor/jgraduate/css/jPicker.css new file mode 100644 index 00000000..d186af7b --- /dev/null +++ b/editor/jgraduate/css/jPicker.css @@ -0,0 +1 @@ +.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px} \ No newline at end of file diff --git a/editor/jgraduate/images/Bars.png b/editor/jgraduate/images/Bars.png index a9801ec1..80eb2bbe 100644 Binary files a/editor/jgraduate/images/Bars.png and b/editor/jgraduate/images/Bars.png differ diff --git a/editor/jgraduate/images/Maps.png b/editor/jgraduate/images/Maps.png index de33e3de..853d38c6 100644 Binary files a/editor/jgraduate/images/Maps.png and b/editor/jgraduate/images/Maps.png differ diff --git a/editor/jgraduate/images/NoColor.png b/editor/jgraduate/images/NoColor.png index ae361455..5dc47670 100644 Binary files a/editor/jgraduate/images/NoColor.png and b/editor/jgraduate/images/NoColor.png differ diff --git a/editor/jgraduate/images/rangearrows.gif b/editor/jgraduate/images/rangearrows.gif index 218872cc..9fe89f47 100644 Binary files a/editor/jgraduate/images/rangearrows.gif and b/editor/jgraduate/images/rangearrows.gif differ diff --git a/editor/jgraduate/jpicker-1.0.12.min.js b/editor/jgraduate/jpicker-1.0.12.min.js deleted file mode 100644 index 9b408ad9..00000000 --- a/editor/jgraduate/jpicker-1.0.12.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(e,a){var d=function(t,k){var o=this,j=t.find("img"),B=0,A=100,s=100,z=0,w=100,r=100,q=0,p=0,m,n=function(x){var y=t.offset();m={left:y.left+parseInt(t.css("border-left-width")),top:y.top+parseInt(t.css("border-top-width"))};u(x);o.draw();e(document).bind("mousemove",l).bind("mouseup",h);x.stopPropagation();x.preventDefault();return false;},l=function(x){u(x);o.draw();x.stopPropagation();x.preventDefault();return false;},h=function(x){e(document).unbind("mouseup",h).unbind("mousemove",l);x.stopPropagation();x.preventDefault();return false;},u=function(E){var C=E.pageX-m.left,x=E.pageY-m.top,D=t.w,y=t.h;if(C<0){C=0;}else{if(C>D){C=D;}}if(x<0){x=0;}else{if(x>y){x=y;}}o.set_X(((C/D)*s)+B);o.set_Y(((x/y)*r)+z);e.isFunction(o.valuesChanged)&&o.valuesChanged(o);};e.extend(true,o,{settings:k,valuesChanged:e.isFunction(arguments[2])&&arguments[2]||null,get_X:function(){return q;},set_X:function(x){x=Math.floor(x);if(q==x){return;}if(xA){x=A;}}q=x;},get_Y:function(){return p;},set_Y:function(x){x=Math.floor(x);if(p==x){return;}if(xw){x=w;}}p=x;},set_RangeX:function(y,x){if(B==y&&A==x){return;}if(y>x){return;}B=y;A=x;s=A-B;},set_RangeY:function(y,x){if(z==y&&w==x){return;}if(y>x){return;}z=y;w=x;r=w-z;},draw:function(){var D=0,x=0,F=t.w,C=t.h,E=j.w,y=j.h;if(s>0){if(q==A){D=F;}else{D=Math.floor((q/s)*F);}}if(r>0){if(p==w){x=C;}else{x=Math.floor((p/r)*C);}}if(E>F){D=(F>>1)-(E>>1);}else{D-=E>>1;}if(y>C){x=(C>>1)-(y>>1);}else{x-=y>>1;}j.css({left:D+"px",top:x+"px"});},destroy:function(){e(document).unbind("mouseup",h).unbind("mousemove",l);t.unbind("mousedown",n);t=null;j=null;o.valuesChanged=null;}});var v=o.settings;j.src=v.arrow&&v.arrow.image;j.w=v.arrow&&v.arrow.width||j.width();j.h=v.arrow&&v.arrow.height||j.height();t.w=v.map&&v.map.width||t.width();t.h=v.map&&v.map.height||t.height();t.bind("mousedown",n);o.draw();e.isFunction(o.valuesChanged)&&o.valuesChanged(o);},b=function(m){var l=this,w=function(A){if(A.target.value==""){return;}if(!u.get_R()){s.red.val(0);}if(!u.get_G()){s.green.val(0);}if(!u.get_B()){s.blue.val(0);}if(!u.get_A()){s.alpha.val(100);}q(A);l.setValuesFromHsva();e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},p=function(A){if(A.target.value==""){return;}if(!u.get_H()){s.hue.val(0);}if(!u.get_S()){s.saturation.val(0);}if(!u.get_V()){s.value.val(0);}if(!u.get_A()){s.alpha.val(100);}o(A);l.setValuesFromRgba();e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},r=function(A){if(A.target.value==""){return;}if(!u.get_R()){s.red.val(0);}if(!u.get_G()){s.green.val(0);}if(!u.get_B()){s.blue.val(0);}if(!u.get_H()){s.hue.val(0);}if(!u.get_S()){s.saturation.val(0);}if(!u.get_V()){s.value.val(0);}y(A);l.setValuesFromRgba();e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},t=function(A){if(A.target.value==""){l.setValuesFromRgba();}e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},k=function(A){if(A.target.value==""){l.setValuesFromHsva();}e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},x=function(A){if(A.target.value==""){s.alpha.val(100);}e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},z=function(A){v(A);l.setValuesFromHex();e.isFunction(l.valuesChanged)&&l.valuesChanged(l);},j=function(A){if(A.target.value==""){l.setValuesFromHex();}},o=function(D){if(!n(D)){return D;}var C=h(s.red.val(),0,255),B=h(s.green.val(),0,255),A=h(s.blue.val(),0,255);s.red.val(C!=null?C:"");s.green.val(B!=null?B:"");s.blue.val(A!=null?A:"");},y=function(B){if(!n(B)){return B;}var A=h(s.alpha.val(),0,100);s.alpha.val(A!=null?A:"");},q=function(D){if(!n(D)){return D;}var A=h(s.hue.val(),0,360),B=h(s.saturation.val(),0,100),C=h(s.value.val(),0,100);s.hue.val(A!=null?A:"");s.saturation.val(B!=null?B:"");s.value.val(C!=null?C:"");},v=function(A){if(!n(A)){return A;}s.hex.val(s.hex.val().replace(/[^a-fA-F0-9]/g,"").toLowerCase().substring(0,8));},n=function(A){switch(A.keyCode){case 9:case 16:case 29:case 37:case 38:case 40:return false;case"c".charCodeAt():case"v".charCodeAt():if(A.ctrlKey){return false;}}return true;},h=function(C,B,A){if(C==""||isNaN(C)){return B;}if(C>A){return A;}if(C6){l=m.substring(0,2);k=m.substring(2,4);h=m.substring(4,6);j=m.substring(6,m.length);}else{if(m.length>4){l=m.substring(4,m.length);m=m.substring(0,4);}if(m.length>2){k=m.substring(2,m.length);m=m.substring(0,2);}if(m.length>0){h=m.substring(0,m.length);}}return{r:this.hexToInt(l),g:this.hexToInt(k),b:this.hexToInt(h),a:Math.floor((this.hexToInt(j)*100)/255)};},validateHex:function(h){h=h.toLowerCase().replace(/[^a-f0-9]/g,"");if(h.length>8){h=h.substring(0,8);}return h;},rgbaToHex:function(h){return this.intToHex(h.r)+this.intToHex(h.g)+this.intToHex(h.b)+this.intToHex(Math.floor((h.a*255)/100));},intToHex:function(j){var h=Math.floor(j).toString(16);if(h.length==1){h=("0"+h);}return h.toLowerCase();},hexToInt:function(h){return parseInt(h,16);},rgbToHsv:function(l){var o=l.r/255,n=l.g/255,j=l.b/255,k={h:0,s:0,v:0},m=0,h=0,p;if(o>=n&&o>=j){h=o;m=n>j?j:n;}else{if(n>=j&&n>=o){h=n;m=o>j?j:o;}else{h=j;m=n>o?o:n;}}k.v=h;k.s=h?(h-m)/h:0;if(!k.s){k.h=0;}else{p=h-m;if(o==h){k.h=(n-j)/p;}else{if(n==h){k.h=2+(j-o)/p;}else{k.h=4+(o-n)/p;}}k.h=parseInt(k.h*60);if(k.h<0){k.h+=360;}}k.s=Math.floor(k.s*100);k.v=Math.floor(k.v*100);return k;},hsvToRgb:function(n){var r={r:0,g:0,b:0,a:100},m=n.h,x=n.s,u=n.v;if(x==0){if(u==0){r.r=r.g=r.b=0;}else{r.r=r.g=r.b=Math.floor(u*255/100);}}else{if(m==360){m=0;}m/=60;x=x/100;u=u/100;var l=Math.floor(m),o=m-l,k=u*(1-x),j=u*(1-(x*o)),w=u*(1-(x*(1-o)));switch(l){case 0:r.r=u;r.g=w;r.b=k;break;case 1:r.r=j;r.g=u;r.b=k;break;case 2:r.r=k;r.g=u;r.b=w;break;case 3:r.r=k;r.g=j;r.b=u;break;case 4:r.r=w;r.g=k;r.b=u;break;case 5:r.r=u;r.g=k;r.b=j;break;}r.r=Math.floor(r.r*255);r.g=Math.floor(r.g*255);r.b=Math.floor(r.b*255);}return r;}}};var f=e.jPicker.Color,c=e.jPicker.List,g=e.jPicker.ColorMethods;e.fn.jPicker=function(j){var h=arguments;return this.each(function(){var w=e(this),y=e.extend(true,{},e.fn.jPicker.defaults,j);if(w.get(0).nodeName.toLowerCase()=="input"){e.extend(true,y,{window:{bindToInput:true,expandable:true,input:w}});if(g.validateHex(w.val())){y.color.active=new f({hex:w.val(),a:y.color.active.get_A()});y.color.current=new f({hex:w.val(),a:y.color.active.get_A()});}}if(y.window.expandable){w.after('    ');}else{y.window.liveUpdate=false;}var U=parseFloat(navigator.appVersion.split("MSIE")[1])<7&&document.body.filters,ay=null,av=null,au=null,T=null,S=null,R=null,Q=null,P=null,O=null,V=null,aa=null,aA=null,ak=null,am=null,ao=null,I=null,aw=null,G=null,Y=null,az=null,M=null,L=null,at=null,aq=null,A=null,l=null,J=null,ap=null,ab=null,ai=null,o=null,m=null,C=null,u=null,an=function(aE){K.active=az.color;var aF=K.active,aG=q.clientPath,aD=aF.get_Hex(),aC=function(aH){ad(aH,100);aH.css({backgroundColor:"transparent",backgroundPosition:"0px 0px",filter:""});};aC(ay);aC(av);aC(au);aC(T);aC(S);aC(R);aC(Q);aC(P);aC(O);aa.add(aA).add(ak).add(am).add(ao).add(I).removeAttr("checked");switch(aE){case"h":aa.attr({checked:true});ay.css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent"});av.css({backgroundColor:"transparent"});x(av,-256);ad(av,100);x(Q,-256);ad(O,0);break;case"s":aA.attr({checked:true});x(ay,-512);x(av,-768);z(R,aF.get_Hex());x(Q,-512);ad(O,0);break;case"v":ak.attr({checked:true});z(ay,"000000");x(av,-1024);R.css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent"});x(Q,-768);ad(O,0);break;case"r":am.attr({checked:true});x(av,-1536);x(ay,-1280);x(Q,-1024);x(R,-1280);x(S,-1536);x(T,-1792);ad(O,0);break;case"g":ao.attr({checked:true});x(av,-2048);x(ay,-1792);x(Q,-2048);x(R,-2304);x(S,-2560);x(T,-2816);ad(O,0);break;case"b":I.attr({checked:true});x(av,-2560);x(ay,-2304);x(Q,-3072);x(R,-3328);x(S,-3584);x(T,-3840);ad(O,0);break;case"a":aw.attr({checked:true});x(ay,-512);x(av,-768);ad(av,0);z(R,aF.get_Hex());ad(Q,0);ad(P,0);ad(O,100);break;default:throw ("Invalid Mode");break;}switch(aE){case"h":G.set_RangeX(0,100);G.set_RangeY(0,100);Y.set_RangeY(0,360);break;case"s":case"v":case"a":G.set_RangeX(0,360);G.set_RangeY(0,100);Y.set_RangeY(0,100);break;case"r":case"g":case"b":G.set_RangeX(0,255);G.set_RangeY(0,255);Y.set_RangeY(0,255);break;}K.mode=aE;v();G.draw();Y.draw();ah();if(aj.expandable&&aj.liveUpdate){o.css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent"});ad(m,100-aF.get_A());if(aj.bindToInput){aj.input.val(aF.get_Rgba()||"").css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent",color:aF.get_V()>75?"#000000":"#ffffff"});}}e.isFunction(w.liveCallback)&&w.liveCallback(aF);},n=function(){v();G.draw();Y.draw();ah();K.active=az.color;var aD=K.active;if(aj.expandable&&aj.liveUpdate){var aC=aD.get_Hex();o.css({backgroundColor:aC&&aC.length==6?"#"+aC:"transparent"});ad(m,100-aD.get_A());if(aj.bindToInput){aj.input.val(az.fields.hex.val()||"").css({backgroundColor:aC&&aC.length==6?"#"+aC:"transparent",color:aD.get_V()>75?"#000000":"#ffffff"});}}e.isFunction(w.liveCallback)&&w.liveCallback(aD);},B=function(){if(!az||!G||!Y){return;}K.active=az.color;var aC=az.fields,aE=K.active;switch(K.mode){case"h":aC.saturation.val(G.get_X());aC.value.val(100-G.get_Y());if(aE.get_H()==null){aC.hue.val(0);}break;case"s":case"a":aC.hue.val(G.get_X());aC.value.val(100-G.get_Y());if(aE.get_S()==null){aC.saturation.val(0);}break;case"v":aC.hue.val(G.get_X());aC.saturation.val(100-G.get_Y());if(aE.get_V()==null){aC.value.val(0);}break;case"r":aC.green.val(255-G.get_Y());aC.blue.val(G.get_X());if(aE.get_R()==null){aC.red.val(0);}break;case"g":aC.red.val(255-G.get_Y());aC.blue.val(G.get_X());if(aE.get_G()==null){aC.green.val(0);}break;case"b":aC.red.val(G.get_X());aC.green.val(255-G.get_Y());if(aE.get_B()==null){aC.blue.val(0);}break;}if(aE.get_A()==null){aC.alpha.val(100);az.setValuesFromHsva();v();Y.draw();}switch(K.mode){case"h":case"s":case"v":case"a":az.setValuesFromHsva();break;case"r":case"g":case"b":az.setValuesFromRgba();break;}ah();if(aj.expandable&&aj.liveUpdate){var aD=aE.get_Hex();o.css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent"});ad(m,100-aE.get_A());if(aj.bindToInput){aj.input.val(aE.get_Rgba()||"").css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent",color:aE.get_V()>75?"#000000":"#ffffff"});}}e.isFunction(w.liveCallback)&&w.liveCallback(aE);},al=function(){if(!az||!G||!Y){return;}K.active=az.color;var aC=az.fields,aE=K.active;switch(K.mode){case"h":aC.hue.val(360-Y.get_Y());if(aE.get_S()==null){aC.saturation.val(0);}if(aE.get_V()==null){aC.value.val(0);}break;case"s":aC.saturation.val(100-Y.get_Y());if(aE.get_H()==null){aC.hue.val(0);}if(aE.get_V()==null){aC.value.val(0);}break;case"v":aC.value.val(100-Y.get_Y());if(aE.get_H()==null){aC.hue.val(0);}if(aE.get_S()==null){aC.saturation.val(0);}break;case"r":aC.red.val(255-Y.get_Y());if(aE.get_G()==null){aC.green.val(0);}if(aE.get_B()==null){aC.blue.val(0);}break;case"g":aC.green.val(255-Y.get_Y());if(aE.get_R()==null){aC.red.val(0);}if(aE.get_B()==null){aC.blue.val(0);}break;case"b":aC.blue.val(255-Y.get_Y());if(aE.get_R()==null){aC.red.val(0);}if(aE.get_G()==null){aC.green.val(0);}break;case"a":aC.alpha.val(100-Y.get_Y());if(aE.get_R()==null){aC.red.val(0);}if(aE.get_G()==null){aC.green.val(0);}if(aE.get_B()==null){aC.blue.val(0);}break;}if(aE.get_A()==null){aC.alpha.val(100);}switch(K.mode){case"h":case"s":case"v":az.setValuesFromHsva();break;case"r":case"g":case"b":case"a":az.setValuesFromRgba();break;}ah();if(aj.expandable&&aj.liveUpdate){var aD=aE.get_Hex();o.css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent"});ad(m,100-aE.get_A());if(aj.bindToInput){aj.input.val(aE.get_Rgba()||"").css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent",color:aE.get_V()>75?"#000000":"#ffffff"});}}e.isFunction(w.liveCallback)&&w.liveCallback(aE);},v=function(){K.active=az.color;var aF=0,aE=K.active;switch(w.settings.color.mode){case"h":aF=360-aE.get_H();break;case"s":aF=100-aE.get_S();break;case"v":aF=100-aE.get_V();break;case"r":aF=255-aE.get_R();break;case"g":aF=255-aE.get_G();break;case"b":aF=255-aE.get_B();break;case"a":aF=100-aE.get_A();break;}Y.set_Y(aF);var aD=0,aC=0;switch(w.settings.color.mode){case"h":aD=aE.get_S();aC=100-aE.get_V();break;case"s":case"a":aD=aE.get_H();aC=100-aE.get_V();break;case"v":aD=aE.get_H();aC=100-aE.get_S();break;case"r":aD=aE.get_B();aC=255-aE.get_G();break;case"g":aD=aE.get_B();aC=255-aE.get_R();break;case"b":aD=aE.get_R();aC=255-aE.get_G();break;}G.set_X(aD);G.set_Y(aC);},ah=function(){aB();ar();Z();},aB=function(){try{var aC=az.color.get_Hex();A.css({backgroundColor:aC&&aC.length==6?"#"+aC:"transparent"});ad(A,az.color.get_A());}catch(aD){}},ar=function(){if(!K||!az){return;}K.active=az.color;var aC=K.active;switch(K.mode){case"h":z(ay,new f({h:aC.get_H(),s:100,v:100}).get_Hex());break;case"s":case"a":ad(av,100-aC.get_S());break;case"v":ad(av,aC.get_V());break;case"r":ad(av,aC.get_R()/255*100);break;case"g":ad(av,aC.get_G()/255*100);break;case"b":ad(av,aC.get_B()/255*100);break;}ad(au,100-aC.get_A());},Z=function(){if(!K||!az){return;}K.active=az.color;var aG=K.active;switch(K.mode){case"h":ad(P,100-aG.get_A());break;case"s":var aH=new f({h:aG.get_H(),s:100,v:aG.get_V()});z(R,aH.get_Hex());ad(P,100-aG.get_A());break;case"v":var aJ=new f({h:aG.get_H(),s:aG.get_S(),v:100});z(R,aJ.get_Hex());ad(P,100-aG.get_A());break;case"r":case"g":case"b":var aI=0,aK=0;if(K.mode=="r"){aI=aG.get_B();aK=aG.get_G();}else{if(K.mode=="g"){aI=aG.get_B();aK=aG.get_R();}else{if(K.mode=="b"){aI=aG.get_R();aK=aG.get_G();}}}var aC=aI/255*100,aF=aK/255*100,aE=(255-aI)/255*100,aD=(255-aK)/255*100;ad(T,aD>aE?aE:aD);ad(S,aD>aC?aC:aD);ad(R,aF>aC?aC:aF);ad(Q,aF>aE?aE:aF);ad(P,100-aG.get_A());break;case"a":z(R,aG.get_Hex());break;}},z=function(aC,aD){aC.css({backgroundColor:aD&&aD.length==6?"#"+aD:"transparent"});},t=function(aC,aD){aC.css({backgroundImage:"url("+aD+")"});},x=function(aC,aD){aC.css({backgroundPosition:"0px "+aD+"px"});},ad=function(aD,aC){aD.css({visibility:aC>0?"visible":"hidden"});if(aC>0&&aC<100){aD.css({opacity:aC/100});}else{if(aC==0||aC==100){aD.css({opacity:""});}}},E=function(){az.fields.hex.val(K.current.get_Rgba()||"");az.setValuesFromHex();e.isFunction(az.valuesChanged)&&az.valuesChanged(az);},D=function(aC){an(aC.target.value);},ae=function(){E();},s=function(){E();aj.expandable&&w.hide();e.isFunction(w.cancelCallback)&&w.cancelCallback(K.active);},X=function(){var aD=K.active;K.current=new f({hex:aD.get_Rgba()});var aC=aD.get_Hex();l.css({backgroundColor:aC&&aC.length==6?"#"+aC:"transparent"});ad(l,az.color.get_A());if(aj.expandable){o.css({backgroundColor:aC&&aC.length==6?"#"+aC:"transparent"});ad(m,100-aD.get_A());if(aj.bindToInput){aj.input.val(aD.get_Rgba()||"").css({backgroundColor:aC&&aC.length==6?"#"+aC:"transparent",color:aD.get_V()>75?"#000000":"#ffffff"});}}e.isFunction(w.commitCallback)&&w.commitCallback(aD);},p=function(){X();aj.expandable&&w.hide();},ag=function(){w.show();},W=function(aE){var aC=aj.element,aD=aj.page;M=parseInt(V.css("left"));L=parseInt(V.css("top"));at=aE.pageX;aq=aE.pageY;e(document).bind("mousemove",k).bind("mouseup",r);aE.stopPropagation();aE.preventDefault();return false;},k=function(aC){V.css({left:M-(at-aC.pageX)+"px",top:L-(aq-aC.pageY)+"px"});aC.stopPropagation();aC.preventDefault();return false;},r=function(aC){e(document).unbind("mousemove",k).unbind("mouseup",r);aC.stopPropagation();aC.preventDefault();return false;},F=function(aC){az.fields.hex.val(w.settings.window.input.val());az.bindedHexKeyUp(aC);},H=function(aC){az.fields.hex.val(new f({hex:e(this).attr("title")}).get_Rgba()||"");az.setValuesFromHex();e.isFunction(az.valuesChanged)&&az.valuesChanged(az);};e.extend(true,w,{id:w.attr("id"),settings:y,color:null,icon:null,commitCallback:e.isFunction(h[1])&&h[1]||null,liveCallback:e.isFunction(h[2])&&h[2]||null,cancelCallback:e.isFunction(h[3])&&h[3]||null,show:function(){if(document.all){var aD=false;for(i=0;i>1)-259)-w.next().offset().left+"px":aj.position.x,position:"absolute",top:aj.position.y=="top"?"-350px":aj.position.y=="center"?"-158px":aj.position.y=="bottom"?"25px":aj.position.y});}if((typeof(K.active)).toString().toLowerCase()=="string"){K.active=new f({hex:K.active});}V.html(''+(aj.expandable?'':"")+'
 

'+(aj.title||af.text.title)+'

   
      
'+af.text.newColor+'
  
'+af.text.currentColor+'
 
°
%


 %
%
');aa=V.find(".jPicker_HueRadio");aA=V.find(".jPicker_SaturationRadio");ak=V.find(".jPicker_BrightnessRadio");am=V.find(".jPicker_RedRadio");ao=V.find(".jPicker_GreenRadio");I=V.find(".jPicker_BlueRadio");aw=V.find(".jPicker_AlphaRadio");ay=V.find(".jPicker_ColorMap_l1");av=V.find(".jPicker_ColorMap_l2");au=V.find(".jPicker_ColorMap_l3");T=V.find(".jPicker_ColorBar_l1");S=V.find(".jPicker_ColorBar_l2");R=V.find(".jPicker_ColorBar_l3");Q=V.find(".jPicker_ColorBar_l4");P=V.find(".jPicker_ColorBar_l5");O=V.find(".jPicker_ColorBar_l6");J=V.find(".jPicker_NewCurrent");var ac=K.active.get_Hex();A=V.find(".jPicker_Active").css({backgroundColor:ac&&ac.length==6?"#"+ac:"transparent"});l=V.find(".jPicker_Current").css({backgroundColor:ac&&ac.length==6?"#"+ac:"transparent"});ap=V.find(".jPicker_Ok");ab=V.find(".jPicker_Cancel");ai=V.find(".jPicker_Grid");w.color=e(".Picker_Color");w.icon=e(".jPicker_Icon");az=new b(V,n);G=new d(V.find(".jPicker_ColorMap"),{map:{width:q.colorMap.width,height:q.colorMap.height},arrow:{image:q.clientPath+q.colorMap.arrow.file,width:q.colorMap.arrow.width,height:q.colorMap.arrow.height}},B);Y=new d(V.find(".jPicker_ColorBar"),{map:{width:q.colorBar.width,height:q.colorBar.height},arrow:{image:q.clientPath+q.colorBar.arrow.file,width:q.colorBar.arrow.width,height:q.colorBar.arrow.height}},al);t(ay,q.clientPath+"Maps.png");t(av,q.clientPath+"Maps.png");t(au,q.clientPath+"map-opacity.png");t(T,q.clientPath+"Bars.png");t(S,q.clientPath+"Bars.png");t(R,q.clientPath+"Bars.png");t(Q,q.clientPath+"Bars.png");t(P,q.clientPath+"bar-opacity.png");t(O,q.clientPath+"AlphaBar.png");t(J,q.clientPath+"preview-opacity.png");if(aj.expandable){o=w.next().find(".jPicker_Color").css({backgroundColor:ac&&ac.length==6?"#"+ac:"transparent"});m=w.next().find(".jPicker_Alpha");t(m,q.clientPath+"bar-opacity.png");ad(m,100-K.active.get_A());C=w.next().find(".jPicker_Icon").css({backgroundImage:"url("+q.clientPath+q.picker.file+")"}).bind("click",ag);if(aj.bindToInput){aj.input.bind("keyup",F).bind("change",F);}}aa.add(aA).add(ak).add(am).add(ao).add(I).add(aw).bind("click",D);l.bind("click",ae);ab.bind("click",s);ap.bind("click",p);if(aj.expandable){u=V.find(".jPicker_MoveBar").bind("mousedown",W);}if(K.quickList&&K.quickList.length>0){ai.html("");for(i=0;i ');var N=K.quickList[i].get_Hex();V.find(".jPicker_QuickColor").eq(i).css({backgroundColor:N&&N.length==6?"#"+N:"transparent",backgroundImage:N?"none":"url("+q.clientPath+"NoColor.png)"}).click(H);}}an(K.mode);az.fields.hex.val(K.active.get_Rgba()||"");az.setValuesFromHex();v();ah();if(!aj.expandable){w.show();}c.push(w);});};e.fn.jPicker.defaults={window:{title:null,position:{x:"screenCenter",y:"top"},expandable:false,liveUpdate:true},color:{mode:"h",active:new f({hex:"#ffcc00ff"}),quickList:[new f({h:360,s:33,v:100}),new f({h:360,s:66,v:100}),new f({h:360,s:100,v:100}),new f({h:360,s:100,v:75}),new f({h:360,s:100,v:50}),new f({h:180,s:0,v:100}),new f({h:30,s:33,v:100}),new f({h:30,s:66,v:100}),new f({h:30,s:100,v:100}),new f({h:30,s:100,v:75}),new f({h:30,s:100,v:50}),new f({h:180,s:0,v:90}),new f({h:60,s:33,v:100}),new f({h:60,s:66,v:100}),new f({h:60,s:100,v:100}),new f({h:60,s:100,v:75}),new f({h:60,s:100,v:50}),new f({h:180,s:0,v:80}),new f({h:90,s:33,v:100}),new f({h:90,s:66,v:100}),new f({h:90,s:100,v:100}),new f({h:90,s:100,v:75}),new f({h:90,s:100,v:50}),new f({h:180,s:0,v:70}),new f({h:120,s:33,v:100}),new f({h:120,s:66,v:100}),new f({h:120,s:100,v:100}),new f({h:120,s:100,v:75}),new f({h:120,s:100,v:50}),new f({h:180,s:0,v:60}),new f({h:150,s:33,v:100}),new f({h:150,s:66,v:100}),new f({h:150,s:100,v:100}),new f({h:150,s:100,v:75}),new f({h:150,s:100,v:50}),new f({h:180,s:0,v:50}),new f({h:180,s:33,v:100}),new f({h:180,s:66,v:100}),new f({h:180,s:100,v:100}),new f({h:180,s:100,v:75}),new f({h:180,s:100,v:50}),new f({h:180,s:0,v:40}),new f({h:210,s:33,v:100}),new f({h:210,s:66,v:100}),new f({h:210,s:100,v:100}),new f({h:210,s:100,v:75}),new f({h:210,s:100,v:50}),new f({h:180,s:0,v:30}),new f({h:240,s:33,v:100}),new f({h:240,s:66,v:100}),new f({h:240,s:100,v:100}),new f({h:240,s:100,v:75}),new f({h:240,s:100,v:50}),new f({h:180,s:0,v:20}),new f({h:270,s:33,v:100}),new f({h:270,s:66,v:100}),new f({h:270,s:100,v:100}),new f({h:270,s:100,v:75}),new f({h:270,s:100,v:50}),new f({h:180,s:0,v:10}),new f({h:300,s:33,v:100}),new f({h:300,s:66,v:100}),new f({h:300,s:100,v:100}),new f({h:300,s:100,v:75}),new f({h:300,s:100,v:50}),new f({h:180,s:0,v:0}),new f({h:330,s:33,v:100}),new f({h:330,s:66,v:100}),new f({h:330,s:100,v:100}),new f({h:330,s:100,v:75}),new f({h:330,s:100,v:50}),new f()]},images:{clientPath:"/jPicker/images/",colorMap:{width:256,height:256,arrow:{file:"mappoint.gif",width:15,height:15}},colorBar:{width:20,height:256,arrow:{file:"rangearrows.gif",width:40,height:9}},picker:{file:"picker.gif",width:25,height:24}},localization:{text:{title:"Drag Markers To Pick A Color",newColor:"new",currentColor:"current",ok:"OK",cancel:"Cancel"},tooltips:{colors:{newColor:"New Color - Press “OK” To Commit",currentColor:"Click To Revert To Original Color"},buttons:{ok:"Commit To This Color Selection",cancel:"Cancel And Revert To Original Color"},hue:{radio:"Set To “Hue” Color Mode",textbox:"Enter A “Hue” Value (0-360°)"},saturation:{radio:"Set To “Saturation” Color Mode",textbox:"Enter A “Saturation” Value (0-100%)"},brightness:{radio:"Set To “Brightness” Color Mode",textbox:"Enter A “Brightness” Value (0-100%)"},red:{radio:"Set To “Red” Color Mode",textbox:"Enter A “Red” Value (0-255)"},green:{radio:"Set To “Green” Color Mode",textbox:"Enter A “Green” Value (0-255)"},blue:{radio:"Set To “Blue” Color Mode",textbox:"Enter A “Blue” Value (0-255)"},alpha:{radio:"Set To “Alpha” Color Mode",textbox:"Enter A “Alpha” Value (0-100)"},hex:{textbox:"Enter A “Hex” Color Value (#000000-#ffffff)"}}}};})(jQuery,"1.0.12"); \ No newline at end of file diff --git a/editor/jgraduate/jpicker.min.js b/editor/jgraduate/jpicker.min.js new file mode 100644 index 00000000..b404c7f6 --- /dev/null +++ b/editor/jgraduate/jpicker.min.js @@ -0,0 +1,2000 @@ +/* + * jPicker 1.1.5 + * + * jQuery Plugin for Photoshop style color picker + * + * Copyright (c) 2010 Christopher T. Tillman + * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/) + * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE + * + * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework. + * + * John Dyers' website: (http://johndyer.name) + * Color Picker page: (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx) + * + */ +(function($, version) +{ + Math.precision = function(value, precision) + { + if (precision === undefined) precision = 0; + return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision); + }; + var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions + function(bar, options) + { + var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code + arrow = bar.find('img:first'), // the arrow image to drag + minX = 0, + maxX = 100, + rangeX = 100, + minY = 0, + maxY = 100, + rangeY = 100, + x = 0, + y = 0, + offset, + timeout, + changeEvents = new Array(), + fireChangeEvents = + function(context) + { + for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context); + }, + mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location + function(e) + { + var off = bar.offset(); + offset = { l: off.left | 0, t: off.top | 0 }; + clearTimeout(timeout); + timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run + function() + { + setValuesFromMousePosition.call($this, e); + }, 0); + // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing + $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp); + e.preventDefault(); // don't try to select anything or drag the image to the desktop + }, + mouseMove = // set the values as the mouse moves + function(e) + { + clearTimeout(timeout); + timeout = setTimeout( + function() + { + setValuesFromMousePosition.call($this, e); + }, 0); + e.stopPropagation(); + e.preventDefault(); + return false; + }, + mouseUp = // unbind the document events - they aren't needed when not dragging + function(e) + { + $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove); + e.stopPropagation(); + e.preventDefault(); + return false; + }, + setValuesFromMousePosition = // calculate mouse position and set value within the current range + function(e) + { + var locX = e.pageX - offset.l, + locY = e.pageY - offset.t, + barW = bar.w, // local copies for YUI compressor + barH = bar.h; + // keep the arrow within the bounds of the bar + if (locX < 0) locX = 0; + else if (locX > barW) locX = barW; + if (locY < 0) locY = 0; + else if (locY > barH) locY = barH; + val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY }); + }, + draw = + function() + { + var arrowOffsetX = 0, + arrowOffsetY = 0, + barW = bar.w, + barH = bar.h, + arrowW = arrow.w, + arrowH = arrow.h; + setTimeout( + function() + { + if (rangeX > 0) // range is greater than zero + { + // constrain to bounds + if (x == maxX) arrowOffsetX = barW; + else arrowOffsetX = ((x / rangeX) * barW) | 0; + } + if (rangeY > 0) // range is greater than zero + { + // constrain to bounds + if (y == maxY) arrowOffsetY = barH; + else arrowOffsetY = ((y / rangeY) * barH) | 0; + } + // if arrow width is greater than bar width, center arrow and prevent horizontal dragging + if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest) + else arrowOffsetX -= arrowW >> 1; + // if arrow height is greater than bar height, center arrow and prevent vertical dragging + if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1); + else arrowOffsetY -= arrowH >> 1; + // set the arrow position based on these offsets + arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' }); + }, 0); + }, + val = + function(name, value, context) + { + var set = value !== undefined; + if (!set) + { + if (name === undefined || name == null) name = 'xy'; + switch (name.toLowerCase()) + { + case 'x': return x; + case 'y': return y; + case 'xy': + default: return { x: x, y: y }; + } + } + if (context != null && context == $this) return; + var changed = false, + newX, + newY; + if (name == null) name = 'xy'; + switch (name.toLowerCase()) + { + case 'x': + newX = value && (value.x && value.x | 0 || value | 0) || 0; + break; + case 'y': + newY = value && (value.y && value.y | 0 || value | 0) || 0; + break; + case 'xy': + default: + newX = value && value.x && value.x | 0 || 0; + newY = value && value.y && value.y | 0 || 0; + break; + } + if (newX != null) + { + if (newX < minX) newX = minX; + else if (newX > maxX) newX = maxX; + if (x != newX) + { + x = newX; + changed = true; + } + } + if (newY != null) + { + if (newY < minY) newY = minY; + else if (newY > maxY) newY = maxY; + if (y != newY) + { + y = newY; + changed = true; + } + } + changed && fireChangeEvents.call($this, context || $this); + }, + range = + function (name, value) + { + var set = value !== undefined; + if (!set) + { + if (name === undefined || name == null) name = 'all'; + switch (name.toLowerCase()) + { + case 'minx': return minX; + case 'maxx': return maxX; + case 'rangex': return { minX: minX, maxX: maxX, rangeX: rangeX }; + case 'miny': return minY; + case 'maxy': return maxY; + case 'rangey': return { minY: minY, maxY: maxY, rangeY: rangeY }; + case 'all': + default: return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY }; + } + } + var changed = false, + newMinX, + newMaxX, + newMinY, + newMaxY; + if (name == null) name = 'all'; + switch (name.toLowerCase()) + { + case 'minx': + newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0; + break; + case 'maxx': + newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0; + break; + case 'rangex': + newMinX = value && value.minX && value.minX | 0 || 0; + newMaxX = value && value.maxX && value.maxX | 0 || 0; + break; + case 'miny': + newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0; + break; + case 'maxy': + newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0; + break; + case 'rangey': + newMinY = value && value.minY && value.minY | 0 || 0; + newMaxY = value && value.maxY && value.maxY | 0 || 0; + break; + case 'all': + default: + newMinX = value && value.minX && value.minX | 0 || 0; + newMaxX = value && value.maxX && value.maxX | 0 || 0; + newMinY = value && value.minY && value.minY | 0 || 0; + newMaxY = value && value.maxY && value.maxY | 0 || 0; + break; + } + if (newMinX != null && minX != newMinX) + { + minX = newMinX; + rangeX = maxX - minX; + } + if (newMaxX != null && maxX != newMaxX) + { + maxX = newMaxX; + rangeX = maxX - minX; + } + if (newMinY != null && minY != newMinY) + { + minY = newMinY; + rangeY = maxY - minY; + } + if (newMaxY != null && maxY != newMaxY) + { + maxY = newMaxY; + rangeY = maxY - minY; + } + }, + bind = + function (callback) + { + if ($.isFunction(callback)) changeEvents.push(callback); + }, + unbind = + function (callback) + { + if (!$.isFunction(callback)) return; + var i; + while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1); + }, + destroy = + function() + { + // unbind all possible events and null objects + $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove); + bar.unbind('mousedown', mouseDown); + bar = null; + arrow = null; + changeEvents = null; + }; + $.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls + { + val: val, + range: range, + bind: bind, + unbind: unbind, + destroy: destroy + }); + // initialize this control + arrow.src = options.arrow && options.arrow.image; + arrow.w = options.arrow && options.arrow.width || arrow.width(); + arrow.h = options.arrow && options.arrow.height || arrow.height(); + bar.w = options.map && options.map.width || bar.width(); + bar.h = options.map && options.map.height || bar.height(); + // bind mousedown event + bar.bind('mousedown', mouseDown); + bind.call($this, draw); + }, + ColorValuePicker = // controls for all the input elements for the typing in color values + function(picker, color, bindedHex, alphaPrecision) + { + var $this = this, // private properties and methods + inputs = picker.find('td.Text input'), + red = inputs.eq(3), + green = inputs.eq(4), + blue = inputs.eq(5), + alpha = inputs.length > 7 ? inputs.eq(6) : null, + hue = inputs.eq(0), + saturation = inputs.eq(1), + value = inputs.eq(2), + hex = inputs.eq(inputs.length > 7 ? 7 : 6), + ahex = inputs.length > 7 ? inputs.eq(8) : null, + keyUp = // hue, saturation, or value input box key up - validate value and set color + function(e) + { + if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return; + if (!validateKey(e)) return e; + switch (e.target) + { + case red.get(0): + red.val(setValueInRange.call($this, red.val(), 0, 255)); + color.val('r', red.val(), e.target); + break; + case green.get(0): + green.val(setValueInRange.call($this, green.val(), 0, 255)); + color.val('g', green.val(), e.target); + break; + case blue.get(0): + blue.val(setValueInRange.call($this, blue.val(), 0, 255)); + color.val('b', blue.val(), e.target); + break; + case alpha && alpha.get(0): + alpha.val(setValueInRange.call($this, alpha.val(), 0, 100)); + color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target); + break; + case hue.get(0): + hue.val(setValueInRange.call($this, hue.val(), 0, 360)); + color.val('h', hue.val(), e.target); + break; + case saturation.get(0): + saturation.val(setValueInRange.call($this, saturation.val(), 0, 100)); + color.val('s', saturation.val(), e.target); + break; + case value.get(0): + value.val(setValueInRange.call($this, value.val(), 0, 100)); + color.val('v', value.val(), e.target); + break; + case hex.get(0): + hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6)); + bindedHex && bindedHex.val(hex.val()); + color.val('hex', hex.val() != '' ? hex.val() : null, e.target); + break; + case bindedHex && bindedHex.get(0): + bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6)); + hex.val(bindedHex.val()); + color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target); + break; + case ahex && ahex.get(0): + ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2)); + color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target); + break; + } + }, + blur = // hue, saturation, or value input box blur - reset to original if value empty + function(e) + { + if (color.val() != null) + { + switch (e.target) + { + case red.get(0): red.val(color.val('r')); break; + case green.get(0): green.val(color.val('g')); break; + case blue.get(0): blue.val(color.val('b')); break; + case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break; + case hue.get(0): hue.val(color.val('h')); break; + case saturation.get(0): saturation.val(color.val('s')); break; + case value.get(0): value.val(color.val('v')); break; + case hex.get(0): + case bindedHex && bindedHex.get(0): + hex.val(color.val('hex')); + bindedHex && bindedHex.val(color.val('hex')); + break; + case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break; + } + } + }, + validateKey = // validate key + function(e) + { + switch(e.keyCode) + { + case 9: + case 16: + case 29: + case 37: + case 38: + case 40: + return false; + case 'c'.charCodeAt(): + case 'v'.charCodeAt(): + if (e.ctrlKey) return false; + } + return true; + }, + setValueInRange = // constrain value within range + function(value, min, max) + { + if (value == '' || isNaN(value)) return min; + if (value > max) return max; + if (value < min) return min; + return value; + }, + colorChanged = + function(ui, context) + { + var all = ui.val('all'); + if (context != red.get(0)) red.val(all != null ? all.r : ''); + if (context != green.get(0)) green.val(all != null ? all.g : ''); + if (context != blue.get(0)) blue.val(all != null ? all.b : ''); + if (alpha && context != alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : ''); + if (context != hue.get(0)) hue.val(all != null ? all.h : ''); + if (context != saturation.get(0)) saturation.val(all != null ? all.s : ''); + if (context != value.get(0)) value.val(all != null ? all.v : ''); + if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : ''); + if (bindedHex && context != bindedHex.get(0) && context != hex.get(0)) bindedHex.val(all != null ? all.hex : ''); + if (ahex && context != ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : ''); + }, + destroy = + function() + { + // unbind all events and null objects + red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur); + color.unbind(colorChanged); + red = null; + green = null; + blue = null; + alpha = null; + hue = null; + saturation = null; + value = null; + hex = null; + ahex = null; + }; + $.extend(true, $this, // public properties and methods + { + destroy: destroy + }); + red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur); + color.bind(colorChanged); + }; + $.jPicker = + { + List: [], // array holding references to each active instance of the control + Color: // color object - we will be able to assign by any color space type or retrieve any color space info + // we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported) + function(init) + { + var $this = this, + r, + g, + b, + a, + h, + s, + v, + changeEvents = new Array(), + fireChangeEvents = + function(context) + { + for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context); + }, + val = + function(name, value, context) + { + var set = value !== undefined; + if (!set) + { + if (name === undefined || name == null || name == '') name = 'all'; + if (r == null) return null; + switch (name.toLowerCase()) + { + case 'ahex': return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a }); + case 'hex': return val('ahex').substring(0, 6); + case 'all': return { r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') }; + default: + var ret={}; + for (var i = 0; i < name.length; i++) + { + switch (name.charAt(i)) + { + case 'r': + if (name.length == 1) ret = r; + else ret.r = r; + break; + case 'g': + if (name.length == 1) ret = g; + else ret.g = g; + break; + case 'b': + if (name.length == 1) ret = b; + else ret.b = b; + break; + case 'a': + if (name.length == 1) ret = a; + else ret.a = a; + break; + case 'h': + if (name.length == 1) ret = h; + else ret.h = h; + break; + case 's': + if (name.length == 1) ret = s; + else ret.s = s; + break; + case 'v': + if (name.length == 1) ret = v; + else ret.v = v; + break; + } + } + return ret == {} ? val.call($this, 'all') : ret; + break; + } + } + if (context != null && context == $this) return; + var changed = false; + if (name == null) name = ''; + if (value == null) + { + if (r != null) + { + r = null; + changed = true; + } + if (g != null) + { + g = null; + changed = true; + } + if (b != null) + { + b = null; + changed = true; + } + if (a != null) + { + a = null; + changed = true; + } + if (h != null) + { + h = null; + changed = true; + } + if (s != null) + { + s = null; + changed = true; + } + if (v != null) + { + v = null; + changed = true; + } + changed && fireChangeEvents.call($this, context || $this); + return; + } + switch (name.toLowerCase()) + { + case 'ahex': + case 'hex': + var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000'); + val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255 }, context); + break; + default: + if (value && (value.ahex != null || value.hex != null)) + { + val.call($this, 'ahex', value.ahex || value.hex || '00000000', context); + return; + } + var newV = {}, rgb = false, hsv = false; + if (value.r !== undefined && !name.indexOf('r') == -1) name += 'r'; + if (value.g !== undefined && !name.indexOf('g') == -1) name += 'g'; + if (value.b !== undefined && !name.indexOf('b') == -1) name += 'b'; + if (value.a !== undefined && !name.indexOf('a') == -1) name += 'a'; + if (value.h !== undefined && !name.indexOf('h') == -1) name += 'h'; + if (value.s !== undefined && !name.indexOf('s') == -1) name += 's'; + if (value.v !== undefined && !name.indexOf('v') == -1) name += 'v'; + for (var i = 0; i < name.length; i++) + { + switch (name.charAt(i)) + { + case 'r': + if (hsv) continue; + rgb = true; + newV.r = value && value.r && value.r | 0 || value && value | 0 || 0; + if (newV.r < 0) newV.r = 0; + else if (newV.r > 255) newV.r = 255; + if (r != newV.r) + { + r = newV.r; + changed = true; + } + break; + case 'g': + if (hsv) continue; + rgb = true; + newV.g = value && value.g && value.g | 0 || value && value | 0 || 0; + if (newV.g < 0) newV.g = 0; + else if (newV.g > 255) newV.g = 255; + if (g != newV.g) + { + g = newV.g; + changed = true; + } + break; + case 'b': + if (hsv) continue; + rgb = true; + newV.b = value && value.b && value.b | 0 || value && value | 0 || 0; + if (newV.b < 0) newV.b = 0; + else if (newV.b > 255) newV.b = 255; + if (b != newV.b) + { + b = newV.b; + changed = true; + } + break; + case 'a': + newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255; + if (newV.a < 0) newV.a = 0; + else if (newV.a > 255) newV.a = 255; + if (a != newV.a) + { + a = newV.a; + changed = true; + } + break; + case 'h': + if (rgb) continue; + hsv = true; + newV.h = value && value.h && value.h | 0 || value && value | 0 || 0; + if (newV.h < 0) newV.h = 0; + else if (newV.h > 360) newV.h = 360; + if (h != newV.h) + { + h = newV.h; + changed = true; + } + break; + case 's': + if (rgb) continue; + hsv = true; + newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100; + if (newV.s < 0) newV.s = 0; + else if (newV.s > 100) newV.s = 100; + if (s != newV.s) + { + s = newV.s; + changed = true; + } + break; + case 'v': + if (rgb) continue; + hsv = true; + newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100; + if (newV.v < 0) newV.v = 0; + else if (newV.v > 100) newV.v = 100; + if (v != newV.v) + { + v = newV.v; + changed = true; + } + break; + } + } + if (changed) + { + if (rgb) + { + r = r || 0; + g = g || 0; + b = b || 0; + var ret = ColorMethods.rgbToHsv({ r: r, g: g, b: b }); + h = ret.h; + s = ret.s; + v = ret.v; + } + else if (hsv) + { + h = h || 0; + s = s != null ? s : 100; + v = v != null ? v : 100; + var ret = ColorMethods.hsvToRgb({ h: h, s: s, v: v }); + r = ret.r; + g = ret.g; + b = ret.b; + } + a = a != null ? a : 255; + fireChangeEvents.call($this, context || $this); + } + break; + } + }, + bind = + function(callback) + { + if ($.isFunction(callback)) changeEvents.push(callback); + }, + unbind = + function(callback) + { + if (!$.isFunction(callback)) return; + var i; + while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1); + }, + destroy = + function() + { + changeEvents = null; + } + $.extend(true, $this, // public properties and methods + { + val: val, + bind: bind, + unbind: unbind, + destroy: destroy + }); + if (init) + { + if (init.ahex != null) val('ahex', init); + else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init); + else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init); + else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init); + } + }, + ColorMethods: // color conversion methods - make public to give use to external scripts + { + hexToRgba: + function(hex) + { + hex = this.validateHex(hex); + if (hex == '') return { r: null, g: null, b: null, a: null }; + var r = '00', g = '00', b = '00', a = '255'; + if (hex.length == 6) hex += 'ff'; + if (hex.length > 6) + { + r = hex.substring(0, 2); + g = hex.substring(2, 4); + b = hex.substring(4, 6); + a = hex.substring(6, hex.length); + } + else + { + if (hex.length > 4) + { + r = hex.substring(4, hex.length); + hex = hex.substring(0, 4); + } + if (hex.length > 2) + { + g = hex.substring(2, hex.length); + hex = hex.substring(0, 2); + } + if (hex.length > 0) b = hex.substring(0, hex.length); + } + return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) }; + }, + validateHex: + function(hex) + { + hex = hex.toLowerCase().replace(/[^a-f0-9]/g, ''); + if (hex.length > 8) hex = hex.substring(0, 8); + return hex; + }, + rgbaToHex: + function(rgba) + { + return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a); + }, + intToHex: + function(dec) + { + var result = (dec | 0).toString(16); + if (result.length == 1) result = ('0' + result); + return result.toLowerCase(); + }, + hexToInt: + function(hex) + { + return parseInt(hex, 16); + }, + rgbToHsv: + function(rgb) + { + var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }, min = 0, max = 0, delta; + if (r >= g && r >= b) + { + max = r; + min = g > b ? b : g; + } + else if (g >= b && g >= r) + { + max = g; + min = r > b ? b : r; + } + else + { + max = b; + min = g > r ? r : g; + } + hsv.v = max; + hsv.s = max ? (max - min) / max : 0; + if (!hsv.s) hsv.h = 0; + else + { + delta = max - min; + if (r == max) hsv.h = (g - b) / delta; + else if (g == max) hsv.h = 2 + (b - r) / delta; + else hsv.h = 4 + (r - g) / delta; + hsv.h = parseInt(hsv.h * 60); + if (hsv.h < 0) hsv.h += 360; + } + hsv.s = (hsv.s * 100) | 0; + hsv.v = (hsv.v * 100) | 0; + return hsv; + }, + hsvToRgb: + function(hsv) + { + var rgb = { r: 0, g: 0, b: 0, a: 100 }, h = hsv.h, s = hsv.s, v = hsv.v; + if (s == 0) + { + if (v == 0) rgb.r = rgb.g = rgb.b = 0; + else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0; + } + else + { + if (h == 360) h = 0; + h /= 60; + s = s / 100; + v = v / 100; + var i = h | 0, + f = h - i, + p = v * (1 - s), + q = v * (1 - (s * f)), + t = v * (1 - (s * (1 - f))); + switch (i) + { + case 0: + rgb.r = v; + rgb.g = t; + rgb.b = p; + break; + case 1: + rgb.r = q; + rgb.g = v; + rgb.b = p; + break; + case 2: + rgb.r = p; + rgb.g = v; + rgb.b = t; + break; + case 3: + rgb.r = p; + rgb.g = q; + rgb.b = v; + break; + case 4: + rgb.r = t; + rgb.g = p; + rgb.b = v; + break; + case 5: + rgb.r = v; + rgb.g = p; + rgb.b = q; + break; + } + rgb.r = (rgb.r * 255) | 0; + rgb.g = (rgb.g * 255) | 0; + rgb.b = (rgb.b * 255) | 0; + } + return rgb; + } + } + }; + var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor + $.fn.jPicker = + function(options) + { + var $arguments = arguments; + return this.each( + function() + { + var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor + if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input + { + $.extend(true, settings, + { + window: + { + bindToInput: true, + expandable: true, + input: $($this) + } + }); + + if($($this).val()=='') + + { + + settings.color.active = new Color({ hex: null }); + + settings.color.current = new Color({ hex: null }); + + } + + else if (ColorMethods.validateHex($($this).val())) + + { + + settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') }); + + settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') }); + + } + } + if (settings.window.expandable) + $($this).after('    '); + else settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results + var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6 + container = null, + colorMapDiv = null, + colorBarDiv = null, + colorMapL1 = null, // different layers of colorMap and colorBar + colorMapL2 = null, + colorMapL3 = null, + colorBarL1 = null, + colorBarL2 = null, + colorBarL3 = null, + colorBarL4 = null, + colorBarL5 = null, + colorBarL6 = null, + colorMap = null, // color maps + colorBar = null, + colorPicker = null, + elementStartX = null, // Used to record the starting css positions for dragging the control + elementStartY = null, + pageStartX = null, // Used to record the mousedown coordinates for dragging the control + pageStartY = null, + activePreview = null, // color boxes above the radio buttons + currentPreview = null, + okButton = null, + cancelButton = null, + grid = null, // preset colors grid + iconColor = null, // iconColor for popup icon + iconAlpha = null, // iconAlpha for popup icon + iconImage = null, // iconImage popup icon + moveBar = null, // drag bar + setColorMode = // set color mode and update visuals for the new color mode + function(colorMode) + { + var active = color.active, // local copies for YUI compressor + clientPath = images.clientPath, + hex = active.val('hex'), + rgbMap, + rgbBar; + settings.color.mode = colorMode; + switch (colorMode) + { + case 'h': + setTimeout( + function() + { + setBG.call($this, colorMapDiv, 'transparent'); + setImgLoc.call($this, colorMapL1, 0); + setAlpha.call($this, colorMapL1, 100); + setImgLoc.call($this, colorMapL2, 260); + setAlpha.call($this, colorMapL2, 100); + setBG.call($this, colorBarDiv, 'transparent'); + setImgLoc.call($this, colorBarL1, 0); + setAlpha.call($this, colorBarL1, 100); + setImgLoc.call($this, colorBarL2, 260); + setAlpha.call($this, colorBarL2, 100); + setImgLoc.call($this, colorBarL3, 260); + setAlpha.call($this, colorBarL3, 100); + setImgLoc.call($this, colorBarL4, 260); + setAlpha.call($this, colorBarL4, 100); + setImgLoc.call($this, colorBarL6, 260); + setAlpha.call($this, colorBarL6, 100); + }, 0); + colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 360 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap); + colorBar.val('y', 360 - active.val('h'), colorBar); + break; + case 's': + setTimeout( + function() + { + setBG.call($this, colorMapDiv, 'transparent'); + setImgLoc.call($this, colorMapL1, -260); + setImgLoc.call($this, colorMapL2, -520); + setImgLoc.call($this, colorBarL1, -260); + setImgLoc.call($this, colorBarL2, -520); + setImgLoc.call($this, colorBarL6, 260); + setAlpha.call($this, colorBarL6, 100); + }, 0); + colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 100 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap); + colorBar.val('y', 100 - active.val('s'), colorBar); + break; + case 'v': + setTimeout( + function() + { + setBG.call($this, colorMapDiv, '000000'); + setImgLoc.call($this, colorMapL1, -780); + setImgLoc.call($this, colorMapL2, 260); + setBG.call($this, colorBarDiv, hex); + setImgLoc.call($this, colorBarL1, -520); + setImgLoc.call($this, colorBarL2, 260); + setAlpha.call($this, colorBarL2, 100); + setImgLoc.call($this, colorBarL6, 260); + setAlpha.call($this, colorBarL6, 100); + }, 0); + colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 100 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap); + colorBar.val('y', 100 - active.val('v'), colorBar); + break; + case 'r': + rgbMap = -1040; + rgbBar = -780; + colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap); + colorBar.val('y', 255 - active.val('r'), colorBar); + break; + case 'g': + rgbMap = -1560; + rgbBar = -1820; + colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap); + colorBar.val('y', 255 - active.val('g'), colorBar); + break; + case 'b': + rgbMap = -2080; + rgbBar = -2860; + colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap); + colorBar.val('y', 255 - active.val('b'), colorBar); + break; + case 'a': + setTimeout( + function() + { + setBG.call($this, colorMapDiv, 'transparent'); + setImgLoc.call($this, colorMapL1, -260); + setImgLoc.call($this, colorMapL2, -520); + setImgLoc.call($this, colorBarL1, 260); + setImgLoc.call($this, colorBarL2, 260); + setAlpha.call($this, colorBarL2, 100); + setImgLoc.call($this, colorBarL6, 0); + setAlpha.call($this, colorBarL6, 100); + }, 0); + colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); + if (active.val('ahex') == null) break; + colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap); + colorBar.val('y', 255 - active.val('a'), colorBar); + break; + default: + throw ('Invalid Mode'); + break; + } + switch (colorMode) + { + case 'h': + break; + case 's': + case 'v': + case 'a': + setTimeout( + function() + { + setAlpha.call($this, colorMapL1, 100); + setAlpha.call($this, colorBarL1, 100); + setImgLoc.call($this, colorBarL3, 260); + setAlpha.call($this, colorBarL3, 100); + setImgLoc.call($this, colorBarL4, 260); + setAlpha.call($this, colorBarL4, 100); + }, 0); + break; + case 'r': + case 'g': + case 'b': + setTimeout( + function() + { + setBG.call($this, colorMapDiv, 'transparent'); + setBG.call($this, colorBarDiv, 'transparent'); + setAlpha.call($this, colorBarL1, 100); + setAlpha.call($this, colorMapL1, 100); + setImgLoc.call($this, colorMapL1, rgbMap); + setImgLoc.call($this, colorMapL2, rgbMap - 260); + setImgLoc.call($this, colorBarL1, rgbBar - 780); + setImgLoc.call($this, colorBarL2, rgbBar - 520); + setImgLoc.call($this, colorBarL3, rgbBar); + setImgLoc.call($this, colorBarL4, rgbBar - 260); + setImgLoc.call($this, colorBarL6, 260); + setAlpha.call($this, colorBarL6, 100); + }, 0); + break; + } + if (active.val('ahex') == null) return; + activeColorChanged.call($this, active); + }, + activeColorChanged = // Update color when user changes text values + function(ui, context) + { + if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context); + setTimeout( + function() + { + updatePreview.call($this, ui); + updateMapVisuals.call($this, ui); + updateBarVisuals.call($this, ui); + }, 0); + }, + mapValueChanged = // user has dragged the ColorMap pointer + function(ui, context) + { + var active = color.active; + if (context != colorMap && active.val() == null) return; + var xy = ui.val('all'); + switch (settings.color.mode) + { + case 'h': + active.val('sv', { s: xy.x, v: 100 - xy.y }, context); + break; + case 's': + case 'a': + active.val('hv', { h: xy.x, v: 100 - xy.y }, context); + break; + case 'v': + active.val('hs', { h: xy.x, s: 100 - xy.y }, context); + break; + case 'r': + active.val('gb', { g: 255 - xy.y, b: xy.x }, context); + break; + case 'g': + active.val('rb', { r: 255 - xy.y, b: xy.x }, context); + break; + case 'b': + active.val('rg', { r: xy.x, g: 255 - xy.y }, context); + break; + } + }, + colorBarValueChanged = // user has dragged the ColorBar slider + function(ui, context) + { + var active = color.active; + if (context != colorBar && active.val() == null) return; + switch (settings.color.mode) + { + case 'h': + active.val('h', { h: 360 - ui.val('y') }, context); + break; + case 's': + active.val('s', { s: 100 - ui.val('y') }, context); + break; + case 'v': + active.val('v', { v: 100 - ui.val('y') }, context); + break; + case 'r': + active.val('r', { r: 255 - ui.val('y') }, context); + break; + case 'g': + active.val('g', { g: 255 - ui.val('y') }, context); + break; + case 'b': + active.val('b', { b: 255 - ui.val('y') }, context); + break; + case 'a': + active.val('a', 255 - ui.val('y'), context); + break; + } + }, + positionMapAndBarArrows = // position map and bar arrows to match current color + function(ui, context) + { + if (context != colorMap) + { + switch (settings.color.mode) + { + case 'h': + var sv = ui.val('sv'); + colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context); + break; + case 's': + case 'a': + var hv = ui.val('hv'); + colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context); + break; + case 'v': + var hs = ui.val('hs'); + colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context); + break; + case 'r': + var bg = ui.val('bg'); + colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context); + break; + case 'g': + var br = ui.val('br'); + colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context); + break; + case 'b': + var rg = ui.val('rg'); + colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context); + break; + } + } + if (context != colorBar) + { + switch (settings.color.mode) + { + case 'h': + colorBar.val('y', 360 - (ui.val('h') || 0), context); + break; + case 's': + var s = ui.val('s'); + colorBar.val('y', 100 - (s != null ? s : 100), context); + break; + case 'v': + var v = ui.val('v'); + colorBar.val('y', 100 - (v != null ? v : 100), context); + break; + case 'r': + colorBar.val('y', 255 - (ui.val('r') || 0), context); + break; + case 'g': + colorBar.val('y', 255 - (ui.val('g') || 0), context); + break; + case 'b': + colorBar.val('y', 255 - (ui.val('b') || 0), context); + break; + case 'a': + var a = ui.val('a'); + colorBar.val('y', 255 - (a != null ? a : 255), context); + break; + } + } + }, + updatePreview = + function(ui) + { + try + { + var all = ui.val('all'); + activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' }); + setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0); + } + catch (e) { } + }, + updateMapVisuals = + function(ui) + { + switch (settings.color.mode) + { + case 'h': + setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex')); + break; + case 's': + case 'a': + var s = ui.val('s'); + setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100)); + break; + case 'v': + var v = ui.val('v'); + setAlpha.call($this, colorMapL1, v != null ? v : 100); + break; + case 'r': + setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4)); + break; + case 'g': + setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4)); + break; + case 'b': + setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100)); + break; + } + var a = ui.val('a'); + setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4)); + }, + updateBarVisuals = + function(ui) + { + switch (settings.color.mode) + { + case 'h': + var a = ui.val('a'); + setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4)); + break; + case 's': + var hva = ui.val('hva'), + saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 }); + setBG.call($this, colorBarDiv, saturatedColor.val('hex')); + setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100)); + setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4)); + break; + case 'v': + var hsa = ui.val('hsa'), + valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 }); + setBG.call($this, colorBarDiv, valueColor.val('hex')); + setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4)); + break; + case 'r': + case 'g': + case 'b': + var hValue = 0, vValue = 0, rgba = ui.val('rgba'); + if (settings.color.mode == 'r') + { + hValue = rgba && rgba.b || 0; + vValue = rgba && rgba.g || 0; + } + else if (settings.color.mode == 'g') + { + hValue = rgba && rgba.b || 0; + vValue = rgba && rgba.r || 0; + } + else if (settings.color.mode == 'b') + { + hValue = rgba && rgba.r || 0; + vValue = rgba && rgba.g || 0; + } + var middle = vValue > hValue ? hValue : vValue; + setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0); + setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0); + setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4)); + setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4)); + break; + case 'a': + var a = ui.val('a'); + setBG.call($this, colorBarDiv, ui.val('hex') || '000000'); + setAlpha.call($this, colorBarL5, a != null ? 0 : 100); + setAlpha.call($this, colorBarL6, a != null ? 100 : 0); + break; + } + }, + setBG = + function(el, c) + { + el.css({ backgroundColor: c && c.length == 6 && '#' + c || 'transparent' }); + }, + setImg = + function(img, src) + { + if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1)) + { + img.attr('pngSrc', src); + img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' }); + } + else img.css({ backgroundImage: 'url(' + src + ')' }); + }, + setImgLoc = + function(img, y) + { + img.css({ top: y + 'px' }); + }, + setAlpha = + function(obj, alpha) + { + obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' }); + if (alpha > 0 && alpha < 100) + { + if (isLessThanIE7) + { + var src = obj.attr('pngSrc'); + if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1)) + obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' }); + else obj.css({ opacity: Math.precision(alpha / 100, 4) }); + } + else obj.css({ opacity: Math.precision(alpha / 100, 4) }); + } + else if (alpha == 0 || alpha == 100) + { + if (isLessThanIE7) + { + var src = obj.attr('pngSrc'); + if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1)) + obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' }); + else obj.css({ opacity: '' }); + } + else obj.css({ opacity: '' }); + } + }, + revertColor = // revert color to original color when opened + function() + { + color.active.val('ahex', color.current.val('ahex')); + }, + commitColor = // commit the color changes + function() + { + color.current.val('ahex', color.active.val('ahex')); + }, + radioClicked = + function(e) + { + $(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked'); + setColorMode.call($this, e.target.value); + }, + currentClicked = + function() + { + revertColor.call($this); + }, + cancelClicked = + function() + { + revertColor.call($this); + settings.window.expandable && hide.call($this); + $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton); + }, + okClicked = + function() + { + commitColor.call($this); + settings.window.expandable && hide.call($this); + $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton); + }, + iconImageClicked = + function() + { + show.call($this); + }, + currentColorChanged = + function(ui, context) + { + var hex = ui.val('hex'); + currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' }); + setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4)); + }, + expandableColorChanged = + function(ui, context) + { + var hex = ui.val('hex'); + var va = ui.val('va'); + iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' }); + setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4)); + if (settings.window.bindToInput&&settings.window.updateInputColor) + settings.window.input.css( + { + backgroundColor: hex && '#' + hex || 'transparent', + color: va == null || va.v > 75 ? '#000000' : '#ffffff' + }); + }, + moveBarMouseDown = + function(e) + { + var element = settings.window.element, // local copies for YUI compressor + page = settings.window.page; + elementStartX = parseInt(container.css('left')); + elementStartY = parseInt(container.css('top')); + pageStartX = e.pageX; + pageStartY = e.pageY; + // bind events to document to move window - we will unbind these on mouseup + $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp); + e.preventDefault(); // prevent attempted dragging of the column + }, + documentMouseMove = + function(e) + { + container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' }); + if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") }); + e.stopPropagation(); + e.preventDefault(); + return false; + }, + documentMouseUp = + function(e) + { + $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp); + e.stopPropagation(); + e.preventDefault(); + return false; + }, + quickPickClicked = + function(e) + { + e.preventDefault(); + e.stopPropagation(); + color.active.val('ahex', $(this).attr('title') || null, e.target); + return false; + }, + commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null, + liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null, + cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null, + show = + function() + { + color.current.val('ahex', color.active.val('ahex')); + var attachIFrame = function() + { + if (!settings.window.expandable || $.support.boxModel) return; + var table = container.find('table:first'); + container.before('