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