+++ /dev/null
-<html><head><title>/home/alan/gitlive/roojs1/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">/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.ColorPalette
- * @extends Roo.Component
- * Simple color palette class for choosing colors. The palette can be rendered to any container.<br />
- * Here's an example of typical usage:
- * <pre><code>
-var cp = new Roo.ColorPalette({value:'993300'}); // initial selected color
-cp.render('my-div');
-
-cp.on('select', function(palette, selColor){
- // do something with selColor
-});
-</code></pre>
- * @constructor
- * Create a new ColorPalette
- * @param {Object} config The config object
- */
-</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">){
- </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">);
- </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
- </span><span class="jsdoc-comment">/**
- * @event select
- * Fires when a color is selected
- * @param {ColorPalette} this
- * @param {String} color The 6-digit color hex code (without the # symbol)
- */
- </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
- </span><span class="jsdoc-syntax">});
-
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
- </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">);
- }
-};
-</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">, {
- </span><span class="jsdoc-comment">/**
- * @cfg {String} itemCls
- * The CSS class to apply to the containing element (defaults to "x-color-palette")
- */
- </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-color-palette"</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-comment">/**
- * @cfg {String} value
- * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that
- * the hex codes are case-sensitive.
- */
- </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-comment">// private
- </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Roo.ColorPalette"</span><span class="jsdoc-syntax">,
-
- </span><span class="jsdoc-comment">/**
- * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
- */
- </span><span class="jsdoc-var">allowReselect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-
- </span><span class="jsdoc-comment">/**
- * <p>An array of 6-digit color hex code strings (without the # symbol). This array can contain any number
- * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting
- * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
- * of colors with the width setting until the box is symmetrical.</p>
- * <p>You can override individual colors if needed:</p>
- * <pre><code>
-var cp = new Roo.ColorPalette();
-cp.colors[0] = "FF0000"; // change the first box to red
-</code></pre>
-
-Or you can provide a custom array of your own for complete control:
-<pre><code>
-var cp = new Roo.ColorPalette();
-cp.colors = ["000000", "993300", "333300"];
-</code></pre>
- * @type Array
- */
- </span><span class="jsdoc-var">colors </span><span class="jsdoc-syntax">: [
- </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">,
- </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">,
- </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">,
- </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">,
- </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"
- </span><span class="jsdoc-syntax">],
-
- </span><span class="jsdoc-comment">// private
- </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">){
- </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">(
- </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>'
- </span><span class="jsdoc-syntax">);
- </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">;
- </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">++){
- </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">]]);
- }
- </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">);
- </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.itemCls</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">t.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
- </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">);
- </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">);
- </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">});
- </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">){
- </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">});
- }
- },
-
- </span><span class="jsdoc-comment">// private
- </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </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">);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
- </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">;
- </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
- }
- },
-
- </span><span class="jsdoc-comment">// private
- </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">){
- </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
- </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];
- </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.toUpperCase</span><span class="jsdoc-syntax">());
- }
- },
-
- </span><span class="jsdoc-comment">/**
- * Selects the specified color in the palette (fires the select event)
- * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
- */
- </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">){
- </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">);
- </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">){
- </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">;
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
- </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">);
- }
- </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">);
- </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
- </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">);
- }
- }
-});</span></code></body></html>
\ No newline at end of file