1 | /*! |
---|
2 | * Ext JS Library 3.4.0 |
---|
3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
4 | * licensing@sencha.com |
---|
5 | * http://www.sencha.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> |
---|
13 | var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color |
---|
14 | cp.render('my-div'); |
---|
15 | |
---|
16 | cp.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 | */ |
---|
25 | Ext.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> |
---|
61 | var cp = new Ext.ColorPalette(); |
---|
62 | cp.colors[0] = 'FF0000'; // change the first box to red |
---|
63 | </code></pre> |
---|
64 | |
---|
65 | Or you can provide a custom array of your own for complete control: |
---|
66 | <pre><code> |
---|
67 | var cp = new Ext.ColorPalette(); |
---|
68 | cp.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 | }); |
---|
172 | Ext.reg('colorpalette', Ext.ColorPalette); |
---|