MediaWiki

ChapterSlides.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
// Acht feste Illustratoren definieren
// Acht feste Illustratoren definieren
const illustrators = [
const chapter_illustrators = [
   "Kemble",
   "Kemble",
   "Schroedter",
   "Schroedter",
Line 12: Line 12:


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


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


// Eingabe verarbeiten
// Eingabe verarbeiten
function loadSlideshowsByChapter() {
function chapter_loadSlideshowsByChapter() {
   const chapterInput = document.getElementById("chapterInput").value.trim();
   const chapterInput = document.getElementById("chapterInput").value.trim();
   const chapterNumber = parseInt(chapterInput, 10);
   const chapterNumber = parseInt(chapterInput, 10);
Line 35: Line 35:
   const rows = document.querySelectorAll("#catalog tbody tr");
   const rows = document.querySelectorAll("#catalog tbody tr");


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


Line 53: Line 53:
         idText.indexOf(chapterTag) !== -1
         idText.indexOf(chapterTag) !== -1
       ) {
       ) {
         slides[name].push(idLink.textContent.trim()); // Name ohne .toLowerCase(), weil wir die Original-Dateinamen brauchen
         chapter_slides[name].push(idText);
       }
       }
     }
     }


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


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


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


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


  // Bild setzen
   imageElement.src = "/index.php/Special:Redirect/file/" + imageId + ".jpg";
   imageElement.src = "/index.php/Special:Redirect/file/" + imageId + ".jpg";
   imageElement.alt = imageId;
   imageElement.alt = imageId;
   imageElement.title = imageId;
   imageElement.title = imageId;
  // Beim Klick die File-Seite öffnen
   imageElement.style.cursor = "pointer";
   imageElement.style.cursor = "pointer";
  // Klick öffnet File-Seite in neuem Tab
   imageElement.onclick = function () {
   imageElement.onclick = function () {
    window.open("/File:" + imageId + ".jpg", "_blank");
      window.open("/File:" + imageId, "_blank");
   };
   };


   // Counter aktualisieren
   // Counter aktualisieren
   updateCounter(illustrator);
   chapter_updateCounter(illustrator);


   // MediaInfo laden und Infobox füllen
   // MediaInfo laden, ohne Vergleichsskript zu stören
   loadMediaInfo(illustrator, imageId);
   if (typeof comparison_showMediaInfo === "function") {
      comparison_showMediaInfo(illustrator, imageId + ".jpg");
  }
}
}


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


   if (counterElement) {
   if (counterElement) {
Line 112: Line 112:


// Buttons
// Buttons
function nextSlide(illustrator) {
function chapter_nextSlide(illustrator) {
   showSlide(illustrator, currentIndex[illustrator] + 1);
   chapter_showSlide(illustrator, chapter_currentIndex[illustrator] + 1);
}
 
function prevSlide(illustrator) {
  showSlide(illustrator, currentIndex[illustrator] - 1);
}
}


/* --- Hover-Infobox CSS (kann auch direkt ins Common.css) --- */
function chapter_prevSlide(illustrator) {
const style = document.createElement('style');
   chapter_showSlide(illustrator, chapter_currentIndex[illustrator] - 1);
style.textContent = `
.slideshow-box { position: relative; }
.mediainfo-box {
   display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  border-radius: 4px;
  font-size: 0.9em;
  z-index: 10;
  max-width: 90%;
  text-align: left;
}
}
.slideshow-box img:hover + .mediainfo-box { display: block; }
`;
document.head.appendChild(style);

Revision as of 15:08, 16 September 2025

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

// Bildlisten und aktuelle Indizes
let chapter_slides = {};
let chapter_currentIndex = {};

chapter_illustrators.forEach(name => {
  chapter_slides[name] = [];
  chapter_currentIndex[name] = 0;
});

// Eingabe verarbeiten
function chapter_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");

  chapter_illustrators.forEach(name => {
    chapter_slides[name] = [];
    chapter_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
      ) {
        chapter_slides[name].push(idText);
      }
    }

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

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

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

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

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

  // Beim Klick die File-Seite öffnen
  imageElement.style.cursor = "pointer";
  imageElement.onclick = function () {
      window.open("/File:" + imageId, "_blank");
  };

  // Counter aktualisieren
  chapter_updateCounter(illustrator);

  // MediaInfo laden, ohne Vergleichsskript zu stören
  if (typeof comparison_showMediaInfo === "function") {
      comparison_showMediaInfo(illustrator, imageId + ".jpg");
  }
}

// Counter aktualisieren
function chapter_updateCounter(illustrator) {
  const counterElement = document.getElementById("counter-" + illustrator);
  const slideArray = chapter_slides[illustrator];
  const index = chapter_currentIndex[illustrator];

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

// Buttons
function chapter_nextSlide(illustrator) {
  chapter_showSlide(illustrator, chapter_currentIndex[illustrator] + 1);
}

function chapter_prevSlide(illustrator) {
  chapter_showSlide(illustrator, chapter_currentIndex[illustrator] - 1);
}