Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-15 13:49:16 +01:00
parent 4d8ded3981
commit 70c61a1a05
1 changed files with 59 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
adventskalender/2025/js/popup.js
View File

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