CharacterFilter.js: Difference between revisions

Revision as of 22:45, 2 September 2025

// ===============================
// Huck Slideshow – funktionierende Version
// ===============================

window.huckSlideshow = {
  slides: { A: [], B: [] },
  currentIndex: { A: 0, B: 0 },
  indexBuilt: false,
  characterIndex: {},

  // Tabelle einmalig indexieren
  buildIndex: function() {
    this.characterIndex = {};
    const rows = document.querySelectorAll('#catalog tbody tr');
    rows.forEach(row => {
      const illustr = row.cells[2]?.textContent.trim().toLowerCase();
      const tagsText = row.cells[7]?.textContent.trim().toLowerCase();
      const idLink = row.cells[8]?.getElementsByTagName('a')[0];
      const idText = idLink?.textContent.trim().toLowerCase();
      if (!idText) return;

      tagsText.split(/\s+/).forEach(tag => {
        if (!this.characterIndex[tag]) this.characterIndex[tag] = {};
        if (!this.characterIndex[tag][illustr]) this.characterIndex[tag][illustr] = [];
        this.characterIndex[tag][illustr].push(idText);
      });
    });
    this.indexBuilt = true;
  },

  load: function(target) {
    if (!this.indexBuilt) this.buildIndex();

    const dropdownId = 'illustratorDropdown' + target;
    const selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    const imageElement = document.getElementById('slide' + target);
    if (!imageElement) return;

    this.slides[target] = [];
    this.currentIndex[target] = 0;

    if (!selectedIllustrator) {
      imageElement.src = "https://illus.twainframe.org/images/d/d2/GalleryPlaceholder.png";
      imageElement.title = "No illustrator selected.";
      return;
    }

    const ids = this.characterIndex['huck']?.[selectedIllustrator] || [];
    if (ids.length === 0) {
      imageElement.src = "https://illus.twainframe.org/images/d/d2/GalleryPlaceholder.png";
      imageElement.title = "No matching images.";
      return;
    }

    this.slides[target] = ids;
    this.show(target, 0);
  },

  show: function(target, index) {
    const imageElement = document.getElementById('slide' + target);
    const slideArray = this.slides[target];
    if (!imageElement || slideArray.length === 0) return;

    this.currentIndex[target] = (index + slideArray.length) % slideArray.length;
    const imageId = slideArray[this.currentIndex[target]];
    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;

    // preload next
    const nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(this.currentIndex[target]+1)%slideArray.length] + '.jpg';
  },

  next: function(target) { this.show(target, this.currentIndex[target] + 1); },
  prev: function(target) { this.show(target, this.currentIndex[target] - 1); }
};