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 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, falls kein Bild
    } 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);

    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"); // Titel ausblenden, nur optional

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

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

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

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