ChapterSlidesAlt.js: Difference between revisions

Revision as of 16:09, 16 September 2025

$(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(infoBox, 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(infoBox, filename) {
    infoBox.text("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.text("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.html(htmlList);

        // Optionales Styling
        infoBox.css({
          "background-color": "#f9f9f9",
          "border": "1px solid #ccc",
          "padding": "0.5em 1em",
          "margin-top": "0.5em",
          "border-radius": "4px",
          "font-size": "0.9em"
        });
      })
      .catch(err => {
        console.error(err);
        infoBox.text("Error");
      });
  }
});