MediaWiki

ChapterSlidesAlt.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

No edit summary
No edit summary
Line 1: Line 1:
// ALTERNATIV mit versteckter Tabelle
$(function() {
  const illustrators = ["Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié"];
  let slidesPerBox = {1: [], 2: []};
  let currentIndex = {1: 0, 2: 0};


const illustrators = [
  // Dropdowns befüllen
  "Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié"
  illustrators.forEach(name => {
];
    $("#illustratorSelect1, #illustratorSelect2").append(
      $('<option>').val(name).text(name)
    );
  });


let slides = {};
  // Button Event
let currentIndex = {};
  $("#displayButton").click(loadSlideshowsByChapter);


// Initialisierung
  // Prev/Next Buttons
illustrators.forEach(name => {
  $(".prevBtn").click(function() {
   slides[name] = [];
    prevSlide($(this).data("box"));
   currentIndex[name] = 0;
   });
});
   $(".nextBtn").click(function() {
    nextSlide($(this).data("box"));
  });


// Funktion zum Laden der Galerien nach Kapitel
  // Dropdown Change
function loadSlideshowsByChapterAlt() {
  $("#illustratorSelect1, #illustratorSelect2").change(function() {
  const chapterInput = document.getElementById("chapterInput").value.trim();
    const box = $(this).attr("id").replace("illustratorSelect", "");
  const chapterNumber = parseInt(chapterInput, 10);
    refreshGallery(parseInt(box));
  });


   if (isNaN(chapterNumber) || chapterNumber < 1 || chapterNumber > 43) {
   function loadSlideshowsByChapter() {
    alert("Please enter a number between 1 and 43.");
    const chapterNumber = parseInt($("#chapterInput").val(), 10);
     return;
    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] = []; });


  const chapterTag = "ch" + String(chapterNumber).padStart(3, "0");
    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);
        }
      });
    });


  // Tabelle abfragen – auch wenn display:none gesetzt ist
    refreshGallery(1);
  const table = document.getElementById("catalog");
    refreshGallery(2);
  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
  function refreshGallery(boxNumber) {
      const row = rows[i];
     const select = $("#illustratorSelect" + boxNumber);
      const illustratorCell = row.cells[2];
    const illustrator = select.val();
      const idCell = row.cells[8];
    const img = $("#slide" + boxNumber);
    const counter = $("#counter" + boxNumber);
    const slideArray = slidesPerBox[illustrator] || [];


      const illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : "";
    if (!slideArray.length) {
       const idLink = idCell ? idCell.getElementsByTagName("a")[0] : null;
       img.attr("src","https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png");
      const idText = idLink ? idLink.textContent.trim().toLowerCase() : "";
      currentIndex[boxNumber] = 0;
 
       counter.text("0/0");
       if (illustratorText.indexOf(name.toLowerCase()) !== -1 &&
    } else {
          idText.indexOf(chapterTag) !== -1) {
      showSlide(boxNumber, 0);
        slides[name].push(idText);
      }
     }
     }
   });
   }


   // Direkt beide Boxen aktualisieren
   function showSlide(boxNumber, index) {
  refreshGallery(1);
    const select = $("#illustratorSelect" + boxNumber);
  refreshGallery(2);
    const illustrator = select.val();
}
    const slideArray = slidesPerBox[illustrator];
    const img = $("#slide" + boxNumber);
    const counter = $("#counter" + boxNumber);


// Refresh-Funktion für eine Box
    if (!slideArray || !slideArray.length) return;
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) {
    currentIndex[boxNumber] = (index + slideArray.length) % slideArray.length;
     img.src = "https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png";
    const imageId = slideArray[currentIndex[boxNumber]];
    currentIndex[illustrator] = 0;
     img.attr("src", "/index.php/Special:Redirect/file/" + imageId + ".jpg")
    counter.textContent = "0/0";
      .attr("alt", imageId)
  } else {
      .attr("title", imageId);
     showSlideDropdown(boxNumber, 0);
     counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);
   }
   }
}


function showSlideDropdown(boxNumber, index) {
  function nextSlide(boxNumber) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
    showSlide(boxNumber, currentIndex[boxNumber] + 1);
  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;
   function prevSlide(boxNumber) {
 
    showSlide(boxNumber, currentIndex[boxNumber] - 1);
  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();
});
});

Revision as of 21:55, 2 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 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");
    } 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)
       .attr("title", imageId);
    counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);
  }

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

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