monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-26 15:54:35 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr(animated modal): add setup function which only runs once

Browse source 
used for setting up event handlers - that way the event handlers can be loaded at any time
also connected constructor functions into an object
This commit is contained in:
Miodec 2024-03-03 19:32:33 +01:00
parent 5431ab97af
commit b9092bf362
2 changed files with 81 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
frontend/src/ts/elements/alerts.ts
View file

@ -369,48 +369,10 @@ function updateClaimDeleteAllButton(): void {
}
}
$("#alertsPopup .accountAlerts").on("click", ".claimAll", () => {
for (const ie of accountAlerts) {
if (!ie.read && !mailToMarkRead.includes(ie.id)) {
markReadAlert(ie.id);
}
}
});
$("#alertsPopup .accountAlerts").on("click", ".deleteAll", () => {
for (const ie of accountAlerts) {
if (!mailToDelete.includes(ie.id)) {
deleteAlert(ie.id);
}
}
});
$("header nav .showAlerts").on("click", () => {
void show();
});
$("#alertsPopup .mobileClose").on("click", () => {
hide();
});
$("#alertsPopup .accountAlerts .list").on(
"click",
".item .buttons .deleteAlert",
(e) => {
const id = $(e.currentTarget).closest(".item").attr("data-id") as string;
deleteAlert(id);
}
);
$("#alertsPopup .accountAlerts .list").on(
"click",
".item .buttons .markReadAlert",
(e) => {
const id = $(e.currentTarget).closest(".item").attr("data-id") as string;
markReadAlert(id);
}
);
NotificationEvent.subscribe((message, level, customTitle) => {
state.notifications.push({
message,
@ -448,10 +410,55 @@ const modal = new AnimatedModal(
},
},
},
() => {
hide();
},
() => {
hide();
{
customEscapeHandler: (): void => {
hide();
},
customWrapperClickHandler: (): void => {
hide();
},
setup: (): void => {
$("#alertsPopup .accountAlerts").on("click", ".claimAll", () => {
for (const ie of accountAlerts) {
if (!ie.read && !mailToMarkRead.includes(ie.id)) {
markReadAlert(ie.id);
}
}
});
$("#alertsPopup .accountAlerts").on("click", ".deleteAll", () => {
for (const ie of accountAlerts) {
if (!mailToDelete.includes(ie.id)) {
deleteAlert(ie.id);
}
}
});
$("#alertsPopup .mobileClose").on("click", () => {
hide();
});
$("#alertsPopup .accountAlerts .list").on(
"click",
".item .buttons .deleteAlert",
(e) => {
const id = $(e.currentTarget)
.closest(".item")
.attr("data-id") as string;
deleteAlert(id);
}
);
$("#alertsPopup .accountAlerts .list").on(
"click",
".item .buttons .markReadAlert",
(e) => {
const id = $(e.currentTarget)
.closest(".item")
.attr("data-id") as string;
markReadAlert(id);
}
);
},
}
);

38
frontend/src/ts/popups/animated-modal.ts
View file

@ -32,14 +32,22 @@ export default class AnimatedModal {
private modalEl: HTMLElement;
private wrapperId: string;
private open = false;
private setupRan = false;
private customShowAnimations: CustomWrapperAndModalAnimations | undefined;
private customHideAnimations: CustomWrapperAndModalAnimations | undefined;
private customEscapeHandler: ((e: KeyboardEvent) => void) | undefined;
private customWrapperClickHandler: ((e: MouseEvent) => void) | undefined;
private setup: ((modal: HTMLElement) => void) | undefined;
constructor(
wrapperId: string,
customAnimations?: ConstructorCustomAnimations,
customEscapeHandler?: (e: KeyboardEvent) => void,
customWrapperClickHandler?: (e: MouseEvent) => void
functions?: {
customEscapeHandler?: (e: KeyboardEvent) => void;
customWrapperClickHandler?: (e: MouseEvent) => void;
setup?: (modal: HTMLElement) => void;
}
) {
if (wrapperId.startsWith("#")) {
wrapperId = wrapperId.slice(1);
@ -74,10 +82,18 @@ export default class AnimatedModal {
this.customShowAnimations = customAnimations?.show;
this.customHideAnimations = customAnimations?.hide;
this.customEscapeHandler = functions?.customEscapeHandler;
this.customWrapperClickHandler = functions?.customWrapperClickHandler;
this.setup = functions?.setup;
Skeleton.save(this.wrapperId);
}
runSetup(): void {
this.wrapperEl.addEventListener("keydown", (e) => {
if (e.key === "Escape" && isPopupVisible(this.wrapperId)) {
if (customEscapeHandler) {
customEscapeHandler(e);
if (this.customEscapeHandler !== undefined) {
this.customEscapeHandler(e);
} else {
void this.hide();
}
@ -86,15 +102,17 @@ export default class AnimatedModal {
this.wrapperEl.addEventListener("mousedown", (e) => {
if (e.target === this.wrapperEl) {
if (customWrapperClickHandler) {
customWrapperClickHandler(e);
if (this.customWrapperClickHandler !== undefined) {
this.customWrapperClickHandler(e);
} else {
void this.hide();
}
}
});
Skeleton.save(this.wrapperId);
if (this.setup !== undefined) {
this.setup(this.modalEl);
}
}
getWrapper(): HTMLDialogElement {
@ -113,6 +131,12 @@ export default class AnimatedModal {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve) => {
Skeleton.append(this.wrapperId);
if (!this.setupRan) {
this.runSetup();
this.setupRan = true;
}
if (isPopupVisible(this.wrapperId)) return resolve();
this.open = true;