git.roojs.org Git - roojs1/blob - docs/src/Roo_ColorPalette.js.html

   1 <html><head><title>Roo/ColorPalette.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12
  13 /**
  14  * @class Roo.ColorPalette
  15  * @extends Roo.Component
  16  * Simple color palette class for choosing colors.  The palette can be rendered to any container.&lt;br /&gt;
  17  * Here's an example of typical usage:
  18  * &lt;pre&gt;&lt;code&gt;
  19 var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
  20 cp.render('my-div');
  21
  22 cp.on('select', function(palette, selColor){
  23     // do something with selColor
  24 });
  25 &lt;/code&gt;&lt;/pre&gt;
  26  * @constructor
  27  * Create a new ColorPalette
  28  * @param {Object} config The config object
  29  */
  30 </span><span class="jsdoc-var">Roo.ColorPalette </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  31     </span><span class="jsdoc-var">Roo.ColorPalette.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  32     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  33         </span><span class="jsdoc-comment">/**
  34              * @event select
  35              * Fires when a color is selected
  36              * @param {ColorPalette} this
  37              * @param {String} color The 6-digit color hex code (without the # symbol)
  38              */
  39         </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  40     </span><span class="jsdoc-syntax">});
  41
  42     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
  43         </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  44     }
  45 };
  46 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.ColorPalette</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
  47     </span><span class="jsdoc-comment">/**
  48      * @cfg {String} itemCls
  49      * The CSS class to apply to the containing element (defaults to &quot;x-color-palette&quot;)
  50      */
  51     </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-color-palette&quot;</span><span class="jsdoc-syntax">,
  52     </span><span class="jsdoc-comment">/**
  53      * @cfg {String} value
  54      * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
  55      * the hex codes are case-sensitive.
  56      */
  57     </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  58     </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">,
  59     </span><span class="jsdoc-comment">// private
  60     </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.ColorPalette&quot;</span><span class="jsdoc-syntax">,
  61
  62     </span><span class="jsdoc-comment">/**
  63      * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
  64      */
  65     </span><span class="jsdoc-var">allowReselect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  66
  67     </span><span class="jsdoc-comment">/**
  68      * &lt;p&gt;An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
  69      * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
  70      * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
  71      * of colors with the width setting until the box is symmetrical.&lt;/p&gt;
  72      * &lt;p&gt;You can override individual colors if needed:&lt;/p&gt;
  73      * &lt;pre&gt;&lt;code&gt;
  74 var cp = new Roo.ColorPalette();
  75 cp.colors[0] = &quot;FF0000&quot;;  // change the first box to red
  76 &lt;/code&gt;&lt;/pre&gt;
  77
  78 Or you can provide a custom array of your own for complete control:
  79 &lt;pre&gt;&lt;code&gt;
  80 var cp = new Roo.ColorPalette();
  81 cp.colors = [&quot;000000&quot;, &quot;993300&quot;, &quot;333300&quot;];
  82 &lt;/code&gt;&lt;/pre&gt;
  83      * @type Array
  84      */
  85     </span><span class="jsdoc-var">colors </span><span class="jsdoc-syntax">: [
  86         </span><span class="jsdoc-string">&quot;000000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;993300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;003300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;003366&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;000080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333399&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333333&quot;</span><span class="jsdoc-syntax">,
  87         </span><span class="jsdoc-string">&quot;800000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FF6600&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;808000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;008000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;008080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;0000FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;666699&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;808080&quot;</span><span class="jsdoc-syntax">,
  88         </span><span class="jsdoc-string">&quot;FF0000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FF9900&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;99CC00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;339966&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;33CCCC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;3366FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;800080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;969696&quot;</span><span class="jsdoc-syntax">,
  89         </span><span class="jsdoc-string">&quot;FF00FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFCC00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFF00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00FF00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00FFFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00CCFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;993366&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;C0C0C0&quot;</span><span class="jsdoc-syntax">,
  90         </span><span class="jsdoc-string">&quot;FF99CC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFCC99&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFF99&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CCFFCC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CCFFFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;99CCFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CC99FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFFFF&quot;
  91     </span><span class="jsdoc-syntax">],
  92
  93     </span><span class="jsdoc-comment">// private
  94     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
  95         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.MasterTemplate</span><span class="jsdoc-syntax">(
  96             </span><span class="jsdoc-string">'&lt;tpl&gt;&lt;a href=&quot;#&quot; class=&quot;color-{0}&quot; hidefocus=&quot;on&quot;&gt;&lt;em&gt;&lt;span style=&quot;background:#{0}&quot; unselectable=&quot;on&quot;&gt;&amp;#160;&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;/tpl&gt;'
  97         </span><span class="jsdoc-syntax">);
  98         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colors</span><span class="jsdoc-syntax">;
  99         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
 100             </span><span class="jsdoc-var">t.add</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]);
 101         }
 102         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
 103         </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.itemCls</span><span class="jsdoc-syntax">;
 104         </span><span class="jsdoc-var">t.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 105         </span><span class="jsdoc-var">container.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 106         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 107         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">});
 108         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">){
 109             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
 110         }
 111     },
 112
 113     </span><span class="jsdoc-comment">// private
 114     </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 115         </span><span class="jsdoc-var">Roo.ColorPalette.superclass.afterRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 116         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
 117             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">;
 118             </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 119             </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
 120         }
 121     },
 122
 123     </span><span class="jsdoc-comment">// private
 124     </span><span class="jsdoc-var">handleClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
 125         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 126         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 127             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t.className.match</span><span class="jsdoc-syntax">(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
 128             </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.toUpperCase</span><span class="jsdoc-syntax">());
 129         }
 130     },
 131
 132     </span><span class="jsdoc-comment">/**
 133      * Selects the specified color in the palette (fires the select event)
 134      * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
 135      */
 136     </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">){
 137         </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 138         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.allowReselect</span><span class="jsdoc-syntax">){
 139             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 140             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
 141                 </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a.color-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-color-palette-sel&quot;</span><span class="jsdoc-syntax">);
 142             }
 143             </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a.color-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-color-palette-sel&quot;</span><span class="jsdoc-syntax">);
 144             </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
 145             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">);
 146         }
 147     }
 148 });</span></code></body></html>