Subversion-Projekte lars-tiefland.prado

//-------------------- 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:
        {
                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"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/],
                                ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/],
                                ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]
        },

        UIImages :
        {
                'button.gif' : 'button.gif',
//              'target_black.gif' : 'target_black.gif',
//              'target_white.gif' : 'target_white.gif',
                'background.png' : 'background.png'
//              'slider.gif' : 'slider.gif',
//              'hue.gif' : 'hue.gif'
        }
});

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'])
                        this.input.parentNode.appendChild(this.element);
                        this.element.style.display = "none";

                        if(Prado.Browser().ie)
                        {
                                this.iePopUp = document.createElement('iframe');
                                this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif'];
                                this.iePopUp.style.position = "absolute"
                                this.iePopUp.scrolling="no"
                                this.iePopUp.frameBorder="0"
                                this.input.parentNode.appendChild(this.iePopUp);
                        }
                        if(mode == "Full")
                                this.initializeFullPicker();
                }
                this.show(mode);
        },

        show : function(type)
        {
                if(!this.showing)
                {
                        var pos = this.input.positionedOffset();
                        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);

                        //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);
                        this.showing = true;

                        if(type == "Full")
                        {
                                this.observeMouseMovement();
                                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);

                        if(this._observingMouseMove)
                        {
                                Event.stopObserving(document.body, "mousemove", this._onMouseMove);
                                this._observingMouseMove = false;
                        }
                }
        },

        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()
        {
                // IE hack
                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");
                                });
                                td.appendChild(img);
                                row.appendChild(td);
                        });
                        table.childNodes[0].appendChild(row);
                });
                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 color = Rico.Color.createColorFromBackground(el);
                this.updateColor(color);
        },

        updateColor : function(color)
        {
                this.input.value = color.toString().toUpperCase();
                this.button.style.backgroundColor = color.toString();
                if(typeof(this.onChange) == "function")
                        this.onChange(color);
                if(this.options.OnColorSelected)
                        this.options.OnColorSelected(this,color);
        },

        getFullPickerContainer : function(pickerID)
        {
                //create the 3 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)
                {
                        inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'});
                });

                //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 =
                        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'})
                }

                //png alpha channels for IE
                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.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']));
                Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this));
        },

        observeMouseMovement : function()
        {
                if(!this._observingMouseMove)
                {
                        Event.observe(document.body, "mousemove", this._onMouseMove);
                        this._observingMouseMove = true;
                }
        },

        onColorMouseDown : function(ev)
        {
                this.isMouseDownOnColor = true;
                this.onMouseMove(ev);
                Event.stop(ev);
        },

        onHueMouseDown : function(ev)
        {
                this.isMouseDownOnHue = true;
                this.onMouseMove(ev);
                Event.stop(ev);
        },

        onMouseUp : function(ev)
        {
                this.isMouseDownOnColor = false;
                this.isMouseDownOnHue = false;
                Event.stop(ev);
        },

        onMouseMove : function(ev)
        {
                if(this.isMouseDownOnColor)
                        this.changeSV(ev);
                if(this.isMouseDownOnHue)
                        this.changeH(ev);
                Event.stop(ev);
        },

        changeSV : function(ev)
        {
                var px = Event.pointerX(ev);
                var py = Event.pointerY(ev);
                var pos = this.inputs.background.cumulativeOffset();

                var x = this.truncate(px - pos[0],0,255);
                var y = this.truncate(py - pos[1],0,255);


                var s = x/255;
                var b = (255-y)/255;

                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;

                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 = this.inputs.background.cumulativeOffset();
                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;
                if(current_h == parseInt(h*360)) return;

                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);///255;
                var g = this.truncate(this.inputs.G.value,0,255);///255;
                var b = this.truncate(this.inputs.B.value,0,255);///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, type)
        {
                if(this.isMouseDownOnColor || isMouseDownOnHue)
                        return;


                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);///255;
                                var g = this.truncate(this.inputs.G.value,0,255);///255;
                                var b = this.truncate(this.inputs.B.value,0,255);///255;
                                var color = new Rico.Color(r,g,b);
                                return this.setColor(color,true);
                        case "HEX":
                                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;
        }
});