mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-12-29 11:26:13 +08:00
refactor: remove jquery in modals/custom-text
This commit is contained in:
Francis Eugene Casibu
parent
d31b39f135
commit
fe272d1726
1 changed files with 68 additions and 75 deletions
|
|
@ -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<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();
|
||||
}
|
||||
|
||||
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(`${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<void> {
|
||||
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<HTMLInputElement>("#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<HTMLInputElement>(`#fileInput`)?.setValue("");
|
||||
};
|
||||
reader.onerror = (): void => {
|
||||
Notifications.add("Failed to read file", -1, {
|
||||
|
|
@ -542,7 +535,7 @@ async function setup(modalEl: HTMLElement): Promise<void> {
|
|||
return;
|
||||
}
|
||||
if (e.code === "Enter" && e.ctrlKey) {
|
||||
$(`${popup} .button.apply`).trigger("click");
|
||||
qs(`${popup} .button.apply`)?.dispatch("click");
|
||||
}
|
||||
if (
|
||||
CustomTextState.isCustomTextLong() &&
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue