MediaWiki:ChapterSlidesAlt.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.

$(function() {
  const illustrators = ["Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié"];
  let slidesPerBox = {1: [], 2: []};
  let currentIndex = {1: 0, 2: 0};

  // Dropdowns befüllen
  illustrators.forEach(name => {
    $("#illustratorSelect1, #illustratorSelect2").append(
      $('<option>').val(name).text(name)
    );
  });

  // Button Event
  $("#displayButton").click(loadSlideshowsByChapter);

  // Prev/Next Buttons
  $(".prevBtn").click(function() {
    prevSlide($(this).data("box"));
  });
  $(".nextBtn").click(function() {
    nextSlide($(this).data("box"));
  });

  // Dropdown Change
  $("#illustratorSelect1, #illustratorSelect2").change(function() {
    const box = $(this).attr("id").replace("illustratorSelect", "");
    refreshGallery(parseInt(box));
  });

  function loadSlideshowsByChapter() {
    const chapterNumber = parseInt($("#chapterInput").val(), 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");
    const rows = $("#catalog tbody tr");
    illustrators.forEach(name => { slidesPerBox[name] = []; });

    rows.each(function() {
      const cells = $(this).find("td");
      if (cells.length < 9) return;
      const illustratorText = cells.eq(2).text().trim().toLowerCase();
      const idLink = cells.eq(8).find("a").text().trim().toLowerCase();
      illustrators.forEach(name => {
        if (illustratorText.includes(name.toLowerCase()) && idLink.includes(chapterTag)) {
          slidesPerBox[name].push(idLink);
        }
      });
    });

    refreshGallery(1);
    refreshGallery(2);
  }

  function refreshGallery(boxNumber) {
    const select = $("#illustratorSelect" + boxNumber);
    const illustrator = select.val();
    const img = $("#slide" + boxNumber);
    const counter = $("#counter" + boxNumber);
    const infoBox = $("#mediainfo" + boxNumber); // feste Box
    const slideArray = slidesPerBox[illustrator] || [];

    if (!slideArray.length) {
      img.attr("src","https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png");
      currentIndex[boxNumber] = 0;
      counter.text("0/0");
      img.off("click"); // Klick entfernen
      infoBox.html(""); // leere InfoBox
    } else {
      showSlide(boxNumber, 0);
    }
  }

  function showSlide(boxNumber, index) {
    const select = $("#illustratorSelect" + boxNumber);
    const illustrator = select.val();
    const slideArray = slidesPerBox[illustrator];
    const img = $("#slide" + boxNumber);
    const counter = $("#counter" + boxNumber);
    const infoBox = $("#mediainfo" + boxNumber); // feste Box

    if (!slideArray || !slideArray.length) return;

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

    img.attr("src", "/index.php/Special:Redirect/file/" + imageId + ".jpg")
       .attr("alt", imageId)
       .removeAttr("title"); // Tooltip ausblenden

    // Klick öffnet File: Seite in neuem Tab
    img.off("click").on("click", function() {
      const fileUrl = "/File:" + imageId + ".jpg";
      window.open(fileUrl, "_blank");
    });

    // MediaInfo laden
    loadMediaInfoBox(boxNumber, imageId);

    counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);
  }

  function nextSlide(boxNumber) {
    showSlide(boxNumber, currentIndex[boxNumber] + 1);
  }

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

  // ===============================
  // MediaInfo-Funktion (für feste Box)
  // ===============================
  function loadMediaInfoBox(target, filename) {
    const infoBox = document.getElementById('mediainfo' + target);
    if (!infoBox) return;
    infoBox.textContent = "Loading ...";

    // Sicherstellen, dass wir die File-Seite abrufen und .jpg am Ende haben
    const filePage = filename.endsWith('.jpg') ? filename : filename + '.jpg';
    const url = '/index.php?title=File:' + encodeURIComponent(filePage) + '&action=raw';

    fetch(url)
        .then(resp => resp.text())
        .then(text => {
            // Nur {{MediaInfo ... }} Block extrahieren, vorherigen Text ignorieren
            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>";
            infoBox.innerHTML = htmlList;

            // Optional: Box stylen
            infoBox.style.backgroundColor = "#f9f9f9";
            infoBox.style.border = "1px solid #ccc";
            infoBox.style.padding = "0.5em 1em";
            infoBox.style.marginTop = "0.5em";
            infoBox.style.borderRadius = "4px";
            infoBox.style.fontSize = "0.9em";
        })
        .catch(err => {
            console.error(err);
            infoBox.textContent = "Error";
        });
  }
}); // <-- Wichtige Klammer zum Schließen von $(function() { ... })