Medien komplett neu strukturiert: 3 Welten (Dogfather/HasiDog/Casper) statt Galerie/Videos/Aktionen getrennt

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
2026-08-01 16:30:36 +02:00
parent 47350df0c7
commit e9d0c98aed
19 changed files with 393 additions and 294 deletions
@@ -0,0 +1,78 @@
+/* =====================================================================
+   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");
+    });
+  }
+});