200 lines
6.3 KiB
JavaScript
200 lines
6.3 KiB
JavaScript
/* Plugin for jQuery for working with colors.
|
|
*
|
|
* Version 1.1.
|
|
*
|
|
* Inspiration from jQuery color animation plugin by John Resig.
|
|
*
|
|
* Released under the MIT license by Ole Laursen, October 2009.
|
|
*
|
|
* Examples:
|
|
*
|
|
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
|
|
* var c = $.color.extract($("#mydiv"), 'background-color');
|
|
* console.log(c.r, c.g, c.b, c.a);
|
|
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
|
|
*
|
|
* Note that .scale() and .add() return the same modified object
|
|
* instead of making a new one.
|
|
*
|
|
* V. 1.1: Fix error handling so e.g. parsing an empty string does
|
|
* produce a color rather than just crashing.
|
|
*/
|
|
|
|
(function($) {
|
|
$.color = {};
|
|
|
|
// construct color object with some convenient chainable helpers
|
|
$.color.make = function (r, g, b, a) {
|
|
var o = {};
|
|
o.r = r || 0;
|
|
o.g = g || 0;
|
|
o.b = b || 0;
|
|
o.a = a != null ? a : 1;
|
|
|
|
o.add = function (c, d) {
|
|
for (var i = 0; i < c.length; ++i) {
|
|
o[c.charAt(i)] += d;
|
|
}
|
|
|
|
return o.normalize();
|
|
};
|
|
|
|
o.scale = function (c, f) {
|
|
for (var i = 0; i < c.length; ++i) {
|
|
o[c.charAt(i)] *= f;
|
|
}
|
|
|
|
return o.normalize();
|
|
};
|
|
|
|
o.toString = function () {
|
|
if (o.a >= 1.0) {
|
|
return "rgb(" + [o.r, o.g, o.b].join(",") + ")";
|
|
} else {
|
|
return "rgba(" + [o.r, o.g, o.b, o.a].join(",") + ")";
|
|
}
|
|
};
|
|
|
|
o.normalize = function () {
|
|
function clamp(min, value, max) {
|
|
return value < min ? min : (value > max ? max : value);
|
|
}
|
|
|
|
o.r = clamp(0, parseInt(o.r), 255);
|
|
o.g = clamp(0, parseInt(o.g), 255);
|
|
o.b = clamp(0, parseInt(o.b), 255);
|
|
o.a = clamp(0, o.a, 1);
|
|
return o;
|
|
};
|
|
|
|
o.clone = function () {
|
|
return $.color.make(o.r, o.b, o.g, o.a);
|
|
};
|
|
|
|
return o.normalize();
|
|
}
|
|
|
|
// extract CSS color property from element, going up in the DOM
|
|
// if it's "transparent"
|
|
$.color.extract = function (elem, css) {
|
|
var c;
|
|
|
|
do {
|
|
c = elem.css(css).toLowerCase();
|
|
// keep going until we find an element that has color, or
|
|
// we hit the body or root (have no parent)
|
|
if (c !== '' && c !== 'transparent') {
|
|
break;
|
|
}
|
|
|
|
elem = elem.parent();
|
|
} while (elem.length && !$.nodeName(elem.get(0), "body"));
|
|
|
|
// catch Safari's way of signalling transparent
|
|
if (c === "rgba(0, 0, 0, 0)") {
|
|
c = "transparent";
|
|
}
|
|
|
|
return $.color.parse(c);
|
|
}
|
|
|
|
// parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
|
|
// returns color object, if parsing failed, you get black (0, 0,
|
|
// 0) out
|
|
$.color.parse = function (str) {
|
|
var res, m = $.color.make;
|
|
|
|
// Look for rgb(num,num,num)
|
|
res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str);
|
|
if (res) {
|
|
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
|
|
}
|
|
|
|
// Look for rgba(num,num,num,num)
|
|
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)
|
|
if (res) {
|
|
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
|
|
}
|
|
|
|
// Look for rgb(num%,num%,num%)
|
|
res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec(str);
|
|
if (res) {
|
|
return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55);
|
|
}
|
|
|
|
// Look for rgba(num%,num%,num%,num)
|
|
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);
|
|
if (res) {
|
|
return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55, parseFloat(res[4]));
|
|
}
|
|
|
|
// Look for #a0b1c2
|
|
res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str);
|
|
if (res) {
|
|
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
|
|
}
|
|
|
|
// Look for #fff
|
|
res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str);
|
|
if (res) {
|
|
return m(parseInt(res[1] + res[1], 16), parseInt(res[2] + res[2], 16), parseInt(res[3] + res[3], 16));
|
|
}
|
|
|
|
// Otherwise, we're most likely dealing with a named color
|
|
var name = $.trim(str).toLowerCase();
|
|
if (name === "transparent") {
|
|
return m(255, 255, 255, 0);
|
|
} else {
|
|
// default to black
|
|
res = lookupColors[name] || [0, 0, 0];
|
|
return m(res[0], res[1], res[2]);
|
|
}
|
|
}
|
|
|
|
var lookupColors = {
|
|
aqua: [0, 255, 255],
|
|
azure: [240, 255, 255],
|
|
beige: [245, 245, 220],
|
|
black: [0, 0, 0],
|
|
blue: [0, 0, 255],
|
|
brown: [165, 42, 42],
|
|
cyan: [0, 255, 255],
|
|
darkblue: [0, 0, 139],
|
|
darkcyan: [0, 139, 139],
|
|
darkgrey: [169, 169, 169],
|
|
darkgreen: [0, 100, 0],
|
|
darkkhaki: [189, 183, 107],
|
|
darkmagenta: [139, 0, 139],
|
|
darkolivegreen: [85, 107, 47],
|
|
darkorange: [255, 140, 0],
|
|
darkorchid: [153, 50, 204],
|
|
darkred: [139, 0, 0],
|
|
darksalmon: [233, 150, 122],
|
|
darkviolet: [148, 0, 211],
|
|
fuchsia: [255, 0, 255],
|
|
gold: [255, 215, 0],
|
|
green: [0, 128, 0],
|
|
indigo: [75, 0, 130],
|
|
khaki: [240, 230, 140],
|
|
lightblue: [173, 216, 230],
|
|
lightcyan: [224, 255, 255],
|
|
lightgreen: [144, 238, 144],
|
|
lightgrey: [211, 211, 211],
|
|
lightpink: [255, 182, 193],
|
|
lightyellow: [255, 255, 224],
|
|
lime: [0, 255, 0],
|
|
magenta: [255, 0, 255],
|
|
maroon: [128, 0, 0],
|
|
navy: [0, 0, 128],
|
|
olive: [128, 128, 0],
|
|
orange: [255, 165, 0],
|
|
pink: [255, 192, 203],
|
|
purple: [128, 0, 128],
|
|
violet: [128, 0, 128],
|
|
red: [255, 0, 0],
|
|
silver: [192, 192, 192],
|
|
white: [255, 255, 255],
|
|
yellow: [255, 255, 0]
|
|
};
|
|
})(jQuery);
|