| 1 |
/** |
| 2 |
* A class to parse color values |
| 3 |
* @author Stoyan Stefanov <[email protected]> |
| 4 |
* @link http://www.phpied.com/rgb-color-parser-in-javascript/ |
| 5 |
* @license Use it if you like it |
| 6 |
*/ |
| 7 |
|
| 8 |
(function ( global ) { |
| 9 |
|
| 10 |
function RGBColor(color_string) |
| 11 |
{ |
| 12 |
this.ok = false; |
| 13 |
|
| 14 |
// strip any leading # |
| 15 |
if (color_string.charAt(0) == '#') { // remove # if any |
| 16 |
color_string = color_string.substr(1,6); |
| 17 |
} |
| 18 |
|
| 19 |
color_string = color_string.replace(/ /g,''); |
| 20 |
color_string = color_string.toLowerCase(); |
| 21 |
|
| 22 |
// before getting into regexps, try simple matches |
| 23 |
// and overwrite the input |
| 24 |
var simple_colors = { |
| 25 |
aliceblue: 'f0f8ff', |
| 26 |
antiquewhite: 'faebd7', |
| 27 |
aqua: '00ffff', |
| 28 |
aquamarine: '7fffd4', |
| 29 |
azure: 'f0ffff', |
| 30 |
beige: 'f5f5dc', |
| 31 |
bisque: 'ffe4c4', |
| 32 |
black: '000000', |
| 33 |
blanchedalmond: 'ffebcd', |
| 34 |
blue: '0000ff', |
| 35 |
blueviolet: '8a2be2', |
| 36 |
brown: 'a52a2a', |
| 37 |
burlywood: 'deb887', |
| 38 |
cadetblue: '5f9ea0', |
| 39 |
chartreuse: '7fff00', |
| 40 |
chocolate: 'd2691e', |
| 41 |
coral: 'ff7f50', |
| 42 |
cornflowerblue: '6495ed', |
| 43 |
cornsilk: 'fff8dc', |
| 44 |
crimson: 'dc143c', |
| 45 |
cyan: '00ffff', |
| 46 |
darkblue: '00008b', |
| 47 |
darkcyan: '008b8b', |
| 48 |
darkgoldenrod: 'b8860b', |
| 49 |
darkgray: 'a9a9a9', |
| 50 |
darkgreen: '006400', |
| 51 |
darkkhaki: 'bdb76b', |
| 52 |
darkmagenta: '8b008b', |
| 53 |
darkolivegreen: '556b2f', |
| 54 |
darkorange: 'ff8c00', |
| 55 |
darkorchid: '9932cc', |
| 56 |
darkred: '8b0000', |
| 57 |
darksalmon: 'e9967a', |
| 58 |
darkseagreen: '8fbc8f', |
| 59 |
darkslateblue: '483d8b', |
| 60 |
darkslategray: '2f4f4f', |
| 61 |
darkturquoise: '00ced1', |
| 62 |
darkviolet: '9400d3', |
| 63 |
deeppink: 'ff1493', |
| 64 |
deepskyblue: '00bfff', |
| 65 |
dimgray: '696969', |
| 66 |
dodgerblue: '1e90ff', |
| 67 |
feldspar: 'd19275', |
| 68 |
firebrick: 'b22222', |
| 69 |
floralwhite: 'fffaf0', |
| 70 |
forestgreen: '228b22', |
| 71 |
fuchsia: 'ff00ff', |
| 72 |
gainsboro: 'dcdcdc', |
| 73 |
ghostwhite: 'f8f8ff', |
| 74 |
gold: 'ffd700', |
| 75 |
goldenrod: 'daa520', |
| 76 |
gray: '808080', |
| 77 |
green: '008000', |
| 78 |
greenyellow: 'adff2f', |
| 79 |
honeydew: 'f0fff0', |
| 80 |
hotpink: 'ff69b4', |
| 81 |
indianred : 'cd5c5c', |
| 82 |
indigo : '4b0082', |
| 83 |
ivory: 'fffff0', |
| 84 |
khaki: 'f0e68c', |
| 85 |
lavender: 'e6e6fa', |
| 86 |
lavenderblush: 'fff0f5', |
| 87 |
lawngreen: '7cfc00', |
| 88 |
lemonchiffon: 'fffacd', |
| 89 |
lightblue: 'add8e6', |
| 90 |
lightcoral: 'f08080', |
| 91 |
lightcyan: 'e0ffff', |
| 92 |
lightgoldenrodyellow: 'fafad2', |
| 93 |
lightgrey: 'd3d3d3', |
| 94 |
lightgreen: '90ee90', |
| 95 |
lightpink: 'ffb6c1', |
| 96 |
lightsalmon: 'ffa07a', |
| 97 |
lightseagreen: '20b2aa', |
| 98 |
lightskyblue: '87cefa', |
| 99 |
lightslateblue: '8470ff', |
| 100 |
lightslategray: '778899', |
| 101 |
lightsteelblue: 'b0c4de', |
| 102 |
lightyellow: 'ffffe0', |
| 103 |
lime: '00ff00', |
| 104 |
limegreen: '32cd32', |
| 105 |
linen: 'faf0e6', |
| 106 |
magenta: 'ff00ff', |
| 107 |
maroon: '800000', |
| 108 |
mediumaquamarine: '66cdaa', |
| 109 |
mediumblue: '0000cd', |
| 110 |
mediumorchid: 'ba55d3', |
| 111 |
mediumpurple: '9370d8', |
| 112 |
mediumseagreen: '3cb371', |
| 113 |
mediumslateblue: '7b68ee', |
| 114 |
mediumspringgreen: '00fa9a', |
| 115 |
mediumturquoise: '48d1cc', |
| 116 |
mediumvioletred: 'c71585', |
| 117 |
midnightblue: '191970', |
| 118 |
mintcream: 'f5fffa', |
| 119 |
mistyrose: 'ffe4e1', |
| 120 |
moccasin: 'ffe4b5', |
| 121 |
navajowhite: 'ffdead', |
| 122 |
navy: '000080', |
| 123 |
oldlace: 'fdf5e6', |
| 124 |
olive: '808000', |
| 125 |
olivedrab: '6b8e23', |
| 126 |
orange: 'ffa500', |
| 127 |
orangered: 'ff4500', |
| 128 |
orchid: 'da70d6', |
| 129 |
palegoldenrod: 'eee8aa', |
| 130 |
palegreen: '98fb98', |
| 131 |
paleturquoise: 'afeeee', |
| 132 |
palevioletred: 'd87093', |
| 133 |
papayawhip: 'ffefd5', |
| 134 |
peachpuff: 'ffdab9', |
| 135 |
peru: 'cd853f', |
| 136 |
pink: 'ffc0cb', |
| 137 |
plum: 'dda0dd', |
| 138 |
powderblue: 'b0e0e6', |
| 139 |
purple: '800080', |
| 140 |
red: 'ff0000', |
| 141 |
rosybrown: 'bc8f8f', |
| 142 |
royalblue: '4169e1', |
| 143 |
saddlebrown: '8b4513', |
| 144 |
salmon: 'fa8072', |
| 145 |
sandybrown: 'f4a460', |
| 146 |
seagreen: '2e8b57', |
| 147 |
seashell: 'fff5ee', |
| 148 |
sienna: 'a0522d', |
| 149 |
silver: 'c0c0c0', |
| 150 |
skyblue: '87ceeb', |
| 151 |
slateblue: '6a5acd', |
| 152 |
slategray: '708090', |
| 153 |
snow: 'fffafa', |
| 154 |
springgreen: '00ff7f', |
| 155 |
steelblue: '4682b4', |
| 156 |
tan: 'd2b48c', |
| 157 |
teal: '008080', |
| 158 |
thistle: 'd8bfd8', |
| 159 |
tomato: 'ff6347', |
| 160 |
turquoise: '40e0d0', |
| 161 |
violet: 'ee82ee', |
| 162 |
violetred: 'd02090', |
| 163 |
wheat: 'f5deb3', |
| 164 |
white: 'ffffff', |
| 165 |
whitesmoke: 'f5f5f5', |
| 166 |
yellow: 'ffff00', |
| 167 |
yellowgreen: '9acd32' |
| 168 |
}; |
| 169 |
for (var key in simple_colors) { |
| 170 |
if (color_string == key) { |
| 171 |
color_string = simple_colors[key]; |
| 172 |
} |
| 173 |
} |
| 174 |
// emd of simple type-in colors |
| 175 |
|
| 176 |
// array of color definition objects |
| 177 |
var color_defs = [ |
| 178 |
{ |
| 179 |
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, |
| 180 |
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'], |
| 181 |
process: function (bits){ |
| 182 |
return [ |
| 183 |
parseInt(bits[1]), |
| 184 |
parseInt(bits[2]), |
| 185 |
parseInt(bits[3]) |
| 186 |
]; |
| 187 |
} |
| 188 |
}, |
| 189 |
{ |
| 190 |
re: /^(\w{2})(\w{2})(\w{2})$/, |
| 191 |
example: ['#00ff00', '336699'], |
| 192 |
process: function (bits){ |
| 193 |
return [ |
| 194 |
parseInt(bits[1], 16), |
| 195 |
parseInt(bits[2], 16), |
| 196 |
parseInt(bits[3], 16) |
| 197 |
]; |
| 198 |
} |
| 199 |
}, |
| 200 |
{ |
| 201 |
re: /^(\w{1})(\w{1})(\w{1})$/, |
| 202 |
example: ['#fb0', 'f0f'], |
| 203 |
process: function (bits){ |
| 204 |
return [ |
| 205 |
parseInt(bits[1] + bits[1], 16), |
| 206 |
parseInt(bits[2] + bits[2], 16), |
| 207 |
parseInt(bits[3] + bits[3], 16) |
| 208 |
]; |
| 209 |
} |
| 210 |
} |
| 211 |
]; |
| 212 |
|
| 213 |
// search through the definitions to find a match |
| 214 |
for (var i = 0; i < color_defs.length; i++) { |
| 215 |
var re = color_defs[i].re; |
| 216 |
var processor = color_defs[i].process; |
| 217 |
var bits = re.exec(color_string); |
| 218 |
if (bits) { |
| 219 |
channels = processor(bits); |
| 220 |
this.r = channels[0]; |
| 221 |
this.g = channels[1]; |
| 222 |
this.b = channels[2]; |
| 223 |
this.ok = true; |
| 224 |
} |
| 225 |
|
| 226 |
} |
| 227 |
|
| 228 |
// validate/cleanup values |
| 229 |
this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r); |
| 230 |
this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); |
| 231 |
this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); |
| 232 |
|
| 233 |
// some getters |
| 234 |
this.toRGB = function () { |
| 235 |
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; |
| 236 |
} |
| 237 |
this.toHex = function () { |
| 238 |
var r = this.r.toString(16); |
| 239 |
var g = this.g.toString(16); |
| 240 |
var b = this.b.toString(16); |
| 241 |
if (r.length == 1) r = '0' + r; |
| 242 |
if (g.length == 1) g = '0' + g; |
| 243 |
if (b.length == 1) b = '0' + b; |
| 244 |
return '#' + r + g + b; |
| 245 |
} |
| 246 |
|
| 247 |
// help |
| 248 |
this.getHelpXML = function () { |
| 249 |
|
| 250 |
var examples = new Array(); |
| 251 |
// add regexps |
| 252 |
for (var i = 0; i < color_defs.length; i++) { |
| 253 |
var example = color_defs[i].example; |
| 254 |
for (var j = 0; j < example.length; j++) { |
| 255 |
examples[examples.length] = example[j]; |
| 256 |
} |
| 257 |
} |
| 258 |
// add type-in colors |
| 259 |
for (var sc in simple_colors) { |
| 260 |
examples[examples.length] = sc; |
| 261 |
} |
| 262 |
|
| 263 |
var xml = document.createElement('ul'); |
| 264 |
xml.setAttribute('id', 'rgbcolor-examples'); |
| 265 |
for (var i = 0; i < examples.length; i++) { |
| 266 |
try { |
| 267 |
var list_item = document.createElement('li'); |
| 268 |
var list_color = new RGBColor(examples[i]); |
| 269 |
var example_div = document.createElement('div'); |
| 270 |
example_div.style.cssText = |
| 271 |
'margin: 3px; ' |
| 272 |
+ 'border: 1px solid black; ' |
| 273 |
+ 'background:' + list_color.toHex() + '; ' |
| 274 |
+ 'color:' + list_color.toHex() |
| 275 |
; |
| 276 |
example_div.appendChild(document.createTextNode('test')); |
| 277 |
var list_item_value = document.createTextNode( |
| 278 |
' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex() |
| 279 |
); |
| 280 |
list_item.appendChild(example_div); |
| 281 |
list_item.appendChild(list_item_value); |
| 282 |
xml.appendChild(list_item); |
| 283 |
|
| 284 |
} catch(e){} |
| 285 |
} |
| 286 |
return xml; |
| 287 |
|
| 288 |
} |
| 289 |
|
| 290 |
} |
| 291 |
|
| 292 |
// export as AMD... |
| 293 |
if ( typeof define !== 'undefined' && define.amd ) { |
| 294 |
define( function () { return RGBColor; }); |
| 295 |
} |
| 296 |
|
| 297 |
// ...or as browserify |
| 298 |
else if ( typeof module !== 'undefined' && module.exports ) { |
| 299 |
module.exports = RGBColor; |
| 300 |
} |
| 301 |
|
| 302 |
global.RGBColor = RGBColor; |
| 303 |
|
| 304 |
}( typeof window !== 'undefined' ? window : this )); |
