|
export class ModalManager {
|
|
constructor() {
|
|
this.initPasswordToggles();
|
|
this.initModals();
|
|
this.initConfirmations();
|
|
}
|
|
|
|
initPasswordToggles() {
|
|
document.querySelectorAll(".auth-toggle-pw").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const input = btn.parentElement.querySelector("input");
|
|
if (!input) {
|
|
return;
|
|
}
|
|
const type = input.type === "password" ? "text" : "password";
|
|
input.type = type;
|
|
btn.textContent = type === "password" ? "\u{1F441}" : "\u{1F648}";
|
|
});
|
|
});
|
|
}
|
|
|
|
initModals() {
|
|
document.querySelectorAll("[data-modal]").forEach((trigger) => {
|
|
trigger.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
const modalId = trigger.dataset.modal;
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.add("visible");
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".modal-overlay").forEach((modal) => {
|
|
modal.addEventListener("click", (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.remove("visible");
|
|
}
|
|
});
|
|
modal.querySelectorAll(".modal-close").forEach((closeBtn) => {
|
|
closeBtn.addEventListener("click", () => {
|
|
modal.classList.remove("visible");
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
initConfirmations() {
|
|
document.addEventListener("click", (e) => {
|
|
const el = e.target.closest("[data-confirm]");
|
|
if (!el) return;
|
|
if (el.dataset.confirmed === "1") {
|
|
delete el.dataset.confirmed;
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
const proceed = () => {
|
|
el.dataset.confirmed = "1";
|
|
el.click();
|
|
};
|
|
const dialog = window.app && window.app.dialog;
|
|
if (!dialog) {
|
|
if (confirm(el.dataset.confirm)) proceed();
|
|
return;
|
|
}
|
|
dialog.confirm({
|
|
message: el.dataset.confirm,
|
|
title: el.dataset.confirmTitle || "Please confirm",
|
|
confirmLabel: el.dataset.confirmLabel,
|
|
danger: el.dataset.confirmDanger !== undefined,
|
|
}).then((ok) => {
|
|
if (ok) proceed();
|
|
});
|
|
}, true);
|
|
}
|
|
}
|