impr(dom utils): add slideUp and slideDown utils (@miodec)

frontend/src/ts/pages/settings.ts

@@ -753,30 +753,14 @@ function toggleSettingsGroup(groupName: string): void {
 
   const groupEl = qs(`.pageSettings .settingsGroup.${groupName}`);
   if (!groupEl?.hasClass("slideup")) {
-    groupEl?.setStyle({ overflow: "hidden" })?.animate({
-      height: 0,
-      duration: 250,
-      onComplete: () => {
-        groupEl
-          ?.hide()
-          .setStyle({ height: "", overflow: "" })
-          .addClass("slideup");
-      },
-    });
+    void groupEl?.slideUp(250);
+    groupEl?.addClass("slideup");
     $(`.pageSettings .sectionGroupTitle[group=${groupName}]`).addClass(
       "rotateIcon",
     );
   } else {
-    groupEl?.show();
-    groupEl?.setStyle({ height: "", overflow: "hidden" });
-    const height = groupEl.getOffsetHeight();
-    groupEl?.animate({
-      height: [0, height],
-      duration: 250,
-      onComplete: () => {
-        groupEl?.setStyle({ height: "", overflow: "" }).removeClass("slideup");
-      },
-    });
+    void groupEl?.slideDown(250);
+    groupEl?.removeClass("slideup");
     $(`.pageSettings .sectionGroupTitle[group=${groupName}]`).removeClass(
       "rotateIcon",
     );

frontend/src/ts/test/replay.ts

@@ -2,6 +2,7 @@ import config from "../config";
 import * as Sound from "../controllers/sound-controller";
 import * as TestInput from "./test-input";
 import * as Arrays from "../utils/arrays";
+import { qsr } from "../utils/dom";
 
 type ReplayAction =
   | "correctLetter"
@@ -30,6 +31,9 @@ let stopwatchList: NodeJS.Timeout[] = [];
 const toggleButton = document.getElementById("playpauseReplayButton")
   ?.children[0];
 
+const replayEl = qsr(".pageTest #resultReplay");
+const watchReplayButtonEl = qsr(".pageTest #watchReplayButton");
+
 function replayGetWordsList(wordsListFromScript: string[]): void {
   wordsList = wordsListFromScript;
 }
@@ -187,23 +191,14 @@ function loadOldReplay(): number {
 }
 
 function toggleReplayDisplay(): void {
-  if ($("#resultReplay").stop(true, true).hasClass("hidden")) {
+  if (replayEl.isHidden()) {
     initializeReplayPrompt();
     loadOldReplay();
     //show
-    if (!$("#watchReplayButton").hasClass("loaded")) {
-      $("#words").html(
-        `<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>`,
-      );
-      $("#resultReplay")
-        .removeClass("hidden")
-        .css("display", "none")
-        .slideDown(250);
+    if (!watchReplayButtonEl.hasClass("loaded")) {
+      void replayEl.slideDown(250);
     } else {
-      $("#resultReplay")
-        .removeClass("hidden")
-        .css("display", "none")
-        .slideDown(250);
+      void replayEl.slideDown(250);
     }
   } else {
     //hide
@@ -213,9 +208,7 @@ function toggleReplayDisplay(): void {
     ) {
       pauseReplay();
     }
-    $("#resultReplay").slideUp(250, () => {
-      $("#resultReplay").addClass("hidden");
-    });
+    void replayEl.slideUp(250);
   }
 }
 

frontend/src/ts/utils/dom.ts

@@ -209,6 +209,13 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
     return this;
   }
 
+  /**
+   * Check if the element has the "hidden" class
+   */
+  isHidden(): boolean {
+    return this.hasClass("hidden");
+  }
+
   /**
    * Check if element is visible
    */
@@ -669,6 +676,38 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
     });
   }
 
+  /**
+   * Animate the element sliding down (expanding height from 0 to full height)
+   * @param duration The duration of the animation in milliseconds (default: 250ms)
+   */
+  async slideDown(duration = 250): Promise<void> {
+    this.show().setStyle({ height: "", overflow: "hidden" });
+    const height = this.getOffsetHeight();
+    await this.promiseAnimate({
+      height: [0, height],
+      duration,
+      onComplete: () => {
+        this.setStyle({ height: "", overflow: "" });
+      },
+    });
+  }
+
+  /**
+   * Animate the element sliding up (collapsing height from full height to 0)
+   * @param duration The duration of the animation in milliseconds (default: 250ms)
+   */
+  async slideUp(duration = 250): Promise<void> {
+    this.show().setStyle({ overflow: "hidden" });
+    const height = this.getOffsetHeight();
+    await this.promiseAnimate({
+      height: [height, 0],
+      duration,
+      onComplete: () => {
+        this.setStyle({ height: "", overflow: "" }).hide();
+      },
+    });
+  }
+
   /**
    * Focus the element
    */