From e440b4533010862fbf9515d4e6c422fffde10a5c Mon Sep 17 00:00:00 2001 From: Kanishk Kundu Date: Mon, 22 Dec 2025 16:44:48 -0500 Subject: [PATCH] minor migrations of isolated components --- .../settings/account-settings-notice.ts | 16 +++++++++------ frontend/src/ts/elements/version-button.ts | 10 ++++------ frontend/src/ts/event-handlers/keymap.ts | 10 ++++++---- frontend/src/ts/event-handlers/login.ts | 6 ++++-- frontend/src/ts/states/connection.ts | 8 +++++--- .../src/ts/test/funbox/memory-funbox-timer.ts | 2 +- frontend/src/ts/test/out-of-focus.ts | 20 +++++++++++-------- frontend/src/ts/test/pb-crown.ts | 17 +++++++++------- 8 files changed, 52 insertions(+), 37 deletions(-) diff --git a/frontend/src/ts/elements/settings/account-settings-notice.ts b/frontend/src/ts/elements/settings/account-settings-notice.ts index e0ee323f5..a4cfdc55d 100644 --- a/frontend/src/ts/elements/settings/account-settings-notice.ts +++ b/frontend/src/ts/elements/settings/account-settings-notice.ts @@ -8,12 +8,16 @@ const ls = new LocalStorageWithSchema({ fallback: false, }); +const noticeSelector = ".pageSettings .accountSettingsNotice"; + if (ls.get()) { - $(".pageSettings .accountSettingsNotice").remove(); + document.querySelector(noticeSelector)?.remove(); } -$(".pageSettings .accountSettingsNotice .dismissAndGo").on("click", () => { - ls.set(true); - void navigate("/account-settings"); - $(".pageSettings .accountSettingsNotice").remove(); -}); +document + .querySelector(`${noticeSelector} .dismissAndGo`) + ?.addEventListener("click", () => { + ls.set(true); + void navigate("/account-settings"); + document.querySelector(noticeSelector)?.remove(); + }); diff --git a/frontend/src/ts/elements/version-button.ts b/frontend/src/ts/elements/version-button.ts index 752758ff5..4372516cf 100644 --- a/frontend/src/ts/elements/version-button.ts +++ b/frontend/src/ts/elements/version-button.ts @@ -2,15 +2,13 @@ import { isDevEnvironment } from "../utils/misc"; import * as Version from "../states/version"; function setText(text: string): void { - $("footer .currentVersion .text").text(text); + const el = document.querySelector("footer .currentVersion .text"); + if (el) el.textContent = text; } function setIndicatorVisible(state: boolean): void { - if (state) { - $("#newVersionIndicator").removeClass("hidden"); - } else { - $("#newVersionIndicator").addClass("hidden"); - } + const indicator = document.getElementById("newVersionIndicator"); + indicator?.classList.toggle("hidden", !state); } export async function update(): Promise { diff --git a/frontend/src/ts/event-handlers/keymap.ts b/frontend/src/ts/event-handlers/keymap.ts index 807ea0552..c4a275d34 100644 --- a/frontend/src/ts/event-handlers/keymap.ts +++ b/frontend/src/ts/event-handlers/keymap.ts @@ -1,7 +1,9 @@ import * as Commandline from "../commandline/commandline"; -$("#keymap").on("click", ".r5 .layoutIndicator", async () => { - Commandline.show({ - subgroupOverride: "keymapLayouts", - }); +document.getElementById("keymap")?.addEventListener("click", (e) => { + if ((e.target as Element).closest(".r5 .layoutIndicator")) { + Commandline.show({ + subgroupOverride: "keymapLayouts", + }); + } }); diff --git a/frontend/src/ts/event-handlers/login.ts b/frontend/src/ts/event-handlers/login.ts index 092691a61..d47109042 100644 --- a/frontend/src/ts/event-handlers/login.ts +++ b/frontend/src/ts/event-handlers/login.ts @@ -2,6 +2,8 @@ import * as ForgotPasswordModal from "../modals/forgot-password"; const loginPage = document.querySelector("#pageLogin") as HTMLElement; -$(loginPage).on("click", "#forgotPasswordButton", () => { - ForgotPasswordModal.show(); +loginPage?.addEventListener("click", (e) => { + if ((e.target as Element).closest("#forgotPasswordButton")) { + ForgotPasswordModal.show(); + } }); diff --git a/frontend/src/ts/states/connection.ts b/frontend/src/ts/states/connection.ts index b9f032729..343af45c0 100644 --- a/frontend/src/ts/states/connection.ts +++ b/frontend/src/ts/states/connection.ts @@ -33,9 +33,11 @@ const throttledHandleState = debounce(5000, () => { Notifications.add("You're back online", 1, { customTitle: "Connection", }); - $( - `#bannerCenter .psa.notice[id="${noInternetBannerId}"] .closeButton`, - ).trigger("click"); + document + .querySelector( + `#bannerCenter .psa.notice[id="${noInternetBannerId}"] .closeButton`, + ) + ?.dispatchEvent(new MouseEvent("click", { bubbles: true })); } bannerAlreadyClosed = false; } else if (!TestState.isActive) { diff --git a/frontend/src/ts/test/funbox/memory-funbox-timer.ts b/frontend/src/ts/test/funbox/memory-funbox-timer.ts index e5dba6f4a..59a1a5a15 100644 --- a/frontend/src/ts/test/funbox/memory-funbox-timer.ts +++ b/frontend/src/ts/test/funbox/memory-funbox-timer.ts @@ -42,7 +42,7 @@ export function start(time: number): void { memoryTimer === 0 ? hide() : update(memoryTimer); if (memoryTimer <= 0) { reset(); - $("#wordsWrapper").addClass("hidden"); + document.getElementById("wordsWrapper")?.classList.add("hidden"); } }, 1000); } diff --git a/frontend/src/ts/test/out-of-focus.ts b/frontend/src/ts/test/out-of-focus.ts index 5a9050583..b4e38abe2 100644 --- a/frontend/src/ts/test/out-of-focus.ts +++ b/frontend/src/ts/test/out-of-focus.ts @@ -3,11 +3,14 @@ import Config from "../config"; const outOfFocusTimeouts: (number | NodeJS.Timeout)[] = []; +const blurTargets = "#words, #compositionDisplay"; + export function hide(): void { - $("#words, #compositionDisplay") - .css("transition", "none") - .removeClass("blurred"); - $(".outOfFocusWarning").addClass("hidden"); + document.querySelectorAll(blurTargets).forEach((el) => { + (el as HTMLElement).style.transition = "none"; + el.classList.remove("blurred"); + }); + document.querySelector(".outOfFocusWarning")?.classList.add("hidden"); Misc.clearTimeouts(outOfFocusTimeouts); } @@ -15,10 +18,11 @@ export function show(): void { if (!Config.showOutOfFocusWarning) return; outOfFocusTimeouts.push( setTimeout(() => { - $("#words, #compositionDisplay") - .css("transition", "0.25s") - .addClass("blurred"); - $(".outOfFocusWarning").removeClass("hidden"); + document.querySelectorAll(blurTargets).forEach((el) => { + (el as HTMLElement).style.transition = "0.25s"; + el.classList.add("blurred"); + }); + document.querySelector(".outOfFocusWarning")?.classList.remove("hidden"); }, 1000), ); } diff --git a/frontend/src/ts/test/pb-crown.ts b/frontend/src/ts/test/pb-crown.ts index 5eefc560b..5d646f7d5 100644 --- a/frontend/src/ts/test/pb-crown.ts +++ b/frontend/src/ts/test/pb-crown.ts @@ -3,7 +3,11 @@ import { applyReducedMotion } from "../utils/misc"; export function hide(): void { visible = false; - $("#result .stats .wpm .crown").css("opacity", 0).addClass("hidden"); + const crown = document.querySelector("#result .stats .wpm .crown") as HTMLElement | null; + if (crown) { + crown.style.opacity = "0"; + crown.classList.add("hidden"); + } } export type CrownType = @@ -38,10 +42,9 @@ export function show(): void { export function update(type: CrownType): void { currentType = type; - const el = $("#result .stats .wpm .crown"); - el.removeClass("ineligible"); - el.removeClass("pending"); - el.removeClass("error"); - el.removeClass("warning"); - el.addClass(type); + const crown = document.querySelector("#result .stats .wpm .crown"); + if (crown) { + crown.classList.remove("ineligible", "pending", "error", "warning"); + crown.classList.add(type); + } }