trunk/NP_TrackBack/trackback/js/rico/ricoColorPicker.js

   1 // ===================================================================
   2 // Original author: Matt Kruse <matt@mattkruse.com>
   3 // WWW: http://www.mattkruse.com/
   4 //
   5 // Adapted to Rico by Matt Brown
   6 // ===================================================================
   7
   8
   9 Rico.ColorPicker = Class.create();
  10
  11 Rico.ColorPicker.prototype = {
  12
  13   initialize: function(id,options) {
  14     this.id=id;
  15     this.currentValue = "#FFFFFF";
  16     Object.extend(this, new Rico.Popup());
  17     Object.extend(this.options, {
  18       showColorCode : false,
  19       cellsPerRow   : 18,
  20       palette       : []
  21     });
  22     var hexvals=['00','33','66','99','CC','FF'];
  23     for (var g=0; g<hexvals.length; g++)
  24       for (var r=0; r<hexvals.length; r++)
  25         for (var b=0; b<hexvals.length; b++)
  26           this.options.palette.push(hexvals[r]+hexvals[g]+hexvals[b]);
  27     Object.extend(this.options, options || {});
  28   },
  29
  30   atLoad : function() {
  31     this.container=document.createElement("div");
  32     this.container.style.display="none"
  33     this.container.className='ricoColorPicker';
  34     var width = this.options.cellsPerRow;
  35     var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
  36     for (var i=0; i<this.options.palette.length; i++) {
  37       if ((i % width) == 0) { cp_contents += "<TR>"; }
  38       cp_contents += '<TD BGCOLOR="'+this.options.palette[i]+'">&nbsp;</TD>';
  39       if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0))
  40         cp_contents += "</TR>";
  41     }
  42     var halfwidth = Math.floor(width/2);
  43     if (this.options.showColorCode)
  44       cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
  45     else
  46       cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'>&nbsp;</TD></TR>";
  47     cp_contents += "</TABLE>";
  48     this.container.innerHTML=cp_contents;
  49     document.body.appendChild(this.container);
  50     this.setDiv(this.container);
  51     this.open=this.openPopup;
  52     this.close=this.closePopup;
  53     Event.observe(this.container,"mouseover", this.highlightColor.bindAsEventListener(this), false);
  54     Event.observe(this.container,"click", this.selectColor.bindAsEventListener(this), false);
  55     this.close();
  56   },
  57
  58   selectColor: function(e) {
  59     if (this.returnValue) this.returnValue(this.currentValue);
  60     this.close();
  61   },
  62
  63   // This function runs when you move your mouse over a color block, if you have a newer browser
  64   highlightColor: function(e) {
  65     var elem = Event.element(e);
  66     if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
  67     var c=Rico.Color.createColorFromBackground(elem).toString();
  68     this.currentValue = c;
  69     Element.setStyle('colorPickerSelectedColor',{'background-color':c});
  70     d = $("colorPickerSelectedColorValue");
  71     if (d) d.innerHTML = c;
  72   }
  73 }
  74
  75 Rico.includeLoaded('ricoColorPicker.js');