diff options
Diffstat (limited to 'src/utils/animationUtils.ts')
-rw-r--r-- | src/utils/animationUtils.ts | 78 |
1 files changed, 0 insertions, 78 deletions
diff --git a/src/utils/animationUtils.ts b/src/utils/animationUtils.ts deleted file mode 100644 index 08a59ce0..00000000 --- a/src/utils/animationUtils.ts +++ /dev/null @@ -1,78 +0,0 @@ - /** - * Starts a spinning animation and returns a function to be called when it should be stopped - * The callback will be called when the animation is finished - * It waits until a full rotation is complete - */ -function applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => Promise<void> { - element.style.animation = `rotate ${time}s 0s infinite`; - - return async () => new Promise((resolve) => { - // Make the animation finite - element.style.animation = `rotate ${time}s`; - - // When the animation is over, hide the button - const animationEndListener = () => { - if (callback) callback(); - - element.style.animation = "none"; - - element.removeEventListener("animationend", animationEndListener); - - resolve(); - }; - - element.addEventListener("animationend", animationEndListener); - }); -} - -function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } { - if (enabled) element.classList.add("autoHiding"); - element.classList.add("sbhidden"); - element.classList.add("animationDone"); - if (!rightSlide) element.classList.add("autoHideLeft"); - - let mouseEntered = false; - - return { - hide: () => { - mouseEntered = false; - if (element.classList.contains("autoHiding")) { - element.classList.add("sbhidden"); - } - }, - show: () => { - mouseEntered = true; - element.classList.remove("animationDone"); - - // Wait for next event loop - setTimeout(() => { - if (mouseEntered) element.classList.remove("sbhidden") - }, 10); - } - }; -} - -function setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void { - const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide); - - container.addEventListener("mouseleave", () => hide()); - container.addEventListener("mouseenter", () => show()); -} - -function enableAutoHideAnimation(element: Element): void { - element.classList.add("autoHiding"); - element.classList.add("sbhidden"); -} - -function disableAutoHideAnimation(element: Element): void { - element.classList.remove("autoHiding"); - element.classList.remove("sbhidden"); -} - -export const AnimationUtils = { - applyLoadingAnimation, - setupAutoHideAnimation, - setupCustomHideAnimation, - enableAutoHideAnimation, - disableAutoHideAnimation -};
\ No newline at end of file |