ChapterSlidesAlt.js: Difference between revisions

Revision as of 21:49, 2 September 2025

// ALTERNATIV mit versteckter Tabelle

const illustrators = [
  "Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié"
];

let slides = {};
let currentIndex = {};

// Initialisierung
illustrators.forEach(name => {
  slides[name] = [];
  currentIndex[name] = 0;
});

// Funktion zum Laden der Galerien nach Kapitel
function loadSlideshowsByChapterAlt() {
  const chapterInput = document.getElementById("chapterInput").value.trim();
  const chapterNumber = parseInt(chapterInput, 10);

  if (isNaN(chapterNumber) || chapterNumber < 1 || chapterNumber > 43) {
    alert("Please enter a number between 1 and 43.");
    return;
  }

  const chapterTag = "ch" + String(chapterNumber).padStart(3, "0");

  // Tabelle abfragen – auch wenn display:none gesetzt ist
  const table = document.getElementById("catalog");
  if (!table) return;

  const rows = table.querySelectorAll("tr"); // tbody weggelassen, funktioniert besser bei display:none

  illustrators.forEach(name => {
    slides[name] = [];
    currentIndex[name] = 0;

    for (let i = 1; i < rows.length; i++) { // i=1, um die Kopfzeile zu überspringen
      const row = rows[i];
      const illustratorCell = row.cells[2];
      const idCell = row.cells[8];

      const illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : "";
      const idLink = idCell ? idCell.getElementsByTagName("a")[0] : null;
      const idText = idLink ? idLink.textContent.trim().toLowerCase() : "";

      if (illustratorText.indexOf(name.toLowerCase()) !== -1 &&
          idText.indexOf(chapterTag) !== -1) {
        slides[name].push(idText);
      }
    }
  });

  // Direkt beide Boxen aktualisieren
  refreshGallery(1);
  refreshGallery(2);
}

// Refresh-Funktion für eine Box
function refreshGallery(boxNumber) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  const illustrator = select.value;
  const img = document.getElementById("slide" + boxNumber);
  const counter = document.getElementById("counter" + boxNumber);

  if (!slides[illustrator] || slides[illustrator].length === 0) {
    img.src = "https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png";
    currentIndex[illustrator] = 0;
    counter.textContent = "0/0";
  } else {
    showSlideDropdown(boxNumber, 0);
  }
}

function showSlideDropdown(boxNumber, index) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  const illustrator = select.value;
  const img = document.getElementById("slide" + boxNumber);
  const counter = document.getElementById("counter" + boxNumber);
  const slideArray = slides[illustrator];

  if (!img || slideArray.length === 0) return;

  currentIndex[illustrator] = (index + slideArray.length) % slideArray.length;
  const imageId = slideArray[currentIndex[illustrator]];
  img.src = "/index.php/Special:Redirect/file/" + imageId + ".jpg";
  img.alt = imageId;
  img.title = imageId;
  counter.textContent = (currentIndex[illustrator] + 1) + "/" + slideArray.length;
}

// Buttons
function nextSlideDropdown(boxNumber) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  showSlideDropdown(boxNumber, currentIndex[select.value] + 1);
}

function prevSlideDropdown(boxNumber) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  showSlideDropdown(boxNumber, currentIndex[select.value] - 1);
}

// Sicherstellen, dass das Script nach dem Laden der Tabelle ausgeführt wird
document.addEventListener("DOMContentLoaded", () => {
  // optional: die erste Anzeige sofort initialisieren
  // loadSlideshowsByChapterAlt();
});