jquery.colorhelpers.js 6.0 KB

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