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);