From a8d579c7e1d7dc7afdb2a0c3802a434be3b9f25c Mon Sep 17 00:00:00 2001 From: wei <> Date: Mon, 26 Mar 2007 07:17:29 +0000 Subject: update colorpicker.js --- .../Web/Javascripts/js/compressed/colorpicker.js | 26 ++ framework/Web/Javascripts/js/debug/colorpicker.js | 356 +++++++++++++++++---- .../Javascripts/prado/colorpicker/colorpicker.js | 356 +++++++++++++++++---- 3 files changed, 626 insertions(+), 112 deletions(-) (limited to 'framework/Web') diff --git a/framework/Web/Javascripts/js/compressed/colorpicker.js b/framework/Web/Javascripts/js/compressed/colorpicker.js index 27d78ac5..8429b5e6 100644 --- a/framework/Web/Javascripts/js/compressed/colorpicker.js +++ b/framework/Web/Javascripts/js/compressed/colorpicker.js @@ -1,4 +1,30 @@ +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(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(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,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+0.5);green=(brightness*255.0+0.5);blue=(p*255.0+0.5);break;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+0.5);green=(q*255.0+0.5);blue=(brightness*255.0+0.5);break;case 4:red=(t*255.0+0.5);green=(p*255.0+0.5);blue=(brightness*255.0+0.5);break;case 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(green),b:parseInt(blue)};} +Rico.Color.RGBtoHSB=function(r,g,b){var hue;var saturaton;var brightness;var cmax=(r>g)?r:g;if(b>cmax) +cmax=b;var cmin=(r 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(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) ); +} + +/** + * Factory method for creating a color from the background of + * an HTML element. + */ +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 ( 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, 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 + 0.5); + green = (brightness * 255.0 + 0.5); + blue = (p * 255.0 + 0.5); + break; + 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 + 0.5); + green = (q * 255.0 + 0.5); + blue = (brightness * 255.0 + 0.5); + break; + case 4: + red = (t * 255.0 + 0.5); + green = (p * 255.0 + 0.5); + blue = (brightness * 255.0 + 0.5); + break; + case 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(green) , b : parseInt(blue) }; +} + +Rico.Color.RGBtoHSB = function(r, g, b) { + + var hue; + var saturaton; + var brightness; + + var cmax = (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: + palettes: { Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], @@ -17,7 +261,7 @@ Object.extend(Prado.WebUI.TColorPicker, ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] }, - UIImages : + UIImages : { 'button.gif' : 'button.gif', // 'target_black.gif' : 'target_black.gif', @@ -28,11 +272,11 @@ Object.extend(Prado.WebUI.TColorPicker, } }); -Object.extend(Prado.WebUI.TColorPicker.prototype, +Object.extend(Prado.WebUI.TColorPicker.prototype, { initialize : function(options) { - var basics = + var basics = { Palette : 'Small', ClassName : 'TColorPicker', @@ -41,7 +285,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, CancelButtonText : 'Cancel', ShowColorPicker : true } - + this.element = null; this.showing = false; @@ -57,10 +301,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, updatePicker : function(e) { - var color = Rico.Color.createFromHex(this.input.value); + var color = Rico.Color.createFromHex(this.input.value); this.button.style.backgroundColor = color.toString(); }, - + buttonOnClick : function(event) { var mode = this.options['Mode']; @@ -84,7 +328,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.initializeFullPicker(); } this.show(mode); - }, + }, show : function(type) { @@ -96,14 +340,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.element.style.top = (pos[1]-1) + "px"; this.element.style.left = pos[0] + "px"; this.element.style.display = "block"; - + this.ieHack(type); //observe for clicks on the document body 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); + Event.observe(document,"keydown", this._documentKeyDownEvent); this.showing = true; if(type == "Full") @@ -115,7 +359,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, } } }, - + hide : function(event) { if(this.showing) @@ -126,11 +370,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.element.style.display = "none"; this.showing = false; Event.stopObserving(document.body, "click", this._documentClickEvent); - Event.stopObserving(document,"keydown", this._documentKeyDownEvent); - + Event.stopObserving(document,"keydown", this._documentKeyDownEvent); + if(this._observingMouseMove) - { - Event.stopObserving(document.body, "mousemove", this._onMouseMove); + { + Event.stopObserving(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = false; } } @@ -152,16 +396,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, within = within || el == this.button; within = within || el == this.input; if(within) break; - el = el.parentNode; + el = el.parentNode; } while(el); if(!within) this.hide(ev); }, - ieHack : function() + ieHack : function() { // IE hack - if(this.iePopUp) + if(this.iePopUp) { this.iePopUp.style.display = "block"; this.iePopUp.style.top = (this.element.offsetTop) + "px"; @@ -204,7 +448,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, cellOnClick : function(e) { - var el = Event.element(e); + var el = Event.element(e); if(el.tagName.toLowerCase() != "img") return; var color = Rico.Color.createColorFromBackground(el); @@ -220,15 +464,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, }, getFullPickerContainer : function(pickerID) - { + { //create the 3 buttons - this.buttons = + this.buttons = { //Less : INPUT({value:'Less Colors', className:'button', type:'button'}), OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}), Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'}) }; - + //create the 6 inputs var inputs = {}; ['H','S','V','R','G','B'].each(function(type) @@ -239,13 +483,13 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, //create the HEX input 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 = + var inputsTable = TABLE({className:'inputs'}, TBODY(null, TR(null, TD({className:'currentcolor',colSpan:2}, @@ -258,30 +502,30 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, TR(null, TD(null,'S:'), TD(null,this.inputs['S'], '%')), - - TR(null, + + TR(null, TD(null,'V:'), TD(null,this.inputs['V'], '%')), - - TR(null, + + TR(null, TD({className:'gap'},'R:'), TD({className:'gap'},this.inputs['R'])), - - TR(null, + + TR(null, TD(null,'G:'), TD(null, this.inputs['G'])), - TR(null, + TR(null, TD(null,'B:'), TD(null, this.inputs['B'])), - TR(null, + TR(null, TD({className:'gap'},'#'), TD({className:'gap'},this.inputs['HEX'])) )); - var UIimages = - { + var UIimages = + { selector : SPAN({className:'selector'}), background : SPAN({className:'colorpanel'}), slider : SPAN({className:'slider'}), @@ -294,23 +538,23 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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 = + 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'], + TR({className:'options'}, + TD({colSpan:3}, + this.buttons['OK'], this.buttons['Cancel']) ) )); - + return DIV({className:this.options['ClassName']+" FullColorPicker", id:pickerID+"_picker"},pickerTable); }, @@ -321,16 +565,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.inputs.oldColor.style.backgroundColor = color.asHex(); this.setColor(color,true); - var i = 0; + var i = 0; for(var type in this.inputs) { - Event.observe(this.inputs[type], "change", + Event.observe(this.inputs[type], "change", this.onInputChanged.bindEvent(this,type)); i++; if(i > 6) break; } - + this.isMouseDownOnColor = false; this.isMouseDownOnHue = false; @@ -343,9 +587,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown); Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown); - + Event.observe(document.body, "mouseup", this._onMouseUp); - + this.observeMouseMovement(); Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode'])); @@ -358,7 +602,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { Event.observe(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = true; - } + } }, onColorMouseDown : function(ev) @@ -389,15 +633,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, if(this.isMouseDownOnHue) this.changeH(ev); Event.stop(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 x = this.truncate(px - pos[0],0,255); var y = this.truncate(py - pos[1],0,255); @@ -406,7 +650,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, var current_s = parseInt(this.inputs.S.value); var current_b = parseInt(this.inputs.V.value); - + if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return; var h = this.truncate(this.inputs.H.value,0,360)/360; @@ -417,7 +661,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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); @@ -428,7 +672,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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 current_h = this.truncate(this.inputs.H.value,0,360); current_h = current_h == 0 ? 360 : current_h; @@ -499,12 +743,12 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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); }, @@ -513,11 +757,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { 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(); diff --git a/framework/Web/Javascripts/prado/colorpicker/colorpicker.js b/framework/Web/Javascripts/prado/colorpicker/colorpicker.js index acf5531c..423338e0 100644 --- a/framework/Web/Javascripts/prado/colorpicker/colorpicker.js +++ b/framework/Web/Javascripts/prado/colorpicker/colorpicker.js @@ -1,8 +1,252 @@ +//-------------------- ricoColor.js +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) { + + // get an HSB model, and set the new hue... + var hsb = this.asHSB(); + hsb.h = h; + + // convert back to RGB... + this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b); + }, + + setSaturation: function(s) { + // get an HSB model, and set the new hue... + var hsb = this.asHSB(); + hsb.s = s; + + // convert back to RGB and set values... + this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b); + }, + + setBrightness: function(b) { + // get an HSB model, and set the new hue... + var hsb = this.asHSB(); + hsb.b = b; + + // convert back to RGB and set values... + 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(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) ); +} + +/** + * Factory method for creating a color from the background of + * an HTML element. + */ +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 ( 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, 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 + 0.5); + green = (brightness * 255.0 + 0.5); + blue = (p * 255.0 + 0.5); + break; + 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 + 0.5); + green = (q * 255.0 + 0.5); + blue = (brightness * 255.0 + 0.5); + break; + case 4: + red = (t * 255.0 + 0.5); + green = (p * 255.0 + 0.5); + blue = (brightness * 255.0 + 0.5); + break; + case 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(green) , b : parseInt(blue) }; +} + +Rico.Color.RGBtoHSB = function(r, g, b) { + + var hue; + var saturaton; + var brightness; + + var cmax = (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: + palettes: { Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], @@ -17,7 +261,7 @@ Object.extend(Prado.WebUI.TColorPicker, ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] }, - UIImages : + UIImages : { 'button.gif' : 'button.gif', // 'target_black.gif' : 'target_black.gif', @@ -28,11 +272,11 @@ Object.extend(Prado.WebUI.TColorPicker, } }); -Object.extend(Prado.WebUI.TColorPicker.prototype, +Object.extend(Prado.WebUI.TColorPicker.prototype, { initialize : function(options) { - var basics = + var basics = { Palette : 'Small', ClassName : 'TColorPicker', @@ -41,7 +285,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, CancelButtonText : 'Cancel', ShowColorPicker : true } - + this.element = null; this.showing = false; @@ -57,10 +301,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, updatePicker : function(e) { - var color = Rico.Color.createFromHex(this.input.value); + var color = Rico.Color.createFromHex(this.input.value); this.button.style.backgroundColor = color.toString(); }, - + buttonOnClick : function(event) { var mode = this.options['Mode']; @@ -84,7 +328,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.initializeFullPicker(); } this.show(mode); - }, + }, show : function(type) { @@ -96,14 +340,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.element.style.top = (pos[1]-1) + "px"; this.element.style.left = pos[0] + "px"; this.element.style.display = "block"; - + this.ieHack(type); //observe for clicks on the document body 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); + Event.observe(document,"keydown", this._documentKeyDownEvent); this.showing = true; if(type == "Full") @@ -115,7 +359,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, } } }, - + hide : function(event) { if(this.showing) @@ -126,11 +370,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.element.style.display = "none"; this.showing = false; Event.stopObserving(document.body, "click", this._documentClickEvent); - Event.stopObserving(document,"keydown", this._documentKeyDownEvent); - + Event.stopObserving(document,"keydown", this._documentKeyDownEvent); + if(this._observingMouseMove) - { - Event.stopObserving(document.body, "mousemove", this._onMouseMove); + { + Event.stopObserving(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = false; } } @@ -152,16 +396,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, within = within || el == this.button; within = within || el == this.input; if(within) break; - el = el.parentNode; + el = el.parentNode; } while(el); if(!within) this.hide(ev); }, - ieHack : function() + ieHack : function() { // IE hack - if(this.iePopUp) + if(this.iePopUp) { this.iePopUp.style.display = "block"; this.iePopUp.style.top = (this.element.offsetTop) + "px"; @@ -204,7 +448,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, cellOnClick : function(e) { - var el = Event.element(e); + var el = Event.element(e); if(el.tagName.toLowerCase() != "img") return; var color = Rico.Color.createColorFromBackground(el); @@ -220,15 +464,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, }, getFullPickerContainer : function(pickerID) - { + { //create the 3 buttons - this.buttons = + this.buttons = { //Less : INPUT({value:'Less Colors', className:'button', type:'button'}), OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}), Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'}) }; - + //create the 6 inputs var inputs = {}; ['H','S','V','R','G','B'].each(function(type) @@ -239,13 +483,13 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, //create the HEX input 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 = + var inputsTable = TABLE({className:'inputs'}, TBODY(null, TR(null, TD({className:'currentcolor',colSpan:2}, @@ -258,30 +502,30 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, TR(null, TD(null,'S:'), TD(null,this.inputs['S'], '%')), - - TR(null, + + TR(null, TD(null,'V:'), TD(null,this.inputs['V'], '%')), - - TR(null, + + TR(null, TD({className:'gap'},'R:'), TD({className:'gap'},this.inputs['R'])), - - TR(null, + + TR(null, TD(null,'G:'), TD(null, this.inputs['G'])), - TR(null, + TR(null, TD(null,'B:'), TD(null, this.inputs['B'])), - TR(null, + TR(null, TD({className:'gap'},'#'), TD({className:'gap'},this.inputs['HEX'])) )); - var UIimages = - { + var UIimages = + { selector : SPAN({className:'selector'}), background : SPAN({className:'colorpanel'}), slider : SPAN({className:'slider'}), @@ -294,23 +538,23 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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 = + 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'], + TR({className:'options'}, + TD({colSpan:3}, + this.buttons['OK'], this.buttons['Cancel']) ) )); - + return DIV({className:this.options['ClassName']+" FullColorPicker", id:pickerID+"_picker"},pickerTable); }, @@ -321,16 +565,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.inputs.oldColor.style.backgroundColor = color.asHex(); this.setColor(color,true); - var i = 0; + var i = 0; for(var type in this.inputs) { - Event.observe(this.inputs[type], "change", + Event.observe(this.inputs[type], "change", this.onInputChanged.bindEvent(this,type)); i++; if(i > 6) break; } - + this.isMouseDownOnColor = false; this.isMouseDownOnHue = false; @@ -343,9 +587,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown); Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown); - + Event.observe(document.body, "mouseup", this._onMouseUp); - + this.observeMouseMovement(); Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode'])); @@ -358,7 +602,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { Event.observe(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = true; - } + } }, onColorMouseDown : function(ev) @@ -389,15 +633,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, if(this.isMouseDownOnHue) this.changeH(ev); Event.stop(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 x = this.truncate(px - pos[0],0,255); var y = this.truncate(py - pos[1],0,255); @@ -406,7 +650,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, var current_s = parseInt(this.inputs.S.value); var current_b = parseInt(this.inputs.V.value); - + if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return; var h = this.truncate(this.inputs.H.value,0,360)/360; @@ -417,7 +661,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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); @@ -428,7 +672,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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 current_h = this.truncate(this.inputs.H.value,0,360); current_h = current_h == 0 ? 360 : current_h; @@ -499,12 +743,12 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, 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); }, @@ -513,11 +757,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { 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(); -- cgit v1.2.3