From fe272d172692222138acd00edb0c7cc52c0cb0c9 Mon Sep 17 00:00:00 2001 From: Francis Eugene Casibu Date: Thu, 25 Dec 2025 17:51:51 +0800 Subject: [PATCH] refactor: remove jquery in modals/custom-text --- frontend/src/ts/modals/custom-text.ts | 143 ++++++++++++-------------- 1 file changed, 68 insertions(+), 75 deletions(-) diff --git a/frontend/src/ts/modals/custom-text.ts b/frontend/src/ts/modals/custom-text.ts index f7f81c772..bb0653a44 100644 --- a/frontend/src/ts/modals/custom-text.ts +++ b/frontend/src/ts/modals/custom-text.ts @@ -13,6 +13,7 @@ import * as SavedTextsPopup from "./saved-texts"; import * as SaveCustomTextPopup from "./save-custom-text"; import AnimatedModal, { ShowOptions } from "../utils/animated-modal"; import { CustomTextMode } from "@monkeytype/schemas/util"; +import { qs, qsa } from "../utils/dom"; const popup = "#customTextModal .modal"; @@ -54,114 +55,106 @@ const state: State = { }; function updateUI(): void { - $(`${popup} .inputs .group[data-id="mode"] button`).removeClass("active"); - $( + qsa(`${popup} .inputs .group[data-id="mode"] button`)?.removeClass("active"); + qs( `${popup} .inputs .group[data-id="mode"] button[value="${state.customTextMode}"]`, - ).addClass("active"); + )?.addClass("active"); - $(`${popup} .inputs .group[data-id="limit"] input.words`).addClass("hidden"); - $(`${popup} .inputs .group[data-id="limit"] input.sections`).addClass( - "hidden", - ); + qs(`${popup} .inputs .group[data-id="limit"] input.words`)?.hide(); + qs(`${popup} .inputs .group[data-id="limit"] input.sections`)?.hide(); - $(`${popup} .inputs .group[data-id="limit"] input.words`).val( - state.customTextLimits.word, - ); - $(`${popup} .inputs .group[data-id="limit"] input.time`).val( - state.customTextLimits.time, - ); - $(`${popup} .inputs .group[data-id="limit"] input.sections`).val( - state.customTextLimits.section, - ); + qs( + `${popup} .inputs .group[data-id="limit"] input.words`, + )?.setValue(state.customTextLimits.word); + qs( + `${popup} .inputs .group[data-id="limit"] input.time`, + )?.setValue(state.customTextLimits.time); + qs( + `${popup} .inputs .group[data-id="limit"] input.sections`, + )?.setValue(state.customTextLimits.section); if (state.customTextLimits.word !== "") { - $(`${popup} .inputs .group[data-id="limit"] input.words`).removeClass( - "hidden", - ); + qs(`${popup} .inputs .group[data-id="limit"] input.words`)?.show(); } if (state.customTextLimits.section !== "") { - $(`${popup} .inputs .group[data-id="limit"] input.sections`).removeClass( - "hidden", - ); + qs(`${popup} .inputs .group[data-id="limit"] input.sections`)?.show(); } if (state.customTextPipeDelimiter) { - $(`${popup} .inputs .group[data-id="limit"] input.sections`).removeClass( - "hidden", - ); - $(`${popup} .inputs .group[data-id="limit"] input.words`).addClass( - "hidden", - ); + qsa(`${popup} .inputs .group[data-id="limit"] input.sections`)?.show(); + qsa(`${popup} .inputs .group[data-id="limit"] input.words`)?.hide(); } else { - $(`${popup} .inputs .group[data-id="limit"] input.words`).removeClass( - "hidden", - ); - $(`${popup} .inputs .group[data-id="limit"] input.sections`).addClass( - "hidden", - ); + qsa(`${popup} .inputs .group[data-id="limit"] input.words`)?.show(); + qsa(`${popup} .inputs .group[data-id="limit"] input.sections`)?.hide(); } if (state.customTextMode === "simple") { - $(`${popup} .inputs .group[data-id="limit"]`).addClass("disabled"); - $(`${popup} .inputs .group[data-id="limit"] input`).val(""); - $(`${popup} .inputs .group[data-id="limit"] input`).prop("disabled", true); + qs(`${popup} .inputs .group[data-id="limit"]`)?.addClass("disabled"); + qsa( + `${popup} .inputs .group[data-id="limit"] input`, + )?.setValue(""); + qsa(`${popup} .inputs .group[data-id="limit"] input`)?.disable(); } else { - $(`${popup} .inputs .group[data-id="limit"]`).removeClass("disabled"); - $(`${popup} .inputs .group[data-id="limit"] input`).prop("disabled", false); + qs(`${popup} .inputs .group[data-id="limit"]`)?.removeClass("disabled"); + qsa(`${popup} .inputs .group[data-id="limit"] input`)?.enable(); } - $(`${popup} .inputs .group[data-id="fancy"] button`).removeClass("active"); - $( + qsa(`${popup} .inputs .group[data-id="fancy"] button`)?.removeClass("active"); + qs( `${popup} .inputs .group[data-id="fancy"] button[value="${state.removeFancyTypographyEnabled}"]`, - ).addClass("active"); + )?.addClass("active"); - $(`${popup} .inputs .group[data-id="control"] button`).removeClass("active"); - $( + qsa(`${popup} .inputs .group[data-id="control"] button`)?.removeClass( + "active", + ); + qs( `${popup} .inputs .group[data-id="control"] button[value="${state.replaceControlCharactersEnabled}"]`, - ).addClass("active"); + )?.addClass("active"); - $(`${popup} .inputs .group[data-id="zeroWidth"] button`).removeClass( + qsa(`${popup} .inputs .group[data-id="zeroWidth"] button`)?.removeClass( "active", ); - $( + qs( `${popup} .inputs .group[data-id="zeroWidth"] button[value="${state.removeZeroWidthCharactersEnabled}"]`, - ).addClass("active"); + )?.addClass("active"); - $(`${popup} .inputs .group[data-id="delimiter"] button`).removeClass( + qsa(`${popup} .inputs .group[data-id="delimiter"] button`)?.removeClass( "active", ); - $( + qs( `${popup} .inputs .group[data-id="delimiter"] button[value="${state.customTextPipeDelimiter}"]`, - ).addClass("active"); + )?.addClass("active"); - $(`${popup} .inputs .group[data-id="newlines"] button`).removeClass("active"); - $( + qsa(`${popup} .inputs .group[data-id="newlines"] button`)?.removeClass( + "active", + ); + qs( `${popup} .inputs .group[data-id="newlines"] button[value="${state.replaceNewlines}"]`, - ).addClass("active"); + )?.addClass("active"); - $(`${popup} textarea`).val(state.textarea); + qs(`${popup} textarea`)?.setValue(state.textarea); if (state.longCustomTextWarning) { - $(`${popup} .longCustomTextWarning`).removeClass("hidden"); - $(`${popup} .randomWordsCheckbox input`).prop("checked", false); - $(`${popup} .delimiterCheck input`).prop("checked", false); - $(`${popup} .typographyCheck`).prop("checked", true); - $(`${popup} .replaceNewlineWithSpace input`).prop("checked", false); - $(`${popup} .inputs`).addClass("disabled"); + qs(`${popup} .longCustomTextWarning`)?.show(); + qs(`${popup} .randomWordsCheckbox input`)?.removeAttribute("checked"); + qs(`${popup} .delimiterCheck input`)?.removeAttribute("checked"); + qs(`${popup} .typographyCheck`)?.setAttribute("checked", "true"); + qs(`${popup} .replaceNewlineWithSpace input`)?.removeAttribute("checked"); + qs(`${popup} .inputs`)?.addClass("disabled"); } else { - $(`${popup} .longCustomTextWarning`).addClass("hidden"); - $(`${popup} .inputs`).removeClass("disabled"); + qs(`${popup} .longCustomTextWarning`)?.hide(); + qs(`${popup} .inputs`)?.removeClass("disabled"); } if (state.challengeWarning) { - $(`${popup} .challengeWarning`).removeClass("hidden"); - $(`${popup} .randomWordsCheckbox input`).prop("checked", false); - $(`${popup} .delimiterCheck input`).prop("checked", false); - $(`${popup} .typographyCheck`).prop("checked", true); - $(`${popup} .replaceNewlineWithSpace input`).prop("checked", false); - $(`${popup} .inputs`).addClass("disabled"); + qs(`${popup} .challengeWarning`)?.show(); + qs(`${popup} .randomWordsCheckbox input`)?.removeAttribute("checked"); + qs(`${popup} .delimiterCheck input`)?.removeAttribute("checked"); + qs(`${popup} .typographyCheck`)?.setAttribute("checked", "true"); + qs(`${popup} .replaceNewlineWithSpace input`)?.removeAttribute("checked"); + qs(`${popup} .inputs`)?.addClass("disabled"); } else { - $(`${popup} .challengeWarning`).addClass("hidden"); - $(`${popup} .inputs`).removeClass("disabled"); + qs(`${popup} .challengeWarning`)?.hide(); + qs(`${popup} .inputs`)?.removeClass("disabled"); } } @@ -218,7 +211,7 @@ async function beforeAnimation( async function afterAnimation(): Promise { if (!state.challengeWarning && !state.longCustomTextWarning) { - $(`${popup} textarea`).trigger("focus"); + qs(`${popup} textarea`)?.dispatch("focus"); } } @@ -238,7 +231,7 @@ function hide(): void { } function handleFileOpen(): void { - const file = ($(`#fileInput`)[0] as HTMLInputElement).files?.[0]; + const file = qs("#fileInput")?.native.files?.[0]; if (file) { if (file.type !== "text/plain") { Notifications.add("File is not a text file", -1, { @@ -254,7 +247,7 @@ function handleFileOpen(): void { const content = readerEvent.target?.result as string; state.textarea = content; updateUI(); - $(`#fileInput`).val(""); + qs(`#fileInput`)?.setValue(""); }; reader.onerror = (): void => { Notifications.add("Failed to read file", -1, { @@ -542,7 +535,7 @@ async function setup(modalEl: HTMLElement): Promise { return; } if (e.code === "Enter" && e.ctrlKey) { - $(`${popup} .button.apply`).trigger("click"); + qs(`${popup} .button.apply`)?.dispatch("click"); } if ( CustomTextState.isCustomTextLong() &&