jquery.colorhelpers.js 6.3 KB

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