1 | /* file: ui.inputColorPicker.js - v1.0.0 | minified on 2011/01/27 with http://jscompress.com/ */ |
---|
2 | (function($) |
---|
3 | {var publicMethods={init:function(opt) |
---|
4 | {return this.each(function() |
---|
5 | {var $this=$(this),data=$this.data('options'),objects=$this.data('objects'),properties=$this.data('properties'),options={colors:{fg:{color:'#ffffff',opacity:1},bg:{color:'#000000',opacity:1}},alpha:true,texts:{r:'R',g:'G',b:'B',a:'A',color:'#',h:'H',s:'S',v:'V'},mode:2,selected:'fg',change:null};$this.data('options',options);if(!properties) |
---|
6 | {$this.data('properties',{initialized:false,refreshing:false});properties=$this.data('properties');} |
---|
7 | if(!objects) |
---|
8 | {objects={container:$('<div/>',{'class':'ui-inputColorPicker'}),dotAreaSV:$('<div/>',{'class':'ui-inputColorPicker-dotAreaSV'}),dotAreaH:$('<div/>',{'class':'ui-inputColorPicker-dotAreaH'}),inputContainer:$('<table>',{'class':'ui-inputColorPicker-inputContainer'}),inputCRL:$('<td/>',{'class':'label'}),inputCRI:$('<td/>',{'class':'input'}),inputCGL:$('<td/>',{'class':'label'}),inputCGI:$('<td/>',{'class':'input'}),inputCBL:$('<td/>',{'class':'label'}),inputCBI:$('<td/>',{'class':'input'}),inputCHL:$('<td/>',{'class':'label'}),inputCHI:$('<td/>',{'class':'input'}),inputCSL:$('<td/>',{'class':'label'}),inputCSI:$('<td/>',{'class':'input'}),inputCVL:$('<td/>',{'class':'label'}),inputCVI:$('<td/>',{'class':'input'}),inputCAL:$('<td/>',{'class':'label'}),inputCAI:$('<td/>',{'class':'input'}),inputCcolorL:$('<td/>',{'class':'label'}),inputCcolorI:$('<td/>',{'class':'input'}),inputCFB:$('<td/>',{colspan:2,rowspan:2})};$this.html('').append(objects.container.append(objects.dotAreaSV).append(objects.dotAreaH).append(objects.inputContainer.append($('<tr/>').append(objects.inputCRL).append(objects.inputCRI).append(objects.inputCHL).append(objects.inputCHI)).append($('<tr/>').append(objects.inputCGL).append(objects.inputCGI).append(objects.inputCSL).append(objects.inputCSI)).append($('<tr/>').append(objects.inputCBL).append(objects.inputCBI).append(objects.inputCVL).append(objects.inputCVI)).append($('<tr/>').append(objects.inputCAL).append(objects.inputCAI).append(objects.inputCFB)).append($('<tr/>').append(objects.inputCcolorL).append(objects.inputCcolorI))));objects.dotAreaSV.inputDotArea({range:{x:[0,100],y:[0,100]},width:132,height:132,change:function(event,value) |
---|
9 | {privateMethods.computeCurrentColor($this,'dotAreaSV');}});objects.dotAreaH.inputDotArea({range:{x:false,y:[0,359]},width:20,height:132,change:function(event,value) |
---|
10 | {privateMethods.computeCurrentColor($this,'dotAreaH');}});objects.inputCRI.inputNum({minValue:0,maxValue:255,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
11 | {privateMethods.computeCurrentColor($this,'rgbR');}});objects.inputCGI.inputNum({minValue:0,maxValue:255,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
12 | {privateMethods.computeCurrentColor($this,'rgbG');}});objects.inputCBI.inputNum({minValue:0,maxValue:255,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
13 | {privateMethods.computeCurrentColor($this,'rgbB');}});objects.inputCAI.inputNum({minValue:0,maxValue:100,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
14 | {privateMethods.computeCurrentColor($this,'alpha');}});objects.inputCHI.inputNum({minValue:0,maxValue:359,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
15 | {privateMethods.computeCurrentColor($this,'hsvH');}});objects.inputCSI.inputNum({minValue:0,maxValue:100,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
16 | {privateMethods.computeCurrentColor($this,'hsvS');}});objects.inputCVI.inputNum({minValue:0,maxValue:100,stepValue:1,numDec:0,unitValue:'',btInc:'+',btDec:'-',value:0,showSlider:'auto',change:function(event,value) |
---|
17 | {privateMethods.computeCurrentColor($this,'hsvV');}});objects.inputCcolorI.inputText({value:'',displayChar:6,maxChar:6,regExp:'/^(?:[a-f0-9]{2}){3}$/i',change:function(event,value) |
---|
18 | {privateMethods.computeCurrentColor($this,'color');}});objects.inputCFB.inputColorsFB({width:40,height:40,change:function(event,value) |
---|
19 | {privateMethods.computeCurrentColor($this,'fb');}});$this.data('objects',objects);} |
---|
20 | privateMethods.setOptions($this,opt);});},destroy:function() |
---|
21 | {return this.each(function() |
---|
22 | {var $this=$(this),objects=$this.data('objects');objects.dotAreaSV.remove();objects.dotAreaH.remove();objects.inputCRL.remove();objects.inputCRI.remove();objects.inputCHL.remove();objects.inputCHI.remove();objects.inputCGL.remove();objects.inputCGI.remove();objects.inputCSL.remove();objects.inputCSI.remove();objects.inputCBL.remove();objects.inputCBI.remove();objects.inputCVL.remove();objects.inputCVI.remove();objects.inputCAL.remove();objects.inputCAI.remove();objects.inputCFB.remove();objects.inputCcolorL.remove();objects.inputCcolorI.remove();objects.inputContainer.remove();objects.container.remove();});},options:function(value) |
---|
23 | {return(this.each(function() |
---|
24 | {privateMethods.setOptions($(this),value);}));},colors:function(value) |
---|
25 | {if(value!=null) |
---|
26 | {return(this.each(function() |
---|
27 | {privateMethods.setColors($(this),value);}));} |
---|
28 | else |
---|
29 | {var options=this.data('options');return(options.colors);}},texts:function(value) |
---|
30 | {if(value!=null) |
---|
31 | {return(this.each(function() |
---|
32 | {privateMethods.setTexts($(this),value,true);}));} |
---|
33 | else |
---|
34 | {var options=this.data('options');return(options.texts);}},alpha:function(value) |
---|
35 | {if(value!=null) |
---|
36 | {return(this.each(function() |
---|
37 | {privateMethods.setAlpha($(this),value);}));} |
---|
38 | else |
---|
39 | {var options=this.data('options');return(options.alpha);}},selected:function(value) |
---|
40 | {if(value!=null) |
---|
41 | {return(this.each(function() |
---|
42 | {privateMethods.setSelected($(this),value);}));} |
---|
43 | else |
---|
44 | {var options=this.data('options');return(options.selected);}},mode:function(value) |
---|
45 | {if(value!=null) |
---|
46 | {return(this.each(function() |
---|
47 | {privateMethods.setMode($(this),value);}));} |
---|
48 | else |
---|
49 | {var options=this.data('options');return(options.mode);}},change:function(value) |
---|
50 | {if(value!=null&&$.isFunction(value)) |
---|
51 | {return(this.each(function() |
---|
52 | {privateMethods.setEventChange($(this),value);}));} |
---|
53 | else |
---|
54 | {var options=this.data('options');if(options) |
---|
55 | {return(options.change);} |
---|
56 | else |
---|
57 | {return(null);}}}};var privateMethods={setOptions:function(object,value) |
---|
58 | {var properties=object.data('properties'),options=object.data('options');if(!$.isPlainObject(value))return(false);properties.initialized=false;privateMethods.setMode(object,(value.mode!=null)?value.mode:options.mode);privateMethods.setSelected(object,(value.selected!=null)?value.selected:options.selected);privateMethods.setColors(object,(value.colors!=null)?value.colors:options.colors);privateMethods.setAlpha(object,(value.alpha!=null)?value.alpha:options.alpha);privateMethods.setTexts(object,(value.texts!=null)?value.texts:options.texts);privateMethods.setEventChange(object,(value.change!=null)?value.change:options.change);properties.initialized=true;},setAlpha:function(object,value) |
---|
59 | {var options=object.data('options'),objects=object.data('objects');if((!properties.initialized||options.alpha!=value)&&(value==true||value==false)) |
---|
60 | {options.alpha=value;if(options.alpha) |
---|
61 | {objects.inputCAI.css('visibility','visible');objects.inputCAL.css('visibility','visible');} |
---|
62 | else |
---|
63 | {objects.inputCAI.css('visibility','hidden');objects.inputCAL.css('visibility','hidden');}} |
---|
64 | return(options.alpha);},setMode:function(object,value) |
---|
65 | {var options=object.data('options'),objects=object.data('objects');if((!properties.initialized||options.mode!=value)&&(value==1||value==2)) |
---|
66 | {options.mode=value;objects.inputCFB.inputColorsFB('mode',options.mode);} |
---|
67 | return(options.mode);},setSelected:function(object,value) |
---|
68 | {var options=object.data('options'),objects=object.data('objects');if((!properties.initialized||options.selected!=value)&&(value=='fg'||value=='bg')) |
---|
69 | {options.selected=value;objects.inputCFB.inputColorsFB('selected',options.selected);} |
---|
70 | return(options.selected);},setTexts:function(object,value) |
---|
71 | {var options=object.data('options'),objects=object.data('objects');if(value.r!=null) |
---|
72 | {options.texts.r=value.r;objects.inputCRL.html(options.texts.r);} |
---|
73 | if(value.g!=null) |
---|
74 | {options.texts.g=value.g;objects.inputCGL.html(options.texts.g);} |
---|
75 | if(value.b!=null) |
---|
76 | {options.texts.b=value.b;objects.inputCBL.html(options.texts.b);} |
---|
77 | if(value.h!=null) |
---|
78 | {options.texts.h=value.h;objects.inputCHL.html(options.texts.h);} |
---|
79 | if(value.s!=null) |
---|
80 | {options.texts.s=value.s;objects.inputCSL.html(options.texts.s);} |
---|
81 | if(value.v!=null) |
---|
82 | {options.texts.v=value.v;objects.inputCVL.html(options.texts.v);} |
---|
83 | if(value.a!=null) |
---|
84 | {options.texts.a=value.a;objects.inputCAL.html(options.texts.a);} |
---|
85 | if(value.color!=null) |
---|
86 | {options.texts.color=value.color;objects.inputCcolorL.html(options.texts.color);} |
---|
87 | return(options.texts);},setColor:function(object,color,opacity,target,from) |
---|
88 | {var objects=object.data('objects'),properties=object.data('properties'),options=object.data('options'),rgbColor={r:0,g:0,b:0},hsvColor={h:0,s:0,v:0},svColorHue=0;if(properties.refreshing||!(target=='fg'||target=='bg'))return(false);properties.refreshing=true;rgbColor=privateMethods.strToRGB(color);hsvColor=privateMethods.RGBtoHSV(rgbColor);if(from=='hsvH')hsvColor.h=objects.inputCHI.inputNum('value');if(from=='hsvS')hsvColor.s=objects.inputCSI.inputNum('value');if(from=='hsvV')hsvColor.v=objects.inputCVI.inputNum('value');if(from=='dotAreaSV') |
---|
89 | {sv=objects.dotAreaSV.inputDotArea('values');hsvColor.s=100-Math.round(sv.y);hsvColor.v=Math.round(sv.x);} |
---|
90 | if(from=='dotAreaH')hsvColor.h=360-Math.round(objects.dotAreaH.inputDotArea('values').y);svColorHue=hsvColor.h;if(from==''||from=='fb')objects.inputCAI.inputNum('value',opacity);if(from!='hsvH'&&from!='dotAreaSV'&&from!='alpha')objects.dotAreaSV.inputDotArea('values',{x:hsvColor.v,y:100-hsvColor.s});if(from!='dotAreaH'&&from!='alpha'&&from!='hsvS'&&from!='hsvV'&&color!='#000000')objects.dotAreaH.inputDotArea('values',{y:360-hsvColor.h});if(from!='rgbR'&&from!='rgbG'&&from!='rgbB'&&from!='alpha') |
---|
91 | {objects.inputCRI.inputNum('value',rgbColor.r);objects.inputCGI.inputNum('value',rgbColor.g);objects.inputCBI.inputNum('value',rgbColor.b);} |
---|
92 | if(from!='hsvH'&&from!='hsvS'&&from!='hsvV'&&from!='alpha') |
---|
93 | {if(color!='#000000') |
---|
94 | {objects.inputCHI.inputNum('value',hsvColor.h);} |
---|
95 | else |
---|
96 | {svColorHue=objects.inputCHI.inputNum('value');} |
---|
97 | objects.inputCSI.inputNum('value',hsvColor.s);objects.inputCVI.inputNum('value',hsvColor.v);} |
---|
98 | if(from!='color'&&from!='alpha')objects.inputCcolorI.inputText('value',color.substr(1));if(from!='alpha')objects.dotAreaSV.find('div.ui-inputDotArea').css('background-color',privateMethods.RGBToStr(privateMethods.HSVtoRGB({h:svColorHue,s:100,v:100})));if(from!='fb')objects.inputCFB.inputColorsFB(target,{color:color,opacity:opacity/100});if(from!='') |
---|
99 | {if(target=='fg') |
---|
100 | {options.colors.fg.color=color;options.colors.fg.opacity=opacity/100;} |
---|
101 | else |
---|
102 | {options.colors.bg.color=color;options.colors.bg.opacity=opacity/100;}} |
---|
103 | properties.refreshing=false;if(options.change)object.trigger('inputColorPickerChange',{target:target,color:{color:color,opacity:opacity/100}});},setColors:function(object,value) |
---|
104 | {var objects=object.data('objects'),options=object.data('options');if(value.fg!=null) |
---|
105 | {if(value.fg.color!=null)options.colors.fg.color=value.fg.color;if(value.fg.opacity!=null)options.colors.fg.opacity=value.fg.opacity;if(objects.inputCFB.inputColorsFB('selected')=='fg') |
---|
106 | {privateMethods.setColor(object,options.colors.fg.color,Math.round(options.colors.fg.opacity*100),'fg','');} |
---|
107 | else |
---|
108 | {objects.inputCFB.inputColorsFB('fg',options.colors.fg);}} |
---|
109 | if(value.bg!=null) |
---|
110 | {if(value.bg.color!=null)options.colors.bg.color=value.bg.color;if(value.bg.opacity!=null)options.colors.bg.opacity=value.bg.opacity;if(objects.inputCFB.inputColorsFB('selected')=='bg') |
---|
111 | {privateMethods.setColor(object,options.colors.bg.color,Math.round(options.colors.bg.opacity*100),'bg','');} |
---|
112 | else |
---|
113 | {objects.inputCFB.inputColorsFB('bg',options.colors.bg);}} |
---|
114 | return(options.colors);},setEventChange:function(object,value) |
---|
115 | {var options=object.data('options');options.change=value;object.unbind('inputColorPickerChange');if(value)object.bind('inputColorPickerChange',options.change);return(options.change);},computeCurrentColor:function(object,from) |
---|
116 | {var options=object.data('options'),objects=object.data('objects'),properties=object.data('properties'),colors={},target=objects.inputCFB.inputColorsFB('selected');if(properties.refreshing)return(false);switch(from) |
---|
117 | {case'dotAreaSV':case'dotAreaH':var sv=objects.dotAreaSV.inputDotArea('values');colors.color=privateMethods.RGBToStr(privateMethods.HSVtoRGB({h:360-objects.dotAreaH.inputDotArea('values').y,s:100-sv.y,v:sv.x}));if(target=='fg') |
---|
118 | {colors.opacity=Math.round(options.colors.fg.opacity*100);} |
---|
119 | else |
---|
120 | {colors.opacity=Math.round(options.colors.bg.opacity*100);} |
---|
121 | break;case'hsvH':case'hsvS':case'hsvV':colors.color=privateMethods.RGBToStr(privateMethods.HSVtoRGB({h:objects.inputCHI.inputNum('value'),s:objects.inputCSI.inputNum('value'),v:objects.inputCVI.inputNum('value')}));if(target=='fg') |
---|
122 | {colors.opacity=Math.round(options.colors.fg.opacity*100);} |
---|
123 | else |
---|
124 | {colors.opacity=Math.round(options.colors.bg.opacity*100);} |
---|
125 | break;case'rgbR':case'rgbG':case'rgbB':colors.color=privateMethods.RGBToStr({r:objects.inputCRI.inputNum('value'),g:objects.inputCGI.inputNum('value'),b:objects.inputCBI.inputNum('value')});if(target=='fg') |
---|
126 | {colors.opacity=Math.round(options.colors.fg.opacity*100);} |
---|
127 | else |
---|
128 | {colors.opacity=Math.round(options.colors.bg.opacity*100);} |
---|
129 | break;case'alpha':if(target=='fg') |
---|
130 | {colors.color=options.colors.fg.color;} |
---|
131 | else |
---|
132 | {colors.color=options.colors.bg.color;} |
---|
133 | colors.opacity=objects.inputCAI.inputNum('value');break;case'fb':if(target=='fg') |
---|
134 | {colors.color=options.colors.fg.color;colors.opacity=Math.round(options.colors.fg.opacity*100);} |
---|
135 | else |
---|
136 | {colors.color=options.colors.bg.color;colors.opacity=Math.round(options.colors.bg.opacity*100);} |
---|
137 | break;case'color':colors.color='#'+objects.inputCcolorI.inputText('value');if(target=='fg') |
---|
138 | {colors.opacity=Math.round(options.colors.fg.opacity*100);} |
---|
139 | else |
---|
140 | {colors.opacity=Math.round(options.colors.bg.opacity*100);} |
---|
141 | break;} |
---|
142 | privateMethods.setColor(object,colors.color,colors.opacity,target,from);},RGBToStr:function(color) |
---|
143 | {var r=color.r.toString(16),g=color.g.toString(16),b=color.b.toString(16);if(r.length<2)r='0'+r;if(g.length<2)g='0'+g;if(b.length<2)b='0'+b;return('#'+r+g+b);},strToRGB:function(color) |
---|
144 | {var returned={r:0,g:0,b:0},re1=/^rgb\((\d){1,3},(\d){1,3},(\d){1,3}\)$/i,re2=/^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,colors=re1.exec(color);if(colors!=null) |
---|
145 | {returned.r=parseInt(colors[1]);returned.g=parseInt(colors[2]);returned.b=parseInt(colors[3]);} |
---|
146 | else |
---|
147 | {colors=re2.exec(color);if(colors!=null) |
---|
148 | {returned.r=parseInt('0x'+colors[1]);returned.g=parseInt('0x'+colors[2]);returned.b=parseInt('0x'+colors[3]);}} |
---|
149 | return(returned);},RGBtoHSV:function(color) |
---|
150 | {var returned={h:0,s:0,v:0},color={r:color.r/255,g:color.g/255,b:color.b/255},max=Math.max(color.r,color.g,color.b),min=Math.min(color.r,color.g,color.b);if(max==min) |
---|
151 | {returned.h=0;} |
---|
152 | else if(max==color.r) |
---|
153 | {returned.h=Math.round((60*(color.g-color.b)/(max-min)+360)%360);} |
---|
154 | else if(max==color.g) |
---|
155 | {returned.h=Math.round((60*(color.b-color.r)/(max-min)+120));} |
---|
156 | else if(max==color.b) |
---|
157 | {returned.h=Math.round((60*(color.r-color.g)/(max-min)+240));} |
---|
158 | returned.s=Math.round(100*(max==0?0:1-min/max));returned.v=Math.round(100*max);return(returned);},HSVtoRGB:function(color) |
---|
159 | {var h=Math.floor(Math.abs(color.h/60))%6,f=color.h/60-h,l=Math.round(2.55*color.v*(1-color.s/100)),m=Math.round(2.55*color.v*(1-f*color.s/100)),n=Math.round(2.55*color.v*(1-(1-f)*color.s/100)),v=Math.round(2.55*color.v);switch(h) |
---|
160 | {case 0:return({r:v,g:n,b:l});break;case 1:return({r:m,g:v,b:l});break;case 2:return({r:l,g:v,b:n});break;case 3:return({r:l,g:m,b:v});break;case 4:return({r:n,g:l,b:v});break;case 5:return({r:v,g:l,b:m});break;} |
---|
161 | return({r:0,g:0,b:0});}};$.fn.inputColorPicker=function(method) |
---|
162 | {if(publicMethods[method]) |
---|
163 | {return publicMethods[method].apply(this,Array.prototype.slice.call(arguments,1));} |
---|
164 | else if(typeof method==='object'||!method) |
---|
165 | {return publicMethods.init.apply(this,arguments);} |
---|
166 | else |
---|
167 | {$.error('Method '+method+' does not exist on jQuery.inputColorPicker');}}})(jQuery);$.inputDialogColor=function(opt) |
---|
168 | {var options={modal:true,mode:2,alpha:true,colors:{fg:{color:'#ffffff',opacity:1},bg:{color:'#000000',opacity:1}},title:'Colors selector',texts:null,buttons:{ok:'Ok',cancel:'Cancel'},selected:'fg',change:null},objects={dialogBox:$('<div/>'),colorPicker:$('<div/>',{'class':'dialogColor'})},setOptions=function(opt) |
---|
169 | {if(opt.modal==true||opt.modal==false)options.modal=opt.modal;if(opt.mode==1||opt.mode==2)options.mode=opt.mode;if(opt.alpha==true||opt.alpha==false)options.alpha=opt.alpha;if(opt.colors!=null)options.colors=opt.colors;options.texts=opt.texts;if(opt.selected=='fg'||opt.selected=='bg')options.selected=opt.selected;if(opt.title)options.title=opt.title;if(opt.buttons&&opt.buttons.ok)options.buttons.ok=opt.buttons.ok;if(opt.buttons&&opt.buttons.cancel)options.buttons.cancel=opt.buttons.cancel;if(opt.change&&$.isFunction(opt.change))options.change=opt.change;},initDialog=function() |
---|
170 | {var dialogOpt={buttons:{},width:354,closeText:'x',dialogClass:'ui-inputDialogColor',modal:options.modal,resizable:false,title:options.title,open:null,close:function() |
---|
171 | {objects.colorPicker.inputColorPicker('destroy').remove();$(this).dialog('destroy');}};if(options.modal) |
---|
172 | {dialogOpt.buttons={'ok':function(event) |
---|
173 | {if(options.change) |
---|
174 | {if(options.mode==1) |
---|
175 | {options.change(event,objects.colorPicker.inputColorPicker('colors').fg);} |
---|
176 | else |
---|
177 | {options.change(event,objects.colorPicker.inputColorPicker('colors'));}} |
---|
178 | $(this).dialog('close');},'cancel':function(event) |
---|
179 | {$(this).dialog('close');}};dialogOpt.open=function() |
---|
180 | {objects.colorPicker.inputColorPicker({mode:options.mode,alpha:options.alpha,texts:options.texts,colors:options.colors,selected:options.selected});};} |
---|
181 | else |
---|
182 | {dialogOpt.open=function() |
---|
183 | {objects.colorPicker.inputColorPicker({mode:options.mode,alpha:options.alpha,texts:options.texts,colors:options.colors,change:options.change,selected:options.selected});};} |
---|
184 | objects.dialogBox.append(objects.colorPicker).dialog(dialogOpt);};setOptions(opt);initDialog();} |
---|