Changeset 1776 for branches/3.0

Timestamp:

03/26/2007 02:17:29 AM (20 months ago)

Author:

wei

Message:

update colorpicker.js

Location:

branches/3.0/framework/Web/Javascripts

Files:

• js/compressed/colorpicker.js (modified) (1 diff)
• js/debug/colorpicker.js (modified) (31 diffs)
• prado/colorpicker/colorpicker.js (modified) (31 diffs)

branches/3.0/framework/Web/Javascripts/js/compressed/colorpicker.js

@@ -1 +1 @@
 
+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<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'}});Object.extend(Prado.WebUI.TColorPicker.prototype,{initialize:function(options)
 {var basics={Palette:'Small',ClassName:'TColorPicker',Mode:'Basic',OKButtonText:'OK',CancelButtonText:'Cancel',ShowColorPicker:true}

branches/3.0/framework/Web/Javascripts/js/debug/colorpicker.js

@@ +1 @@
+//-------------------- 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"],
@@ -18 +262 @@
         },
 
-        UIImages : 
+        UIImages :
         {
                 'button.gif' : 'button.gif',
@@ -29 +273 @@
 });
 
-Object.extend(Prado.WebUI.TColorPicker.prototype, 
+Object.extend(Prado.WebUI.TColorPicker.prototype,
 {
         initialize : function(options)
         {
-                var basics = 
+                var basics =
                 {
                         Palette : 'Small',
@@ -42 +286 @@
                         ShowColorPicker : true
                 }
-                
+
                 this.element = null;
                 this.showing = false;
@@ -58 +302 @@
         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)
         {
@@ -85 +329 @@
                 }
                 this.show(mode);
-        },              
+        },
 
         show : function(type)
@@ -97 +341 @@
                         this.element.style.left = pos[0] + "px";
                         this.element.style.display = "block";
-                        
+
                         this.ieHack(type);
 
@@ -104 +348 @@
                         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;
 
@@ -116 +360 @@
                 }
         },
-        
+
         hide : function(event)
         {
@@ -127 +371 @@
                         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;
                         }
@@ -153 +397 @@
                         within = within || el == this.input;
                         if(within) break;
-                        el = el.parentNode;                     
+                        el = el.parentNode;
                 }
                 while(el);
@@ -159 +403 @@
         },
 
-        ieHack : function() 
+        ieHack : function()
         {
                 // IE hack
-                if(this.iePopUp) 
+                if(this.iePopUp)
                 {
                         this.iePopUp.style.display = "block";
@@ -205 +449 @@
         cellOnClick : function(e)
         {
-                var el = Event.element(e); 
+                var el = Event.element(e);
                 if(el.tagName.toLowerCase() != "img")
                         return;
@@ -221 +465 @@
 
         getFullPickerContainer : function(pickerID)
-        {                       
+        {
                 //create the 3 buttons
-                this.buttons = 
+                this.buttons =
                 {
                         //Less   : INPUT({value:'Less Colors', className:'button', type:'button'}),
@@ -229 +473 @@
                         Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})
                 };
-                
+
                 //create the 6 inputs
                 var inputs = {};
@@ -240 +484 @@
                 inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});
                 this.inputs = inputs;
-                
+
                 var images = Prado.WebUI.TColorPicker.UIImages;
 
@@ -246 +490 @@
                 this.inputs['oldColor'] = SPAN({className:'oldColor'});
 
-                var inputsTable = 
+                var inputsTable =
                         TABLE({className:'inputs'}, TBODY(null,
                                 TR(null,
@@ -259 +503 @@
                                         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'}),
@@ -295 +539 @@
                         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'},
@@ -305 +549 @@
                                         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);
@@ -322 +566 @@
                 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++;
@@ -331 +575 @@
                         if(i > 6) break;
                 }
-        
+
                 this.isMouseDownOnColor = false;
                 this.isMouseDownOnHue = false;
@@ -344 +588 @@
                 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();
 
@@ -359 +603 @@
                         Event.observe(document.body, "mousemove", this._onMouseMove);
                         this._observingMouseMove = true;
-                }               
+                }
         },
 
@@ -390 +634 @@
                         this.changeH(ev);
                 Event.stop(ev);
-        },      
+        },
 
         changeSV : function(ev)
@@ -397 +641 @@
                 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);
 
@@ -407 +651 @@
                 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;
 
@@ -418 +662 @@
                 this.inputs.selector.style.left = x+"px";
                 this.inputs.selector.style.top = y+"px";
-                
+
                 this.inputs.currentColor.style.backgroundColor = color.asHex();
 
@@ -429 +673 @@
                 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);
@@ -500 +744 @@
                 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);
@@ -514 +758 @@
                 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";