wcfsetup/install/files/js/WCF.ColorPicker.min.js

   1 WCF.ColorPicker=Class.extend({_bar:null,_barActive:false,_barSelector:null,_dialog:null,_didInit:false,_elementID:"",_gradient:null,_gradientActive:false,_gradientSelector:null,_hex:null,_hsv:{},_newColor:null,_oldColor:null,_rgba:{},_rgbaRegExp:null,init:function(a){this._elementID="";this._hsv={h:0,s:100,v:100};this._position={};var b=$(a);if(!b.length){console.debug("[WCF.ColorPicker] Selector does not match any element, aborting.");return}b.click($.proxy(this._open,this))},_open:function(c){if(!this._didInit){this._initColorPicker();this._didInit=true}var a=$(c.currentTarget);this._elementID=a.wcfIdentify();this._parseColor(a);var b=this.hsvToRgb(this._hsv.h,this._hsv.s,this._hsv.v);this._oldColor.css({backgroundColor:"rgb("+b.r+", "+b.g+", "+b.b+")"});this._dialog.wcfDialog({title:WCF.Language.get("wcf.style.colorPicker")})},_parseColor:function(b){if(b.data("hsv")&&b.data("rgb")){var d=b.data("hsv");for(var a in d){this._hsv[a]=d[a]}this._updateValues(b.data("rgb"),true,true);this._rgba.a.val(parseInt(b.data("alpha")))}else{if(this._rgbaRegExp===null){this._rgbaRegExp=new RegExp("^rgba\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3}), ?(1|1\\.00?|0|0?\\.[0-9]{1,2})\\)$")}this._rgbaRegExp.exec(b.data("color"));var c=RegExp.$4;if(c.indexOf(".")===0){c="0"+c}c*=100;this._updateValues({r:RegExp.$1,g:RegExp.$2,b:RegExp.$3,a:Math.round(c)},true,true)}},_initColorPicker:function(){this._dialog=$('<div id="colorPickerContainer" />').hide().appendTo(document.body);this._gradient=$('<div id="colorPickerGradient" />').appendTo(this._dialog);this._gradientSelector=$('<span id="colorPickerGradientSelector"><span></span></span>').appendTo(this._gradient);this._bar=$('<div id="colorPickerBar" />').appendTo(this._dialog);this._barSelector=$('<span id="colorPickerBarSelector" />').appendTo(this._bar);this._gradient.mousedown($.proxy(this._mouseDownGradient,this));this._bar.mousedown($.proxy(this._mouseDownBar,this));var a=this;$(document).mouseup(function(b){if(a._barActive){a._barActive=false;a._mouseBar(b)}else{if(a._gradientActive){a._gradientActive=false;a._mouseGradient(b)}}}).mousemove(function(b){if(a._barActive){a._mouseBar(b)}else{if(a._gradientActive){a._mouseGradient(b)}}});this._initColorPickerForm()},_initColorPickerForm:function(){var c=$('<div id="colorPickerForm" />').appendTo(this._dialog);$("<small>"+WCF.Language.get("wcf.style.colorPicker.new")+"</small>").appendTo(c);var d=$('<ul class="colors" />').appendTo(c);this._newColor=$('<li class="new" />').appendTo(d);this._oldColor=$('<li class="old" />').appendTo(d);$("<small>"+WCF.Language.get("wcf.style.colorPicker.current")+"</small>").appendTo(c);var a=$('<ul class="rgba" />').appendTo(c);this._createInputElement("r","R",0,255).appendTo(a);this._createInputElement("g","G",0,255).appendTo(a);this._createInputElement("b","B",0,255).appendTo(a);this._createInputElement("a","a",0,100).appendTo(a);var e=$('<ul class="hex"><li><label><span>#</span></label></li></ul>').appendTo(c);this._hex=$('<input type="text" maxlength="6" />').appendTo(e.find("label"));this._rgba.r.blur($.proxy(this._blurRgba,this)).keyup($.proxy(this._keyUpRGBA,this));this._rgba.g.blur($.proxy(this._blurRgba,this)).keyup($.proxy(this._keyUpRGBA,this));this._rgba.b.blur($.proxy(this._blurRgba,this)).keyup($.proxy(this._keyUpRGBA,this));this._rgba.a.blur($.proxy(this._blurRgba,this)).keyup($.proxy(this._keyUpRGBA,this));this._hex.blur($.proxy(this._blurHex,this)).keyup($.proxy(this._keyUpHex,this));var f=$('<div class="formSubmit" />').appendTo(this._dialog);$('<button class="buttonPrimary">'+WCF.Language.get("wcf.style.colorPicker.button.apply")+"</button>").appendTo(f).click($.proxy(this._submit,this));var b=this;this._hex.on("paste",function(){b._hex.attr("maxlength","7");setTimeout(function(){var g=b._hex.val();if(g.substring(0,1)=="#"){g=g.substr(1)}if(g.length>6){g=g.substring(0,6)}b._hex.attr("maxlength","6").val(g)},50)})},_keyUpRGBA:function(a){if(a.which==13){this._blurRgba();this._submit()}},_keyUpHex:function(a){if(a.which==13){this._blurHex();this._submit()}},_submit:function(){var d=this.hsvToRgb(this._hsv.h,this._hsv.s,this._hsv.v);var c={};for(var b in this._hsv){c[b]=this._hsv[b]}var a=$("#"+this._elementID);a.data("hsv",c).css({backgroundColor:"rgb("+d.r+", "+d.g+", "+d.b+")"}).data("alpha",parseInt(this._rgba.a.val()));a.data("rgb",{r:this._rgba.r.val(),g:this._rgba.g.val(),b:this._rgba.b.val()});$("#"+a.data("store")).val("rgba("+this._rgba.r.val()+", "+this._rgba.g.val()+", "+this._rgba.b.val()+", "+(this._rgba.a.val()/100)+")").trigger("change");this._dialog.wcfDialog("close")},_createInputElement:function(f,c,e,b){var d=$('<li class="'+f+'" />');var a=$("<label />").appendTo(d);$("<span>"+c+"</span>").appendTo(a);this._rgba[f]=$('<input type="number" value="0" min="'+e+'" max="'+b+'" step="1" />').appendTo(a);return d},_mouseDownGradient:function(a){this._gradientActive=true;this._mouseGradient(a)},_mouseGradient:function(b){var c=this._gradient.getOffsets("offset");var a=Math.max(Math.min(b.pageX-c.left,255),0);var d=Math.max(Math.min(b.pageY-c.top,255),0);this._hsv.s=Math.max(0,Math.min(1,a/255))*100;this._hsv.v=Math.max(0,Math.min(1,(255-d)/255))*100;this._updateValues(null)},_mouseDownBar:function(a){this._barActive=true;this._mouseBar(a)},_mouseBar:function(a){var b=this._bar.getOffsets("offset");var c=Math.max(Math.min(a.pageY-b.top,255),0);this._barSelector.css({top:c+"px"});this._hsv.h=Math.max(0,Math.min(359,Math.round((255-c)/255*360)));this._updateValues(null)},_blurRgba:function(){for(var a in this._rgba){var b=parseInt(this._rgba[a].val())||0;if(a==="a"){this._rgba[a].val(Math.max(0,Math.min(100,b)))}else{this._rgba[a].val(Math.max(0,Math.min(255,b)))}}this._updateValues({r:this._rgba.r.val(),g:this._rgba.g.val(),b:this._rgba.b.val()},true,true)},_blurHex:function(){var a=this.hexToRgb(this._hex.val());if(a!==Number.NaN){this._updateValues(a,true,true)}},_updateValues:function(c,e,a){e=(e===true)?true:false;a=(a===true)?true:false;if(c===null){c=this.hsvToRgb(this._hsv.h,this._hsv.s,this._hsv.v)}if(c.a===undefined){c.a=this._rgba.a.val()}for(var b in c){this._rgba[b].val(c[b])}this._hex.val(this.rgbToHex(c.r,c.g,c.b));if(e||a){var g=this.rgbToHsv(c.r,c.g,c.b);if(e){this._hsv.h=g.h}if(a){this._hsv.s=g.s;this._hsv.v=g.v}}var h=Math.max(0,Math.min(255,255-(this._hsv.h/360)*255));this._barSelector.css({top:h+"px"});var d=Math.max(0,Math.min(255,(this._hsv.s/100)*255));var h=Math.max(0,Math.min(255,255-((this._hsv.v/100)*255)));this._gradientSelector.css({left:(d-6)+"px",top:(h-6)+"px"});this._newColor.css({backgroundColor:"rgb("+c.r+", "+c.g+", "+c.b+")"});var f=this.hsvToRgb(this._hsv.h,100,100);this._gradient.css({backgroundColor:"rgb("+f.r+", "+f.g+", "+f.b+")"})},hsvToRgb:function(d,j,g){var b={r:0,g:0,b:0};var i,a,f,e,c;i=Math.floor(d/60);a=d/60-i;j/=100;g/=100;f=g*(1-j);e=g*(1-j*a);c=g*(1-j*(1-a));if(j==0){b.r=b.g=b.b=g}else{switch(i){case 1:b.r=e;b.g=g;b.b=f;break;case 2:b.r=f;b.g=g;b.b=c;break;case 3:b.r=f;b.g=e;b.b=g;break;case 4:b.r=c;b.g=f;b.b=g;break;case 5:b.r=g;b.g=f;b.b=e;break;case 0:case 6:b.r=g;b.g=c;b.b=f;break}}return{r:Math.round(b.r*255),g:Math.round(b.g*255),b:Math.round(b.b*255)}},rgbToHsv:function(a,f,i){var j,e,c;var d,k,h;a/=255;f/=255;i/=255;d=Math.max(Math.max(a,f),i);k=Math.min(Math.min(a,f),i);h=d-k;j=0;if(d!==k){switch(d){case a:j=60*(0+(f-i)/h);break;case f:j=60*(2+(i-a)/h);break;case i:j=60*(4+(a-f)/h);break}if(j<0){j+=360}}if(d===0){e=0}else{e=h/d}c=d;return{h:Math.round(j),s:Math.round(e*100),v:Math.round(c*100)}},hexToRgb:function(a){if(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(a)){a=a.split("");if(a[0]==="#"){a.shift()}if(a.length===3){return{r:parseInt(a[0]+""+a[0],16),g:parseInt(a[1]+""+a[1],16),b:parseInt(a[2]+""+a[2],16)}}else{return{r:parseInt(a[0]+""+a[1],16),g:parseInt(a[2]+""+a[3],16),b:parseInt(a[4]+""+a[5],16)}}}return Number.NaN},rgbToHex:function(d,c,a){return("0123456789ABCDEF".charAt((d-d%16)/16)+""+"0123456789ABCDEF".charAt(d%16))+""+("0123456789ABCDEF".charAt((c-c%16)/16)+""+"0123456789ABCDEF".charAt(c%16))+""+("0123456789ABCDEF".charAt((a-a%16)/16)+""+"0123456789ABCDEF".charAt(a%16))}});