]>
Commit | Line | Data |
---|---|---|
f0cfe83e AD |
1 | define("dojo/_base/Color", ["./kernel", "./lang", "./array", "./config"], function(dojo, lang, ArrayUtil, config){ |
2 | ||
3 | var Color = dojo.Color = function(/*Array|String|Object*/ color){ | |
4 | // summary: | |
5 | // Takes a named string, hex string, array of rgb or rgba values, | |
6 | // an object with r, g, b, and a properties, or another `Color` object | |
7 | // and creates a new Color instance to work from. | |
8 | // | |
9 | // example: | |
10 | // Work with a Color instance: | |
11 | // | var c = new Color(); | |
12 | // | c.setColor([0,0,0]); // black | |
13 | // | var hex = c.toHex(); // #000000 | |
14 | // | |
15 | // example: | |
16 | // Work with a node's color: | |
17 | // | var color = dojo.style("someNode", "backgroundColor"); | |
18 | // | var n = new Color(color); | |
19 | // | // adjust the color some | |
20 | // | n.r *= .5; | |
21 | // | console.log(n.toString()); // rgb(128, 255, 255); | |
22 | if(color){ this.setColor(color); } | |
23 | }; | |
24 | ||
25 | // FIXME: | |
26 | // there's got to be a more space-efficient way to encode or discover | |
27 | // these!! Use hex? | |
28 | Color.named = { | |
29 | // summary: | |
30 | // Dictionary list of all CSS named colors, by name. Values are 3-item arrays with corresponding RG and B values. | |
31 | "black": [0,0,0], | |
32 | "silver": [192,192,192], | |
33 | "gray": [128,128,128], | |
34 | "white": [255,255,255], | |
35 | "maroon": [128,0,0], | |
36 | "red": [255,0,0], | |
37 | "purple": [128,0,128], | |
38 | "fuchsia":[255,0,255], | |
39 | "green": [0,128,0], | |
40 | "lime": [0,255,0], | |
41 | "olive": [128,128,0], | |
42 | "yellow": [255,255,0], | |
43 | "navy": [0,0,128], | |
44 | "blue": [0,0,255], | |
45 | "teal": [0,128,128], | |
46 | "aqua": [0,255,255], | |
47 | "transparent": config.transparentColor || [0,0,0,0] | |
48 | }; | |
49 | ||
50 | lang.extend(Color, { | |
51 | r: 255, g: 255, b: 255, a: 1, | |
52 | _set: function(r, g, b, a){ | |
53 | var t = this; t.r = r; t.g = g; t.b = b; t.a = a; | |
54 | }, | |
55 | setColor: function(/*Array|String|Object*/ color){ | |
56 | // summary: | |
57 | // Takes a named string, hex string, array of rgb or rgba values, | |
58 | // an object with r, g, b, and a properties, or another `Color` object | |
59 | // and sets this color instance to that value. | |
60 | // | |
61 | // example: | |
62 | // | var c = new Color(); // no color | |
63 | // | c.setColor("#ededed"); // greyish | |
64 | if(lang.isString(color)){ | |
65 | Color.fromString(color, this); | |
66 | }else if(lang.isArray(color)){ | |
67 | Color.fromArray(color, this); | |
68 | }else{ | |
69 | this._set(color.r, color.g, color.b, color.a); | |
70 | if(!(color instanceof Color)){ this.sanitize(); } | |
71 | } | |
72 | return this; // Color | |
73 | }, | |
74 | sanitize: function(){ | |
75 | // summary: | |
76 | // Ensures the object has correct attributes | |
77 | // description: | |
78 | // the default implementation does nothing, include dojo.colors to | |
79 | // augment it with real checks | |
80 | return this; // Color | |
81 | }, | |
82 | toRgb: function(){ | |
83 | // summary: | |
84 | // Returns 3 component array of rgb values | |
85 | // example: | |
86 | // | var c = new Color("#000000"); | |
87 | // | console.log(c.toRgb()); // [0,0,0] | |
88 | var t = this; | |
89 | return [t.r, t.g, t.b]; // Array | |
90 | }, | |
91 | toRgba: function(){ | |
92 | // summary: | |
93 | // Returns a 4 component array of rgba values from the color | |
94 | // represented by this object. | |
95 | var t = this; | |
96 | return [t.r, t.g, t.b, t.a]; // Array | |
97 | }, | |
98 | toHex: function(){ | |
99 | // summary: | |
100 | // Returns a CSS color string in hexadecimal representation | |
101 | // example: | |
102 | // | console.log(new Color([0,0,0]).toHex()); // #000000 | |
103 | var arr = ArrayUtil.map(["r", "g", "b"], function(x){ | |
104 | var s = this[x].toString(16); | |
105 | return s.length < 2 ? "0" + s : s; | |
106 | }, this); | |
107 | return "#" + arr.join(""); // String | |
108 | }, | |
109 | toCss: function(/*Boolean?*/ includeAlpha){ | |
110 | // summary: | |
111 | // Returns a css color string in rgb(a) representation | |
112 | // example: | |
113 | // | var c = new Color("#FFF").toCss(); | |
114 | // | console.log(c); // rgb('255','255','255') | |
115 | var t = this, rgb = t.r + ", " + t.g + ", " + t.b; | |
116 | return (includeAlpha ? "rgba(" + rgb + ", " + t.a : "rgb(" + rgb) + ")"; // String | |
117 | }, | |
118 | toString: function(){ | |
119 | // summary: | |
120 | // Returns a visual representation of the color | |
121 | return this.toCss(true); // String | |
122 | } | |
123 | }); | |
124 | ||
125 | Color.blendColors = dojo.blendColors = function( | |
126 | /*Color*/ start, | |
127 | /*Color*/ end, | |
128 | /*Number*/ weight, | |
129 | /*Color?*/ obj | |
130 | ){ | |
131 | // summary: | |
132 | // Blend colors end and start with weight from 0 to 1, 0.5 being a 50/50 blend, | |
133 | // can reuse a previously allocated Color object for the result | |
134 | var t = obj || new Color(); | |
135 | ArrayUtil.forEach(["r", "g", "b", "a"], function(x){ | |
136 | t[x] = start[x] + (end[x] - start[x]) * weight; | |
137 | if(x != "a"){ t[x] = Math.round(t[x]); } | |
138 | }); | |
139 | return t.sanitize(); // Color | |
140 | }; | |
141 | ||
142 | Color.fromRgb = dojo.colorFromRgb = function(/*String*/ color, /*Color?*/ obj){ | |
143 | // summary: | |
144 | // Returns a `Color` instance from a string of the form | |
145 | // "rgb(...)" or "rgba(...)". Optionally accepts a `Color` | |
146 | // object to update with the parsed value and return instead of | |
147 | // creating a new object. | |
148 | // returns: | |
149 | // A Color object. If obj is passed, it will be the return value. | |
150 | var m = color.toLowerCase().match(/^rgba?\(([\s\.,0-9]+)\)/); | |
151 | return m && Color.fromArray(m[1].split(/\s*,\s*/), obj); // Color | |
152 | }; | |
153 | ||
154 | Color.fromHex = dojo.colorFromHex = function(/*String*/ color, /*Color?*/ obj){ | |
155 | // summary: | |
156 | // Converts a hex string with a '#' prefix to a color object. | |
157 | // Supports 12-bit #rgb shorthand. Optionally accepts a | |
158 | // `Color` object to update with the parsed value. | |
159 | // | |
160 | // returns: | |
161 | // A Color object. If obj is passed, it will be the return value. | |
162 | // | |
163 | // example: | |
164 | // | var thing = dojo.colorFromHex("#ededed"); // grey, longhand | |
165 | // | |
166 | // example: | |
167 | // | var thing = dojo.colorFromHex("#000"); // black, shorthand | |
168 | var t = obj || new Color(), | |
169 | bits = (color.length == 4) ? 4 : 8, | |
170 | mask = (1 << bits) - 1; | |
171 | color = Number("0x" + color.substr(1)); | |
172 | if(isNaN(color)){ | |
173 | return null; // Color | |
174 | } | |
175 | ArrayUtil.forEach(["b", "g", "r"], function(x){ | |
176 | var c = color & mask; | |
177 | color >>= bits; | |
178 | t[x] = bits == 4 ? 17 * c : c; | |
179 | }); | |
180 | t.a = 1; | |
181 | return t; // Color | |
182 | }; | |
183 | ||
184 | Color.fromArray = dojo.colorFromArray = function(/*Array*/ a, /*Color?*/ obj){ | |
185 | // summary: | |
186 | // Builds a `Color` from a 3 or 4 element array, mapping each | |
187 | // element in sequence to the rgb(a) values of the color. | |
188 | // example: | |
189 | // | var myColor = dojo.colorFromArray([237,237,237,0.5]); // grey, 50% alpha | |
190 | // returns: | |
191 | // A Color object. If obj is passed, it will be the return value. | |
192 | var t = obj || new Color(); | |
193 | t._set(Number(a[0]), Number(a[1]), Number(a[2]), Number(a[3])); | |
194 | if(isNaN(t.a)){ t.a = 1; } | |
195 | return t.sanitize(); // Color | |
196 | }; | |
197 | ||
198 | Color.fromString = dojo.colorFromString = function(/*String*/ str, /*Color?*/ obj){ | |
199 | // summary: | |
200 | // Parses `str` for a color value. Accepts hex, rgb, and rgba | |
201 | // style color values. | |
202 | // description: | |
203 | // Acceptable input values for str may include arrays of any form | |
204 | // accepted by dojo.colorFromArray, hex strings such as "#aaaaaa", or | |
205 | // rgb or rgba strings such as "rgb(133, 200, 16)" or "rgba(10, 10, | |
206 | // 10, 50)" | |
207 | // returns: | |
208 | // A Color object. If obj is passed, it will be the return value. | |
209 | var a = Color.named[str]; | |
210 | return a && Color.fromArray(a, obj) || Color.fromRgb(str, obj) || Color.fromHex(str, obj); // Color | |
211 | }; | |
212 | ||
213 | return Color; | |
214 | }); |