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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.ColorPalette
15 * @extends Roo.Component
16 * Simple color palette class for choosing colors. The palette can be rendered to any container.<br />
17 * Here's an example of typical usage:
18 * <pre><code>
19 var cp = new Roo.ColorPalette({value:'993300'}); // initial selected color
22 cp.on('select', function(palette, selColor){
23 // do something with selColor
25 </code></pre>
27 * Create a new ColorPalette
28 * @param {Object} config The config object
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">/**
35 * Fires when a color is selected
36 * @param {ColorPalette} this
37 * @param {String} color The 6-digit color hex code (without the # symbol)
39 </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
40 </span><span class="jsdoc-syntax">});
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">"select"</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">);
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 "x-color-palette")
51 </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-color-palette"</span><span class="jsdoc-syntax">,
52 </span><span class="jsdoc-comment">/**
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.
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">"Roo.ColorPalette"</span><span class="jsdoc-syntax">,
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
65 </span><span class="jsdoc-var">allowReselect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-comment">/**
68 * <p>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.</p>
72 * <p>You can override individual colors if needed:</p>
73 * <pre><code>
74 var cp = new Roo.ColorPalette();
75 cp.colors[0] = "FF0000"; // change the first box to red
76 </code></pre>
78 Or you can provide a custom array of your own for complete control:
79 <pre><code>
80 var cp = new Roo.ColorPalette();
81 cp.colors = ["000000", "993300", "333300"];
82 </code></pre>
85 </span><span class="jsdoc-var">colors </span><span class="jsdoc-syntax">: [
86 </span><span class="jsdoc-string">"000000"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"993300"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"333300"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"003300"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"003366"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"000080"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"333399"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"333333"</span><span class="jsdoc-syntax">,
87 </span><span class="jsdoc-string">"800000"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FF6600"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"808000"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"008000"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"008080"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"0000FF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"666699"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"808080"</span><span class="jsdoc-syntax">,
88 </span><span class="jsdoc-string">"FF0000"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FF9900"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"99CC00"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"339966"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"33CCCC"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"3366FF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"800080"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"969696"</span><span class="jsdoc-syntax">,
89 </span><span class="jsdoc-string">"FF00FF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FFCC00"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FFFF00"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"00FF00"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"00FFFF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"00CCFF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"993366"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"C0C0C0"</span><span class="jsdoc-syntax">,
90 </span><span class="jsdoc-string">"FF99CC"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FFCC99"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FFFF99"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"CCFFCC"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"CCFFFF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"99CCFF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"CC99FF"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"FFFFFF"
91 </span><span class="jsdoc-syntax">],
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">'<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
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">< </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">]]);
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">"div"</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">"a"</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">"a"</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">});
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">);
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">());
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)
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">"#"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">""</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">"a.color-"</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">"x-color-palette-sel"</span><span class="jsdoc-syntax">);
143 </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"a.color-"</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">"x-color-palette-sel"</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">"select"</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">);
148 });</span></code></body></html>