Skip to content

Commit 8fb18d6

Browse files
authored
refactor: use dom utils in animated-modal (@Miodec) (#7303)
Refactor
1 parent a7715fd commit 8fb18d6

33 files changed

+566
-604
lines changed

frontend/src/ts/commandline/commandline.ts

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -582,12 +582,12 @@ function handleInputSubmit(): void {
582582
//validation ongoing, ignore the submit
583583
return;
584584
} else if (inputModeParams.validation?.status === "failed") {
585-
modal.getModal().classList.add("hasError");
585+
modal.getModal().addClass("hasError");
586586
if (shakeTimeout !== null) {
587587
clearTimeout(shakeTimeout);
588588
}
589589
shakeTimeout = setTimeout(() => {
590-
modal.getModal().classList.remove("hasError");
590+
modal.getModal().removeClass("hasError");
591591
}, 500);
592592
return;
593593
}
@@ -739,45 +739,39 @@ async function decrementActiveIndex(): Promise<void> {
739739
}
740740

741741
function showWarning(message: string): void {
742-
const warningEl = modal.getModal().querySelector<HTMLElement>(".warning");
743-
const warningTextEl = modal
744-
.getModal()
745-
.querySelector<HTMLElement>(".warning .text");
742+
const warningEl = modal.getModal().qs(".warning");
743+
const warningTextEl = modal.getModal().qs(".warning .text");
746744
if (warningEl === null || warningTextEl === null) {
747745
throw new Error("Commandline warning element not found");
748746
}
749-
warningEl.classList.remove("hidden");
750-
warningTextEl.textContent = message;
747+
warningEl.show();
748+
warningTextEl.setText(message);
751749
}
752750

753751
const showCheckingIcon = debounce(200, async () => {
754-
const checkingiconEl = modal
755-
.getModal()
756-
.querySelector<HTMLElement>(".checkingicon");
752+
const checkingiconEl = modal.getModal().qs(".checkingicon");
757753
if (checkingiconEl === null) {
758754
throw new Error("Commandline checking icon element not found");
759755
}
760-
checkingiconEl.classList.remove("hidden");
756+
checkingiconEl.show();
761757
});
762758

763759
function hideCheckingIcon(): void {
764760
showCheckingIcon.cancel({ upcomingOnly: true });
765761

766-
const checkingiconEl = modal
767-
.getModal()
768-
.querySelector<HTMLElement>(".checkingicon");
762+
const checkingiconEl = modal.getModal().qs(".checkingicon");
769763
if (checkingiconEl === null) {
770764
throw new Error("Commandline checking icon element not found");
771765
}
772-
checkingiconEl.classList.add("hidden");
766+
checkingiconEl.hide();
773767
}
774768

775769
function hideWarning(): void {
776-
const warningEl = modal.getModal().querySelector<HTMLElement>(".warning");
770+
const warningEl = modal.getModal().qs(".warning");
777771
if (warningEl === null) {
778772
throw new Error("Commandline warning element not found");
779773
}
780-
warningEl.classList.add("hidden");
774+
warningEl.hide();
781775
}
782776

783777
function updateValidationResult(
@@ -829,9 +823,9 @@ const modal = new AnimatedModal({
829823
focusFirstInput: true,
830824
},
831825
setup: async (modalEl): Promise<void> => {
832-
const input = modalEl.querySelector("input") as HTMLInputElement;
826+
const input = modalEl.qsr("input");
833827

834-
input.addEventListener(
828+
input.on(
835829
"input",
836830
debounce(50, async (e) => {
837831
inputValue = ((e as InputEvent).target as HTMLInputElement).value;
@@ -851,7 +845,7 @@ const modal = new AnimatedModal({
851845
}),
852846
);
853847

854-
input.addEventListener("keydown", async (e) => {
848+
input.on("keydown", async (e) => {
855849
mouseMode = false;
856850
if (
857851
e.key === "ArrowUp" ||
@@ -907,7 +901,7 @@ const modal = new AnimatedModal({
907901
}
908902
});
909903

910-
input.addEventListener("input", async (e) => {
904+
input.on("input", async (e) => {
911905
if (
912906
inputModeParams === null ||
913907
inputModeParams.command === null ||
@@ -926,7 +920,7 @@ const modal = new AnimatedModal({
926920
await handler(e);
927921
});
928922

929-
modalEl.addEventListener("mousemove", (_e) => {
923+
modalEl.on("mousemove", (_e) => {
930924
mouseMode = true;
931925
});
932926

frontend/src/ts/modals/cookies.ts

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,21 @@ export function show(goToSettings?: boolean): void {
2626
}
2727

2828
function showSettings(currentAcceptedCookies?: AcceptedCookies): void {
29-
modal.getModal().querySelector(".main")?.classList.add("hidden");
30-
modal.getModal().querySelector(".settings")?.classList.remove("hidden");
29+
modal.getModal().qs(".main")?.hide();
30+
modal.getModal().qs(".settings")?.show();
3131

3232
if (currentAcceptedCookies) {
3333
if (currentAcceptedCookies.analytics) {
34-
(
35-
modal
36-
.getModal()
37-
.querySelector(".cookie.analytics input") as HTMLInputElement
38-
).checked = true;
34+
modal
35+
.getModal()
36+
.qs<HTMLInputElement>(".cookie.analytics input")
37+
?.setChecked(true);
3938
}
4039
if (currentAcceptedCookies.sentry) {
41-
(
42-
modal
43-
.getModal()
44-
.querySelector(".cookie.sentry input") as HTMLInputElement
45-
).checked = true;
40+
modal
41+
.getModal()
42+
.qs<HTMLInputElement>(".cookie.sentry input")
43+
?.setChecked(true);
4644
}
4745
}
4846
}
@@ -64,7 +62,7 @@ const modal = new AnimatedModal({
6462
//
6563
},
6664
setup: async (modalEl): Promise<void> => {
67-
modalEl.querySelector(".acceptAll")?.addEventListener("click", () => {
65+
modalEl.qs(".acceptAll")?.on("click", () => {
6866
const accepted = {
6967
security: true,
7068
analytics: true,
@@ -73,7 +71,7 @@ const modal = new AnimatedModal({
7371
setAcceptedCookies(accepted);
7472
void hide();
7573
});
76-
modalEl.querySelector(".rejectAll")?.addEventListener("click", () => {
74+
modalEl.qs(".rejectAll")?.on("click", () => {
7775
const accepted = {
7876
security: true,
7977
analytics: false,
@@ -82,29 +80,27 @@ const modal = new AnimatedModal({
8280
setAcceptedCookies(accepted);
8381
void hide();
8482
});
85-
modalEl.querySelector(".openSettings")?.addEventListener("click", () => {
83+
modalEl.qs(".openSettings")?.on("click", () => {
8684
showSettings();
8785
});
88-
modalEl
89-
.querySelector(".cookie.ads .textButton")
90-
?.addEventListener("click", () => {
91-
try {
92-
AdController.showConsentPopup();
93-
} catch (e) {
94-
console.error("Failed to open ad consent UI");
95-
Notifications.add(
96-
"Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
97-
-1,
98-
);
99-
}
100-
});
101-
modalEl.querySelector(".acceptSelected")?.addEventListener("click", () => {
102-
const analyticsChecked = (
103-
modalEl.querySelector(".cookie.analytics input") as HTMLInputElement
104-
).checked;
105-
const sentryChecked = (
106-
modalEl.querySelector(".cookie.sentry input") as HTMLInputElement
107-
).checked;
86+
modalEl.qs(".cookie.ads .textButton")?.on("click", () => {
87+
try {
88+
AdController.showConsentPopup();
89+
} catch (e) {
90+
console.error("Failed to open ad consent UI");
91+
Notifications.add(
92+
"Failed to open Ad consent popup. Do you have an ad or cookie popup blocker enabled?",
93+
-1,
94+
);
95+
}
96+
});
97+
modalEl.qs(".acceptSelected")?.on("click", () => {
98+
const analyticsChecked =
99+
modalEl.qs<HTMLInputElement>(".cookie.analytics input")?.getChecked() ??
100+
false;
101+
const sentryChecked =
102+
modalEl.qs<HTMLInputElement>(".cookie.sentry input")?.getChecked() ??
103+
false;
108104
const accepted = {
109105
security: true,
110106
analytics: analyticsChecked,

frontend/src/ts/modals/custom-generator.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import AnimatedModal, {
55
HideOptions,
66
ShowOptions,
77
} from "../utils/animated-modal";
8+
import { ElementWithUtils } from "../utils/dom";
89

910
type Preset = {
1011
display: string;
@@ -83,7 +84,7 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
8384
_presetSelect = new SlimSelect({
8485
select: "#customGeneratorModal .presetInput",
8586
settings: {
86-
contentLocation: modalEl,
87+
contentLocation: modalEl.native,
8788
},
8889
});
8990
},
@@ -159,16 +160,16 @@ async function apply(set: boolean): Promise<void> {
159160
});
160161
}
161162

162-
async function setup(modalEl: HTMLElement): Promise<void> {
163-
modalEl.querySelector(".setButton")?.addEventListener("click", () => {
163+
async function setup(modalEl: ElementWithUtils): Promise<void> {
164+
modalEl.qs(".setButton")?.on("click", () => {
164165
void apply(true);
165166
});
166167

167-
modalEl.querySelector(".addButton")?.addEventListener("click", () => {
168+
modalEl.qs(".addButton")?.on("click", () => {
168169
void apply(false);
169170
});
170171

171-
modalEl.querySelector(".generateButton")?.addEventListener("click", () => {
172+
modalEl.qs(".generateButton")?.on("click", () => {
172173
applyPreset();
173174
});
174175
}

frontend/src/ts/modals/custom-test-duration.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as ManualRestart from "../test/manual-restart-tracker";
33
import * as TestLogic from "../test/test-logic";
44
import * as Notifications from "../elements/notifications";
55
import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
6+
import { ElementWithUtils } from "../utils/dom";
67

78
function parseInput(input: string): number {
89
const re = /((-\s*)?\d+(\.\d+)?\s*[hms]?)/g;
@@ -73,8 +74,7 @@ export function show(showOptions?: ShowOptions): void {
7374
...showOptions,
7475
focusFirstInput: "focusAndSelect",
7576
beforeAnimation: async (modalEl) => {
76-
(modalEl.querySelector("input") as HTMLInputElement).value =
77-
`${Config.time}`;
77+
modalEl.qs<HTMLInputElement>("input")?.setValue(`${Config.time}`);
7878
previewDuration();
7979
},
8080
});
@@ -112,12 +112,12 @@ function apply(): void {
112112
hide(true);
113113
}
114114

115-
async function setup(modalEl: HTMLElement): Promise<void> {
116-
modalEl.addEventListener("submit", (e) => {
115+
async function setup(modalEl: ElementWithUtils): Promise<void> {
116+
modalEl.on("submit", (e) => {
117117
e.preventDefault();
118118
apply();
119119
});
120-
modalEl.querySelector("input")?.addEventListener("input", (e) => {
120+
modalEl.qs("input")?.on("input", (e) => {
121121
previewDuration();
122122
});
123123
}

0 commit comments

Comments
 (0)