Skip to content

Commit f2879d7

Browse files
committed
refactor: use dom utils in animated-modal (@Miodec) (#7303)
Refactor
1 parent ee2a7b3 commit f2879d7

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
@@ -595,12 +595,12 @@ function handleInputSubmit(): void {
595595
//validation ongoing, ignore the submit
596596
return;
597597
} else if (inputModeParams.validation?.status === "failed") {
598-
modal.getModal().classList.add("hasError");
598+
modal.getModal().addClass("hasError");
599599
if (shakeTimeout !== null) {
600600
clearTimeout(shakeTimeout);
601601
}
602602
shakeTimeout = setTimeout(() => {
603-
modal.getModal().classList.remove("hasError");
603+
modal.getModal().removeClass("hasError");
604604
}, 500);
605605
return;
606606
}
@@ -752,45 +752,39 @@ async function decrementActiveIndex(): Promise<void> {
752752
}
753753

754754
function showWarning(message: string): void {
755-
const warningEl = modal.getModal().querySelector<HTMLElement>(".warning");
756-
const warningTextEl = modal
757-
.getModal()
758-
.querySelector<HTMLElement>(".warning .text");
755+
const warningEl = modal.getModal().qs(".warning");
756+
const warningTextEl = modal.getModal().qs(".warning .text");
759757
if (warningEl === null || warningTextEl === null) {
760758
throw new Error("Commandline warning element not found");
761759
}
762-
warningEl.classList.remove("hidden");
763-
warningTextEl.textContent = message;
760+
warningEl.show();
761+
warningTextEl.setText(message);
764762
}
765763

766764
const showCheckingIcon = debounce(200, async () => {
767-
const checkingiconEl = modal
768-
.getModal()
769-
.querySelector<HTMLElement>(".checkingicon");
765+
const checkingiconEl = modal.getModal().qs(".checkingicon");
770766
if (checkingiconEl === null) {
771767
throw new Error("Commandline checking icon element not found");
772768
}
773-
checkingiconEl.classList.remove("hidden");
769+
checkingiconEl.show();
774770
});
775771

776772
function hideCheckingIcon(): void {
777773
showCheckingIcon.cancel({ upcomingOnly: true });
778774

779-
const checkingiconEl = modal
780-
.getModal()
781-
.querySelector<HTMLElement>(".checkingicon");
775+
const checkingiconEl = modal.getModal().qs(".checkingicon");
782776
if (checkingiconEl === null) {
783777
throw new Error("Commandline checking icon element not found");
784778
}
785-
checkingiconEl.classList.add("hidden");
779+
checkingiconEl.hide();
786780
}
787781

788782
function hideWarning(): void {
789-
const warningEl = modal.getModal().querySelector<HTMLElement>(".warning");
783+
const warningEl = modal.getModal().qs(".warning");
790784
if (warningEl === null) {
791785
throw new Error("Commandline warning element not found");
792786
}
793-
warningEl.classList.add("hidden");
787+
warningEl.hide();
794788
}
795789

796790
function updateValidationResult(
@@ -842,9 +836,9 @@ const modal = new AnimatedModal({
842836
focusFirstInput: true,
843837
},
844838
setup: async (modalEl): Promise<void> => {
845-
const input = modalEl.querySelector("input") as HTMLInputElement;
839+
const input = modalEl.qsr("input");
846840

847-
input.addEventListener(
841+
input.on(
848842
"input",
849843
debounce(50, async (e) => {
850844
inputValue = ((e as InputEvent).target as HTMLInputElement).value;
@@ -864,7 +858,7 @@ const modal = new AnimatedModal({
864858
}),
865859
);
866860

867-
input.addEventListener("keydown", async (e) => {
861+
input.on("keydown", async (e) => {
868862
mouseMode = false;
869863
if (
870864
e.key === "ArrowUp" ||
@@ -920,7 +914,7 @@ const modal = new AnimatedModal({
920914
}
921915
});
922916

923-
input.addEventListener("input", async (e) => {
917+
input.on("input", async (e) => {
924918
if (
925919
inputModeParams === null ||
926920
inputModeParams.command === null ||
@@ -939,7 +933,7 @@ const modal = new AnimatedModal({
939933
await handler(e);
940934
});
941935

942-
modalEl.addEventListener("mousemove", (_e) => {
936+
modalEl.on("mousemove", (_e) => {
943937
mouseMode = true;
944938
});
945939

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)