diff --git a/adventskalender/2025/js/popup.js b/adventskalender/2025/js/popup.js index 94be88a..970e734 100644 --- a/adventskalender/2025/js/popup.js +++ b/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 = `

${data.title}

${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 = `

Türchen ${day} ist noch geschlossen

@@ -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(); - }); + }; } -}); \ No newline at end of file +} \ No newline at end of file