Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 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 | return o.normalize(); |
||
| 38 | }; |
||
| 39 | |||
| 40 | o.scale = function (c, f) { |
||
| 41 | for (var i = 0; i < c.length; ++i) |
||
| 42 | o[c.charAt(i)] *= f; |
||
| 43 | return o.normalize(); |
||
| 44 | }; |
||
| 45 | |||
| 46 | o.toString = function () { |
||
| 47 | if (o.a >= 1.0) { |
||
| 48 | return "rgb("+[o.r, o.g, o.b].join(",")+")"; |
||
| 49 | } else { |
||
| 50 | return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")"; |
||
| 51 | } |
||
| 52 | }; |
||
| 53 | |||
| 54 | o.normalize = function () { |
||
| 55 | function clamp(min, value, max) { |
||
| 56 | return value < min ? min: (value > max ? max: value); |
||
| 57 | } |
||
| 58 | |||
| 59 | o.r = clamp(0, parseInt(o.r), 255); |
||
| 60 | o.g = clamp(0, parseInt(o.g), 255); |
||
| 61 | o.b = clamp(0, parseInt(o.b), 255); |
||
| 62 | o.a = clamp(0, o.a, 1); |
||
| 63 | return o; |
||
| 64 | }; |
||
| 65 | |||
| 66 | o.clone = function () { |
||
| 67 | return $.color.make(o.r, o.b, o.g, o.a); |
||
| 68 | }; |
||
| 69 | |||
| 70 | return o.normalize(); |
||
| 71 | } |
||
| 72 | |||
| 73 | // extract CSS color property from element, going up in the DOM |
||
| 74 | // if it's "transparent" |
||
| 75 | $.color.extract = function (elem, css) { |
||
| 76 | var c; |
||
| 77 | |||
| 78 | do { |
||
| 79 | c = elem.css(css).toLowerCase(); |
||
| 80 | // keep going until we find an element that has color, or |
||
| 81 | // we hit the body or root (have no parent) |
||
| 82 | if (c != '' && c != 'transparent') |
||
| 83 | break; |
||
| 84 | elem = elem.parent(); |
||
| 85 | } while (elem.length && !$.nodeName(elem.get(0), "body")); |
||
| 86 | |||
| 87 | // catch Safari's way of signalling transparent |
||
| 88 | if (c == "rgba(0, 0, 0, 0)") |
||
| 89 | c = "transparent"; |
||
| 90 | |||
| 91 | return $.color.parse(c); |
||
| 92 | } |
||
| 93 | |||
| 94 | // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"), |
||
| 95 | // returns color object, if parsing failed, you get black (0, 0, |
||
| 96 | // 0) out |
||
| 97 | $.color.parse = function (str) { |
||
| 98 | var res, m = $.color.make; |
||
| 99 | |||
| 100 | // Look for rgb(num,num,num) |
||
| 101 | if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str)) |
||
| 102 | return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10)); |
||
| 103 | |||
| 104 | // Look for rgba(num,num,num,num) |
||
| 105 | if (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)) |
||
| 106 | return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4])); |
||
| 107 | |||
| 108 | // Look for rgb(num%,num%,num%) |
||
| 109 | if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str)) |
||
| 110 | return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55); |
||
| 111 | |||
| 112 | // Look for rgba(num%,num%,num%,num) |
||
| 113 | if (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)) |
||
| 114 | return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4])); |
||
| 115 | |||
| 116 | // Look for #a0b1c2 |
||
| 117 | if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str)) |
||
| 118 | return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16)); |
||
| 119 | |||
| 120 | // Look for #fff |
||
| 121 | if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str)) |
||
| 122 | return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16)); |
||
| 123 | |||
| 124 | // Otherwise, we're most likely dealing with a named color |
||
| 125 | var name = $.trim(str).toLowerCase(); |
||
| 126 | if (name == "transparent") |
||
| 127 | return m(255, 255, 255, 0); |
||
| 128 | else { |
||
| 129 | // default to black |
||
| 130 | res = lookupColors[name] || [0, 0, 0]; |
||
| 131 | return m(res[0], res[1], res[2]); |
||
| 132 | } |
||
| 133 | } |
||
| 134 | |||
| 135 | var lookupColors = { |
||
| 136 | aqua:[0,255,255], |
||
| 137 | azure:[240,255,255], |
||
| 138 | beige:[245,245,220], |
||
| 139 | black:[0,0,0], |
||
| 140 | blue:[0,0,255], |
||
| 141 | brown:[165,42,42], |
||
| 142 | cyan:[0,255,255], |
||
| 143 | darkblue:[0,0,139], |
||
| 144 | darkcyan:[0,139,139], |
||
| 145 | darkgrey:[169,169,169], |
||
| 146 | darkgreen:[0,100,0], |
||
| 147 | darkkhaki:[189,183,107], |
||
| 148 | darkmagenta:[139,0,139], |
||
| 149 | darkolivegreen:[85,107,47], |
||
| 150 | darkorange:[255,140,0], |
||
| 151 | darkorchid:[153,50,204], |
||
| 152 | darkred:[139,0,0], |
||
| 153 | darksalmon:[233,150,122], |
||
| 154 | darkviolet:[148,0,211], |
||
| 155 | fuchsia:[255,0,255], |
||
| 156 | gold:[255,215,0], |
||
| 157 | green:[0,128,0], |
||
| 158 | indigo:[75,0,130], |
||
| 159 | khaki:[240,230,140], |
||
| 160 | lightblue:[173,216,230], |
||
| 161 | lightcyan:[224,255,255], |
||
| 162 | lightgreen:[144,238,144], |
||
| 163 | lightgrey:[211,211,211], |
||
| 164 | lightpink:[255,182,193], |
||
| 165 | lightyellow:[255,255,224], |
||
| 166 | lime:[0,255,0], |
||
| 167 | magenta:[255,0,255], |
||
| 168 | maroon:[128,0,0], |
||
| 169 | navy:[0,0,128], |
||
| 170 | olive:[128,128,0], |
||
| 171 | orange:[255,165,0], |
||
| 172 | pink:[255,192,203], |
||
| 173 | purple:[128,0,128], |
||
| 174 | violet:[128,0,128], |
||
| 175 | red:[255,0,0], |
||
| 176 | silver:[192,192,192], |
||
| 177 | white:[255,255,255], |
||
| 178 | yellow:[255,255,0] |
||
| 179 | }; |
||
| 180 | })(jQuery); |