MediaWiki:CharacterFilter.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// ===============================
// Huck Slideshows
// ===============================

// Helper Factory
function createCharacterSlideshow(tag) {
  return {
    tag: tag,
    slides: { A: [], B: [] },
    currentIndex: { A: 0, B: 0 },

    load: function(target) {
      const dropdownId = 'huckDropdown' + target;
      const imageId = 'huckSlide' + target;
      const selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
      const imageElement = document.getElementById(imageId);

      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 rows = document.querySelectorAll('#catalog tbody tr');
      rows.forEach((row) => {
        const illustratorText = 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() || '';

        if (illustratorText.includes(selectedIllustrator) && tagsText.includes(this.tag)) {
          this.slides[target].push(idText);
        }
      });

      if (this.slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/d/d2/GalleryPlaceholder.png";
        imageElement.title = "No matching images.";
        return;
      }

      this.show(target, 0);
    },

    show: function(target, index) {
      const imageElement = document.getElementById('huckSlide' + 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;
    },

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

// Huck slideshow object
const huckSlideshow = createCharacterSlideshow('huck');

// Event listeners für Dropdowns
document.addEventListener("DOMContentLoaded", function() {
  ['A', 'B'].forEach((target) => {
    const dropdown = document.getElementById('huckDropdown' + target);
    if (dropdown) {
      dropdown.addEventListener('change', function() {
        huckSlideshow.load(target);
      });
    }
  });
});