blob: 87cc69bad6194c3bb99c19248842da7a1bcd7eb6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
export function loadCSSFile(path) {
return new Promise((resolve) => {
if (!path) resolve();
if (document.querySelector(`link[href="${path}"]`)) {
resolve();
} else {
const linkElement = document.createElement('link');
linkElement.type = 'text/css';
linkElement.rel = 'stylesheet';
// eslint-disable-next-line @gitlab/require-i18n-strings
linkElement.media = 'screen,print';
linkElement.onload = () => {
resolve();
};
linkElement.href = path;
document.head.appendChild(linkElement);
}
});
}
export function getCssVariable(variable) {
return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
}
/**
* Return the measured width and height of a temporary element with the given
* CSS classes.
*
* Multiple classes can be given by separating them with spaces.
*
* Since this forces a layout calculation, do not call this frequently or in
* loops.
*
* Finally, this assumes the styles for the given classes are loaded.
*
* @param {string} className CSS class(es) to apply to a temporary element and
* measure.
* @returns {{ width: number, height: number }} Measured width and height in
* CSS pixels.
*/
export function getCssClassDimensions(className) {
const el = document.createElement('div');
el.className = className;
document.body.appendChild(el);
const { width, height } = el.getBoundingClientRect();
el.remove();
return { width, height };
}
|
