refactor(animated modal): change constructor parameter to a single ob…

…ject
monkeytypegame · Mar 14, 2024 · c3671fb · c3671fb
1 parent df8b103
commit c3671fb
Show file tree

Hide file tree

Showing 14 changed files with 152 additions and 140 deletions.
diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
@@ -527,7 +527,8 @@ async function decrementActiveIndex(): Promise<void> {
   await updateActiveCommand();
 }
 
-const modal = new AnimatedModal("commandLine", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "commandLine",
   customEscapeHandler: (): void => {
     hide();
   },

diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
@@ -384,10 +384,9 @@ NotificationEvent.subscribe((message, level, customTitle) => {
   }
 });
 
-const modal = new AnimatedModal(
-  "alertsPopup",
-  "popups",
-  {
+const modal = new AnimatedModal({
+  dialogId: "alertsPopup",
+  customAnimations: {
     show: {
       modal: {
         from: {
@@ -411,55 +410,53 @@ const modal = new AnimatedModal(
       },
     },
   },
-  {
-    customEscapeHandler: (): void => {
-      hide();
-    },
-    customWrapperClickHandler: (): void => {
-      hide();
-    },
-    setup: (): void => {
-      $("#alertsPopup .accountAlerts").on("click", ".claimAll", () => {
-        for (const ie of accountAlerts) {
-          if (!ie.read && !mailToMarkRead.includes(ie.id)) {
-            markReadAlert(ie.id);
-          }
+  customEscapeHandler: (): void => {
+    hide();
+  },
+  customWrapperClickHandler: (): void => {
+    hide();
+  },
+  setup: (): void => {
+    $("#alertsPopup .accountAlerts").on("click", ".claimAll", () => {
+      for (const ie of accountAlerts) {
+        if (!ie.read && !mailToMarkRead.includes(ie.id)) {
+          markReadAlert(ie.id);
         }
-      });
+      }
+    });
 
-      $("#alertsPopup .accountAlerts").on("click", ".deleteAll", () => {
-        for (const ie of accountAlerts) {
-          if (!mailToDelete.includes(ie.id)) {
-            deleteAlert(ie.id);
-          }
+    $("#alertsPopup .accountAlerts").on("click", ".deleteAll", () => {
+      for (const ie of accountAlerts) {
+        if (!mailToDelete.includes(ie.id)) {
+          deleteAlert(ie.id);
         }
-      });
+      }
+    });
 
-      $("#alertsPopup .mobileClose").on("click", () => {
-        hide();
-      });
+    $("#alertsPopup .mobileClose").on("click", () => {
+      hide();
+    });
+
+    $("#alertsPopup .accountAlerts .list").on(
+      "click",
+      ".item .buttons .deleteAlert",
+      (e) => {
+        const id = $(e.currentTarget)
+          .closest(".item")
+          .attr("data-id") as string;
+        deleteAlert(id);
+      }
+    );
 
-      $("#alertsPopup .accountAlerts .list").on(
-        "click",
-        ".item .buttons .deleteAlert",
-        (e) => {
-          const id = $(e.currentTarget)
-            .closest(".item")
-            .attr("data-id") as string;
-          deleteAlert(id);
-        }
-      );
-
-      $("#alertsPopup .accountAlerts .list").on(
-        "click",
-        ".item .buttons .markReadAlert",
-        (e) => {
-          const id = $(e.currentTarget)
-            .closest(".item")
-            .attr("data-id") as string;
-          markReadAlert(id);
-        }
-      );
-    },
-  }
-);
+    $("#alertsPopup .accountAlerts .list").on(
+      "click",
+      ".item .buttons .markReadAlert",
+      (e) => {
+        const id = $(e.currentTarget)
+          .closest(".item")
+          .attr("data-id") as string;
+        markReadAlert(id);
+      }
+    );
+  },
+});
diff --git a/frontend/src/ts/modals/contact.ts b/frontend/src/ts/modals/contact.ts
@@ -4,4 +4,6 @@ export function show(): void {
   void modal.show();
 }
 
-const modal = new AnimatedModal("contactModal", "popups", undefined);
+const modal = new AnimatedModal({
+  dialogId: "contactModal",
+});
diff --git a/frontend/src/ts/modals/cookies.ts b/frontend/src/ts/modals/cookies.ts
@@ -66,7 +66,8 @@ async function hide(): Promise<void> {
 //   }
 // }
 
-const modal = new AnimatedModal("cookiesModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "cookiesModal",
   customEscapeHandler: (): void => {
     //
   },

diff --git a/frontend/src/ts/modals/custom-word-amount.ts b/frontend/src/ts/modals/custom-word-amount.ts
@@ -48,7 +48,8 @@ function apply(): void {
   hide();
 }
 
-const modal = new AnimatedModal("customWordAmountModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "customWordAmountModal",
   setup: (modalEl): void => {
     modalEl.addEventListener("submit", (e) => {
       e.preventDefault();

diff --git a/frontend/src/ts/modals/import-export-settings.ts b/frontend/src/ts/modals/import-export-settings.ts
@@ -31,30 +31,26 @@ export function show(mode: "import" | "export", config?: string): void {
   });
 }
 
-const modal = new AnimatedModal(
-  "importExportSettingsModal",
-  "popups",
-  undefined,
-  {
-    setup: async (modalEl): Promise<void> => {
-      modalEl.querySelector("input")?.addEventListener("input", (e) => {
-        state.value = (e.target as HTMLInputElement).value;
-      });
-      modalEl.querySelector("form")?.addEventListener("submit", async (e) => {
-        e.preventDefault();
-        if (state.mode !== "import") return;
-        if (state.value === "") {
-          void modal.hide();
-          return;
-        }
-        try {
-          await UpdateConfig.apply(JSON.parse(state.value));
-        } catch (e) {
-          Notifications.add("Failed to import settings: " + e, -1);
-        }
-        UpdateConfig.saveFullConfigToLocalStorage();
+const modal = new AnimatedModal({
+  dialogId: "importExportSettingsModal",
+  setup: async (modalEl): Promise<void> => {
+    modalEl.querySelector("input")?.addEventListener("input", (e) => {
+      state.value = (e.target as HTMLInputElement).value;
+    });
+    modalEl.querySelector("form")?.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      if (state.mode !== "import") return;
+      if (state.value === "") {
         void modal.hide();
-      });
-    },
-  }
-);
+        return;
+      }
+      try {
+        await UpdateConfig.apply(JSON.parse(state.value));
+      } catch (e) {
+        Notifications.add("Failed to import settings: " + e, -1);
+      }
+      UpdateConfig.saveFullConfigToLocalStorage();
+      void modal.hide();
+    });
+  },
+});
diff --git a/frontend/src/ts/modals/pb-tables.ts b/frontend/src/ts/modals/pb-tables.ts
@@ -90,4 +90,6 @@ export function show(mode: SharedTypes.Config.Mode): void {
   });
 }
 
-const modal = new AnimatedModal("pbTablesModal", "popups", undefined);
+const modal = new AnimatedModal({
+  dialogId: "pbTablesModal",
+});
diff --git a/frontend/src/ts/modals/register-captcha.ts b/frontend/src/ts/modals/register-captcha.ts
@@ -32,7 +32,8 @@ function hide(resolveToUndefined = false): void {
   void modal.hide();
 }
 
-const modal = new AnimatedModal("registerCaptchaModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "registerCaptchaModal",
   customEscapeHandler: async (): Promise<void> => {
     hide(true);
   },

diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts
@@ -72,7 +72,8 @@ async function copy(): Promise<void> {
   }
 }
 
-const modal = new AnimatedModal("shareCustomThemeModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "shareCustomThemeModal",
   setup: (modal): void => {
     modal.querySelector("button")?.addEventListener("click", copy);
     modal
@@ -83,20 +84,16 @@ const modal = new AnimatedModal("shareCustomThemeModal", "popups", undefined, {
   },
 });
 
-const urlModal = new AnimatedModal(
-  "shareCustomThemeUrlModal",
-  "popups",
-  undefined,
-  {
-    customEscapeHandler: async (): Promise<void> => {
-      await urlModal.hide({
-        clearModalChain: true,
-      });
-    },
-    customWrapperClickHandler: async (): Promise<void> => {
-      await urlModal.hide({
-        clearModalChain: true,
-      });
-    },
-  }
-);
+const urlModal = new AnimatedModal({
+  dialogId: "shareCustomThemeUrlModal",
+  customEscapeHandler: async (): Promise<void> => {
+    await urlModal.hide({
+      clearModalChain: true,
+    });
+  },
+  customWrapperClickHandler: async (): Promise<void> => {
+    await urlModal.hide({
+      clearModalChain: true,
+    });
+  },
+});
diff --git a/frontend/src/ts/modals/streak-hour-offset.ts b/frontend/src/ts/modals/streak-hour-offset.ts
@@ -98,7 +98,8 @@ async function apply(): Promise<void> {
   }
 }
 
-const modal = new AnimatedModal("streakHourOffsetModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "streakHourOffsetModal",
   setup: (modalEl): void => {
     modalEl.querySelector("input")?.addEventListener("input", () => {
       updatePreview();

diff --git a/frontend/src/ts/modals/support.ts b/frontend/src/ts/modals/support.ts
@@ -5,7 +5,8 @@ export function show(): void {
   void modal.show();
 }
 
-const modal = new AnimatedModal("supportModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "supportModal",
   setup: (modalEl): void => {
     modalEl.querySelector("button.ads")?.addEventListener("click", async () => {
       const commandline = await getCommandline();

diff --git a/frontend/src/ts/modals/user-report.ts b/frontend/src/ts/modals/user-report.ts
@@ -121,7 +121,8 @@ async function submitReport(): Promise<void> {
   void hide();
 }
 
-const modal = new AnimatedModal("userReportModal", "popups", undefined, {
+const modal = new AnimatedModal({
+  dialogId: "userReportModal",
   setup: async (modalEl): Promise<void> => {
     modalEl.querySelector("button")?.addEventListener("click", () => {
       void submitReport();

diff --git a/frontend/src/ts/modals/version-history.ts b/frontend/src/ts/modals/version-history.ts
@@ -54,4 +54,6 @@ export function show(): void {
   });
 }
 
-const modal = new AnimatedModal("versionHistoryModal", "popups");
+const modal = new AnimatedModal({
+  dialogId: "versionHistoryModal",
+});