git.infodrom.org Git - infodrom/rico3/blob - minsrc/ricoColorPicker.js

   1 /*
   2  *  (c) 2005-2011 Richard Cowin (http://openrico.org)
   3  *  (c) 2005-2011 Matt Brown (http://dowdybrown.com)
   4  *
   5  *  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
   6  *  file except in compliance with the License. You may obtain a copy of the License at
   7  *
   8  *         http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  *  Unless required by applicable law or agreed to in writing, software distributed under the
  11  *  License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
  12  *  either express or implied. See the License for the specific language governing permissions
  13  *  and limitations under the License.
  14  */
  15
  16 // ===================================================================
  17 // Adapted to Rico by Matt Brown from code
  18 //   published by Matt Kruse http://www.mattkruse.com/
  19 // ===================================================================
  20
  21 Rico.ColorPicker = function(id,options) {
  22   this.initialize(id,options);
  23 };
  24
  25 Rico.ColorPicker.prototype = {
  26 /**
  27  * @class Implements a pop-up color picker control.
  28  * @extends Rico.Popup
  29  * @constructs
  30  * @param id unique identifier
  31  * @param options object may contain any of the following:<dl>
  32  *   <dt>showColorCode</dt><dd> show hex color code as user hovers over color grid? default=false</dd>
  33  *   <dt>cellsPerRow  </dt><dd> number of colors per row in the grid? default=18</dd>
  34  *   <dt>palette      </dt><dd> array of 6 digit hex values, default=216 "web safe" colors</dd>
  35  *</dl>
  36  */
  37   initialize: function(id,options) {
  38     this.id=id;
  39     this.currentValue = "#FFFFFF";
  40     Rico.extend(this, new Rico.Popup());
  41     Rico.extend(this.options, {
  42       showColorCode : false,
  43       cellsPerRow   : 18,
  44       palette       : []
  45     });
  46     var hexvals=['00','33','66','99','CC','FF'];
  47     for (var g=0; g<hexvals.length; g++) {
  48       for (var r=0; r<hexvals.length; r++) {
  49         for (var b=0; b<hexvals.length; b++) {
  50           this.options.palette.push(hexvals[r]+hexvals[g]+hexvals[b]);
  51         }
  52       }
  53     }
  54     Rico.extend(this.options, options || {});
  55     var self=this;
  56     Rico.onLoad(function() { self.atLoad(); })
  57   },
  58
  59   atLoad : function() {
  60     this.createContainer();
  61     this.content.className='ricoColorPicker';
  62     var width = this.options.cellsPerRow;
  63     var cp_contents = "<TABLE BORDER='1' CELLSPACING='1' CELLPADDING='0'>";
  64     for (var i=0; i<this.options.palette.length; i++) {
  65       if ((i % width) == 0) { cp_contents += "<TR>"; }
  66       cp_contents += '<TD BGCOLOR="#'+this.options.palette[i]+'">&nbsp;</TD>';
  67       if ( ((i+1)>=this.options.palette.length) || (((i+1) % width) == 0)) {
  68         cp_contents += "</TR>";
  69       }
  70     }
  71     var halfwidth = Math.floor(width/2);
  72     if (this.options.showColorCode) {
  73       cp_contents += "<TR><TD COLSPAN='"+halfwidth+"' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+(width-halfwidth)+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
  74     } else {
  75       cp_contents += "<TR><TD COLSPAN='"+width+"' ID='colorPickerSelectedColor'>&nbsp;</TD></TR>";
  76     }
  77     cp_contents += "</TABLE>";
  78     this.content.innerHTML=cp_contents;
  79     /**
  80      * alias for openPopup
  81      * @function
  82      */
  83     this.open=this.openPopup;
  84     /**
  85      * alias for closePopup
  86      * @function
  87      */
  88     this.close=this.closePopup;
  89     Rico.eventBind(this.container,"mouseover", Rico.eventHandle(this,'highlightColor'), false);
  90     Rico.eventBind(this.container,"click", Rico.eventHandle(this,'selectColor'), false);
  91     this.close();
  92   },
  93
  94 /** @private */
  95   selectColor: function(e) {
  96     Rico.eventStop(e);
  97     if (this.returnValue) this.returnValue(this.currentValue);
  98     this.close();
  99   },
 100
 101 /* This function runs when you move your mouse over a color block */
 102 /** @private */
 103   highlightColor: function(e) {
 104     var elem = Rico.eventElement(e);
 105     if (!elem.tagName || elem.tagName.toLowerCase() != 'td') return;
 106     var c=Rico.Color.createColorFromBackground(elem).toString();
 107     this.currentValue = c;
 108     Rico.setStyle('colorPickerSelectedColor', {backgroundColor:c});
 109     var d = Rico.$("colorPickerSelectedColorValue");
 110     if (d) d.innerHTML = c;
 111   }
 112 };