[6a3a178] | 1 | 'use strict';
|
---|
| 2 |
|
---|
| 3 | const collections = require('./_collections.js');
|
---|
| 4 |
|
---|
| 5 | exports.type = 'visitor';
|
---|
| 6 | exports.name = 'convertColors';
|
---|
| 7 | exports.active = true;
|
---|
| 8 | exports.description = 'converts colors: rgb() to #rrggbb and #rrggbb to #rgb';
|
---|
| 9 |
|
---|
| 10 | const rNumber = '([+-]?(?:\\d*\\.\\d+|\\d+\\.?)%?)';
|
---|
| 11 | const rComma = '\\s*,\\s*';
|
---|
| 12 | const regRGB = new RegExp(
|
---|
| 13 | '^rgb\\(\\s*' + rNumber + rComma + rNumber + rComma + rNumber + '\\s*\\)$'
|
---|
| 14 | );
|
---|
| 15 | const regHEX = /^#(([a-fA-F0-9])\2){3}$/;
|
---|
| 16 |
|
---|
| 17 | /**
|
---|
| 18 | * Convert [r, g, b] to #rrggbb.
|
---|
| 19 | *
|
---|
| 20 | * @see https://gist.github.com/983535
|
---|
| 21 | *
|
---|
| 22 | * @example
|
---|
| 23 | * rgb2hex([255, 255, 255]) // '#ffffff'
|
---|
| 24 | *
|
---|
| 25 | * @author Jed Schmidt
|
---|
| 26 | *
|
---|
| 27 | * @type {(rgb: Array<number>) => string}
|
---|
| 28 | */
|
---|
| 29 | const convertRgbToHex = ([r, g, b]) => {
|
---|
| 30 | // combine the octets into a 32-bit integer as: [1][r][g][b]
|
---|
| 31 | const hexNumber =
|
---|
| 32 | // operator precedence is (+) > (<<) > (|)
|
---|
| 33 | ((((256 + // [1][0]
|
---|
| 34 | r) << // [1][r]
|
---|
| 35 | 8) | // [1][r][0]
|
---|
| 36 | g) << // [1][r][g]
|
---|
| 37 | 8) | // [1][r][g][0]
|
---|
| 38 | b;
|
---|
| 39 | // serialize [1][r][g][b] to a hex string, and
|
---|
| 40 | // remove the 1 to get the number with 0s intact
|
---|
| 41 | return '#' + hexNumber.toString(16).slice(1).toUpperCase();
|
---|
| 42 | };
|
---|
| 43 |
|
---|
| 44 | /**
|
---|
| 45 | * Convert different colors formats in element attributes to hex.
|
---|
| 46 | *
|
---|
| 47 | * @see https://www.w3.org/TR/SVG11/types.html#DataTypeColor
|
---|
| 48 | * @see https://www.w3.org/TR/SVG11/single-page.html#types-ColorKeywords
|
---|
| 49 | *
|
---|
| 50 | * @example
|
---|
| 51 | * Convert color name keyword to long hex:
|
---|
| 52 | * fuchsia ➡ #ff00ff
|
---|
| 53 | *
|
---|
| 54 | * Convert rgb() to long hex:
|
---|
| 55 | * rgb(255, 0, 255) ➡ #ff00ff
|
---|
| 56 | * rgb(50%, 100, 100%) ➡ #7f64ff
|
---|
| 57 | *
|
---|
| 58 | * Convert long hex to short hex:
|
---|
| 59 | * #aabbcc ➡ #abc
|
---|
| 60 | *
|
---|
| 61 | * Convert hex to short name
|
---|
| 62 | * #000080 ➡ navy
|
---|
| 63 | *
|
---|
| 64 | * @author Kir Belevich
|
---|
| 65 | *
|
---|
| 66 | * @type {import('../lib/types').Plugin<{
|
---|
| 67 | * currentColor?: boolean | string | RegExp,
|
---|
| 68 | * names2hex?: boolean,
|
---|
| 69 | * rgb2hex?: boolean,
|
---|
| 70 | * shorthex?: boolean,
|
---|
| 71 | * shortname?: boolean,
|
---|
| 72 | * }>}
|
---|
| 73 | */
|
---|
| 74 | exports.fn = (_root, params) => {
|
---|
| 75 | const {
|
---|
| 76 | currentColor = false,
|
---|
| 77 | names2hex = true,
|
---|
| 78 | rgb2hex = true,
|
---|
| 79 | shorthex = true,
|
---|
| 80 | shortname = true,
|
---|
| 81 | } = params;
|
---|
| 82 |
|
---|
| 83 | return {
|
---|
| 84 | element: {
|
---|
| 85 | enter: (node) => {
|
---|
| 86 | for (const [name, value] of Object.entries(node.attributes)) {
|
---|
| 87 | if (collections.colorsProps.includes(name)) {
|
---|
| 88 | let val = value;
|
---|
| 89 |
|
---|
| 90 | // convert colors to currentColor
|
---|
| 91 | if (currentColor) {
|
---|
| 92 | let matched;
|
---|
| 93 | if (typeof currentColor === 'string') {
|
---|
| 94 | matched = val === currentColor;
|
---|
| 95 | } else if (currentColor instanceof RegExp) {
|
---|
| 96 | matched = currentColor.exec(val) != null;
|
---|
| 97 | } else {
|
---|
| 98 | matched = val !== 'none';
|
---|
| 99 | }
|
---|
| 100 | if (matched) {
|
---|
| 101 | val = 'currentColor';
|
---|
| 102 | }
|
---|
| 103 | }
|
---|
| 104 |
|
---|
| 105 | // convert color name keyword to long hex
|
---|
| 106 | if (names2hex) {
|
---|
| 107 | const colorName = val.toLowerCase();
|
---|
| 108 | if (collections.colorsNames[colorName] != null) {
|
---|
| 109 | val = collections.colorsNames[colorName];
|
---|
| 110 | }
|
---|
| 111 | }
|
---|
| 112 |
|
---|
| 113 | // convert rgb() to long hex
|
---|
| 114 | if (rgb2hex) {
|
---|
| 115 | let match = val.match(regRGB);
|
---|
| 116 | if (match != null) {
|
---|
| 117 | let nums = match.slice(1, 4).map((m) => {
|
---|
| 118 | let n;
|
---|
| 119 | if (m.indexOf('%') > -1) {
|
---|
| 120 | n = Math.round(parseFloat(m) * 2.55);
|
---|
| 121 | } else {
|
---|
| 122 | n = Number(m);
|
---|
| 123 | }
|
---|
| 124 | return Math.max(0, Math.min(n, 255));
|
---|
| 125 | });
|
---|
| 126 | val = convertRgbToHex(nums);
|
---|
| 127 | }
|
---|
| 128 | }
|
---|
| 129 |
|
---|
| 130 | // convert long hex to short hex
|
---|
| 131 | if (shorthex) {
|
---|
| 132 | let match = val.match(regHEX);
|
---|
| 133 | if (match != null) {
|
---|
| 134 | val = '#' + match[0][1] + match[0][3] + match[0][5];
|
---|
| 135 | }
|
---|
| 136 | }
|
---|
| 137 |
|
---|
| 138 | // convert hex to short name
|
---|
| 139 | if (shortname) {
|
---|
| 140 | const colorName = val.toLowerCase();
|
---|
| 141 | if (collections.colorsShortNames[colorName] != null) {
|
---|
| 142 | val = collections.colorsShortNames[colorName];
|
---|
| 143 | }
|
---|
| 144 | }
|
---|
| 145 |
|
---|
| 146 | node.attributes[name] = val;
|
---|
| 147 | }
|
---|
| 148 | }
|
---|
| 149 | },
|
---|
| 150 | },
|
---|
| 151 | };
|
---|
| 152 | };
|
---|