no message

adventskalender/2025/js/popup.js

@@ -26,25 +26,30 @@ const popupData = {
   7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast folgt") },
   8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link folgt") },
   9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Humorclip folgt") },
-  10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text folgt") },
-  11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto folgt") },
-  12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Video folgt") },
-  13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcast folgt") },
-  14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip folgt") },
-  15: { title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurztext folgt") },
-  16: { title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Reel folgt") },
-  17: { title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste folgt") },
-  18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audio folgt") },
-  19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip folgt") },
-  20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch folgt") },
-  21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audio folgt") },
-  22: { title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") },
-  23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto folgt") },
-  24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") }
+  10:{ title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text folgt") },
+  11:{ title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto folgt") },
+  12:{ title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Video folgt") },
+  13:{ title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcast folgt") },
+  14:{ title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip folgt") },
+  15:{ title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurztext folgt") },
+  16:{ title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Reel folgt") },
+  17:{ title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste folgt") },
+  18:{ title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audio folgt") },
+  19:{ title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip folgt") },
+  20:{ title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch folgt") },
+  21:{ title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audio folgt") },
+  22:{ title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") },
+  23:{ title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto folgt") },
+  24:{ title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") }
 };
 
-// === Popup öffnen ===
+
+// ============================================================
+// POPUP ÖFFNEN
+// ============================================================
+
 function openPopup(day) {
+
   const data = popupData[day];
   if (!data) return;
 
@@ -54,56 +59,55 @@ function openPopup(day) {
   fetch(url)
     .then(res => res.ok ? res.text() : Promise.reject("Inhalt nicht gefunden"))
     .then(html => {
+
       activeDay = day;
-      popupContent.innerHTML = `${html}`;
+      popupContent.innerHTML = html;
       popupOverlay.classList.add("active");
 
-      // === Event für background.js (nach DOM-Initialisierung) ===
-      if (day === "1") {
-        setTimeout(() => {
-          document.dispatchEvent(new CustomEvent("day01-loaded"));
-          console.log("[popup.js] Event 'day01-loaded' ausgelöst");
-        }, 300);
-      }
+      // Tools (Font / Zoom) initialisieren NACH dem Einfügen
+      initPopupTools();
 
-      // === Medien starten ===
+      // Medien verzögert starten
       setTimeout(() => {
         const bg = popupContent.querySelector("#bgmusic");
         const videos = popupContent.querySelectorAll("video");
 
-        // Hintergrundmusik (nur Tag 1)
         if (day === "1" && bg) {
           bg.volume = 0.5;
           bg.currentTime = 0;
-          bg.play().catch(err => console.warn("Audio konnte nicht gestartet werden:", err));
+          bg.play().catch(() => {});
         }
 
-        // Alle Videos im Popup starten (autoplay / loop)
         videos.forEach(v => {
           v.muted = true;
           v.loop = true;
           v.play().catch(() => {});
         });
-      }, 500);
+
+      }, 300);
+
     })
     .catch(err => {
       popupContent.innerHTML = `<h2>${data.title}</h2>${data.content}`;
       popupOverlay.classList.add("active");
+      initPopupTools();
       console.warn(`Türchen ${day}: ${err}`);
     });
 }
 
-// === Popup schließen ===
+
+// ============================================================
+// POPUP SCHLIESSEN
+// ============================================================
+
 function closePopup() {
   popupOverlay.classList.remove("active");
 
-  // Alle Audios im Popup stoppen
   popupContent.querySelectorAll("audio").forEach(a => {
     a.pause();
     a.currentTime = 0;
   });
 
-  // Alle Videos im Popup stoppen
   popupContent.querySelectorAll("video").forEach(v => {
     v.pause();
     v.currentTime = 0;
@@ -112,6 +116,7 @@ function closePopup() {
   activeDay = null;
 }
 
+
 // === Schließen-Events ===
 if (popupClose) popupClose.addEventListener("click", closePopup);
 if (popupOverlay) {
@@ -120,12 +125,12 @@ if (popupOverlay) {
   });
 }
 
-// === Export für door-open.js ===
 window.openPopup = openPopup;
 window.closePopup = closePopup;
 
+
 // ============================================================
-// Ergänzung: Gesperrte Türchen – Popup mit Zufallsspruch + Zeitangabe
+// GESPERRTE TÜRECHEN
 // ============================================================
 
 window.showLockedPopup = function (day) {
@@ -147,8 +152,10 @@ window.showLockedPopup = function (day) {
   const year = yearMatch ? parseInt(yearMatch[0], 10) : new Date().getFullYear();
   const unlockDate = new Date(year, 11, parseInt(day, 10), 0, 0, 0);
 
-  const options = { day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" };
-  const dateText = unlockDate.toLocaleString("de-DE", options).replace(" um", ",");
+  const dateText = unlockDate.toLocaleString("de-DE", {
+    day: "2-digit", month: "long", year: "numeric",
+    hour: "2-digit", minute: "2-digit"
+  }).replace(" um", ",");
 
   popupContent.innerHTML = `
     <h2>Türchen ${day} ist noch geschlossen</h2>
@@ -157,48 +164,48 @@ window.showLockedPopup = function (day) {
   `;
 
   popupOverlay.classList.add("active");
+  initPopupTools();
 };
 
+
 // ============================================================
-// Zusatzfunktionen: Schriftart & Schriftgröße
+// POPUP-TOOLS (FONT-TOGGLE & ZOOM)
 // ============================================================
 
-document.addEventListener("DOMContentLoaded", () => {
+function initPopupTools() {
 
-  const popupBody = document.querySelector(".popup-body");
+  const popupBody = popupContent.querySelector(".popup-body");
+  if (!popupBody) return;
 
-  // --- BUTTONS ---
   const btnFontToggle = document.getElementById("btn-font-toggle");
   const btnFontUp     = document.getElementById("btn-font-up");
   const btnFontDown   = document.getElementById("btn-font-down");
 
-  if (!popupBody) return;
-
-  // --- 1) Schriftart toggle ---
+  // Schriftart umschalten
   if (btnFontToggle) {
-    btnFontToggle.addEventListener("click", () => {
+    btnFontToggle.onclick = () => {
       popupBody.classList.toggle("font-readable");
-    });
+    };
   }
 
-  // --- 2) Schriftgröße anpassen ---
-  let currentScale = 1;   // 1 = normal
+  // Schriftgröße
+  let currentScale = 1;
 
   function applyScale() {
     popupBody.style.fontSize = `${currentScale}em`;
   }
 
   if (btnFontUp) {
-    btnFontUp.addEventListener("click", () => {
+    btnFontUp.onclick = () => {
       currentScale = Math.min(currentScale + 0.1, 2);
       applyScale();
-    });
+    };
   }
 
   if (btnFontDown) {
-    btnFontDown.addEventListener("click", () => {
+    btnFontDown.onclick = () => {
       currentScale = Math.max(currentScale - 0.1, 0.5);
       applyScale();
-    });
+    };
   }
-});
+}