diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-09 00:08:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-09 00:08:42 +0000 |
commit | f0809fbc2c72869130134d829232153a2e8193c6 (patch) | |
tree | c1f6e9c100e9d57246144e5a8a140f44ed195ad5 /app/assets/javascripts/helpers | |
parent | 459939f27fe77e90d7ba2b1d6c0aff59ff38e336 (diff) | |
download | gitlab-ce-f0809fbc2c72869130134d829232153a2e8193c6.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/helpers')
-rw-r--r-- | app/assets/javascripts/helpers/startup_css_helper.js | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/app/assets/javascripts/helpers/startup_css_helper.js b/app/assets/javascripts/helpers/startup_css_helper.js new file mode 100644 index 00000000000..66cf0630a79 --- /dev/null +++ b/app/assets/javascripts/helpers/startup_css_helper.js @@ -0,0 +1,68 @@ +/* Wait for.... The methods can be used: + - with a callback (preferred), + waitFor(action) + + - with then (discouraged), + await waitFor().then(action); + + - with await, + await waitFor; + action(); +*/ + +const CSS_LOADED_EVENT = 'CSSLoaded'; +const DOM_LOADED_EVENT = 'DOMContentLoaded'; +const STARTUP_LINK_LOADED_EVENT = 'CSSStartupLinkLoaded'; + +const isStartupLinkLoaded = ({ dataset }) => dataset.startupcss === 'loaded'; + +export const handleLoadedEvents = (action = () => {}) => { + let isCssLoaded = false; + let eventsList = [CSS_LOADED_EVENT, DOM_LOADED_EVENT]; + return ({ type } = {}) => { + eventsList = eventsList.filter(e => e !== type); + if (isCssLoaded) { + return; + } + if (!eventsList.length) { + isCssLoaded = true; + action(); + } + }; +}; + +export const handleStartupEvents = (action = () => {}) => { + if (!gon.features.startupCss) { + return action; + } + const startupLinks = Array.from(document.querySelectorAll('link[data-startupcss]')); + return () => { + if (startupLinks.every(isStartupLinkLoaded)) { + action(); + } + }; +}; + +export const waitForStartupLinks = () => { + let eventListener; + const promise = new Promise(resolve => { + eventListener = handleStartupEvents(resolve); + document.addEventListener(STARTUP_LINK_LOADED_EVENT, eventListener); + }).then(() => { + document.dispatchEvent(new CustomEvent(CSS_LOADED_EVENT)); + document.removeEventListener(STARTUP_LINK_LOADED_EVENT, eventListener); + }); + document.dispatchEvent(new CustomEvent(STARTUP_LINK_LOADED_EVENT)); + return promise; +}; + +export const waitForCSSLoaded = (action = () => {}) => { + let eventListener; + const promise = new Promise(resolve => { + eventListener = handleLoadedEvents(resolve); + document.addEventListener(DOM_LOADED_EVENT, eventListener, { once: true }); + document.addEventListener(CSS_LOADED_EVENT, eventListener, { once: true }); + }).then(action); + waitForStartupLinks(); + return promise; +}; |