NP_TrackBack/branches/DOM-branch/trackback/js/rico/ricoColorPicker.js

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