git.infodrom.org Git - misc/kostenrechnung/blob - lib/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 /** @lends Rico.ColorPicker# */
  11 {
  12 /**
  13  * @class Implements a pop-up color picker control.
  14  * @extends Rico.Popup
  15  * @constructs
  16  * @param id unique identifier
  17  * @param options object may contain any of the following:<dl>
  18  *   <dt>showColorCode</dt><dd> show hex color code as user hovers over color grid? default=false</dd>
  19  *   <dt>cellsPerRow  </dt><dd> number of colors per row in the grid? default=18</dd>
  20  *   <dt>palette      </dt><dd> array of 6 digit hex values, default=216 "web safe" colors</dd>
  21  *</dl>
  22  */
  23   initialize: function(id,options) {
  24     this.id=id;
  25     this.currentValue = "#FFFFFF";
  26     Object.extend(this, new Rico.Popup());
  27     Object.extend(this.options, {
  28       showColorCode : false,
  29       cellsPerRow   : 18,
  30       palette       : []
  31     });
  32     var hexvals=['00','33','66','99','CC','FF'];
  33     for (var g=0; g<hexvals.length; g++) {
  34       for (var r=0; r<hexvals.length; r++) {
  35         for (var b=0; b<hexvals.length; b++) {
  36           this.options.palette.push(hexvals[r]+hexvals[g]+hexvals[b]);
  37         }
  38       }
  39     }
  40     Object.extend(this.options, options || {});
  41   },
  42
  43   atLoad : function() {
  44     this.container=document.createElement("div");
  45     this.container.style.display="none";
  46     this.container.className='ricoColorPicker';
  47     var width = this.options.cellsPerRow;
  48     var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
  49     for (var i=0; i<this.options.palette.length; i++) {
  50       if ((i % width) == 0) { cp_contents += "<TR>"; }
  51       cp_contents += '<TD BGCOLOR="#'+this.options.palette[i]+'">&nbsp;</TD>';
  52       if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
  53         cp_contents += "</TR>";
  54       }
  55     }
  56     var halfwidth = Math.floor(width/2);
  57     if (this.options.showColorCode) {
  58       cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
  59     } else {
  60       cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'>&nbsp;</TD></TR>";
  61     }
  62     cp_contents += "</TABLE>";
  63     this.container.innerHTML=cp_contents;
  64     document.body.appendChild(this.container);
  65     this.setDiv(this.container);
  66     /**
  67      * alias for openPopup
  68      * @function
  69      */
  70     this.open=this.openPopup;
  71     /**
  72      * alias for closePopup
  73      * @function
  74      */
  75     this.close=this.closePopup;
  76     Event.observe(this.container,"mouseover", this.highlightColor.bindAsEventListener(this), false);
  77     Event.observe(this.container,"click", this.selectColor.bindAsEventListener(this), false);
  78     this.close();
  79   },
  80
  81 /** @private */
  82   selectColor: function(e) {
  83     Event.stop(e);
  84     if (this.returnValue) this.returnValue(this.currentValue);
  85     this.close();
  86   },
  87
  88 /* This function runs when you move your mouse over a color block */
  89 /** @private */
  90   highlightColor: function(e) {
  91     var elem = Event.element(e);
  92     if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
  93     var c=Rico.Color.createColorFromBackground(elem).toString();
  94     this.currentValue = c;
  95     Element.setStyle('colorPickerSelectedColor', {backgroundColor:c}, true);
  96     var d = $("colorPickerSelectedColorValue");
  97     if (d) d.innerHTML = c;
  98   }
  99 });
 100
 101 Rico.includeLoaded('ricoColorPicker.js');