refactor: use dom utils in animated-modal (@Miodec) (#7303)

Refactor

Author: Miodec

frontend/src/ts/commandline/commandline.ts

@@ -595,12 +595,12 @@ function handleInputSubmit(): void {
     //validation ongoing, ignore the submit
     return;
   } else if (inputModeParams.validation?.status === "failed") {
-    modal.getModal().classList.add("hasError");
+    modal.getModal().addClass("hasError");
     if (shakeTimeout !== null) {
       clearTimeout(shakeTimeout);
     }
     shakeTimeout = setTimeout(() => {
-      modal.getModal().classList.remove("hasError");
+      modal.getModal().removeClass("hasError");
     }, 500);
     return;
   }
@@ -752,45 +752,39 @@ async function decrementActiveIndex(): Promise<void> {
 }
 
 function showWarning(message: string): void {
-  const warningEl = modal.getModal().querySelector<HTMLElement>(".warning");
-  const warningTextEl = modal
-    .getModal()
-    .querySelector<HTMLElement>(".warning .text");
+  const warningEl = modal.getModal().qs(".warning");
+  const warningTextEl = modal.getModal().qs(".warning .text");
   if (warningEl === null || warningTextEl === null) {
     throw new Error("Commandline warning element not found");
   }
-  warningEl.classList.remove("hidden");
-  warningTextEl.textContent = message;
+  warningEl.show();
+  warningTextEl.setText(message);
 }
 
 const showCheckingIcon = debounce(200, async () => {
-  const checkingiconEl = modal
-    .getModal()
-    .querySelector<HTMLElement>(".checkingicon");
+  const checkingiconEl = modal.getModal().qs(".checkingicon");
   if (checkingiconEl === null) {
     throw new Error("Commandline checking icon element not found");
   }
-  checkingiconEl.classList.remove("hidden");
+  checkingiconEl.show();
 });
 
 function hideCheckingIcon(): void {
   showCheckingIcon.cancel({ upcomingOnly: true });
 
-  const checkingiconEl = modal
-    .getModal()
-    .querySelector<HTMLElement>(".checkingicon");
+  const checkingiconEl = modal.getModal().qs(".checkingicon");
   if (checkingiconEl === null) {
     throw new Error("Commandline checking icon element not found");
   }
-  checkingiconEl.classList.add("hidden");
+  checkingiconEl.hide();
 }
 
 function hideWarning(): void {
-  const warningEl = modal.getModal().querySelector<HTMLElement>(".warning");
+  const warningEl = modal.getModal().qs(".warning");
   if (warningEl === null) {
     throw new Error("Commandline warning element not found");
   }
-  warningEl.classList.add("hidden");
+  warningEl.hide();
 }
 
 function updateValidationResult(
@@ -842,9 +836,9 @@ const modal = new AnimatedModal({
     focusFirstInput: true,
   },
   setup: async (modalEl): Promise<void> => {
-    const input = modalEl.querySelector("input") as HTMLInputElement;
+    const input = modalEl.qsr("input");
 
-    input.addEventListener(
+    input.on(
       "input",
       debounce(50, async (e) => {
         inputValue = ((e as InputEvent).target as HTMLInputElement).value;
@@ -864,7 +858,7 @@ const modal = new AnimatedModal({
       }),
     );
 
-    input.addEventListener("keydown", async (e) => {
+    input.on("keydown", async (e) => {
       mouseMode = false;
       if (
         e.key === "ArrowUp" ||
@@ -920,7 +914,7 @@ const modal = new AnimatedModal({
       }
     });
 
-    input.addEventListener("input", async (e) => {
+    input.on("input", async (e) => {
       if (
         inputModeParams === null ||
         inputModeParams.command === null ||
@@ -939,7 +933,7 @@ const modal = new AnimatedModal({
       await handler(e);
     });
 
-    modalEl.addEventListener("mousemove", (_e) => {
+    modalEl.on("mousemove", (_e) => {
       mouseMode = true;
     });
 

frontend/src/ts/modals/cookies.ts

@@ -26,23 +26,21 @@ export function show(goToSettings?: boolean): void {
 }
 
 function showSettings(currentAcceptedCookies?: AcceptedCookies): void {
-  modal.getModal().querySelector(".main")?.classList.add("hidden");
-  modal.getModal().querySelector(".settings")?.classList.remove("hidden");
+  modal.getModal().qs(".main")?.hide();
+  modal.getModal().qs(".settings")?.show();
 
   if (currentAcceptedCookies) {
     if (currentAcceptedCookies.analytics) {
-      (
-        modal
-          .getModal()
-          .querySelector(".cookie.analytics input") as HTMLInputElement
-      ).checked = true;
+      modal
+        .getModal()
+        .qs<HTMLInputElement>(".cookie.analytics input")
+        ?.setChecked(true);
     }
     if (currentAcceptedCookies.sentry) {
-      (
-        modal
-          .getModal()
-          .querySelector(".cookie.sentry input") as HTMLInputElement
-      ).checked = true;
+      modal
+        .getModal()
+        .qs<HTMLInputElement>(".cookie.sentry input")
+        ?.setChecked(true);
     }
   }
 }
@@ -64,7 +62,7 @@ const modal = new AnimatedModal({
     //
   },
   setup: async (modalEl): Promise<void> => {
-    modalEl.querySelector(".acceptAll")?.addEventListener("click", () => {
+    modalEl.qs(".acceptAll")?.on("click", () => {
       const accepted = {
         security: true,
         analytics: true,
@@ -73,7 +71,7 @@ const modal = new AnimatedModal({
       setAcceptedCookies(accepted);
       void hide();
     });
-    modalEl.querySelector(".rejectAll")?.addEventListener("click", () => {
+    modalEl.qs(".rejectAll")?.on("click", () => {
       const accepted = {
         security: true,
         analytics: false,
@@ -82,29 +80,27 @@ const modal = new AnimatedModal({
       setAcceptedCookies(accepted);
       void hide();
     });
-    modalEl.querySelector(".openSettings")?.addEventListener("click", () => {
+    modalEl.qs(".openSettings")?.on("click", () => {
       showSettings();
     });
-    modalEl
-      .querySelector(".cookie.ads .textButton")
-      ?.addEventListener("click", () => {
-        try {
-          AdController.showConsentPopup();
-        } catch (e) {
-          console.error("Failed to open ad consent UI");
-          Notifications.add(
-            "Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
-            -1,
-          );
-        }
-      });
-    modalEl.querySelector(".acceptSelected")?.addEventListener("click", () => {
-      const analyticsChecked = (
-        modalEl.querySelector(".cookie.analytics input") as HTMLInputElement
-      ).checked;
-      const sentryChecked = (
-        modalEl.querySelector(".cookie.sentry input") as HTMLInputElement
-      ).checked;
+    modalEl.qs(".cookie.ads .textButton")?.on("click", () => {
+      try {
+        AdController.showConsentPopup();
+      } catch (e) {
+        console.error("Failed to open ad consent UI");
+        Notifications.add(
+          "Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
+          -1,
+        );
+      }
+    });
+    modalEl.qs(".acceptSelected")?.on("click", () => {
+      const analyticsChecked =
+        modalEl.qs<HTMLInputElement>(".cookie.analytics input")?.getChecked() ??
+        false;
+      const sentryChecked =
+        modalEl.qs<HTMLInputElement>(".cookie.sentry input")?.getChecked() ??
+        false;
       const accepted = {
         security: true,
         analytics: analyticsChecked,

frontend/src/ts/modals/custom-generator.ts

@@ -5,6 +5,7 @@ import AnimatedModal, {
   HideOptions,
   ShowOptions,
 } from "../utils/animated-modal";
+import { ElementWithUtils } from "../utils/dom";
 
 type Preset = {
   display: string;
@@ -83,7 +84,7 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
       _presetSelect = new SlimSelect({
         select: "#customGeneratorModal .presetInput",
         settings: {
-          contentLocation: modalEl,
+          contentLocation: modalEl.native,
         },
       });
     },
@@ -159,16 +160,16 @@ async function apply(set: boolean): Promise<void> {
   });
 }
 
-async function setup(modalEl: HTMLElement): Promise<void> {
-  modalEl.querySelector(".setButton")?.addEventListener("click", () => {
+async function setup(modalEl: ElementWithUtils): Promise<void> {
+  modalEl.qs(".setButton")?.on("click", () => {
     void apply(true);
   });
 
-  modalEl.querySelector(".addButton")?.addEventListener("click", () => {
+  modalEl.qs(".addButton")?.on("click", () => {
     void apply(false);
   });
 
-  modalEl.querySelector(".generateButton")?.addEventListener("click", () => {
+  modalEl.qs(".generateButton")?.on("click", () => {
     applyPreset();
   });
 }

frontend/src/ts/modals/custom-test-duration.ts

@@ -3,6 +3,7 @@ import * as ManualRestart from "../test/manual-restart-tracker";
 import * as TestLogic from "../test/test-logic";
 import * as Notifications from "../elements/notifications";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
+import { ElementWithUtils } from "../utils/dom";
 
 function parseInput(input: string): number {
   const re = /((-\s*)?\d+(\.\d+)?\s*[hms]?)/g;
@@ -73,8 +74,7 @@ export function show(showOptions?: ShowOptions): void {
     ...showOptions,
     focusFirstInput: "focusAndSelect",
     beforeAnimation: async (modalEl) => {
-      (modalEl.querySelector("input") as HTMLInputElement).value =
-        `${Config.time}`;
+      modalEl.qs<HTMLInputElement>("input")?.setValue(`${Config.time}`);
       previewDuration();
     },
   });
@@ -112,12 +112,12 @@ function apply(): void {
   hide(true);
 }
 
-async function setup(modalEl: HTMLElement): Promise<void> {
-  modalEl.addEventListener("submit", (e) => {
+async function setup(modalEl: ElementWithUtils): Promise<void> {
+  modalEl.on("submit", (e) => {
     e.preventDefault();
     apply();
   });
-  modalEl.querySelector("input")?.addEventListener("input", (e) => {
+  modalEl.qs("input")?.on("input", (e) => {
     previewDuration();
   });
 }