MediaWiki:ChapterSlides.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// Acht feste Illustratoren definieren
const illustrators = [
  "Kemble",
  "Schroedter",
  "Hirth",
  "Busoni",
  "Kellerer",
  "Harder",
  "Trier",
  "Bebié"
];

// Bildlisten und aktuelle Indizes
let slides = {};
let currentIndex = {};

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

// Eingabe verarbeiten
function loadSlideshowsByChapter() {
  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 durchsuchen
  const rows = document.querySelectorAll("#catalog tbody tr");

  illustrators.forEach(name => {
    slides[name] = [];
    currentIndex[name] = 0;
    const imageElement = document.getElementById("slide-" + name);

    for (let i = 0; i < rows.length; i++) {
      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);
      }
    }

    if (slides[name].length === 0) {
      imageElement.src = "https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png";
      imageElement.title = "No matching images found.";
      updateCounter(name); // Counter aktualisieren
    } else {
      showSlide(name, 0);
    }
  });
}

// Ein Bild anzeigen
function showSlide(illustrator, index) {
  const imageElement = document.getElementById("slide-" + illustrator);
  const slideArray = slides[illustrator];

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

  currentIndex[illustrator] = (index + slideArray.length) % slideArray.length;
  const imageId = slideArray[currentIndex[illustrator]];

  imageElement.src = "/index.php/Special:Redirect/file/" + imageId + ".jpg";
  imageElement.alt = imageId;
  imageElement.title = imageId;

  // Klick öffnet File-Seite
  imageElement.onclick = function() {
    window.open("/File:" + imageId + ".jpg", "_blank");
  };

  // Hover-Popup für MediaInfo
  attachMediaInfoHoverDynamic(imageElement, imageId);

  // Counter aktualisieren
  updateCounter(illustrator);
}

// Counter aktualisieren
function updateCounter(illustrator) {
  const counterElement = document.getElementById("counter-" + illustrator);
  const slideArray = slides[illustrator];
  const index = currentIndex[illustrator];

  if (counterElement) {
    if (slideArray.length === 0) {
      counterElement.textContent = "0/0";
    } else {
      counterElement.textContent = (index + 1) + "/" + slideArray.length;
    }
  }
}

// Buttons
function nextSlide(illustrator) {
  showSlide(illustrator, currentIndex[illustrator] + 1);
}

function prevSlide(illustrator) {
  showSlide(illustrator, currentIndex[illustrator] - 1);
}

// ===============================
// MediaInfo Hover-Popup (dynamisch)
// ===============================
function attachMediaInfoHoverDynamic(imageElement, filename) {
  let infoBox = document.getElementById("mediainfo-hover-dynamic");
  if (!infoBox) {
    infoBox = document.createElement("div");
    infoBox.id = "mediainfo-hover-dynamic";
    document.body.appendChild(infoBox);
    infoBox.style.position = "absolute";
    infoBox.style.pointerEvents = "none";
    infoBox.style.backgroundColor = "#f9f9f9";
    infoBox.style.border = "1px solid #ccc";
    infoBox.style.padding = "0.5em 1em";
    infoBox.style.borderRadius = "4px";
    infoBox.style.fontSize = "0.9em";
    infoBox.style.display = "none";
    infoBox.style.zIndex = 1000;
    infoBox.style.maxWidth = "250px";
  }

  let mediaInfoLoaded = false;
  let mediaInfoHTML = "";

  imageElement.addEventListener("mouseenter", function() {
    if (!mediaInfoLoaded) {
      infoBox.textContent = "Loading ...";
      fetch('/index.php?title=File:' + encodeURIComponent(filename) + '&action=raw')
      .then(resp => resp.text())
      .then(text => {
        const match = text.match(/\{\{MediaInfo([\s\S]*?)\}\}/);
        if (!match) {
          infoBox.textContent = "No Data found.";
          return;
        }
        const block = match[1];
        const fields = ["title","chapter","illustration","illustrator","year","tags"];
        let htmlList = "<ul style='margin:0; padding-left:1em; list-style:none;'>";
        fields.forEach(field => {
          const m = block.match(new RegExp("\\|\\s*" + field + "\\s*=([^\\n]*)"));
          if (m) {
            const label = field.charAt(0).toUpperCase() + field.slice(1);
            htmlList += `<li><b>${label}:</b> ${m[1].trim()}</li>`;
          }
        });
        htmlList += "</ul>";
        mediaInfoHTML = htmlList;
        infoBox.innerHTML = mediaInfoHTML;
        mediaInfoLoaded = true;
      })
      .catch(err => {
        console.error(err);
        infoBox.textContent = "Error";
      });
    } else {
      infoBox.innerHTML = mediaInfoHTML;
    }
    infoBox.style.display = "block";
  });

  imageElement.addEventListener("mousemove", function(e) {
    infoBox.style.left = e.pageX + 15 + "px";
    infoBox.style.top = e.pageY + 15 + "px";
  });

  imageElement.addEventListener("mouseleave", function() {
    infoBox.style.display = "none";
  });
}