refactor(animated modal): make setup async

!nuf
monkeytypegame · Mar 24, 2024 · a8a78ec · a8a78ec
1 parent 5a6d2ec
commit a8a78ec
Show file tree

Hide file tree

Showing 21 changed files with 29 additions and 29 deletions.
diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
@@ -554,8 +554,8 @@ const modal = new AnimatedModal({
   showOptionsWhenInChain: {
     focusFirstInput: true,
   },
-  setup: (modal): void => {
-    const input = modal.querySelector("input") as HTMLInputElement;
+  setup: async (modalEl): Promise<void> => {
+    const input = modalEl.querySelector("input") as HTMLInputElement;
 
     input.addEventListener("input", async (e) => {
       inputValue = (e.target as HTMLInputElement).value;
@@ -607,7 +607,7 @@ const modal = new AnimatedModal({
       }
     });
 
-    modal.addEventListener("mousemove", (e) => {
+    modalEl.addEventListener("mousemove", (e) => {
       mouseMode = true;
     });
   },

diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
@@ -416,7 +416,7 @@ const modal = new AnimatedModal({
   customWrapperClickHandler: (): void => {
     hide();
   },
-  setup: (): void => {
+  setup: async (): Promise<void> => {
     $("#alertsPopup .accountAlerts").on("click", ".claimAll", () => {
       for (const ie of accountAlerts) {
         if (!ie.read && !mailToMarkRead.includes(ie.id)) {

diff --git a/frontend/src/ts/modals/custom-test-duration.ts b/frontend/src/ts/modals/custom-test-duration.ts
@@ -113,7 +113,7 @@ function apply(): void {
   hide(true);
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.addEventListener("submit", (e) => {
     e.preventDefault();
     apply();

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

diff --git a/frontend/src/ts/modals/edit-preset.ts b/frontend/src/ts/modals/edit-preset.ts
@@ -153,7 +153,7 @@ async function apply(): Promise<void> {
 
 const modal = new AnimatedModal({
   dialogId: "editPresetModal",
-  setup: (modalEl): void => {
+  setup: async (modalEl): Promise<void> => {
     modalEl.addEventListener("submit", (e) => {
       e.preventDefault();
       void apply();

diff --git a/frontend/src/ts/modals/edit-profile.ts b/frontend/src/ts/modals/edit-profile.ts
@@ -165,7 +165,7 @@ async function updateProfile(): Promise<void> {
 
 const modal = new AnimatedModal({
   dialogId: "editProfileModal",
-  setup: (modalEl): void => {
+  setup: async (modalEl): Promise<void> => {
     modalEl.addEventListener("submit", async (e) => {
       e.preventDefault();
       await updateProfile();

diff --git a/frontend/src/ts/modals/edit-result-tags.ts b/frontend/src/ts/modals/edit-result-tags.ts
@@ -143,7 +143,7 @@ async function save(): Promise<void> {
 
 const modal = new AnimatedModal({
   dialogId: "editResultTagsModal",
-  setup: (modalEl): void => {
+  setup: async (modalEl): Promise<void> => {
     modalEl
       .querySelector("button.saveButton")
       ?.addEventListener("click", (e) => {

diff --git a/frontend/src/ts/modals/edit-tag.ts b/frontend/src/ts/modals/edit-tag.ts
@@ -170,7 +170,7 @@ async function apply(): Promise<void> {
 
 const modal = new AnimatedModal({
   dialogId: "editTagModal",
-  setup: (modalEl): void => {
+  setup: async (modalEl): Promise<void> => {
     modalEl.addEventListener("submit", (e) => {
       e.preventDefault();
       void apply();

diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
@@ -198,7 +198,7 @@ const checkNameDebounced = debounce(1000, async () => {
   }
 });
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.addEventListener("submit", (e) => {
     e.preventDefault();
     void apply();

diff --git a/frontend/src/ts/modals/mobile-test-config.ts b/frontend/src/ts/modals/mobile-test-config.ts
@@ -69,7 +69,7 @@ function hide(): void {
   void modal.hide();
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   const wordsGroupButtons = modalEl.querySelectorAll(".wordsGroup button");
   for (const button of wordsGroupButtons) {
     button.addEventListener("click", (e) => {

diff --git a/frontend/src/ts/modals/new-filter-preset.ts b/frontend/src/ts/modals/new-filter-preset.ts
@@ -28,7 +28,7 @@ function apply(): void {
   hide(true);
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.addEventListener("submit", (e) => {
     e.preventDefault();
     apply();

diff --git a/frontend/src/ts/modals/quote-approve.ts b/frontend/src/ts/modals/quote-approve.ts
@@ -224,7 +224,7 @@ async function editQuote(index: number, dbid: string): Promise<void> {
   updateList();
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector("button.refreshList")?.addEventListener("click", () => {
     $("#quoteApproveModal .quotes").empty();
     void getQuotes();

diff --git a/frontend/src/ts/modals/quote-rate.ts b/frontend/src/ts/modals/quote-rate.ts
@@ -197,7 +197,7 @@ async function submit(): Promise<void> {
   $(".pageTest #result #rateQuoteButton .icon").addClass("fas");
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector(".submitButton")?.addEventListener("click", () => {
     void submit();
   });

diff --git a/frontend/src/ts/modals/quote-report.ts b/frontend/src/ts/modals/quote-report.ts
@@ -114,7 +114,7 @@ async function submitReport(): Promise<void> {
   void hide(true);
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector(".comment")?.addEventListener("input", () => {
     const len = ($("#quoteReportModal .comment").val() as string).length;
     $("#quoteReportModal .characterCount").text(len);

diff --git a/frontend/src/ts/modals/quote-search.ts b/frontend/src/ts/modals/quote-search.ts
@@ -397,7 +397,7 @@ async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
   }
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector(".searchBox")?.addEventListener("input", (e) => {
     searchForQuotes();
   });

diff --git a/frontend/src/ts/modals/quote-submit.ts b/frontend/src/ts/modals/quote-submit.ts
@@ -83,7 +83,7 @@ function hide(clearModalChain: boolean): void {
   });
 }
 
-function setup(modalEl: HTMLElement): void {
+async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector("textarea")?.addEventListener("input", (e) => {
     const len = (e.target as HTMLTextAreaElement).value.length;
     $("#quoteSubmitModal .characterCount").text(len);

diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts
@@ -74,9 +74,9 @@ async function copy(): Promise<void> {
 
 const modal = new AnimatedModal({
   dialogId: "shareCustomThemeModal",
-  setup: (modal): void => {
-    modal.querySelector("button")?.addEventListener("click", copy);
-    modal
+  setup: async (modalEl): Promise<void> => {
+    modalEl.querySelector("button")?.addEventListener("click", copy);
+    modalEl
       .querySelector("input[type='checkbox']")
       ?.addEventListener("change", (e) => {
         state.includeBackground = (e.target as HTMLInputElement).checked;

diff --git a/frontend/src/ts/modals/streak-hour-offset.ts b/frontend/src/ts/modals/streak-hour-offset.ts
@@ -100,7 +100,7 @@ async function apply(): Promise<void> {
 
 const modal = new AnimatedModal({
   dialogId: "streakHourOffsetModal",
-  setup: (modalEl): void => {
+  setup: async (modalEl): Promise<void> => {
     modalEl.querySelector("input")?.addEventListener("input", () => {
       updatePreview();
     });

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

diff --git a/frontend/src/ts/popups/simple-popups.ts b/frontend/src/ts/popups/simple-popups.ts
@@ -121,7 +121,7 @@ type SimplePopupOptions = {
 
 const modal = new AnimatedModal({
   dialogId: "simpleModal",
-  setup: (modalEl): void => {
+  setup: async (modalEl): Promise<void> => {
     modalEl.addEventListener("submit", (e) => {
       e.preventDefault();
       activePopup?.exec();

diff --git a/frontend/src/ts/utils/animated-modal.ts b/frontend/src/ts/utils/animated-modal.ts
@@ -43,7 +43,7 @@ type ConstructorParams = {
   showOptionsWhenInChain?: ShowOptions;
   customEscapeHandler?: (e: KeyboardEvent) => void;
   customWrapperClickHandler?: (e: MouseEvent) => void;
-  setup?: (modal: HTMLElement) => void;
+  setup?: (modal: HTMLElement) => Promise<void>;
 };
 
 const DEFAULT_ANIMATION_DURATION = 125;
@@ -63,7 +63,7 @@ export default class AnimatedModal {
 
   private customEscapeHandler: ((e: KeyboardEvent) => void) | undefined;
   private customWrapperClickHandler: ((e: MouseEvent) => void) | undefined;
-  private setup: ((modal: HTMLElement) => void) | undefined;
+  private setup: ((modal: HTMLElement) => Promise<void>) | undefined;
 
   constructor(constructorParams: ConstructorParams) {
     if (constructorParams.dialogId.startsWith("#")) {
@@ -118,7 +118,7 @@ export default class AnimatedModal {
     Skeleton.save(this.dialogId);
   }
 
-  runSetup(): void {
+  async runSetup(): Promise<void> {
     this.wrapperEl.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && isPopupVisible(this.dialogId)) {
         if (this.customEscapeHandler !== undefined) {
@@ -140,7 +140,7 @@ export default class AnimatedModal {
     });
 
     if (this.setup !== undefined) {
-      this.setup(this.modalEl);
+      await this.setup(this.modalEl);
     }
   }
 
@@ -186,7 +186,7 @@ export default class AnimatedModal {
       Skeleton.append(this.dialogId, this.skeletonAppendParent);
 
       if (!this.setupRan) {
-        this.runSetup();
+        await this.runSetup();
         this.setupRan = true;
       }