convertColors.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. 'use strict';
  2. exports.type = 'perItem';
  3. exports.active = true;
  4. exports.description = 'converts colors: rgb() to #rrggbb and #rrggbb to #rgb';
  5. exports.params = {
  6. currentColor: false,
  7. names2hex: true,
  8. rgb2hex: true,
  9. shorthex: true,
  10. shortname: true
  11. };
  12. var collections = require('./_collections'),
  13. rNumber = '([+-]?(?:\\d*\\.\\d+|\\d+\\.?)%?)',
  14. rComma = '\\s*,\\s*',
  15. regRGB = new RegExp('^rgb\\(\\s*' + rNumber + rComma + rNumber + rComma + rNumber + '\\s*\\)$'),
  16. regHEX = /^\#(([a-fA-F0-9])\2){3}$/,
  17. none = /\bnone\b/i;
  18. /**
  19. * Convert different colors formats in element attributes to hex.
  20. *
  21. * @see http://www.w3.org/TR/SVG/types.html#DataTypeColor
  22. * @see http://www.w3.org/TR/SVG/single-page.html#types-ColorKeywords
  23. *
  24. * @example
  25. * Convert color name keyword to long hex:
  26. * fuchsia ➡ #ff00ff
  27. *
  28. * Convert rgb() to long hex:
  29. * rgb(255, 0, 255) ➡ #ff00ff
  30. * rgb(50%, 100, 100%) ➡ #7f64ff
  31. *
  32. * Convert long hex to short hex:
  33. * #aabbcc ➡ #abc
  34. *
  35. * Convert hex to short name
  36. * #000080 ➡ navy
  37. *
  38. * @param {Object} item current iteration item
  39. * @param {Object} params plugin params
  40. * @return {Boolean} if false, item will be filtered out
  41. *
  42. * @author Kir Belevich
  43. */
  44. exports.fn = function(item, params) {
  45. if (item.elem) {
  46. item.eachAttr(function(attr) {
  47. if (collections.colorsProps.indexOf(attr.name) > -1) {
  48. var val = attr.value,
  49. match;
  50. // Convert colors to currentColor
  51. if (params.currentColor) {
  52. if (typeof params.currentColor === 'string') {
  53. match = val === params.currentColor;
  54. } else if (params.currentColor.exec) {
  55. match = params.currentColor.exec(val);
  56. } else {
  57. match = !val.match(none);
  58. }
  59. if (match) {
  60. val = 'currentColor';
  61. }
  62. }
  63. // Convert color name keyword to long hex
  64. if (params.names2hex && val.toLowerCase() in collections.colorsNames) {
  65. val = collections.colorsNames[val.toLowerCase()];
  66. }
  67. // Convert rgb() to long hex
  68. if (params.rgb2hex && (match = val.match(regRGB))) {
  69. match = match.slice(1, 4).map(function(m) {
  70. if (m.indexOf('%') > -1)
  71. m = Math.round(parseFloat(m) * 2.55);
  72. return Math.max(0, Math.min(m, 255));
  73. });
  74. val = rgb2hex(match);
  75. }
  76. // Convert long hex to short hex
  77. if (params.shorthex && (match = val.match(regHEX))) {
  78. val = '#' + match[0][1] + match[0][3] + match[0][5];
  79. }
  80. // Convert hex to short name
  81. if (params.shortname) {
  82. var lowerVal = val.toLowerCase();
  83. if (lowerVal in collections.colorsShortNames) {
  84. val = collections.colorsShortNames[lowerVal];
  85. }
  86. }
  87. attr.value = val;
  88. }
  89. });
  90. }
  91. };
  92. /**
  93. * Convert [r, g, b] to #rrggbb.
  94. *
  95. * @see https://gist.github.com/983535
  96. *
  97. * @example
  98. * rgb2hex([255, 255, 255]) // '#ffffff'
  99. *
  100. * @param {Array} rgb [r, g, b]
  101. * @return {String} #rrggbb
  102. *
  103. * @author Jed Schmidt
  104. */
  105. function rgb2hex(rgb) {
  106. return '#' + ('00000' + (rgb[0] << 16 | rgb[1] << 8 | rgb[2]).toString(16)).slice(-6).toUpperCase();
  107. }