diff --git a/adventskalender/2025/js/background.js b/adventskalender/2025/js/background.js index 463466d..735155e 100644 --- a/adventskalender/2025/js/background.js +++ b/adventskalender/2025/js/background.js @@ -2,37 +2,33 @@ // Adventskalender 2025 – Hintergrund- & Favicon-Wechsel nach Tag // ============================================================ -(function() { +(function () { const pathYear = window.location.pathname.match(/(\d{4})/); const YEAR = pathYear ? parseInt(pathYear[1], 10) : new Date().getFullYear(); const DEV_MODE = window.location.search.includes("dev"); const STORAGE_BASE = `bratonien_${YEAR}_lock`; - // === Hilfsfunktion: simulierten Tag aus lock.js übernehmen === function getSimulatedDay() { if (!DEV_MODE) return null; const val = localStorage.getItem(`${STORAGE_BASE}_simday`); return val ? parseInt(val, 10) : null; } - // === Aktuellen oder simulierten Tag bestimmen === const now = new Date(); - let dayToShow = now.getMonth() === 11 ? now.getDate() : 0; // Dezember = 11 - - // DEV-Override + let dayToShow = now.getMonth() === 11 ? now.getDate() : 0; const sim = getSimulatedDay(); - if (DEV_MODE && sim) { - dayToShow = sim; - } + if (DEV_MODE && sim) dayToShow = sim; - // === Bildpfad bestimmen === - let imgPath = "assets/images/Basisbild.webp"; + let padded = "Basisbild"; if (dayToShow >= 1 && dayToShow <= 24) { - const padded = String(dayToShow).padStart(2, "0"); - imgPath = `assets/images/${padded}.webp`; + padded = String(dayToShow).padStart(2, "0"); } - // === Funktion zum Setzen des Favicons === + // Basename ohne Extension + const filename = `${padded}`; + const basePath = "assets/images/"; + + // === Funktion zum Setzen des Favicons (.webp reicht völlig aus) === function setFavicon(path) { let link = document.querySelector('link[rel="icon"]'); if (!link) { @@ -41,18 +37,40 @@ link.type = "image/png"; document.head.appendChild(link); } - link.href = path; + link.href = `${basePath}${filename}.webp`; } - // === Anwendung auf das Kalenderbild & Favicon === window.addEventListener("DOMContentLoaded", () => { - const kalenderBild = document.querySelector(".kalenderbild img"); - if (kalenderBild) { - kalenderBild.src = imgPath; - console.log(`[Bratonien] Hintergrund gesetzt: ${imgPath}`); - } + const picture = document.querySelector(".kalenderbild picture"); + const img = picture?.querySelector("img"); + const sources = picture?.querySelectorAll("source"); - setFavicon(imgPath); - console.log(`[Bratonien] Favicon gesetzt: ${imgPath}`); + if (!picture || !img || !sources) return; + + // Durch alle durchgehen und neuen srcset setzen + sources.forEach(source => { + const type = source.getAttribute("type"); + const format = type?.split("/")[1]; // "avif" oder "webp" + if (!format) return; + + const newSrcset = [ + `assets/images/420/${format}/${filename}.${format} 420w`, + `assets/images/768/${format}/${filename}.${format} 768w`, + `assets/images/1024/${format}/${filename}.${format} 1024w`, + `assets/images/1280/${format}/${filename}.${format} 1280w`, + `assets/images/1600/${format}/${filename}.${format} 1600w`, + `assets/images/1920/${format}/${filename}.${format} 1920w`, + `assets/images/2560/${format}/${filename}.${format} 2560w`, + `assets/images/3840/${format}/${filename}.${format} 3840w`, + ].join(", "); + source.setAttribute("srcset", newSrcset); + }); + + // JPEG für -Fallback + img.src = `assets/images/1920/jpeg/${filename}.jpg`; + + console.log(`[Bratonien] Kalenderbild gesetzt für Tag ${filename}`); + setFavicon(`${basePath}${filename}.webp`); + console.log(`[Bratonien] Favicon gesetzt für Tag ${filename}`); }); })(); \ No newline at end of file