Skip to content

Commit 7e0d992

Browse files
Leonabcd123Leonabcd123
authored
refactor: Remove jQuery from event-handlers (@Leonabcd123) (#7311)
Progress towards #7186
1 parent 8c9ca7d commit 7e0d992

File tree

8 files changed

+167
-176
lines changed

8 files changed

+167
-176
lines changed

‎frontend/src/ts/event-handlers/about.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import * as SupportPopup from "../modals/support";
22
import * as ContactModal from "../modals/contact";
3+
import { qs } from "../utils/dom";
34

4-
document
5-
.querySelector("#pageAbout #supportMeAboutButton")
6-
?.addEventListener("click", () => {
7-
SupportPopup.show();
8-
});
5+
qs("#pageAbout #supportMeAboutButton")?.on("click", () => {
6+
SupportPopup.show();
7+
});
98

10-
document
11-
.querySelector("#pageAbout #contactPopupButton2")
12-
?.addEventListener("click", () => {
13-
ContactModal.show();
14-
});
9+
qs("#pageAbout #contactPopupButton2")?.on("click", () => {
10+
ContactModal.show();
11+
});

‎frontend/src/ts/event-handlers/account.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,19 @@ import * as EditResultTagsModal from "../modals/edit-result-tags";
77
import * as AddFilterPresetModal from "../modals/new-filter-preset";
88
import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
99
import { z } from "zod";
10+
import { qs } from "../utils/dom";
1011

11-
const accountPage = document.querySelector("#pageAccount") as HTMLElement;
12+
const accountPage = qs("#pageAccount");
1213

13-
$(accountPage).on("click", ".pbsTime .showAllButton", () => {
14+
accountPage?.onChild("click", ".pbsTime .showAllButton", () => {
1415
PbTablesModal.show("time");
1516
});
1617

17-
$(accountPage).on("click", ".pbsWords .showAllButton", () => {
18+
accountPage?.onChild("click", ".pbsWords .showAllButton", () => {
1819
PbTablesModal.show("words");
1920
});
2021

21-
$(accountPage).on("click", ".editProfileButton", () => {
22+
accountPage?.onChild("click", ".editProfileButton", () => {
2223
if (!isAuthenticated()) {
2324
Notifications.add("You must be logged in to edit your profile", 0);
2425
return;
@@ -40,9 +41,10 @@ $(accountPage).on("click", ".editProfileButton", () => {
4041

4142
const TagsArraySchema = z.array(z.string());
4243

43-
$(accountPage).on("click", ".group.history .resultEditTagsButton", (e) => {
44-
const resultid = $(e.target).attr("data-result-id");
45-
const tags = $(e.target).attr("data-tags");
44+
accountPage?.onChild("click", ".group.history .resultEditTagsButton", (e) => {
45+
const targetButton = e.childTarget as HTMLElement;
46+
const resultid = targetButton?.getAttribute("data-result-id");
47+
const tags = targetButton?.getAttribute("data-tags");
4648

4749
EditResultTagsModal.show(
4850
resultid ?? "",
@@ -51,8 +53,6 @@ $(accountPage).on("click", ".group.history .resultEditTagsButton", (e) => {
5153
);
5254
});
5355

54-
$(accountPage)
55-
.find("button.createFilterPresetBtn")
56-
.on("click", () => {
57-
AddFilterPresetModal.show();
58-
});
56+
accountPage?.qs("button.createFilterPresetBtn")?.on("click", () => {
57+
AddFilterPresetModal.show();
58+
});

‎frontend/src/ts/event-handlers/footer.ts‎

Lines changed: 55 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -9,77 +9,66 @@ import * as VersionHistoryModal from "../modals/version-history";
99
import { envConfig } from "virtual:env-config";
1010
import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
1111
import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
12+
import { qs } from "../utils/dom";
1213

13-
document
14-
.querySelector("footer #commandLineMobileButton")
15-
?.addEventListener("click", async () => {
16-
Commandline.show({
17-
singleListOverride: false,
18-
});
14+
qs("footer #commandLineMobileButton")?.on("click", async () => {
15+
Commandline.show({
16+
singleListOverride: false,
1917
});
18+
});
2019

21-
document
22-
.querySelector("footer #newVersionIndicator")
23-
?.addEventListener("click", (e) => {
24-
e.stopPropagation();
25-
document.querySelector("#newVersionIndicator")?.classList.add("hidden");
26-
});
20+
qs("footer #newVersionIndicator")?.on("click", (e) => {
21+
e.stopPropagation();
22+
qs("#newVersionIndicator")?.hide();
23+
});
2724

28-
document
29-
.querySelector("footer .currentVersion")
30-
?.addEventListener("click", (e) => {
31-
const event = e as MouseEvent;
32-
if (event.shiftKey) {
33-
alert(
34-
JSON.stringify(
35-
{
36-
clientVersion: envConfig.clientVersion,
37-
clientCompatibility: COMPATIBILITY_CHECK,
38-
lastSeenServerCompatibility,
39-
},
40-
null,
41-
2,
42-
),
43-
);
44-
} else {
45-
VersionHistoryModal.show();
46-
}
47-
});
25+
qs("footer .currentVersion")?.on("click", (e) => {
26+
const event = e as MouseEvent;
27+
if (event.shiftKey) {
28+
alert(
29+
JSON.stringify(
30+
{
31+
clientVersion: envConfig.clientVersion,
32+
clientCompatibility: COMPATIBILITY_CHECK,
33+
lastSeenServerCompatibility,
34+
},
35+
null,
36+
2,
37+
),
38+
);
39+
} else {
40+
VersionHistoryModal.show();
41+
}
42+
});
4843

49-
document
50-
.querySelector("footer .right .current-theme")
51-
?.addEventListener("click", async (event) => {
52-
const e = event as MouseEvent;
53-
if (e.shiftKey) {
54-
if (Config.customTheme) {
55-
setConfig("customTheme", false);
56-
return;
57-
}
58-
if (
59-
isAuthenticated() &&
60-
(DB.getSnapshot()?.customThemes?.length ?? 0) < 1
61-
) {
62-
Notifications.add("No custom themes!", 0);
63-
setConfig("customTheme", false);
64-
return;
65-
}
66-
setConfig("customTheme", true);
67-
} else {
68-
const subgroup = Config.customTheme ? "customTheme" : "themes";
69-
Commandline.show({
70-
subgroupOverride: subgroup,
71-
});
44+
qs("footer .right .current-theme")?.on("click", async (event) => {
45+
const e = event as MouseEvent;
46+
if (e.shiftKey) {
47+
if (Config.customTheme) {
48+
setConfig("customTheme", false);
49+
return;
7250
}
73-
});
51+
if (
52+
isAuthenticated() &&
53+
(DB.getSnapshot()?.customThemes?.length ?? 0) < 1
54+
) {
55+
Notifications.add("No custom themes!", 0);
56+
setConfig("customTheme", false);
57+
return;
58+
}
59+
setConfig("customTheme", true);
60+
} else {
61+
const subgroup = Config.customTheme ? "customTheme" : "themes";
62+
Commandline.show({
63+
subgroupOverride: subgroup,
64+
});
65+
}
66+
});
7467

75-
document
76-
.querySelector("footer #supportMeButton")
77-
?.addEventListener("click", () => {
78-
SupportPopup.show();
79-
});
68+
qs("footer #supportMeButton")?.on("click", () => {
69+
SupportPopup.show();
70+
});
8071

81-
document
82-
.querySelector("footer #contactPopupButton")
83-
?.addEventListener("click", () => {
84-
ContactModal.show();
85-
});
72+
qs("footer #contactPopupButton")?.on("click", () => {
73+
ContactModal.show();
74+
});

‎frontend/src/ts/event-handlers/keymap.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as Commandline from "../commandline/commandline";
2+
import { qs } from "../utils/dom";
23

3-
$("#keymap").on("click", ".r5 .layoutIndicator", async () => {
4+
qs("#keymap")?.onChild("click", ".r5 .layoutIndicator", async () => {
45
Commandline.show({
56
subgroupOverride: "keymapLayout",
67
});

‎frontend/src/ts/event-handlers/leaderboards.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { showPopup } from "../modals/simple-modals";
2+
import { qs } from "../utils/dom";
23

3-
const lb = document.getElementById("pageLeaderboards");
4+
const lb = qs("#pageLeaderboards");
45

5-
for (const button of lb?.querySelectorAll(
6-
".jumpButtons button[data-action='goToPage']",
7-
) ?? []) {
8-
button?.addEventListener("click", () => {
9-
showPopup("lbGoToPage");
10-
});
11-
}
6+
lb?.qsa(".jumpButtons button[data-action='goToPage']").on("click", () => {
7+
showPopup("lbGoToPage");
8+
});

‎frontend/src/ts/event-handlers/login.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as ForgotPasswordModal from "../modals/forgot-password";
2+
import { qs } from "../utils/dom";
23

3-
const loginPage = document.querySelector("#pageLogin") as HTMLElement;
4+
const loginPage = qs("#pageLogin");
45

5-
$(loginPage).on("click", "#forgotPasswordButton", () => {
6+
loginPage?.onChild("click", "#forgotPasswordButton", () => {
67
ForgotPasswordModal.show();
78
});

‎frontend/src/ts/event-handlers/settings.ts‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,64 @@ import * as EditPresetPopup from "../modals/edit-preset";
44
import * as EditTagPopup from "../modals/edit-tag";
55

66
import * as Notifications from "../elements/notifications";
7+
import { qs } from "../utils/dom";
78

8-
const settingsPage = document.querySelector("#pageSettings");
9+
const settingsPage = qs("#pageSettings");
910

10-
settingsPage
11-
?.querySelector("#shareCustomThemeButton")
12-
?.addEventListener("click", () => {
13-
ShareCustomThemeModal.show();
14-
});
11+
settingsPage?.qs("#shareCustomThemeButton")?.on("click", () => {
12+
ShareCustomThemeModal.show();
13+
});
1514

1615
settingsPage
17-
?.querySelector(".section.updateCookiePreferences .buttons button")
18-
?.addEventListener("click", () => {
16+
?.qs(".section.updateCookiePreferences .buttons button")
17+
?.on("click", () => {
1918
CookiesModal.show(true);
2019
});
2120

22-
settingsPage
23-
?.querySelector(".section.presets")
24-
?.addEventListener("click", (e) => {
25-
const target = e.target as HTMLElement;
26-
if (target.classList.contains("addPresetButton")) {
27-
EditPresetPopup.show("add");
28-
} else if (target.classList.contains("editButton")) {
29-
const presetid = target.parentElement?.getAttribute("data-id");
30-
const name = target.parentElement?.getAttribute("data-display");
31-
if (
32-
presetid === undefined ||
33-
name === undefined ||
34-
presetid === "" ||
35-
name === "" ||
36-
presetid === null ||
37-
name === null
38-
) {
39-
Notifications.add(
40-
"Failed to edit preset: Could not find preset id or name",
41-
-1,
42-
);
43-
return;
44-
}
45-
EditPresetPopup.show("edit", presetid, name);
46-
} else if (target.classList.contains("removeButton")) {
47-
const presetid = target.parentElement?.getAttribute("data-id");
48-
const name = target.parentElement?.getAttribute("data-display");
49-
if (
50-
presetid === undefined ||
51-
name === undefined ||
52-
presetid === "" ||
53-
name === "" ||
54-
presetid === null ||
55-
name === null
56-
) {
57-
Notifications.add(
58-
"Failed to remove preset: Could not find preset id or name",
59-
-1,
60-
);
61-
return;
62-
}
63-
EditPresetPopup.show("remove", presetid, name);
21+
settingsPage?.qs(".section.presets")?.on("click", (e) => {
22+
const target = e.target as HTMLElement;
23+
if (target.classList.contains("addPresetButton")) {
24+
EditPresetPopup.show("add");
25+
} else if (target.classList.contains("editButton")) {
26+
const presetid = target.parentElement?.getAttribute("data-id");
27+
const name = target.parentElement?.getAttribute("data-display");
28+
if (
29+
presetid === undefined ||
30+
name === undefined ||
31+
presetid === "" ||
32+
name === "" ||
33+
presetid === null ||
34+
name === null
35+
) {
36+
Notifications.add(
37+
"Failed to edit preset: Could not find preset id or name",
38+
-1,
39+
);
40+
return;
6441
}
65-
});
42+
EditPresetPopup.show("edit", presetid, name);
43+
} else if (target.classList.contains("removeButton")) {
44+
const presetid = target.parentElement?.getAttribute("data-id");
45+
const name = target.parentElement?.getAttribute("data-display");
46+
if (
47+
presetid === undefined ||
48+
name === undefined ||
49+
presetid === "" ||
50+
name === "" ||
51+
presetid === null ||
52+
name === null
53+
) {
54+
Notifications.add(
55+
"Failed to remove preset: Could not find preset id or name",
56+
-1,
57+
);
58+
return;
59+
}
60+
EditPresetPopup.show("remove", presetid, name);
61+
}
62+
});
6663

67-
settingsPage?.querySelector(".section.tags")?.addEventListener("click", (e) => {
64+
settingsPage?.qs(".section.tags")?.on("click", (e) => {
6865
const target = e.target as HTMLElement;
6966
if (target.classList.contains("addTagButton")) {
7067
EditTagPopup.show("add");

0 commit comments

Comments
 (0)