CharacterFilter.js: Difference between revisions

Revision as of 22:49, 2 September 2025

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

  buildIndex: function() {
    this.characterIndex = {};
    const rows = document.querySelectorAll('#catalog tr');
    rows.forEach(row => {
      if (!row.cells || row.cells.length < 9) return;

      // Illustrator, Tags, ID
      const illustr = row.cells[2]?.textContent.trim().toLowerCase().replace(',', '');
      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;

      // Tags splitten, Bindestriche entfernen
      const tags = tagsText.split(/\s+/).map(t => t.replace(/^-/, '')).filter(t => t);

      tags.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().replace(',', '');
    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); }
};