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