1 |
|
2 | import '../polyfills/SVGClassList';
|
3 |
|
4 | export const NAMESPACE_SVG = 'http://www.w3.org/2000/svg';
|
5 | export const NAMESPACE_XLINK = 'http://www.w3.org/1999/xlink';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | export function getRootSvg() {
|
12 | const childNodes = document.body.childNodes;
|
13 | const length = childNodes.length;
|
14 | for (let k = 0; k < length ; k++) {
|
15 | const node = childNodes[k];
|
16 | if (node.tagName === 'svg' || node.tagName === 'SVG') {
|
17 | return node;
|
18 | }
|
19 | }
|
20 | return false;
|
21 | }
|
22 |
|
23 | export function createRootSvg() {
|
24 | const svg = document.createElementNS(NAMESPACE_SVG, 'svg');
|
25 | svg.setAttribute('height', '0');
|
26 | document.body.appendChild(svg);
|
27 | return svg;
|
28 | }
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | export function createSvgUse(iconId, attributes = {}) {
|
36 | const svg = document.createElementNS(NAMESPACE_SVG, 'svg');
|
37 | for (let attr in attributes) {
|
38 | svg.setAttribute(attr, attributes[attr]);
|
39 | }
|
40 | const use = document.createElementNS(NAMESPACE_SVG, 'use');
|
41 | use.setAttributeNS(NAMESPACE_XLINK, 'xlink:href', '#' + iconId);
|
42 | svg.appendChild(use);
|
43 | return svg;
|
44 | }
|
45 |
|
46 | export function changeSvgIcon(svg, newIconId) {
|
47 | svg.firstChild.setAttributeNS(NAMESPACE_XLINK, 'xlink:href', '#' + newIconId);
|
48 | }
|
49 |
|
50 | export function getSvgIcon(svg) {
|
51 | return svg.firstChild.getAttributeNS(NAMESPACE_XLINK, 'href').slice(1);
|
52 | }
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 | export function rgbaToColorMatrix(red, green, blue, alpha = 0) {
|
59 | const decToFloat = (value) => {
|
60 | return Math.round(value / 255 * 10) / 10;
|
61 | };
|
62 | const redFloat = decToFloat(red);
|
63 | const greenFloat = decToFloat(green);
|
64 | const blueFloat = decToFloat(blue);
|
65 | const alphaFloat = decToFloat(alpha);
|
66 | return `0 0 0 0 ${redFloat} 0 0 0 0 ${greenFloat} 0 0 0 0 ${blueFloat} 0 0 0 1 ${alphaFloat}`
|
67 | }
|
68 |
|
69 | export function getIdForSvgColorFilter(red, green, blue, alpha = 0) {
|
70 | return `__bunny_filter_${red}_${green}_${blue}_${alpha}`;
|
71 | }
|
72 |
|
73 | export function createOrGetSvgColorFilter(red, green, blue, alpha = 0) {
|
74 | const id = getIdForSvgColorFilter(red, green, blue, alpha);
|
75 | let rootSvg = getRootSvg();
|
76 | if (rootSvg === false) {
|
77 | rootSvg = createRootSvg();
|
78 | }
|
79 | if (!document.getElementById(id)) {
|
80 | const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
|
81 | filter.setAttribute('id', id);
|
82 | filter.innerHTML = `<feColorMatrix type="matrix" values="${rgbaToColorMatrix(red, green, blue, alpha)}" />`;
|
83 | rootSvg.appendChild(filter);
|
84 | }
|
85 | return id;
|
86 | }
|
87 |
|
88 | export function applySvgColorFilterToElement(element, red, green, blue, alpha = 0) {
|
89 | const id = createOrGetSvgColorFilter(red, green, blue, alpha);
|
90 | element.style.filter = `url(#${id})`;
|
91 | }
|