1 | import { isVisible } from 'bootstrap-vue/src/utils/dom';
|
2 | import { COMMA, CONTRAST_LEVELS, labelColorOptions, focusableTags } from './constants';
|
3 |
|
4 | export function debounceByAnimationFrame(fn) {
|
5 | let requestId;
|
6 |
|
7 | return function debounced(...args) {
|
8 | if (requestId) {
|
9 | window.cancelAnimationFrame(requestId);
|
10 | }
|
11 | requestId = window.requestAnimationFrame(() => fn.apply(this, args));
|
12 | };
|
13 | }
|
14 |
|
15 | export function throttle(fn) {
|
16 | let frameId = null;
|
17 |
|
18 | return (...args) => {
|
19 | if (frameId) {
|
20 | return;
|
21 | }
|
22 |
|
23 | frameId = window.requestAnimationFrame(() => {
|
24 | fn(...args);
|
25 | frameId = null;
|
26 | });
|
27 | };
|
28 | }
|
29 |
|
30 | export function rgbFromHex(hex) {
|
31 | const cleanHex = hex.replace('#', '');
|
32 | const rgb =
|
33 | cleanHex.length === 3
|
34 | ? cleanHex.split('').map((val) => val + val)
|
35 | : cleanHex.match(/[\da-f]{2}/gi);
|
36 | const [r, g, b] = rgb.map((val) => parseInt(val, 16));
|
37 | return [r, g, b];
|
38 | }
|
39 |
|
40 | export function rgbFromString(color, sub) {
|
41 | const rgb = color.substring(sub, color.length - 1).split(COMMA);
|
42 | const [r, g, b] = rgb.map((i) => parseInt(i, 10));
|
43 | return [r, g, b];
|
44 | }
|
45 |
|
46 | export function hexToRgba(hex, opacity = 1) {
|
47 | const [r, g, b] = rgbFromHex(hex);
|
48 |
|
49 | return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
50 | }
|
51 |
|
52 | export function toSrgb(value) {
|
53 | const normalized = value / 255;
|
54 | return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
|
55 | }
|
56 |
|
57 | export function relativeLuminance(rgb) {
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
|
64 | }
|
65 |
|
66 | export function colorFromBackground(backgroundColor, contrastRatio = 2.4) {
|
67 | let color;
|
68 | const lightColor = rgbFromHex('#FFFFFF');
|
69 | const darkColor = rgbFromHex('#1f1e24');
|
70 |
|
71 | if (backgroundColor.startsWith('#')) {
|
72 | color = rgbFromHex(backgroundColor);
|
73 | } else if (backgroundColor.startsWith('rgba(')) {
|
74 | color = rgbFromString(backgroundColor, 5);
|
75 | } else if (backgroundColor.startsWith('rgb(')) {
|
76 | color = rgbFromString(backgroundColor, 4);
|
77 | }
|
78 |
|
79 | const luminance = relativeLuminance(color);
|
80 | const lightLuminance = relativeLuminance(lightColor);
|
81 | const darkLuminance = relativeLuminance(darkColor);
|
82 |
|
83 | const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
|
84 | const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
|
85 |
|
86 |
|
87 |
|
88 | return contrastLight >= contrastRatio || contrastLight > contrastDark
|
89 | ? labelColorOptions.light
|
90 | : labelColorOptions.dark;
|
91 | }
|
92 |
|
93 | export function getColorContrast(foreground, background) {
|
94 |
|
95 | const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
|
96 | const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
|
97 |
|
98 | let score = backgroundLuminance / foregroundLuminance;
|
99 | if (foregroundLuminance > backgroundLuminance) {
|
100 | score = 1 / score;
|
101 | }
|
102 |
|
103 | const level = CONTRAST_LEVELS.find(({ min, max }) => {
|
104 | return score >= min && score < max;
|
105 | });
|
106 |
|
107 | return {
|
108 | score: (Math.round(score * 10) / 10).toFixed(1),
|
109 | level,
|
110 | };
|
111 | }
|
112 |
|
113 | export function uid() {
|
114 | return Math.random().toString(36).substring(2);
|
115 | }
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 | export function isElementFocusable(elt) {
|
124 | if (!elt) return false;
|
125 |
|
126 | const { tagName } = elt;
|
127 |
|
128 | const isValidTag = focusableTags.includes(tagName);
|
129 | const hasValidType = elt.getAttribute('type') !== 'hidden';
|
130 | const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
|
131 | const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
|
132 | const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
|
133 |
|
134 | return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
|
135 | }
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 | export function isElementTabbable(el) {
|
144 | if (!el) return false;
|
145 |
|
146 | const tabindex = parseInt(el.getAttribute('tabindex'), 10);
|
147 | return tabindex > -1;
|
148 | }
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 | export function focusFirstFocusableElement(elts) {
|
157 | const focusableElt = elts.find((el) => isElementFocusable(el));
|
158 |
|
159 | if (focusableElt) focusableElt.focus();
|
160 | }
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 | export function isDev() {
|
169 | return !['test', 'production'].includes(process.env.NODE_ENV);
|
170 | }
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 | export function logWarning(message = '', element = '') {
|
178 | if (message.length && isDev()) {
|
179 | console.warn(message, element);
|
180 | }
|
181 | }
|
182 |
|
183 |
|
184 |
|
185 |
|
186 | export function stopEvent(
|
187 | event,
|
188 | { preventDefault = true, stopPropagation = true, stopImmediatePropagation = false } = {}
|
189 | ) {
|
190 | if (preventDefault) {
|
191 | event.preventDefault();
|
192 | }
|
193 | if (stopPropagation) {
|
194 | event.stopPropagation();
|
195 | }
|
196 | if (stopImmediatePropagation) {
|
197 | event.stopImmediatePropagation();
|
198 | }
|
199 | }
|
200 |
|
201 |
|
202 |
|
203 |
|
204 | export function filterVisible(els) {
|
205 | return (els || []).filter((el) => isVisible(el));
|
206 | }
|