From b9092bf362c8c1b5d3b371b7229d2cddfe2de443 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 Mar 2024 19:32:33 +0100
Subject: [PATCH] impr(animated modal): add setup function which only runs once

used for setting up event handlers - that way the event handlers can be loaded at any time
also connected constructor functions into an object
---
 frontend/src/ts/elements/alerts.ts       | 93 +++++++++++++-----------
 frontend/src/ts/popups/animated-modal.ts | 38 ++++++++--
 2 files changed, 81 insertions(+), 50 deletions(-)

diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index 0e98da2fe..660020c34 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -369,48 +369,10 @@ function updateClaimDeleteAllButton(): 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);
-    }
-  }
-});
-
 $("header nav .showAlerts").on("click", () => {
   void show();
 });
 
-$("#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 .markReadAlert",
-  (e) => {
-    const id = $(e.currentTarget).closest(".item").attr("data-id") as string;
-    markReadAlert(id);
-  }
-);
-
 NotificationEvent.subscribe((message, level, customTitle) => {
   state.notifications.push({
     message,
@@ -448,10 +410,55 @@ const modal = new AnimatedModal(
       },
     },
   },
-  () => {
-    hide();
-  },
-  () => {
-    hide();
+  {
+    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 .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 .markReadAlert",
+        (e) => {
+          const id = $(e.currentTarget)
+            .closest(".item")
+            .attr("data-id") as string;
+          markReadAlert(id);
+        }
+      );
+    },
   }
 );
diff --git a/frontend/src/ts/popups/animated-modal.ts b/frontend/src/ts/popups/animated-modal.ts
index 1feef7b31..f23d853ca 100644
--- a/frontend/src/ts/popups/animated-modal.ts
+++ b/frontend/src/ts/popups/animated-modal.ts
@@ -32,14 +32,22 @@ export default class AnimatedModal {
   private modalEl: HTMLElement;
   private wrapperId: string;
   private open = false;
+  private setupRan = false;
   private customShowAnimations: CustomWrapperAndModalAnimations | undefined;
   private customHideAnimations: CustomWrapperAndModalAnimations | undefined;
 
+  private customEscapeHandler: ((e: KeyboardEvent) => void) | undefined;
+  private customWrapperClickHandler: ((e: MouseEvent) => void) | undefined;
+  private setup: ((modal: HTMLElement) => void) | undefined;
+
   constructor(
     wrapperId: string,
     customAnimations?: ConstructorCustomAnimations,
-    customEscapeHandler?: (e: KeyboardEvent) => void,
-    customWrapperClickHandler?: (e: MouseEvent) => void
+    functions?: {
+      customEscapeHandler?: (e: KeyboardEvent) => void;
+      customWrapperClickHandler?: (e: MouseEvent) => void;
+      setup?: (modal: HTMLElement) => void;
+    }
   ) {
     if (wrapperId.startsWith("#")) {
       wrapperId = wrapperId.slice(1);
@@ -74,10 +82,18 @@ export default class AnimatedModal {
     this.customShowAnimations = customAnimations?.show;
     this.customHideAnimations = customAnimations?.hide;
 
+    this.customEscapeHandler = functions?.customEscapeHandler;
+    this.customWrapperClickHandler = functions?.customWrapperClickHandler;
+    this.setup = functions?.setup;
+
+    Skeleton.save(this.wrapperId);
+  }
+
+  runSetup(): void {
     this.wrapperEl.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && isPopupVisible(this.wrapperId)) {
-        if (customEscapeHandler) {
-          customEscapeHandler(e);
+        if (this.customEscapeHandler !== undefined) {
+          this.customEscapeHandler(e);
         } else {
           void this.hide();
         }
@@ -86,15 +102,17 @@ export default class AnimatedModal {
 
     this.wrapperEl.addEventListener("mousedown", (e) => {
       if (e.target === this.wrapperEl) {
-        if (customWrapperClickHandler) {
-          customWrapperClickHandler(e);
+        if (this.customWrapperClickHandler !== undefined) {
+          this.customWrapperClickHandler(e);
         } else {
           void this.hide();
         }
       }
     });
 
-    Skeleton.save(this.wrapperId);
+    if (this.setup !== undefined) {
+      this.setup(this.modalEl);
+    }
   }
 
   getWrapper(): HTMLDialogElement {
@@ -113,6 +131,12 @@ export default class AnimatedModal {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve) => {
       Skeleton.append(this.wrapperId);
+
+      if (!this.setupRan) {
+        this.runSetup();
+        this.setupRan = true;
+      }
+
       if (isPopupVisible(this.wrapperId)) return resolve();
 
       this.open = true;