|
1 /* Plugin for jQuery for working with colors. |
|
2 * |
|
3 * Version 1.1. |
|
4 * |
|
5 * Inspiration from jQuery color animation plugin by John Resig. |
|
6 * |
|
7 * Released under the MIT license by Ole Laursen, October 2009. |
|
8 * |
|
9 * Examples: |
|
10 * |
|
11 * $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString() |
|
12 * var c = $.color.extract($("#mydiv"), 'background-color'); |
|
13 * console.log(c.r, c.g, c.b, c.a); |
|
14 * $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)" |
|
15 * |
|
16 * Note that .scale() and .add() return the same modified object |
|
17 * instead of making a new one. |
|
18 * |
|
19 * V. 1.1: Fix error handling so e.g. parsing an empty string does |
|
20 * produce a color rather than just crashing. |
|
21 */ |
|
22 |
|
23 (function($) { |
|
24 $.color = {}; |
|
25 |
|
26 // construct color object with some convenient chainable helpers |
|
27 $.color.make = function (r, g, b, a) { |
|
28 var o = {}; |
|
29 o.r = r || 0; |
|
30 o.g = g || 0; |
|
31 o.b = b || 0; |
|
32 o.a = a != null ? a : 1; |
|
33 |
|
34 o.add = function (c, d) { |
|
35 for (var i = 0; i < c.length; ++i) { |
|
36 o[c.charAt(i)] += d; |
|
37 } |
|
38 |
|
39 return o.normalize(); |
|
40 }; |
|
41 |
|
42 o.scale = function (c, f) { |
|
43 for (var i = 0; i < c.length; ++i) { |
|
44 o[c.charAt(i)] *= f; |
|
45 } |
|
46 |
|
47 return o.normalize(); |
|
48 }; |
|
49 |
|
50 o.toString = function () { |
|
51 if (o.a >= 1.0) { |
|
52 return "rgb(" + [o.r, o.g, o.b].join(",") + ")"; |
|
53 } else { |
|
54 return "rgba(" + [o.r, o.g, o.b, o.a].join(",") + ")"; |
|
55 } |
|
56 }; |
|
57 |
|
58 o.normalize = function () { |
|
59 function clamp(min, value, max) { |
|
60 return value < min ? min : (value > max ? max : value); |
|
61 } |
|
62 |
|
63 o.r = clamp(0, parseInt(o.r), 255); |
|
64 o.g = clamp(0, parseInt(o.g), 255); |
|
65 o.b = clamp(0, parseInt(o.b), 255); |
|
66 o.a = clamp(0, o.a, 1); |
|
67 return o; |
|
68 }; |
|
69 |
|
70 o.clone = function () { |
|
71 return $.color.make(o.r, o.b, o.g, o.a); |
|
72 }; |
|
73 |
|
74 return o.normalize(); |
|
75 } |
|
76 |
|
77 // extract CSS color property from element, going up in the DOM |
|
78 // if it's "transparent" |
|
79 $.color.extract = function (elem, css) { |
|
80 var c; |
|
81 |
|
82 do { |
|
83 c = elem.css(css).toLowerCase(); |
|
84 // keep going until we find an element that has color, or |
|
85 // we hit the body or root (have no parent) |
|
86 if (c !== '' && c !== 'transparent') { |
|
87 break; |
|
88 } |
|
89 |
|
90 elem = elem.parent(); |
|
91 } while (elem.length && !$.nodeName(elem.get(0), "body")); |
|
92 |
|
93 // catch Safari's way of signalling transparent |
|
94 if (c === "rgba(0, 0, 0, 0)") { |
|
95 c = "transparent"; |
|
96 } |
|
97 |
|
98 return $.color.parse(c); |
|
99 } |
|
100 |
|
101 // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"), |
|
102 // returns color object, if parsing failed, you get black (0, 0, |
|
103 // 0) out |
|
104 $.color.parse = function (str) { |
|
105 var res, m = $.color.make; |
|
106 |
|
107 // Look for rgb(num,num,num) |
|
108 res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str); |
|
109 if (res) { |
|
110 return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10)); |
|
111 } |
|
112 |
|
113 // Look for rgba(num,num,num,num) |
|
114 res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str) |
|
115 if (res) { |
|
116 return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4])); |
|
117 } |
|
118 |
|
119 // Look for rgb(num%,num%,num%) |
|
120 res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec(str); |
|
121 if (res) { |
|
122 return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55); |
|
123 } |
|
124 |
|
125 // Look for rgba(num%,num%,num%,num) |
|
126 res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str); |
|
127 if (res) { |
|
128 return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55, parseFloat(res[4])); |
|
129 } |
|
130 |
|
131 // Look for #a0b1c2 |
|
132 res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str); |
|
133 if (res) { |
|
134 return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16)); |
|
135 } |
|
136 |
|
137 // Look for #fff |
|
138 res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str); |
|
139 if (res) { |
|
140 return m(parseInt(res[1] + res[1], 16), parseInt(res[2] + res[2], 16), parseInt(res[3] + res[3], 16)); |
|
141 } |
|
142 |
|
143 // Otherwise, we're most likely dealing with a named color |
|
144 var name = $.trim(str).toLowerCase(); |
|
145 if (name === "transparent") { |
|
146 return m(255, 255, 255, 0); |
|
147 } else { |
|
148 // default to black |
|
149 res = lookupColors[name] || [0, 0, 0]; |
|
150 return m(res[0], res[1], res[2]); |
|
151 } |
|
152 } |
|
153 |
|
154 var lookupColors = { |
|
155 aqua: [0, 255, 255], |
|
156 azure: [240, 255, 255], |
|
157 beige: [245, 245, 220], |
|
158 black: [0, 0, 0], |
|
159 blue: [0, 0, 255], |
|
160 brown: [165, 42, 42], |
|
161 cyan: [0, 255, 255], |
|
162 darkblue: [0, 0, 139], |
|
163 darkcyan: [0, 139, 139], |
|
164 darkgrey: [169, 169, 169], |
|
165 darkgreen: [0, 100, 0], |
|
166 darkkhaki: [189, 183, 107], |
|
167 darkmagenta: [139, 0, 139], |
|
168 darkolivegreen: [85, 107, 47], |
|
169 darkorange: [255, 140, 0], |
|
170 darkorchid: [153, 50, 204], |
|
171 darkred: [139, 0, 0], |
|
172 darksalmon: [233, 150, 122], |
|
173 darkviolet: [148, 0, 211], |
|
174 fuchsia: [255, 0, 255], |
|
175 gold: [255, 215, 0], |
|
176 green: [0, 128, 0], |
|
177 indigo: [75, 0, 130], |
|
178 khaki: [240, 230, 140], |
|
179 lightblue: [173, 216, 230], |
|
180 lightcyan: [224, 255, 255], |
|
181 lightgreen: [144, 238, 144], |
|
182 lightgrey: [211, 211, 211], |
|
183 lightpink: [255, 182, 193], |
|
184 lightyellow: [255, 255, 224], |
|
185 lime: [0, 255, 0], |
|
186 magenta: [255, 0, 255], |
|
187 maroon: [128, 0, 0], |
|
188 navy: [0, 0, 128], |
|
189 olive: [128, 128, 0], |
|
190 orange: [255, 165, 0], |
|
191 pink: [255, 192, 203], |
|
192 purple: [128, 0, 128], |
|
193 violet: [128, 0, 128], |
|
194 red: [255, 0, 0], |
|
195 silver: [192, 192, 192], |
|
196 white: [255, 255, 255], |
|
197 yellow: [255, 255, 0] |
|
198 }; |
|
199 })(jQuery); |