DogFatherGit
e9d0c98aed
Auf Wunsch von Dogi: Medien-Menü zeigt jetzt Dogfather / HasiDog / Casper statt Galerie / Videos / Aktionen. Jede der 3 neuen Seiten (medien-dogfather.html / medien-hasidog.html / medien-casper.html) zeigt alles zu ihrer Welt an einem Ort, sauber in 3 Bereiche kategorisiert: Fotos, Videos, Events. - Neu: assets/js/data-media.js (ersetzt gallery.js) - Fotos jetzt mit welt: dogfather|hasidog|casper statt dogfather/team/hasidog/manager. Team-Mitglieder-Fotos und Logo entfernt (Wunsch Dogi - passen in keine der 3 Welten, bleiben weiter auf ihren Profilseiten). Casper-Fotos aus der alten "hasidog"-Sammelkategorie sauber herausgelöst. Zusätzliche bisher ungenutzte Fotos ergänzt (dogfather-main, char-dogfather, manager-dogfather-portrait, char-hasidog, casper-main). - Neu: assets/js/data-videos.js - Struktur pro Welt vorbereitet (noch keine echten Videos vorhanden, Platzhalter "folgt in Kürze") - data-aktionen.js: alle 4 bestehenden Events als welt:"dogfather" getaggt (alles Team-Dogi-weite Community-Aktionen) - Neu: assets/js/medien-welt.js - eine gemeinsame Render-Logik für alle 3 Seiten (liest body[data-welt]), rendert Foto-Grid+Lightbox, Video-Grid, Events-Grid gefiltert nach Welt - aktion-detail.html: "Zurück"-Button zeigt jetzt dynamisch auf die Events-Sektion der richtigen Welt (aktion.welt) - main.js NAV: Medien-Untermenü aktualisiert - Alle Querverweise site-weit korrigiert (casper.html, community.html, hasidog.html, index.html, streamer.html) - Anker-Links (#fotos/#videos/ #events) für Deep-Links direkt in den passenden Bereich - Alte Dateien gelöscht: medien.html, videos.html, aktionen.html, gallery.js - sitemap.xml aktualisiert
79 lines
3.3 KiB
JavaScript
79 lines
3.3 KiB
JavaScript
/* =====================================================================
|
|
medien-welt.js — gemeinsame Render-Logik für die 3 Welten-Medienseiten
|
|
(medien-dogfather.html / medien-hasidog.html / medien-casper.html)
|
|
|
|
Jede der 3 Seiten setzt <body data-welt="dogfather|hasidog|casper"> und
|
|
lädt data-media.js, data-videos.js, data-aktionen.js VOR dieser Datei —
|
|
so gibt es EIN Template/Skript für alle 3 Welten, ohne Code-Verdopplung.
|
|
===================================================================== */
|
|
|
|
function renderFotoItem(item) {
|
|
const media = item.src
|
|
? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
|
|
: `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
|
|
return `<figure class="gallery-item card">${media}<figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption></figure>`;
|
|
}
|
|
|
|
function renderVideoItem(item) {
|
|
const media = item.src
|
|
? `<video src="${item.src}" controls style="width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;"></video>`
|
|
: `<div class="img-placeholder" style="aspect-ratio:9/16;">${item.title}<br><span class="small">Video folgt</span></div>`;
|
|
return `<figure class="card">${media}<figcaption class="small muted" style="margin-top:.6rem;">${item.title}</figcaption></figure>`;
|
|
}
|
|
|
|
function renderAktionItem(a) {
|
|
return `
|
|
<a class="card" href="aktion-detail.html?id=${a.id}">
|
|
<span class="tag">${a.tag} · ${a.status}</span>
|
|
<h3>${a.title}</h3>
|
|
<p>${a.summary}</p>
|
|
<span class="small" style="color:var(--accent);">Details ansehen →</span>
|
|
</a>`;
|
|
}
|
|
|
|
function bindLightbox() {
|
|
const lb = document.getElementById("lightbox");
|
|
const lbContent = document.getElementById("lightbox-content");
|
|
if (!lb || !lbContent) return;
|
|
document.querySelectorAll("#foto-grid .gallery-item").forEach((el) => {
|
|
el.addEventListener("click", () => {
|
|
lbContent.innerHTML = el.innerHTML;
|
|
lb.classList.add("open");
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const welt = document.body.dataset.welt;
|
|
if (!welt) return;
|
|
|
|
const fotoGrid = document.getElementById("foto-grid");
|
|
if (fotoGrid) {
|
|
const fotos = (window.MEDIA || []).filter((m) => m.welt === welt);
|
|
fotoGrid.innerHTML = fotos.map(renderFotoItem).join("") || `<p class="muted">Noch keine Fotos in dieser Welt.</p>`;
|
|
bindLightbox();
|
|
}
|
|
|
|
const videoGrid = document.getElementById("video-grid");
|
|
if (videoGrid) {
|
|
const videos = (window.VIDEOS || []).filter((v) => v.welt === welt);
|
|
videoGrid.innerHTML = videos.map(renderVideoItem).join("") || `<p class="muted">Noch keine Videos in dieser Welt.</p>`;
|
|
}
|
|
|
|
const aktionenGrid = document.getElementById("aktionen-grid");
|
|
if (aktionenGrid) {
|
|
const aktionen = (window.AKTIONEN || []).filter((a) => a.welt === welt);
|
|
aktionenGrid.innerHTML = aktionen.map(renderAktionItem).join("") || `<p class="muted">Aktuell keine Events in dieser Welt.</p>`;
|
|
}
|
|
|
|
const lb = document.getElementById("lightbox");
|
|
if (lb) {
|
|
lb.addEventListener("click", (e) => {
|
|
if (e.target === lb || e.target.closest(".lightbox-close")) lb.classList.remove("open");
|
|
});
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") lb.classList.remove("open");
|
|
});
|
|
}
|
|
});
|