From a8a78eca6a402687a8164f10dbf9124a16bffbfa Mon Sep 17 00:00:00 2001 From: Miodec Date: Sun, 24 Mar 2024 18:10:03 +0100 Subject: [PATCH] refactor(animated modal): make setup async !nuf --- frontend/src/ts/commandline/commandline.ts | 6 +++--- frontend/src/ts/elements/alerts.ts | 2 +- frontend/src/ts/modals/custom-test-duration.ts | 2 +- frontend/src/ts/modals/custom-word-amount.ts | 2 +- frontend/src/ts/modals/edit-preset.ts | 2 +- frontend/src/ts/modals/edit-profile.ts | 2 +- frontend/src/ts/modals/edit-result-tags.ts | 2 +- frontend/src/ts/modals/edit-tag.ts | 2 +- frontend/src/ts/modals/google-sign-up.ts | 2 +- frontend/src/ts/modals/mobile-test-config.ts | 2 +- frontend/src/ts/modals/new-filter-preset.ts | 2 +- frontend/src/ts/modals/quote-approve.ts | 2 +- frontend/src/ts/modals/quote-rate.ts | 2 +- frontend/src/ts/modals/quote-report.ts | 2 +- frontend/src/ts/modals/quote-search.ts | 2 +- frontend/src/ts/modals/quote-submit.ts | 2 +- frontend/src/ts/modals/share-custom-theme.ts | 6 +++--- frontend/src/ts/modals/streak-hour-offset.ts | 2 +- frontend/src/ts/modals/support.ts | 2 +- frontend/src/ts/popups/simple-popups.ts | 2 +- frontend/src/ts/utils/animated-modal.ts | 10 +++++----- 21 files changed, 29 insertions(+), 29 deletions(-) diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts index e1fd0a1966b6..289ae5a76d69 100644 --- 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 => { + 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 index 3df36e751f41..1b5ede4de124 100644 --- 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 => { $("#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 index 4a5b2e329c91..4f44a94f53c4 100644 --- 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 { 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 index be8b15c2b0d4..e325ed6b43c8 100644 --- 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 => { 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 index 8b5b447b3a45..c18fcc00f1b0 100644 --- a/frontend/src/ts/modals/edit-preset.ts +++ b/frontend/src/ts/modals/edit-preset.ts @@ -153,7 +153,7 @@ async function apply(): Promise { const modal = new AnimatedModal({ dialogId: "editPresetModal", - setup: (modalEl): void => { + setup: async (modalEl): Promise => { 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 index 8f9be0b9acbd..dfa73adf0a2b 100644 --- a/frontend/src/ts/modals/edit-profile.ts +++ b/frontend/src/ts/modals/edit-profile.ts @@ -165,7 +165,7 @@ async function updateProfile(): Promise { const modal = new AnimatedModal({ dialogId: "editProfileModal", - setup: (modalEl): void => { + setup: async (modalEl): Promise => { 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 index b77245bc3f25..bad868318e46 100644 --- 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 { const modal = new AnimatedModal({ dialogId: "editResultTagsModal", - setup: (modalEl): void => { + setup: async (modalEl): Promise => { 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 index 2a9712d71ebe..b5ec99e8053e 100644 --- a/frontend/src/ts/modals/edit-tag.ts +++ b/frontend/src/ts/modals/edit-tag.ts @@ -170,7 +170,7 @@ async function apply(): Promise { const modal = new AnimatedModal({ dialogId: "editTagModal", - setup: (modalEl): void => { + setup: async (modalEl): Promise => { 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 index 5265daa0e452..fe759e985bb8 100644 --- 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 { 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 index dfe3c4a18688..119fa59e35c0 100644 --- 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 { 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 index 151c5879552a..9c91272bae86 100644 --- 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 { 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 index 51259c98dcaf..5a2481b7c3a5 100644 --- 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 { updateList(); } -function setup(modalEl: HTMLElement): void { +async function setup(modalEl: HTMLElement): Promise { 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 index 11a2f73d854d..192609e17231 100644 --- a/frontend/src/ts/modals/quote-rate.ts +++ b/frontend/src/ts/modals/quote-rate.ts @@ -197,7 +197,7 @@ async function submit(): Promise { $(".pageTest #result #rateQuoteButton .icon").addClass("fas"); } -function setup(modalEl: HTMLElement): void { +async function setup(modalEl: HTMLElement): Promise { 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 index 124ca8acdab0..277ef857015d 100644 --- 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 hide(true); } -function setup(modalEl: HTMLElement): void { +async function setup(modalEl: HTMLElement): Promise { 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 index c02b24d5b932..2b5f617c554e 100644 --- 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 { } } -function setup(modalEl: HTMLElement): void { +async function setup(modalEl: HTMLElement): Promise { 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 index 8740c9401169..dcdeb2ea5926 100644 --- 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 { 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 index c0cd27935a6d..13d95d7f7051 100644 --- 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 { const modal = new AnimatedModal({ dialogId: "shareCustomThemeModal", - setup: (modal): void => { - modal.querySelector("button")?.addEventListener("click", copy); - modal + setup: async (modalEl): Promise => { + 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 index 849864019619..bd01854f0b9b 100644 --- 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 { const modal = new AnimatedModal({ dialogId: "streakHourOffsetModal", - setup: (modalEl): void => { + setup: async (modalEl): Promise => { modalEl.querySelector("input")?.addEventListener("input", () => { updatePreview(); }); diff --git a/frontend/src/ts/modals/support.ts b/frontend/src/ts/modals/support.ts index 4eb410f42327..f1ad83315abd 100644 --- 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 => { 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 index 45350f11ba61..67eb08baefc1 100644 --- 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 => { 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 index de5a8246bd65..48b16c4181e6 100644 --- 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; }; 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) | 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 { 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; }