MediaWiki:Minerva.js: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
 
(27 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* All JavaScript here will be loaded for users of the MinervaNeue skin */
/* All JavaScript here will be loaded for users of the MinervaNeue skin */


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


/* ADOS – Hauptkategorien ins Minerva-Hamburger-Menü (Mobile) */
  const BLOCK_ID = 'ados-custom-links';
mw.loader.using(['mediawiki.util', 'mediawiki.notify']).then(function () {


   // === KONFIGURATION: Deine Hauptkategorien ===
   // --- KONFIG: Label + Seitentitel (werden mit mw.util.getUrl() sicher verlinkt)
   // title = exakter Seitentitel (inkl. "Kategorie:")
   // Header/Sektionen haben title = null
   // label = kurzes Label im Menü
   // WICHTIG: "📊 Diagramm / Statistik" steht ganz oben
   var CATS = [
   const LINKS = [
     { title: 'Kategorie:Alle A Dream of Scotland Abfüllungen', label: 'A Dream of Scotland' },
     ['📊 Diagramm / Statistik', null],
     { title: 'Kategorie:Alle A Dream of Ireland Abfüllungen', label: 'A Dream of Ireland' },
    ['Abfüllungen pro Jahr', 'Abfüllungen_pro_Jahr'],
     { title: 'Kategorie:Alle A Dream of... – Der Rest der Welt Abfüllungen', label: 'Rest der Welt' },
    // optional:
     { title: 'Kategorie:Cigar Malt Übersicht', label: 'Cigar Malt' },
    // ['Top 5 – Community', 'Top_5'],
     { title: 'Kategorie:Alle Rumbastic Abfüllungen', label: 'Rumbastic' },
 
     { title: 'Kategorie:The Tasteful 8', label: 'The Tasteful 8' },
    ['Hauptkategorien', null],
     { title: 'Kategorie:Còmhlan Abfüllungen', label: 'Còmhlan' },
    ['Alle A Dream of Scotland Abfüllungen', 'Kategorie:Alle A Dream of Scotland Abfüllungen'],
     { title: 'Kategorie:Friendly Mr. Z Whiskytainment Abfüllungen', label: 'Friendly Mr. Z' },
     ['Alle A Dream of Ireland Abfüllungen', 'Kategorie:Alle A Dream of Ireland Abfüllungen'],
     { title: 'Kategorie:Die Whisky Elfen Abfüllungen', label: 'Die Whisky Elfen' },
     ['Alle A Dream of... – Der Rest der Welt', 'Kategorie:Alle A Dream of... – Der Rest der Welt Abfüllungen'],
     { title: 'Kategorie:The Fine Art of Whisky Abfüllungen', label: 'Fine Art of Whisky' },
     ['Cigar Malt Übersicht', 'Kategorie:Cigar Malt Übersicht'],
     { title: 'Kategorie:The Forbidden Kingdom', label: 'The Forbidden Kingdom' }
     ['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'],
    ['Sonderabfüllungen', 'Kategorie:Sonderabfüllungen']
   ];
   ];


  // === Hilfsfunktionen ===
   function findMenuList() {
   function buildListHTML() {
     return (
     var html = '<ul class="ados-hauptkategorien">';
      document.querySelector('#mw-mf-main-menu nav ul') ||
    html += '<li class="menu-heading">Hauptkategorien</li>';
      document.querySelector('#mw-mf-main-menu ul') ||
    CATS.forEach(function (c) {
      document.querySelector('.minerva-main-menu .menu__list') ||
      html += '<li><a class="mw-ui-icon mw-ui-icon-before" href="' +
      document.querySelector('.menu__list') ||
        mw.util.getUrl(c.title) + '"><span>' + (c.label || c.title.replace(/^Kategorie:/,'')) +
      document.querySelector('.menu')
         '</span></a></li>';
    );
    });
  }
     html += '</ul>';
 
     return html;
  function buildSectionsFromLinks(links) {
    const sections = [];
    let current = null;
 
    for (const [label, title] of links) {
      if (title === null) {
        current = { header: label, items: [] };
        sections.push(current);
      } else if (current) {
         current.items.push({ label, title });
      }
     }
     return sections;
   }
   }


   function tryInsertOnce() {
   function build() {
     // Drawer-Menü: #mw-mf-page-left .menu ; First UL = Standardblock
    const host = findMenuList();
    var menu = document.querySelector('#mw-mf-page-left .menu');
    if (!host) return false;
    if (!menu) return false;
 
    if (menu.querySelector('.ados-hauptkategorien')) return true; // schon drin
     // schon eingebaut?
    if (document.getElementById(BLOCK_ID)) return true;
 
    const sections = buildSectionsFromLinks(LINKS);
    if (!sections.length) return false;
 
    // Container für alle Sektionen
    const container = document.createElement('div');
    container.id = BLOCK_ID;
 
    sections.forEach((sec, idx) => {
      const secId = `${BLOCK_ID}-sec-${idx}`;
 
      // äußerer Block je Sektion
      const outer = document.createElement('ul');
      outer.className = 'toggle-list__list';
 
      // Header mit Icon + Toggle
      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">${sec.header}</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';
 
      sec.items.forEach(({ label, title }) => {
        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 = mw.util.getUrl(title);
 
        li.appendChild(a);
        inner.appendChild(li);
      });
 
      outer.appendChild(inner);
 
      // Toggle-Logik pro Sektion
      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(secId + ':collapsed', expanded ? '1' : '0'); } catch (e) {}
      });


     var firstUl = menu.querySelector('ul');
      // Zustand wiederherstellen
     if (!firstUl) return false;
      try {
        if (localStorage.getItem(secId + ':collapsed') === '1') {
          headerBtn.setAttribute('aria-expanded', 'false');
          inner.style.display = 'none';
        }
      } catch (e) {}
 
      container.appendChild(outer);
    });
 
    // nach der ersten vorhandenen UL einfügen (direkt unter Start/Zufällige Seite)
     const firstUl = host.querySelector('ul') || host;
     (firstUl.parentNode || host).insertBefore(container, firstUl.nextSibling);


    firstUl.insertAdjacentHTML('afterend', buildListHTML());
     return true;
     return true;
   }
   }


   function onDrawerOpen() {
   // beim Laden probieren …
    // Mehrere Versuche – das Menü wird manchmal verzögert aufgebaut
  document.addEventListener('DOMContentLoaded', () => setTimeout(build, 0));
     setTimeout(tryInsertOnce, 30);
 
     setTimeout(tryInsertOnce, 200);
  // … und wenn das Burger-Menü dynamisch aufgebaut wird, nochmal
     setTimeout(tryInsertOnce, 600);
  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 });
})();
 
 
// ----------Abschnitte Geöffnet-----------


  // === Trigger ===
/* Minerva: Alle Abschnitte automatisch ausklappen */
   // 1) Sofort versuchen (falls das Menü schon da ist)
(function () {
   tryInsertOnce();
   if (!window.mw) return;
   if (mw.config.get('skin') !== 'minerva') return;


   // 2) Auf Klick auf den Drawer-Button reagieren
   function expandAll() {
  // (verschiedene Selektoren je nach MW/Minerva-Version)
    // 1) Alle Toggle-Buttons, die noch "zu" sind, anklicken
  var selectors = [
     document.querySelectorAll('button.section-toggle[aria-expanded="false"], [data-event-name="section-toggle"][aria-expanded="false"]').forEach(function (btn) {
    '#mw-mf-main-menu-button',
      try { btn.click(); } catch(e) {}
     'button.hamburger',
    });
    '.mw-ui-icon-minerva-drawer',
    '.header .toggle-list-button'
  ];
  selectors.forEach(function (sel) {
    var btn = document.querySelector(sel);
    if (btn) btn.addEventListener('click', onDrawerOpen, false);
  });


  // 3) Fallback: MutationObserver – sobald das Menü in den DOM kommt, einfügen
    // 2) Sicherheitsgurt: typische Inhalts-Container sichtbar erzwingen
  var mo = new MutationObserver(function (mutations) {
     document.querySelectorAll('.collapsible-block, .mf-section-contents, .section-content').forEach(function (el) {
     if (tryInsertOnce()) return; // hat geklappt, nichts weiter tun
       el.style.display = 'block';
    mutations.forEach(function (m) {
       el.hidden = false;
       if (!m.addedNodes) return;
      el.classList.add('open-block');
       for (var i = 0; i < m.addedNodes.length; i++) {
      el.classList.remove('collapsed');
        var n = m.addedNodes[i];
        if (n.nodeType === 1 && (n.matches('#mw-mf-page-left') || n.matches('.menu') || n.querySelector?.('.menu'))) {
          tryInsertOnce();
          break;
        }
      }
     });
     });
   });
   }
  mo.observe(document.body, { childList: true, subtree: true });
 
  // Beim Rendern und bei dynamischen Änderungen erneut ausführen
  function init() {
    expandAll();
    // Nochmal kurz nach Seitenaufbau und nach spätem JS
    setTimeout(expandAll, 50);
    setTimeout(expandAll, 400);
  }


  // Optionaler Hinweis im Debugmodus
   if (mw.loader && mw.loader.using) {
   if (/\bdebug=1\b/.test(location.search)) {
    mw.loader.using(['mobile.init']).always(function () {
    mw.notify('Minerva.js aktiv – Hauptkategorien-Menü wird eingefügt.');
      if (mw.hook) mw.hook('wikipage.content').add(init);
      init();
    });
  } else {
    document.addEventListener('DOMContentLoaded', init);
   }
   }
});
})();