134 lines
4.2 KiB
JavaScript
134 lines
4.2 KiB
JavaScript
// ============================================================
|
||
// Adventskalender 2025 – Hintergrund- & Favicon-Wechsel nach Tag
|
||
// ============================================================
|
||
|
||
(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`;
|
||
|
||
function getSimulatedDay() {
|
||
if (!DEV_MODE) return null;
|
||
const val = localStorage.getItem(`${STORAGE_BASE}_simday`);
|
||
return val ? parseInt(val, 10) : null;
|
||
}
|
||
|
||
const now = new Date();
|
||
let dayToShow = now.getMonth() === 11 ? now.getDate() : 0;
|
||
const sim = getSimulatedDay();
|
||
if (DEV_MODE && sim) dayToShow = sim;
|
||
|
||
const padded =
|
||
dayToShow >= 1 && dayToShow <= 24
|
||
? String(dayToShow).padStart(2, "0")
|
||
: "Basisbild";
|
||
|
||
const filename = padded;
|
||
const basePath = `/${YEAR}/assets/images/`;
|
||
|
||
// === Favicon-Logik ===
|
||
function setFavicon(path) {
|
||
let link = document.querySelector('link[rel="icon"]');
|
||
if (!link) {
|
||
link = document.createElement("link");
|
||
link.rel = "icon";
|
||
link.type = "image/png";
|
||
document.head.appendChild(link);
|
||
}
|
||
link.href = path;
|
||
}
|
||
|
||
const faviconPath = `${basePath}1920/webp/${filename}.webp`;
|
||
setFavicon(faviconPath);
|
||
|
||
// === Hintergrundbilder ===
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
const picture = document.querySelector(".kalenderbild picture");
|
||
const img = picture?.querySelector("img");
|
||
const sources = picture?.querySelectorAll("source");
|
||
|
||
if (!picture || !img || !sources) return;
|
||
|
||
// === Daumenkino für Tag 1 ===
|
||
document.addEventListener("day01-loaded", () => {
|
||
const thumbkino = document.querySelector(".thumbkino-video");
|
||
if (!thumbkino) {
|
||
console.warn("[Bratonien] Kein Daumenkino-Element gefunden.");
|
||
return;
|
||
}
|
||
|
||
const formats = ["webm", "mp4"];
|
||
const resolutions = [
|
||
"nHD",
|
||
"FWVGA",
|
||
"qHD",
|
||
"HD",
|
||
"HDplus",
|
||
"FullHD",
|
||
"1440p",
|
||
"4K",
|
||
];
|
||
const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840];
|
||
|
||
// aktuelle Quellen komplett entfernen
|
||
while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild);
|
||
|
||
// neue Quellen basierend auf aktuellem Tag hinzufügen
|
||
formats.forEach((format) => {
|
||
resolutions.forEach((res, i) => {
|
||
const mediaQuery =
|
||
i === resolutions.length - 1
|
||
? "(min-width:2561px)"
|
||
: `(max-width:${breakpoints[i]}px)`;
|
||
|
||
const source = document.createElement("source");
|
||
source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`;
|
||
source.type = `video/${format}`;
|
||
source.media = mediaQuery;
|
||
thumbkino.appendChild(source);
|
||
});
|
||
});
|
||
|
||
// Video neu initialisieren
|
||
thumbkino.pause();
|
||
thumbkino.load();
|
||
|
||
// Sicherstellen, dass das neue Video vollständig geladen ist, bevor es startet
|
||
thumbkino.addEventListener(
|
||
"loadeddata",
|
||
() => {
|
||
thumbkino.currentTime = 0;
|
||
thumbkino.play().catch(() => {});
|
||
console.log(`[Bratonien] Daumenkino aktualisiert für Tag ${padded}`);
|
||
},
|
||
{ once: true }
|
||
);
|
||
});
|
||
|
||
// === Responsive Hintergrundbilder ===
|
||
const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840];
|
||
|
||
sources.forEach((source) => {
|
||
const type = source.getAttribute("type");
|
||
const format = type?.split("/")[1];
|
||
if (!format) return;
|
||
|
||
const newSrcset = breakpoints
|
||
.map((bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w`)
|
||
.join(", ");
|
||
source.setAttribute("srcset", newSrcset);
|
||
});
|
||
|
||
const jpegSrcset = breakpoints
|
||
.map((bp) => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`)
|
||
.join(", ");
|
||
|
||
img.setAttribute("src", `${basePath}1920/jpeg/${filename}.jpeg`);
|
||
img.setAttribute("srcset", jpegSrcset);
|
||
img.setAttribute("sizes", "100vw");
|
||
|
||
console.log(`[Bratonien] Kalenderbild gesetzt für Tag ${filename}`);
|
||
console.log(`[Bratonien] Favicon gesetzt: ${faviconPath}`);
|
||
});
|
||
})(); |