monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-13 19:04:06 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: remove jq from simple-modals (@miodec) (#7307)

Browse source 
Also fixes bugs added in #7303
This commit is contained in:
Jack 2026-01-02 20:25:16 +01:00 • committed by Miodec
parent f2879d7a0b
commit e6348ed0b5
1 changed files with 28 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/ts/utils/simple-modal.ts
View file

@ -13,6 +13,8 @@ import {
} from "../elements/input-validation";
import { ElementWithUtils, qsr } from "./dom";
const simpleModalEl = qsr<HTMLDialogElement>("#simpleModal");
type CommonInput<TType, TValue> = {
type: TType;
initVal?: TValue;
@ -163,50 +165,46 @@ export class SimpleModal {
}
init(): void {
const el = $(this.element);
el.find("input").val("");
this.reset();
el.attr("data-popup-id", this.id);
el.find(".title").text(this.title);
this.element.setAttribute("data-popup-id", this.id);
this.element.qs(".title")?.setText(this.title);
if (this.textAllowHtml) {
el.find(".text").html(this.text ?? "");
this.element.qs(".text")?.setHtml(this.text ?? "");
} else {
el.find(".text").text(this.text ?? "");
this.element.qs(".text")?.setText(this.text ?? "");
}
this.initInputs();
if (this.buttonText === "") {
el.find(".submitButton").remove();
this.element.qs(".submitButton")?.remove();
} else {
el.find(".submitButton").text(this.buttonText);
this.element.qs(".submitButton")?.setText(this.buttonText);
this.updateSubmitButtonState();
}
if ((this.text ?? "") === "") {
el.find(".text").addClass("hidden");
this.element.qs(".text")?.hide();
} else {
el.find(".text").removeClass("hidden");
this.element.qs(".text")?.show();
}
}
initInputs(): void {
const el = $(this.element);
const allInputsHidden = this.inputs.every((i) => i.hidden);
if (allInputsHidden || this.inputs.length === 0) {
el.find(".inputs").addClass("hidden");
this.element.qs(".inputs")?.hide();
return;
}
const inputs = el.find(".inputs");
if (this.showLabels) inputs.addClass("withLabel");
const inputsEl = this.element.qs(".inputs");
if (this.showLabels) inputsEl?.addClass("withLabel");
this.inputs.forEach((input, index) => {
const id = `${this.id}_${index}`;
if (this.showLabels && !input.hidden) {
inputs.append(`<label for="${id}">${input.label ?? ""}</label>`);
inputsEl?.appendHtml(`<label for="${id}">${input.label ?? ""}</label>`);
}
const tagname = input.type === "textarea" ? "textarea" : "input";
@ -229,7 +227,7 @@ export class SimpleModal {
}
if (input.type === "textarea") {
inputs.append(
inputsEl?.appendHtml(
buildTag({
tagname,
classes,
@ -253,9 +251,9 @@ export class SimpleModal {
} else {
html = `<div>${html}</div>`;
}
inputs.append(html);
inputsEl?.appendHtml(html);
} else if (input.type === "range") {
inputs.append(`
inputsEl?.appendHtml(`
<div>
${buildTag({
tagname,
@ -317,7 +315,7 @@ export class SimpleModal {
break;
}
}
inputs.append(buildTag({ tagname, classes, attributes }));
inputsEl?.appendHtml(buildTag({ tagname, classes, attributes }));
}
const element = qsr<HTMLInputElement>("#" + attributes["id"]);
@ -358,7 +356,7 @@ export class SimpleModal {
}
});
el.find(".inputs").removeClass("hidden");
this.element.qs(".inputs")?.show();
}
exec(): void {
@ -389,25 +387,23 @@ export class SimpleModal {
});
} else {
this.enableInputs();
$($("#simpleModal").find("input")[0] as HTMLInputElement).trigger(
"focus",
);
simpleModalEl.qsa("input")[0]?.focus();
}
});
}
disableInputs(): void {
$("#simpleModal input").prop("disabled", true);
$("#simpleModal button").prop("disabled", true);
$("#simpleModal textarea").prop("disabled", true);
$("#simpleModal .checkbox").addClass("disabled");
simpleModalEl.qsa("input").disable();
simpleModalEl.qsa("button").disable();
simpleModalEl.qsa("textarea").disable();
simpleModalEl.qsa(".checkbox").addClass("disabled");
}
enableInputs(): void {
$("#simpleModal input").prop("disabled", false);
$("#simpleModal button").prop("disabled", false);
$("#simpleModal textarea").prop("disabled", false);
$("#simpleModal .checkbox").removeClass("disabled");
simpleModalEl.qsa("input").enable();
simpleModalEl.qsa("button").enable();
simpleModalEl.qsa("textarea").enable();
simpleModalEl.qsa(".checkbox").removeClass("disabled");
}
show(parameters: string[] = [], showOptions: ShowOptions): void {