From e1e034ced29b0b9bf11a49798b4fba4d3dd0164d Mon Sep 17 00:00:00 2001 From: wei <> Date: Fri, 21 Apr 2006 11:41:21 +0000 Subject: Update javascript libraries, rewrote client-side validators, removed some js files, simplified javascript compression. --- framework/Web/Javascripts/js/colorpicker.js | 984 ++++++++++++++++------------ 1 file changed, 556 insertions(+), 428 deletions(-) (limited to 'framework/Web/Javascripts/js/colorpicker.js') diff --git a/framework/Web/Javascripts/js/colorpicker.js b/framework/Web/Javascripts/js/colorpicker.js index 3dde7692..27e180b0 100644 --- a/framework/Web/Javascripts/js/colorpicker.js +++ b/framework/Web/Javascripts/js/colorpicker.js @@ -1,467 +1,595 @@ -if(typeof (Rico)=="undefined"){ -Rico={}; -} -Rico.Color=Class.create(); -Rico.Color.prototype={initialize:function(_1,_2,_3){ -this.rgb={r:_1,g:_2,b:_3}; -},setRed:function(r){ -this.rgb.r=r; -},setGreen:function(g){ -this.rgb.g=g; -},setBlue:function(b){ -this.rgb.b=b; -},setHue:function(h){ -var _8=this.asHSB(); -_8.h=h; -this.rgb=Rico.Color.HSBtoRGB(_8.h,_8.s,_8.b); -},setSaturation:function(s){ -var hsb=this.asHSB(); -hsb.s=s; -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); -},setBrightness:function(b){ -var hsb=this.asHSB(); -hsb.b=b; -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b); -},darken:function(_11){ -var hsb=this.asHSB(); -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.max(hsb.b-_11,0)); -},brighten:function(_12){ -var hsb=this.asHSB(); -this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.min(hsb.b+_12,1)); -},blend:function(_13){ -this.rgb.r=Math.floor((this.rgb.r+_13.rgb.r)/2); -this.rgb.g=Math.floor((this.rgb.g+_13.rgb.g)/2); -this.rgb.b=Math.floor((this.rgb.b+_13.rgb.b)/2); -},isBright:function(){ -var hsb=this.asHSB(); -return this.asHSB().b>0.5; -},isDark:function(){ -return !this.isBright(); -},asRGB:function(){ -return "rgb("+this.rgb.r+","+this.rgb.g+","+this.rgb.b+")"; -},asHex:function(){ -return "#"+this.rgb.r.toColorPart()+this.rgb.g.toColorPart()+this.rgb.b.toColorPart(); -},asHSB:function(){ -return Rico.Color.RGBtoHSB(this.rgb.r,this.rgb.g,this.rgb.b); -},toString:function(){ + +if(typeof(Rico) == "undefined") Rico = {}; +Rico.Color = Class.create(); +Rico.Color.prototype = { +initialize: function(red, green, blue) { +this.rgb = { r: red, g : green, b : blue }; + }, +setRed: function(r) { +this.rgb.r = r; + }, +setGreen: function(g) { +this.rgb.g = g; + }, +setBlue: function(b) { +this.rgb.b = b; + }, +setHue: function(h) { +var hsb = this.asHSB(); +hsb.h = h; +this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b); + }, +setSaturation: function(s) { +var hsb = this.asHSB(); +hsb.s = s; +this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b); + }, +setBrightness: function(b) { +var hsb = this.asHSB(); +hsb.b = b; +this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b ); + }, +darken: function(percent) { +var hsb= this.asHSB(); +this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0)); + }, +brighten: function(percent) { +var hsb= this.asHSB(); +this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1)); + }, +blend: function(other) { +this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2); +this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2); +this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2); + }, +isBright: function() { +var hsb = this.asHSB(); +return this.asHSB().b > 0.5; + }, +isDark: function() { +return ! this.isBright(); + }, +asRGB: function() { +return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")"; + }, +asHex: function() { +return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart(); + }, +asHSB: function() { +return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b); + }, +toString: function() { return this.asHex(); -}}; -Rico.Color.createFromHex=function(_14){ -if(_14.indexOf("#")==0){ -_14=_14.substring(1); -} -var red="ff",green="ff",blue="ff"; -if(_14.length>4){ -red=_14.substring(0,2); -green=_14.substring(2,4); -blue=_14.substring(4,6); -}else{ -if(_14.length>0&_14.length<4){ -var r=_14.substring(0,1); -var g=_14.substring(1,2); -var b=_14.substring(2); -red=r+r; -green=g+g; -blue=b+b; -} -} -return new Rico.Color(parseInt(red,16),parseInt(green,16),parseInt(blue,16)); + } }; -Rico.Color.createColorFromBackground=function(_16){ -var _17=Element.getStyle($(_16),"background-color"); -if(_17=="transparent"&&_16.parent){ -return Rico.Color.createColorFromBackground(_16.parent); -} -if(_17==null){ +Rico.Color.createFromHex = function(hexCode) { +if ( hexCode.indexOf('#') == 0 ) +hexCode = hexCode.substring(1); +var red = "ff", green = "ff", blue="ff"; + if(hexCode.length > 4) +{ + red = hexCode.substring(0,2); + green = hexCode.substring(2,4); + blue= hexCode.substring(4,6); +} +else if(hexCode.length > 0 & hexCode.length < 4) +{ +var r = hexCode.substring(0,1); +var g = hexCode.substring(1,2); +var b = hexCode.substring(2); +red = r+r; +green = g+g; +blue = b+b; +} + return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) ); +} +Rico.Color.createColorFromBackground = function(elem) { +var actualColor = Element.getStyle($(elem), "background-color"); +if ( actualColor == "transparent" && elem.parent ) +return Rico.Color.createColorFromBackground(elem.parent); +if ( actualColor == null ) return new Rico.Color(255,255,255); -} -if(_17.indexOf("rgb(")==0){ -var _18=_17.substring(4,_17.length-1); -var _19=_18.split(","); -return new Rico.Color(parseInt(_19[0]),parseInt(_19[1]),parseInt(_19[2])); -}else{ -if(_17.indexOf("#")==0){ -return Rico.Color.createFromHex(_17); -}else{ +if ( actualColor.indexOf("rgb(") == 0 ) { +var colors = actualColor.substring(4, actualColor.length - 1 ); +var colorArray = colors.split(","); +return new Rico.Color( parseInt( colorArray[0] ), +parseInt( colorArray[1] ), +parseInt( colorArray[2] )); +} + else if ( actualColor.indexOf("#") == 0 ) { +return Rico.Color.createFromHex(actualColor); + } + else return new Rico.Color(255,255,255); } -} -}; -Rico.Color.HSBtoRGB=function(hue,_21,_22){ -var red=0; -var _23=0; -var _24=0; -if(_21==0){ -red=parseInt(_22*255+0.5); -_23=red; -_24=red; -}else{ -var h=(hue-Math.floor(hue))*6; -var f=h-Math.floor(h); -var p=_22*(1-_21); -var q=_22*(1-_21*f); -var t=_22*(1-(_21*(1-f))); -switch(parseInt(h)){ -case 0: -red=(_22*255+0.5); -_23=(t*255+0.5); -_24=(p*255+0.5); +Rico.Color.HSBtoRGB = function(hue, saturation, brightness) { +var red = 0; +var green = 0; +var blue= 0; +if (saturation == 0) { +red = parseInt(brightness * 255.0 + 0.5); + green = red; + blue = red; +} +else { +var h = (hue - Math.floor(hue)) * 6.0; +var f = h - Math.floor(h); +var p = brightness * (1.0 - saturation); +var q = brightness * (1.0 - saturation * f); +var t = brightness * (1.0 - (saturation * (1.0 - f))); +switch (parseInt(h)) { + case 0: +red = (brightness * 255.0 + 0.5); +green = (t * 255.0 + 0.5); +blue= (p * 255.0 + 0.5); break; -case 1: -red=(q*255+0.5); -_23=(_22*255+0.5); -_24=(p*255+0.5); + case 1: +red = (q * 255.0 + 0.5); +green = (brightness * 255.0 + 0.5); +blue= (p * 255.0 + 0.5); break; -case 2: -red=(p*255+0.5); -_23=(_22*255+0.5); -_24=(t*255+0.5); + case 2: +red = (p * 255.0 + 0.5); +green = (brightness * 255.0 + 0.5); +blue= (t * 255.0 + 0.5); break; -case 3: -red=(p*255+0.5); -_23=(q*255+0.5); -_24=(_22*255+0.5); + case 3: +red = (p * 255.0 + 0.5); +green = (q * 255.0 + 0.5); +blue= (brightness * 255.0 + 0.5); break; -case 4: -red=(t*255+0.5); -_23=(p*255+0.5); -_24=(_22*255+0.5); + case 4: +red = (t * 255.0 + 0.5); +green = (p * 255.0 + 0.5); +blue= (brightness * 255.0 + 0.5); break; case 5: -red=(_22*255+0.5); -_23=(p*255+0.5); -_24=(q*255+0.5); +red = (brightness * 255.0 + 0.5); +green = (p * 255.0 + 0.5); +blue= (q * 255.0 + 0.5); break; } } -return {r:parseInt(red),g:parseInt(_23),b:parseInt(_24)}; -}; -Rico.Color.RGBtoHSB=function(r,g,b){ -var hue; -var _29; -var _30; -var _31=(r>g)?r:g; -if(b>_31){ -_31=b; -} -var _32=(r g) ? r : g; + if (b > cmax) +cmax = b; +var cmin = (r < g) ? r : g; + if (b < cmin) +cmin = b; +brightness = cmax / 255.0; + if (cmax != 0) +saturation = (cmax - cmin)/cmax; + else +saturation = 0; +if (saturation == 0) +hue = 0; + else { +var redc = (cmax - r)/(cmax - cmin); +var greenc = (cmax - g)/(cmax - cmin); +var bluec= (cmax - b)/(cmax - cmin); +if (r == cmax) + hue = bluec - greenc; +else if (g == cmax) + hue = 2.0 + redc - bluec; +else + hue = 4.0 + greenc - redc; +hue = hue / 6.0; +if (hue < 0) + hue = hue + 1.0; + } +return { h : hue, s : saturation, b : brightness }; +} +Prado.WebUI.TColorPicker = Class.create(); +Object.extend(Prado.WebUI.TColorPicker, +{ +palettes: +{ +Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], +["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], +["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"], +["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"], +["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"], +["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"], +["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]], +Tiny : [["ffffff" , "00ff00" , "008000" , "0000ff" ], +["c0c0c0" , "ffff00" , "ff00ff" , "000080" ], +["808080" , "ff0000" , "800080" , "000000" ]] +}, +UIImages : +{ +'button.gif' : 'button.gif', +'background.png' : 'background.png' } -Event.observe(this.input,"change",this.updatePicker.bind(this)); -},updatePicker:function(e){ -var _39=Rico.Color.createFromHex(this.input.value); -this.button.style.backgroundColor=_39.toString(); -},buttonOnClick:function(_40){ -var _41=this.options["Mode"]; -if(this.element==null){ -var _42=_41=="Basic"?"getBasicPickerContainer":"getFullPickerContainer"; -this.element=this[_42](this.options["ID"],this.options["Palette"]); +}); +Object.extend(Prado.WebUI.TColorPicker.prototype, +{ +initialize : function(options) +{ +var basics = +{ +Palette : 'Small', +ClassName : 'TColorPicker', +Mode : 'Basic', +OKButtonText : 'OK', +CancelButtonText : 'Cancel', +ShowColorPicker : true +} +this.element = null; +this.showing = false; +options = Object.extend(basics, options); +this.options = options; +this.input = $(options['ID']); +this.button = $(options['ID']+'_button'); +this._buttonOnClick = this.buttonOnClick.bind(this); +if(options['ShowColorPicker']) +Event.observe(this.button, "click", this._buttonOnClick); +Event.observe(this.input, "change", this.updatePicker.bind(this)); +}, +updatePicker : function(e) +{ +var color = Rico.Color.createFromHex(this.input.value); +this.button.style.backgroundColor = color.toString(); +}, +buttonOnClick : function(event) +{ +var mode = this.options['Mode']; +if(this.element == null) +{ +var constructor = mode == "Basic" ? "getBasicPickerContainer": "getFullPickerContainer" +this.element = this[constructor](this.options['ID'], this.options['Palette']) document.body.appendChild(this.element); -this.element.style.display="none"; -if(Prado.Browser().ie){ -this.iePopUp=document.createElement("iframe"); -this.iePopUp.src=""; -this.iePopUp.style.position="absolute"; -this.iePopUp.scrolling="no"; -this.iePopUp.frameBorder="0"; +this.element.style.display = "none"; +if(Prado.Browser().ie) +{ +this.iePopUp = document.createElement('iframe'); +this.iePopUp.src = ""; +this.iePopUp.style.position = "absolute" +this.iePopUp.scrolling="no" +this.iePopUp.frameBorder="0" this.input.parentNode.appendChild(this.iePopUp); } -if(_41=="Full"){ +if(mode == "Full") this.initializeFullPicker(); } -} this.show(); -},show:function(_43){ -if(!this.showing){ -var pos=Position.cumulativeOffset(this.input); -pos[1]+=this.input.offsetHeight; -this.element.style.top=(pos[1]-1)+"px"; -this.element.style.left=pos[0]+"px"; -this.element.style.display="block"; -this.ieHack(_43); -this._documentClickEvent=this.hideOnClick.bindEvent(this,_43); -this._documentKeyDownEvent=this.keyPressed.bindEvent(this,_43); -Event.observe(document.body,"click",this._documentClickEvent); -Event.observe(document,"keydown",this._documentKeyDownEvent); -this.showing=true; -if(_43=="Full"){ -var _45=Rico.Color.createFromHex(this.input.value); -this.inputs.oldColor.style.backgroundColor=_45.asHex(); -this.setColor(_45,true); -} -} -},hide:function(_46){ -if(this.showing){ -if(this.iePopUp){ -this.iePopUp.style.display="none"; -} -this.element.style.display="none"; -this.showing=false; -Event.stopObserving(document.body,"click",this._documentClickEvent); -Event.stopObserving(document,"keydown",this._documentKeyDownEvent); -} -},keyPressed:function(_47,_48){ -if(Event.keyCode(_47)==Event.KEY_ESC){ -this.hide(_47,_48); -} -},hideOnClick:function(ev){ -if(!this.showing){ -return; -} -var el=Event.element(ev); -var _51=false; -do{ -_51=_51||String(el.className).indexOf("FullColorPicker")>-1; -_51=_51||el==this.button; -_51=_51||el==this.input; -if(_51){ -break; -} -el=el.parentNode; -}while(el); -if(!_51){ -this.hide(ev); -} -},ieHack:function(){ -if(this.iePopUp){ -this.iePopUp.style.display="block"; -this.iePopUp.style.top=(this.element.offsetTop)+"px"; -this.iePopUp.style.left=(this.element.offsetLeft)+"px"; -this.iePopUp.style.width=Math.abs(this.element.offsetWidth)+"px"; -this.iePopUp.style.height=(this.element.offsetHeight+1)+"px"; -} -},getBasicPickerContainer:function(_52,_53){ -var _54=TABLE({className:"basic_colors palette_"+_53},TBODY()); -var _55=Prado.WebUI.TColorPicker.palettes[_53]; -var _56=this.cellOnClick.bind(this); -_55.each(function(_57){ -var row=document.createElement("tr"); -_57.each(function(c){ -var td=document.createElement("td"); -var img=IMG({src:Prado.WebUI.TColorPicker.UIImages["button.gif"],width:16,height:16}); -img.style.backgroundColor="#"+c; -Event.observe(img,"click",_56); -Event.observe(img,"mouseover",function(e){ -Element.addClassName(Event.element(e),"pickerhover"); +}, +show : function(type) +{ +if(!this.showing) +{ +var pos = Position.cumulativeOffset(this.input); +pos[1] += this.input.offsetHeight; +this.element.style.top = (pos[1]-1) + "px"; +this.element.style.left = pos[0] + "px"; +this.element.style.display = "block"; +this.ieHack(type); +this._documentClickEvent = this.hideOnClick.bindEvent(this, type); +this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type); +Event.observe(document.body, "click", this._documentClickEvent); +Event.observe(document,"keydown", this._documentKeyDownEvent); +this.showing = true; +if(type == "Full") +{ +var color = Rico.Color.createFromHex(this.input.value); +this.inputs.oldColor.style.backgroundColor = color.asHex(); +this.setColor(color,true); +} +} +}, +hide : function(event) +{ +if(this.showing) +{ +if(this.iePopUp) +this.iePopUp.style.display = "none"; +this.element.style.display = "none"; +this.showing = false; +Event.stopObserving(document.body, "click", this._documentClickEvent); +Event.stopObserving(document,"keydown", this._documentKeyDownEvent); +} +}, +keyPressed : function(event,type) +{ +if(Event.keyCode(event) == Event.KEY_ESC) +this.hide(event,type); +}, +hideOnClick : function(ev) +{ +if(!this.showing) return; +var el = Event.element(ev); +var within = false; +do +{within = within || String(el.className).indexOf('FullColorPicker') > -1 +within = within || el == this.button; +within = within || el == this.input; +if(within) break; +el = el.parentNode; +} +while(el); +if(!within) this.hide(ev); +}, +ieHack : function() +{ +if(this.iePopUp) +{ +this.iePopUp.style.display = "block"; +this.iePopUp.style.top = (this.element.offsetTop) + "px"; +this.iePopUp.style.left = (this.element.offsetLeft)+ "px"; +this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px"; +this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px"; +} +}, +getBasicPickerContainer : function(pickerID, palette) +{ +var table = TABLE({className:'basic_colors palette_'+palette},TBODY()); +var colors = Prado.WebUI.TColorPicker.palettes[palette]; +var pickerOnClick = this.cellOnClick.bind(this); +colors.each(function(color) +{ +var row = document.createElement("tr"); +color.each(function(c) +{ +var td = document.createElement("td"); +var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16}); +img.style.backgroundColor = "#"+c; +Event.observe(img,"click", pickerOnClick); +Event.observe(img,"mouseover", function(e) +{ +Element.addClassName(Event.element(e), "pickerhover"); }); -Event.observe(img,"mouseout",function(e){ -Element.removeClassName(Event.element(e),"pickerhover"); +Event.observe(img,"mouseout", function(e) +{ +Element.removeClassName(Event.element(e), "pickerhover"); }); td.appendChild(img); row.appendChild(td); }); -_54.childNodes[0].appendChild(row); +table.childNodes[0].appendChild(row); }); -return DIV({className:this.options["ClassName"]+" BasicColorPicker",id:_52+"_picker"},_54); -},cellOnClick:function(e){ -var el=Event.element(e); -if(el.tagName.toLowerCase()!="img"){ +return DIV({className:this.options['ClassName']+" BasicColorPicker", +id:pickerID+"_picker"}, table); +}, +cellOnClick : function(e) +{ +var el = Event.element(e); +if(el.tagName.toLowerCase() != "img") return; -} -var _62=Rico.Color.createColorFromBackground(el); -this.updateColor(_62); -},updateColor:function(_63){ -this.input.value=_63.toString().toUpperCase(); -this.button.style.backgroundColor=_63.toString(); -if(isFunction(this.onChange)){ -this.onChange(_63); -} -},getFullPickerContainer:function(_64){ -this.buttons={OK:INPUT({value:this.options.OKButtonText,className:"button",type:"button"}),Cancel:INPUT({value:this.options.CancelButtonText,className:"button",type:"button"})}; -var _65={}; -["H","S","V","R","G","B"].each(function(_66){ -_65[_66]=INPUT({type:"text",size:"3",maxlength:"3"}); +var color = Rico.Color.createColorFromBackground(el); +this.updateColor(color); +}, +updateColor : function(color) +{ +this.input.value = color.toString().toUpperCase(); +this.button.style.backgroundColor = color.toString(); +if(isFunction(this.onChange)) +this.onChange(color); +}, +getFullPickerContainer : function(pickerID) +{ +this.buttons = +{ +OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}), +Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'}) +}; +var inputs = {}; +['H','S','V','R','G','B'].each(function(type) +{ +inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'}); }); -_65["HEX"]=INPUT({className:"hex",type:"text",size:"6",maxlength:"6"}); -this.inputs=_65; -var _67=Prado.WebUI.TColorPicker.UIImages; -this.inputs["currentColor"]=SPAN({className:"currentColor"}); -this.inputs["oldColor"]=SPAN({className:"oldColor"}); -var _68=TABLE({className:"inputs"},TBODY(null,TR(null,TD({className:"currentcolor",colSpan:2},this.inputs["currentColor"],this.inputs["oldColor"])),TR(null,TD(null,"H:"),TD(null,this.inputs["H"],"\xc2\xb0")),TR(null,TD(null,"S:"),TD(null,this.inputs["S"],"%")),TR(null,TD(null,"V:"),TD(null,this.inputs["V"],"%")),TR(null,TD({className:"gap"},"R:"),TD({className:"gap"},this.inputs["R"])),TR(null,TD(null,"G:"),TD(null,this.inputs["G"])),TR(null,TD(null,"B:"),TD(null,this.inputs["B"])),TR(null,TD({className:"gap"},"#"),TD({className:"gap"},this.inputs["HEX"])))); -var _69={selector:SPAN({className:"selector"}),background:SPAN({className:"colorpanel"}),slider:SPAN({className:"slider"}),hue:SPAN({className:"strip"})}; -if(Prado.Browser().ie){ -var _70="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"; -_69["background"]=SPAN({className:"colorpanel",style:_70+"(src='"+_67["background.png"]+"' sizingMethod=scale);"}); -} -this.inputs=Object.extend(this.inputs,_69); -var _71=TABLE(null,TBODY(null,TR({className:"selection"},TD({className:"colors"},_69["selector"],_69["background"]),TD({className:"hue"},_69["slider"],_69["hue"]),TD({className:"inputs"},_68)),TR({className:"options"},TD({colSpan:3},this.buttons["OK"],this.buttons["Cancel"])))); -return DIV({className:this.options["ClassName"]+" FullColorPicker",id:_64+"_picker"},_71); -},initializeFullPicker:function(){ -var _72=Rico.Color.createFromHex(this.input.value); -this.inputs.oldColor.style.backgroundColor=_72.asHex(); -this.setColor(_72,true); -var i=0; -for(var _74 in this.inputs){ -Event.observe(this.inputs[_74],"change",this.onInputChanged.bindEvent(this,_74)); +inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'}); +this.inputs = inputs; +var images = Prado.WebUI.TColorPicker.UIImages; +this.inputs['currentColor'] = SPAN({className:'currentColor'}); +this.inputs['oldColor'] = SPAN({className:'oldColor'}); +var inputsTable = +TABLE({className:'inputs'}, TBODY(null, +TR(null, +TD({className:'currentcolor',colSpan:2}, +this.inputs['currentColor'], this.inputs['oldColor'])), +TR(null, +TD(null,'H:'), +TD(null,this.inputs['H'], '°')), +TR(null, +TD(null,'S:'), +TD(null,this.inputs['S'], '%')), +TR(null, +TD(null,'V:'), +TD(null,this.inputs['V'], '%')), +TR(null, +TD({className:'gap'},'R:'), +TD({className:'gap'},this.inputs['R'])), +TR(null, +TD(null,'G:'), +TD(null, this.inputs['G'])), +TR(null, +TD(null,'B:'), +TD(null, this.inputs['B'])), +TR(null, +TD({className:'gap'},'#'), +TD({className:'gap'},this.inputs['HEX'])) +)); +var UIimages = +{ +selector : SPAN({className:'selector'}), +background : SPAN({className:'colorpanel'}), +slider : SPAN({className:'slider'}), +hue : SPAN({className:'strip'}) +} +if(Prado.Browser().ie) +{ +var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"; +UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"}) +} +this.inputs = Object.extend(this.inputs, UIimages); +var pickerTable = +TABLE(null,TBODY(null, +TR({className:'selection'}, +TD({className:'colors'},UIimages['selector'],UIimages['background']), +TD({className:'hue'},UIimages['slider'],UIimages['hue']), +TD({className:'inputs'}, inputsTable) +), +TR({className:'options'}, +TD({colSpan:3}, +this.buttons['OK'], +this.buttons['Cancel']) +) +)); +return DIV({className:this.options['ClassName']+" FullColorPicker", +id:pickerID+"_picker"},pickerTable); +}, +initializeFullPicker : function() +{ +var color = Rico.Color.createFromHex(this.input.value); +this.inputs.oldColor.style.backgroundColor = color.asHex(); +this.setColor(color,true); +var i = 0; +for(var type in this.inputs) +{ +Event.observe(this.inputs[type], "change", +this.onInputChanged.bindEvent(this,type)); i++; -if(i>6){ -break; -} -} -this.isMouseDownOnColor=false; -this.isMouseDownOnHue=false; -this._onColorMouseDown=this.onColorMouseDown.bind(this); -this._onHueMouseDown=this.onHueMouseDown.bind(this); -this._onMouseUp=this.onMouseUp.bind(this); -this._onMouseMove=this.onMouseMove.bind(this); -Event.observe(this.inputs.background,"mousedown",this._onColorMouseDown); -Event.observe(this.inputs.hue,"mousedown",this._onHueMouseDown); -Event.observe(document.body,"mouseup",this._onMouseUp); -Event.observe(document.body,"mousemove",this._onMouseMove); -Event.observe(this.buttons.Cancel,"click",this.hide.bindEvent(this,this.options["Mode"])); -Event.observe(this.buttons.OK,"click",this.onOKClicked.bind(this)); -},onColorMouseDown:function(ev){ -this.isMouseDownOnColor=true; +if(i > 6) break; +} +this.isMouseDownOnColor = false; +this.isMouseDownOnHue = false; +this._onColorMouseDown = this.onColorMouseDown.bind(this); +this._onHueMouseDown = this.onHueMouseDown.bind(this); +this._onMouseUp = this.onMouseUp.bind(this); +this._onMouseMove = this.onMouseMove.bind(this); +Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown); +Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); +Event.observe(document.body, "mouseup", this._onMouseUp); +Event.observe(document.body, "mousemove", this._onMouseMove); +Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode'])); +Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this)); +}, +onColorMouseDown : function(ev) +{ +this.isMouseDownOnColor = true; this.onMouseMove(ev); -},onHueMouseDown:function(ev){ -this.isMouseDownOnHue=true; +}, +onHueMouseDown : function(ev) +{ +this.isMouseDownOnHue = true; this.onMouseMove(ev); -},onMouseUp:function(ev){ -this.isMouseDownOnColor=false; -this.isMouseDownOnHue=false; -},onMouseMove:function(ev){ -if(this.isMouseDownOnColor){ +}, +onMouseUp : function(ev) +{ +this.isMouseDownOnColor = false; +this.isMouseDownOnHue = false; +}, +onMouseMove : function(ev) +{ +if(this.isMouseDownOnColor) this.changeSV(ev); -} -if(this.isMouseDownOnHue){ +if(this.isMouseDownOnHue) this.changeH(ev); -} -},changeSV:function(ev){ -var px=Event.pointerX(ev); -var py=Event.pointerY(ev); -var pos=Position.cumulativeOffset(this.inputs.background); -var x=this.truncate(px-pos[0],0,255); -var y=this.truncate(py-pos[1],0,255); -var h=this.truncate(this.inputs.H.value,0,360)/360; -var s=x/255; -var b=(255-y)/255; -var _79=new Rico.Color(); -_79.rgb=Rico.Color.HSBtoRGB(h,s,b); -this.inputs.selector.style.left=x+"px"; -this.inputs.selector.style.top=y+"px"; -this.inputs.currentColor.style.backgroundColor=_79.asHex(); -return this.setColor(_79); -},changeH:function(ev){ -var py=Event.pointerY(ev); -var pos=Position.cumulativeOffset(this.inputs.background); -var y=this.truncate(py-pos[1],0,255); -var h=(255-y)/255; -var s=parseInt(this.inputs.S.value)/100; -var b=parseInt(this.inputs.V.value)/100; -var _80=new Rico.Color(); -_80.rgb=Rico.Color.HSBtoRGB(h,s,b); -var hue=new Rico.Color(_80.rgb.r,_80.rgb.g,_80.rgb.b); -hue.setSaturation(1); -hue.setBrightness(1); -this.inputs.background.style.backgroundColor=hue.asHex(); -this.inputs.currentColor.style.backgroundColor=_80.asHex(); -this.inputs.slider.style.top=this.truncate(y,0,255)+"px"; -return this.setColor(_80); -},onOKClicked:function(ev){ -var r=this.truncate(this.inputs.R.value,0,255); -var g=this.truncate(this.inputs.G.value,0,255); -var b=this.truncate(this.inputs.B.value,0,255); -var _81=new Rico.Color(r,g,b); -this.updateColor(_81); -this.inputs.oldColor.style.backgroundColor=_81.asHex(); +}, +changeSV : function(ev) +{ +var px = Event.pointerX(ev); +var py = Event.pointerY(ev); +var pos = Position.cumulativeOffset(this.inputs.background); +var x = this.truncate(px - pos[0],0,255); +var y = this.truncate(py - pos[1],0,255); +var h = this.truncate(this.inputs.H.value,0,360)/360; +var s = x/255; +var b = (255-y)/255; +var color = new Rico.Color(); +color.rgb = Rico.Color.HSBtoRGB(h,s,b); +this.inputs.selector.style.left = x+"px"; +this.inputs.selector.style.top = y+"px"; +this.inputs.currentColor.style.backgroundColor = color.asHex(); +return this.setColor(color); +}, +changeH : function(ev) +{ +var py = Event.pointerY(ev); +var pos = Position.cumulativeOffset(this.inputs.background); +var y = this.truncate(py - pos[1],0,255); +var h = (255-y)/255; +var s = parseInt(this.inputs.S.value)/100; +var b = parseInt(this.inputs.V.value)/100; +var color = new Rico.Color(); +color.rgb = Rico.Color.HSBtoRGB(h,s,b); +var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b); +hue.setSaturation(1); hue.setBrightness(1); +this.inputs.background.style.backgroundColor = hue.asHex(); +this.inputs.currentColor.style.backgroundColor = color.asHex(); +this.inputs.slider.style.top = this.truncate(y,0,255)+"px"; +return this.setColor(color); +}, +onOKClicked : function(ev) +{ +var r = this.truncate(this.inputs.R.value,0,255); +var g = this.truncate(this.inputs.G.value,0,255); +var b = this.truncate(this.inputs.B.value,0,255); +var color = new Rico.Color(r,g,b); +this.updateColor(color); +this.inputs.oldColor.style.backgroundColor = color.asHex(); this.hide(ev); -},onInputChanged:function(ev,_82){ -if(this.isMouseDownOnColor||isMouseDownOnHue){ +}, +onInputChanged : function(ev, type) +{ +if(this.isMouseDownOnColor || isMouseDownOnHue) return; -} -switch(_82){ -case "H": -case "S": -case "V": -var h=this.truncate(this.inputs.H.value,0,360)/360; -var s=this.truncate(this.inputs.S.value,0,100)/100; -var b=this.truncate(this.inputs.V.value,0,100)/100; -var _83=new Rico.Color(); -_83.rgb=Rico.Color.HSBtoRGB(h,s,b); -return this.setColor(_83,true); -case "R": -case "G": -case "B": -var r=this.truncate(this.inputs.R.value,0,255); -var g=this.truncate(this.inputs.G.value,0,255); -var b=this.truncate(this.inputs.B.value,0,255); -var _83=new Rico.Color(r,g,b); -return this.setColor(_83,true); +switch(type) +{ +case "H": case "S": case "V": +var h = this.truncate(this.inputs.H.value,0,360)/360; +var s = this.truncate(this.inputs.S.value,0,100)/100; +var b = this.truncate(this.inputs.V.value,0,100)/100; +var color = new Rico.Color(); +color.rgb = Rico.Color.HSBtoRGB(h,s,b); +return this.setColor(color,true); +case "R": case "G": case "B": +var r = this.truncate(this.inputs.R.value,0,255); +var g = this.truncate(this.inputs.G.value,0,255); +var b = this.truncate(this.inputs.B.value,0,255); +var color = new Rico.Color(r,g,b); +return this.setColor(color,true); case "HEX": -var _83=Rico.Color.createFromHex(this.inputs.HEX.value); -return this.setColor(_83,true); +var color = Rico.Color.createFromHex(this.inputs.HEX.value); +return this.setColor(color,true); +} +}, +setColor : function(color, update) +{ +var hsb = color.asHSB(); +this.inputs.H.value = parseInt(hsb.h*360); +this.inputs.S.value = parseInt(hsb.s*100); +this.inputs.V.value = parseInt(hsb.b*100); +this.inputs.R.value = color.rgb.r; +this.inputs.G.value = color.rgb.g; +this.inputs.B.value = color.rgb.b; +this.inputs.HEX.value = color.asHex().substring(1).toUpperCase(); +var images = Prado.WebUI.TColorPicker.UIImages; +var changeCss = color.isBright() ? 'removeClassName' : 'addClassName'; +Element[changeCss](this.inputs.selector, 'target_white'); +if(update) +this.updateSelectors(color); +}, +updateSelectors : function(color) +{ +var hsb = color.asHSB(); +var pos = [hsb.s*255, hsb.b*255, hsb.h*255]; +this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px"; +this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px"; +this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px"; +var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b); +hue.setSaturation(1); hue.setBrightness(1); +this.inputs.background.style.backgroundColor = hue.asHex(); +this.inputs.currentColor.style.backgroundColor = color.asHex(); +}, +truncate : function(value, min, max) +{ +value = parseInt(value); +return value < min ? min : value > max ? max : value; } -},setColor:function(_84,_85){ -var hsb=_84.asHSB(); -this.inputs.H.value=parseInt(hsb.h*360); -this.inputs.S.value=parseInt(hsb.s*100); -this.inputs.V.value=parseInt(hsb.b*100); -this.inputs.R.value=_84.rgb.r; -this.inputs.G.value=_84.rgb.g; -this.inputs.B.value=_84.rgb.b; -this.inputs.HEX.value=_84.asHex().substring(1).toUpperCase(); -var _86=Prado.WebUI.TColorPicker.UIImages; -var _87=_84.isBright()?"removeClassName":"addClassName"; -Element[_87](this.inputs.selector,"target_white"); -if(_85){ -this.updateSelectors(_84); -} -},updateSelectors:function(_88){ -var hsb=_88.asHSB(); -var pos=[hsb.s*255,hsb.b*255,hsb.h*255]; -this.inputs.selector.style.left=this.truncate(pos[0],0,255)+"px"; -this.inputs.selector.style.top=this.truncate(255-pos[1],0,255)+"px"; -this.inputs.slider.style.top=this.truncate(255-pos[2],0,255)+"px"; -var hue=new Rico.Color(_88.rgb.r,_88.rgb.g,_88.rgb.b); -hue.setSaturation(1); -hue.setBrightness(1); -this.inputs.background.style.backgroundColor=hue.asHex(); -this.inputs.currentColor.style.backgroundColor=_88.asHex(); -},truncate:function(_89,min,max){ -_89=parseInt(_89); -return _89max?max:_89; -}}); - +}); -- cgit v1.2.3