Skip to content

refactor(modals): remove jquery in ts/modals (@fcasibu) #7292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fcasibu wants to merge 30 commits into
base: master
Choose a base branch
from
+568 −447
Open

refactor(modals): remove jquery in ts/modals (@fcasibu) #7292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
4efae15
refactor: remove jquery in modals/custom-generator
fcasibu Dec 25, 2025
8e83998
refactor: remove jquery in modals/custom-test-duration
fcasibu Dec 25, 2025
dcd8755
feat(dom): add setValue method in ElementsWithUtils
fcasibu Dec 25, 2025
b4550fb
refactor: remove jquery in modals/custom-text
fcasibu Dec 25, 2025
6011955
refactor: remove jquery in modals/dev-options
fcasibu Dec 25, 2025
326531d
refactor: remove jquery in modals/edit-preset
fcasibu Dec 25, 2025
57f71f9
refactor: remove jquery in modals/edit-profile
fcasibu Dec 25, 2025
b4fa61d
refactor: remove jquery in modals/edit-result-tags
fcasibu Dec 25, 2025
f4629c7
refactor: remove jquery in modals/google-sign-up
fcasibu Dec 25, 2025
dfd13a4
refactor: remove jquery in modals/last-signout-result
fcasibu Dec 25, 2025
2e0ee98
refactor: remove jquery in modals/mobile-test-config
fcasibu Dec 25, 2025
3f89b9a
refactor: remove jquery in modals/practice-words
fcasibu Dec 25, 2025
e0078f3
refactor: remove jquery in modals/quote-approve
fcasibu Dec 26, 2025
f850bd5
refactor: remove jquery in modals/quote-rate
fcasibu Dec 26, 2025
e3cfa82
feat(dom): add force argument to toggleClass
fcasibu Dec 26, 2025
9487160
refactor: remove jquery in modals/quote-report
fcasibu Dec 26, 2025
bbe3c24
refactor: remove jquery in modals/quote-search
fcasibu Dec 26, 2025
1c51556
refactor: remove jquery in modals/quote-submit
fcasibu Dec 26, 2025
4c9d998
refactor: remove jquery in modals/save-custom-text
fcasibu Dec 26, 2025
06521f2
refactor: remove jquery in modals/saved-texts
fcasibu Dec 26, 2025
00c2dbc
refactor: remove jquery in modals/share-custom-theme
fcasibu Dec 26, 2025
0ce3d5c
refactor: remove jquery in modals/share-test-settings
fcasibu Dec 26, 2025
ee11e16
refactor: remove jquery in modals/simple-modals
fcasibu Dec 26, 2025
2360d5c
refactor: remove jquery in modals/user-report
fcasibu Dec 26, 2025
3f58ffd
refactor: remove jquery in modals/version-history
fcasibu Dec 26, 2025
937446c
refactor: remove jquery in modals/word-filter
fcasibu Dec 26, 2025
d3924c0
Merge branch 'master' into pr/fcasibu/7292
Miodec Jan 5, 2026
48e1140
Merge branch 'master' into refactor/ts-modals-remove-jquery
Miodec Jan 5, 2026
07ef285
setchecked
Miodec Jan 5, 2026
11c53d9
focus
Miodec Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions frontend/src/ts/modals/custom-generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import AnimatedModal, {
HideOptions,
ShowOptions,
} from "../utils/animated-modal";
import { ElementWithUtils } from "../utils/dom";
import { qs, qsr, ElementWithUtils } from "../utils/dom";

type Preset = {
display: string;
Expand Down Expand Up @@ -92,10 +92,15 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
}

function applyPreset(): void {
const presetName = $("#customGeneratorModal .presetInput").val() as string;
const presetName = qs<HTMLSelectElement>(
"#customGeneratorModal .presetInput",
)?.getValue();

if (presetName !== undefined && presetName !== "" && presets[presetName]) {
const preset = presets[presetName];
$("#customGeneratorModal .characterInput").val(preset.characters.join(" "));
qsr<HTMLInputElement>("#customGeneratorModal .characterInput").setValue(
preset.characters.join(" "),
);
}
}

Expand All @@ -106,17 +111,30 @@ function hide(hideOptions?: HideOptions<OutgoingData>): void {
}

function generateWords(): string[] {
const characterInput = $(
const characterInput = qs<HTMLInputElement>(
"#customGeneratorModal .characterInput",
).val() as string;
)?.getValue();

const minLength =
parseInt($("#customGeneratorModal .minLengthInput").val() as string) || 2;
parseInt(
qs<HTMLInputElement>(
"#customGeneratorModal .minLengthInput",
)?.getValue() as string,
) || 2;
const maxLength =
parseInt($("#customGeneratorModal .maxLengthInput").val() as string) || 5;
parseInt(
qs<HTMLInputElement>(
"#customGeneratorModal .maxLengthInput",
)?.getValue() as string,
) || 5;
const wordCount =
parseInt($("#customGeneratorModal .wordCountInput").val() as string) || 100;
parseInt(
qs<HTMLInputElement>(
"#customGeneratorModal .wordCountInput",
)?.getValue() as string,
) || 100;

if (!characterInput || characterInput.trim() === "") {
if (characterInput === undefined || characterInput.trim() === "") {
Notifications.add("Character set cannot be empty", 0);
return [];
}
Expand Down
14 changes: 10 additions & 4 deletions frontend/src/ts/modals/custom-test-duration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as ManualRestart from "../test/manual-restart-tracker";
import * as TestLogic from "../test/test-logic";
import * as Notifications from "../elements/notifications";
import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
import { ElementWithUtils } from "../utils/dom";
import { qs, qsr, ElementWithUtils } from "../utils/dom";

function parseInput(input: string): number {
const re = /((-\s*)?\d+(\.\d+)?\s*[hms]?)/g;
Expand Down Expand Up @@ -54,7 +54,9 @@ function format(duration: number): string {
}

function previewDuration(): void {
const input = $("#customTestDurationModal input").val() as string;
const input = qsr<HTMLInputElement>(
"#customTestDurationModal input",
).getValue() as string;
const duration = parseInput(input);
let formattedDuration = "";

Expand All @@ -66,7 +68,7 @@ function previewDuration(): void {
formattedDuration = format(duration);
}

$("#customTestDurationModal .preview").text(formattedDuration);
qs("#customTestDurationModal .preview")?.setText(formattedDuration);
}

export function show(showOptions?: ShowOptions): void {
Expand All @@ -87,7 +89,11 @@ function hide(clearChain = false): void {
}

function apply(): void {
const val = parseInput($("#customTestDurationModal input").val() as string);
const val = parseInput(
qsr<HTMLInputElement>(
"#customTestDurationModal input",
).getValue() as string,
);

if (val !== null && !isNaN(val) && val >= 0 && isFinite(val)) {
setConfig("time", val);
Expand Down
156 changes: 78 additions & 78 deletions frontend/src/ts/modals/custom-text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ElementWithUtils } from "../utils/dom";
import * as CustomText from "../test/custom-text";
import * as CustomTextState from "../states/custom-text-name";
import * as ManualRestart from "../test/manual-restart-tracker";
Expand All @@ -14,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, ElementWithUtils } from "../utils/dom";

const popup = "#customTextModal .modal";

Expand Down Expand Up @@ -55,114 +55,114 @@ 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");

$(`${popup} .inputs .group[data-id="limit"] input.words`).addClass("hidden");
$(`${popup} .inputs .group[data-id="limit"] input.sections`).addClass(
"hidden",
);

$(`${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,
);
)?.addClass("active");

qs(`${popup} .inputs .group[data-id="limit"] input.words`)?.hide();
qs(`${popup} .inputs .group[data-id="limit"] input.sections`)?.hide();

qs<HTMLInputElement>(
`${popup} .inputs .group[data-id="limit"] input.words`,
)?.setValue(state.customTextLimits.word);
qs<HTMLInputElement>(
`${popup} .inputs .group[data-id="limit"] input.time`,
)?.setValue(state.customTextLimits.time);
qs<HTMLInputElement>(
`${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();
Comment on lines +83 to +87
Copy link

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect use of qsa on elements. Lines 83-84 and 86-87 use qsa() which returns multiple elements, but then call show()/hide() directly on the result. Since these selectors likely match multiple elements, this is correct usage. However, the inconsistency with lines 63-64 which use qs() for .group elements should be reviewed - if multiple .section elements exist, qsa should be used consistently.

Copilot uses AI. Check for mistakes.
}

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<HTMLInputElement>(
`${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<HTMLTextAreaElement>(`${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<HTMLInputElement>(`${popup} .randomWordsCheckbox input`)?.setChecked(
false,
);
qs<HTMLInputElement>(`${popup} .delimiterCheck input`)?.setChecked(false);
qs<HTMLInputElement>(`${popup} .typographyCheck`)?.setChecked(true);
qs<HTMLInputElement>(`${popup} .replaceNewlineWithSpace input`)?.setChecked(
false,
);
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<HTMLInputElement>(`${popup} .randomWordsCheckbox input`)?.setChecked(
false,
);
qs<HTMLInputElement>(`${popup} .delimiterCheck input`)?.setChecked(false);
qs<HTMLInputElement>(`${popup} .typographyCheck`)?.setChecked(true);
qs<HTMLInputElement>(`${popup} .replaceNewlineWithSpace input`)?.setChecked(
false,
);
qs(`${popup} .inputs`)?.addClass("disabled");
} else {
$(`${popup} .challengeWarning`).addClass("hidden");
$(`${popup} .inputs`).removeClass("disabled");
qs(`${popup} .challengeWarning`)?.hide();
qs(`${popup} .inputs`)?.removeClass("disabled");
}
}

Expand Down Expand Up @@ -219,7 +219,7 @@ async function beforeAnimation(

async function afterAnimation(): Promise<void> {
if (!state.challengeWarning && !state.longCustomTextWarning) {
$(`${popup} textarea`).trigger("focus");
qs(`${popup} textarea`)?.focus();
}
}

Expand All @@ -239,7 +239,7 @@ function hide(): void {
}

function handleFileOpen(): void {
const file = ($(`#fileInput`)[0] as HTMLInputElement).files?.[0];
const file = qs<HTMLInputElement>("#fileInput")?.native.files?.[0];
if (file) {
if (file.type !== "text/plain") {
Notifications.add("File is not a text file", -1, {
Expand All @@ -255,7 +255,7 @@ function handleFileOpen(): void {
const content = readerEvent.target?.result as string;
state.textarea = content;
updateUI();
$(`#fileInput`).val("");
qs<HTMLInputElement>(`#fileInput`)?.setValue("");
};
reader.onerror = (): void => {
Notifications.add("Failed to read file", -1, {
Expand Down Expand Up @@ -522,7 +522,7 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
return;
}
if (e.code === "Enter" && e.ctrlKey) {
$(`${popup} .button.apply`).trigger("click");
qs(`${popup} .button.apply`)?.dispatch("click");
}
if (
CustomTextState.isCustomTextLong() &&
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/ts/modals/dev-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { toggleUserFakeChartData } from "../test/result";
import { toggleCaretDebug } from "../utils/caret";
import { getInputElement } from "../input/input-element";
import { disableSlowTimerFail } from "../test/test-timer";
import { ElementWithUtils } from "../utils/dom";
import { qsr, ElementWithUtils } from "../utils/dom";

let mediaQueryDebugLevel = 0;

Expand Down Expand Up @@ -102,7 +102,7 @@ const modal = new AnimatedModal({
});

export function appendButton(): void {
$("body").prepend(
qsr("body").prependHtml(
`
<div id="devButtons">
<a class='button configureAPI' href='${envConfig.backendUrl}/configure/' target='_blank' aria-label="Configure API" data-balloon-pos="right"><i class="fas fa-fw fa-server"></i></a>
Expand Down
Loading