Split CSS

2026-07-07 10:42:45 +02:00
parent fc8e5ce3bb
commit dffd25fb47
10 changed files with 278 additions and 278 deletions
@@ -0,0 +1,50 @@
+export function initProgrammeModal() {
+  const modal = document.getElementById("programmeModal");
+
+  if (!modal) {
+    return;
+  }
+
+  const title = document.getElementById("modalTitle");
+  const subtitle = document.getElementById("modalSubtitle");
+  const description = document.getElementById("modalDescription");
+  const category = document.getElementById("modalCategory");
+  const time = document.getElementById("modalTime");
+
+  const openModal = (programmeElement) => {
+    const id = programmeElement.dataset.programmeId;
+    const programme = window.TVGUIDE_PROGRAMMES?.[id];
+
+    if (!programme) {
+      return;
+    }
+
+    title.textContent = programme.title || "";
+    subtitle.textContent = programme.subtitle || "";
+    description.textContent = programme.description || "Keine Beschreibung vorhanden.";
+    category.textContent = programme.category || "";
+    time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`;
+
+    modal.hidden = false;
+    document.body.classList.add("modal-open");
+  };
+
+  const closeModal = () => {
+    modal.hidden = true;
+    document.body.classList.remove("modal-open");
+  };
+
+  document.querySelectorAll(".timeline-programme").forEach((programme) => {
+    programme.addEventListener("click", () => openModal(programme));
+  });
+
+  modal.querySelectorAll("[data-modal-close]").forEach((element) => {
+    element.addEventListener("click", closeModal);
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !modal.hidden) {
+      closeModal();
+    }
+  });
+}