aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/utils/animationUtils.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/utils/animationUtils.ts')
-rw-r--r--src/utils/animationUtils.ts78
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