diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-17 19:05:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-17 19:05:49 +0300 |
commit | 43a25d93ebdabea52f99b05e15b06250cd8f07d7 (patch) | |
tree | dceebdc68925362117480a5d672bcff122fb625b /app/assets/javascripts/lib/utils/css_utils.js | |
parent | 20c84b99005abd1c82101dfeff264ac50d2df211 (diff) |
Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/lib/utils/css_utils.js')
-rw-r--r-- | app/assets/javascripts/lib/utils/css_utils.js | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/app/assets/javascripts/lib/utils/css_utils.js b/app/assets/javascripts/lib/utils/css_utils.js index e4f68dd1b6c..87cc69bad61 100644 --- a/app/assets/javascripts/lib/utils/css_utils.js +++ b/app/assets/javascripts/lib/utils/css_utils.js @@ -23,3 +23,28 @@ export function loadCSSFile(path) { 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 }; +} |