Split frontend UI into feature modules

2026-02-07 02:07:29 +01:00
parent b16bf8007f
commit 34d274d244
9 changed files with 1153 additions and 1093 deletions
--- a/wwwroot/js/modals-ui.js
+++ b/wwwroot/js/modals-ui.js
@@ -0,0 +1,97 @@
+import { t } from "./i18n.js";
+import { toast } from "./dom.js";
+import { escapeHtml } from "./ui-utils.js";
+
+export function openLightbox(url, title) {
+    const overlay = document.createElement("div");
+    overlay.className = "lightbox";
+    const safeTitle = escapeHtml(title || "");
+    overlay.innerHTML = `
+    <div class="lightbox-content">
+      <button class="lightbox-close" aria-label="${t("lightbox.close")}">✕</button>
+      <img src="${url}" alt="${safeTitle}" />
+      <p>${safeTitle}</p>
+    </div>
+  `;
+    overlay.addEventListener("click", (e) => {
+        if (
+            e.target.classList.contains("lightbox") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
+            overlay.remove();
+        }
+    });
+    document.body.appendChild(overlay);
+}
+
+export function openConfirmModal({ title, body, confirmLabel, cancelLabel = t("modal.cancel"), onConfirm }) {
+    const overlay = document.createElement("div");
+    overlay.className = "edit-modal";
+    const panel = document.createElement("div");
+    panel.className = "edit-panel";
+    panel.innerHTML = `
+      <div class="edit-header">
+        <h3>${title}</h3>
+        <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
+      </div>
+      <div class="edit-body">
+        <p>${body}</p>
+      </div>
+    `;
+    const close = () => overlay.remove();
+    const actions = document.createElement("div");
+    actions.className = "stack horizontal";
+    const confirmBtn = document.createElement("button");
+    confirmBtn.textContent = confirmLabel ?? t("modal.confirm");
+    actions.append(confirmBtn);
+    if (cancelLabel !== null && cancelLabel !== undefined) {
+        const cancelBtn = document.createElement("button");
+        cancelBtn.className = "ghost";
+        cancelBtn.type = "button";
+        cancelBtn.textContent = cancelLabel;
+        actions.append(cancelBtn);
+        cancelBtn.addEventListener("click", close);
+    }
+    panel.querySelector(".edit-body")?.appendChild(actions);
+
+    overlay.addEventListener("click", (e) => {
+        if (
+            e.target.classList.contains("edit-modal") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
+            close();
+        }
+    });
+    confirmBtn.addEventListener("click", async () => {
+        try {
+            await onConfirm?.(close);
+        } catch (err) {
+            toast(err.message, true);
+        }
+    });
+
+    overlay.appendChild(panel);
+    document.body.appendChild(overlay);
+}
+
+export function openResultsRelockModal() {
+    openConfirmModal({
+        title: t("results.relockedTitle"),
+        body: t("results.relockedBody"),
+        confirmLabel: t("results.relockedConfirm"),
+        cancelLabel: null,
+        onConfirm: (close) => close(),
+    });
+}
+
+export function openSuggestionsChangedModal(names) {
+    const uniq = Array.from(new Set(names)).filter(Boolean);
+    if (uniq.length === 0) return;
+    openConfirmModal({
+        title: t("vote.listUpdatedTitle"),
+        body: t("vote.listUpdatedBody", { names: uniq.join(", ") }),
+        confirmLabel: t("vote.listUpdatedConfirm"),
+        cancelLabel: null,
+        onConfirm: (close) => close(),
+    });
+}