MediaWiki:Minerva.js: Unterschied zwischen den Versionen

Version vom 18. Oktober 2025, 11:49 Uhr

/* All JavaScript here will be loaded for users of the MinervaNeue skin */

/* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */
(function () {
  if (mw.config.get('skin') !== 'minerva') return;

  // --- KONFIG: Label + Seitentitel (werden mit mw.util.getUrl() sicher verlinkt)
  const LINKS = [
    ['Hauptkategorien', null], // Header/Toggle, kein Link
    ['Alle A Dream of Scotland Abfüllungen', 'Kategorie:Alle A Dream of Scotland Abfüllungen'],
    ['Alle A Dream of Ireland Abfüllungen',  'Kategorie:Alle A Dream of Ireland Abfüllungen'],
    ['Alle A Dream of... – Der Rest der Welt', 'Kategorie:Alle A Dream of... – Der Rest der Welt Abfüllungen'],
    ['Cigar Malt Übersicht', 'Kategorie:Cigar Malt Übersicht'],
    ['Alle Rumbastic Abfüllungen', 'Kategorie:Alle Rumbastic Abfüllungen'],
    ['The Tasteful 8', 'Kategorie:The Tasteful 8'],
    ['Còmhlan Abfüllungen', 'Kategorie:Còmhlan Abfüllungen'],
    ['Friendly Mr. Z Whiskytainment Abfüllungen', 'Kategorie:Friendly Mr. Z Whiskytainment Abfüllungen'],
    ['Die Whisky Elfen Abfüllungen', 'Kategorie:Die Whisky Elfen Abfüllungen'],
    ['The Fine Art of Whisky Abfüllungen', 'Kategorie:The Fine Art of Whisky Abfüllungen'],
    ['The Forbidden Kingdom', 'Kategorie:The Forbidden Kingdom']
  ];

  const BLOCK_ID = 'ados-custom-links';

  function findMenuList() {
    return (
      document.querySelector('#mw-mf-main-menu nav ul') ||
      document.querySelector('#mw-mf-main-menu ul') ||
      document.querySelector('.minerva-main-menu .menu__list') ||
      document.querySelector('.menu__list') ||
      document.querySelector('.menu')
    );
  }

  function build() {
    const host = findMenuList();
    if (!host) return false;
    if (document.getElementById(BLOCK_ID)) return true; // schon eingebaut

    // äußerer Block
    const outer = document.createElement('ul');
    outer.id = BLOCK_ID;
    outer.className = 'toggle-list__list';

    // Header mit Icon + Toggle
    const [headerLabel] = LINKS[0];
    const headerLi = document.createElement('li');
    headerLi.className = 'toggle-list-item';

    const headerBtn = document.createElement('button');
    headerBtn.type = 'button';
    headerBtn.className = 'toggle-list-item__anchor';
    headerBtn.setAttribute('aria-expanded', 'true');
    headerBtn.innerHTML =
      '<span class="minerva-icon minerva-icon--listBullet"></span>' +
      `<span class="toggle-list-item__label">${headerLabel}</span>`;

    headerLi.appendChild(headerBtn);
    outer.appendChild(headerLi);

    // Unterpunkte-Liste (ohne Icons)
    const inner = document.createElement('ul');
    inner.className = 'toggle-list__list';
    inner.style.marginLeft = '10px';

    for (let i = 1; i < LINKS.length; i++) {
      const [label, title] = LINKS[i];
      const li = document.createElement('li');
      li.className = 'toggle-list-item';

      const a = document.createElement('a');
      a.className = 'toggle-list-item__anchor';
      a.textContent = label;
      a.href = title ? mw.util.getUrl(title) : '#';

      // KEIN Icon bei Unterpunkten
      li.appendChild(a);
      inner.appendChild(li);
    }
    outer.appendChild(inner);

    // Toggle-Logik
    headerBtn.addEventListener('click', function () {
      const expanded = this.getAttribute('aria-expanded') === 'true';
      this.setAttribute('aria-expanded', String(!expanded));
      inner.style.display = expanded ? 'none' : '';
      try { localStorage.setItem(BLOCK_ID + ':collapsed', expanded ? '1' : '0'); } catch (e) {}
    });

    // Zustand wiederherstellen
    try {
      if (localStorage.getItem(BLOCK_ID + ':collapsed') === '1') {
        headerBtn.setAttribute('aria-expanded', 'false');
        inner.style.display = 'none';
      }
    } catch (e) {}

    // nach der ersten vorhandenen UL einfügen (direkt unter Start/Zufällige Seite)
    const firstUl = host.querySelector('ul') || host;
    (firstUl.parentNode || host).insertBefore(outer, firstUl.nextSibling);

    return true;
  }

  // beim Laden probieren …
  document.addEventListener('DOMContentLoaded', () => setTimeout(build, 0));
  // … und wenn das Burger-Menü dynamisch aufgebaut wird, nochmal
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('button, a');
    if (!btn) return;
    const s = (btn.className + ' ' + btn.id).toLowerCase();
    if (s.includes('menu') || s.includes('hamburger') || s.includes('main-menu')) {
      setTimeout(build, 250);
    }
  });
  // Fallback: Observer für lazy DOM
  const obs = new MutationObserver(() => { if (build()) obs.disconnect(); });
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();