/javascripts/lib/src/widgets/ColorPalette.js
JavaScript | 172 lines | 68 code | 10 blank | 94 comment | 11 complexity | f761173287492acd7462fa99fdb0455a MD5 | raw file
Possible License(s): GPL-3.0
1/*! 2 * Ext JS Library 3.2.1 3 * Copyright(c) 2006-2010 Ext JS, Inc. 4 * licensing@extjs.com 5 * http://www.extjs.com/license 6 */ 7/** 8 * @class Ext.ColorPalette 9 * @extends Ext.Component 10 * Simple color palette class for choosing colors. The palette can be rendered to any container.<br /> 11 * Here's an example of typical usage: 12 * <pre><code> 13var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color 14cp.render('my-div'); 15 16cp.on('select', function(palette, selColor){ 17 // do something with selColor 18}); 19</code></pre> 20 * @constructor 21 * Create a new ColorPalette 22 * @param {Object} config The config object 23 * @xtype colorpalette 24 */ 25Ext.ColorPalette = Ext.extend(Ext.Component, { 26 /** 27 * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. 28 */ 29 /** 30 * @cfg {String} itemCls 31 * The CSS class to apply to the containing element (defaults to 'x-color-palette') 32 */ 33 itemCls : 'x-color-palette', 34 /** 35 * @cfg {String} value 36 * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that 37 * the hex codes are case-sensitive. 38 */ 39 value : null, 40 /** 41 * @cfg {String} clickEvent 42 * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu). 43 * Defaults to <tt>'click'</tt>. 44 */ 45 clickEvent :'click', 46 // private 47 ctype : 'Ext.ColorPalette', 48 49 /** 50 * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event 51 */ 52 allowReselect : false, 53 54 /** 55 * <p>An array of 6-digit color hex code strings (without the # symbol). This array can contain any number 56 * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting 57 * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number 58 * of colors with the width setting until the box is symmetrical.</p> 59 * <p>You can override individual colors if needed:</p> 60 * <pre><code> 61var cp = new Ext.ColorPalette(); 62cp.colors[0] = 'FF0000'; // change the first box to red 63</code></pre> 64 65Or you can provide a custom array of your own for complete control: 66<pre><code> 67var cp = new Ext.ColorPalette(); 68cp.colors = ['000000', '993300', '333300']; 69</code></pre> 70 * @type Array 71 */ 72 colors : [ 73 '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', 74 '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', 75 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696', 76 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 77 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' 78 ], 79 80 /** 81 * @cfg {Function} handler 82 * Optional. A function that will handle the select event of this palette. 83 * The handler is passed the following parameters:<div class="mdetail-params"><ul> 84 * <li><code>palette</code> : ColorPalette<div class="sub-desc">The {@link #palette Ext.ColorPalette}.</div></li> 85 * <li><code>color</code> : String<div class="sub-desc">The 6-digit color hex code (without the # symbol).</div></li> 86 * </ul></div> 87 */ 88 /** 89 * @cfg {Object} scope 90 * The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code> 91 * function will be called. Defaults to this ColorPalette instance. 92 */ 93 94 // private 95 initComponent : function(){ 96 Ext.ColorPalette.superclass.initComponent.call(this); 97 this.addEvents( 98 /** 99 * @event select 100 * Fires when a color is selected 101 * @param {ColorPalette} this 102 * @param {String} color The 6-digit color hex code (without the # symbol) 103 */ 104 'select' 105 ); 106 107 if(this.handler){ 108 this.on('select', this.handler, this.scope, true); 109 } 110 }, 111 112 // private 113 onRender : function(container, position){ 114 this.autoEl = { 115 tag: 'div', 116 cls: this.itemCls 117 }; 118 Ext.ColorPalette.superclass.onRender.call(this, container, position); 119 var t = this.tpl || new Ext.XTemplate( 120 '<tpl for="."><a href="#" class="color-{.}" hidefocus="on"><em><span style="background:#{.}" unselectable="on"> </span></em></a></tpl>' 121 ); 122 t.overwrite(this.el, this.colors); 123 this.mon(this.el, this.clickEvent, this.handleClick, this, {delegate: 'a'}); 124 if(this.clickEvent != 'click'){ 125 this.mon(this.el, 'click', Ext.emptyFn, this, {delegate: 'a', preventDefault: true}); 126 } 127 }, 128 129 // private 130 afterRender : function(){ 131 Ext.ColorPalette.superclass.afterRender.call(this); 132 if(this.value){ 133 var s = this.value; 134 this.value = null; 135 this.select(s, true); 136 } 137 }, 138 139 // private 140 handleClick : function(e, t){ 141 e.preventDefault(); 142 if(!this.disabled){ 143 var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1]; 144 this.select(c.toUpperCase()); 145 } 146 }, 147 148 /** 149 * Selects the specified color in the palette (fires the {@link #select} event) 150 * @param {String} color A valid 6-digit color hex code (# will be stripped if included) 151 * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to <tt>false</tt>. 152 */ 153 select : function(color, suppressEvent){ 154 color = color.replace('#', ''); 155 if(color != this.value || this.allowReselect){ 156 var el = this.el; 157 if(this.value){ 158 el.child('a.color-'+this.value).removeClass('x-color-palette-sel'); 159 } 160 el.child('a.color-'+color).addClass('x-color-palette-sel'); 161 this.value = color; 162 if(suppressEvent !== true){ 163 this.fireEvent('select', this, color); 164 } 165 } 166 } 167 168 /** 169 * @cfg {String} autoEl @hide 170 */ 171}); 172Ext.reg('colorpalette', Ext.ColorPalette);