ADOS Wiki

MediaWiki:Minerva.js: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Keine Bearbeitungszusammenfassung
Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung Erweiterte mobile Bearbeitung
Keine Bearbeitungszusammenfassung
Zeile 2: Zeile 2:


/* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */
/* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */
$(document).ready(function() {
(function () {
$('.menu ul:first').after(
  if (mw.config.get('skin') !== 'minerva') return;
'<ul class="toggle-list__list"> \
 
<li class="toggle-list-item"> \
  // ---- KONFIG: Links als [Label, Seitentitel] ----
<a class="toggle-list-item__anchor" href="#"> \
  const LINKS = [
<span class="minerva-icon minerva-icon--listBullet"></span> \
    ['Hauptkategorien', null], // Header/Toggle, kein Link
<span class="toggle-list-item__label">Hauptkategorien</span> \
    ['Alle A Dream of Scotland Abfüllungen', 'Kategorie:Alle A Dream of Scotland Abfüllungen'],
</a> \
    ['Alle A Dream of Ireland Abfüllungen',  'Kategorie:Alle A Dream of Ireland Abfüllungen'],
</li> \
    ['Alle A Dream of... – Der Rest der Welt', 'Kategorie:Alle A Dream of... – Der Rest der Welt Abfüllungen'],
<li class="toggle-list-item"> \
    ['Cigar Malt Übersicht', 'Kategorie:Cigar Malt Übersicht'],
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Alle_A_Dream_of_Scotland_Abfüllungen"> \
    ['Alle Rumbastic Abfüllungen', 'Kategorie:Alle Rumbastic Abfüllungen'],
<span class="minerva-icon"></span> \
    ['The Tasteful 8', 'Kategorie:The Tasteful 8'],
<span class="toggle-list-item__label">Alle A Dream of Scotland Abfüllungen</span> \
    ['Còmhlan Abfüllungen', 'Kategorie:Còmhlan Abfüllungen'],
</a> \
    ['Friendly Mr. Z Whiskytainment Abfüllungen', 'Kategorie:Friendly Mr. Z Whiskytainment Abfüllungen'],
</li> \
    ['Die Whisky Elfen Abfüllungen', 'Kategorie:Die Whisky Elfen Abfüllungen'],
<li class="toggle-list-item"> \
    ['The Fine Art of Whisky Abfüllungen', 'Kategorie:The Fine Art of Whisky Abfüllungen'],
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Alle_A_Dream_of_Ireland_Abfüllungen"> \
    ['The Forbidden Kingdom', 'Kategorie:The Forbidden Kingdom']
<span class="minerva-icon"></span> \
  ];
<span class="toggle-list-item__label">Alle A Dream of Ireland Abfüllungen</span> \
 
</a> \
  const BLOCK_ID = 'ados-custom-links';
</li> \
 
<li class="toggle-list-item"> \
  function findMenuList() {
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Alle_A_Dream_of..._–_Der_Rest_der_Welt_Abfüllungen"> \
    return (
<span class="minerva-icon"></span> \
      document.querySelector('#mw-mf-main-menu nav ul') ||
<span class="toggle-list-item__label">Alle A Dream of... – Der Rest der Welt</span> \
      document.querySelector('#mw-mf-main-menu ul') ||
</a> \
      document.querySelector('.minerva-main-menu .menu__list') ||
</li> \
      document.querySelector('.menu__list') ||
<li class="toggle-list-item"> \
      document.querySelector('.menu')
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Cigar_Malt_Übersicht"> \
    );
<span class="minerva-icon"></span> \
  }
<span class="toggle-list-item__label">Cigar Malt Übersicht</span> \
 
</a> \
  function build() {
</li> \
    const host = findMenuList();
<li class="toggle-list-item"> \
    if (!host) return false;
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Alle_Rumbastic_Abfüllungen"> \
    if (document.getElementById(BLOCK_ID)) return true; // schon vorhanden
<span class="minerva-icon"></span> \
 
<span class="toggle-list-item__label">Alle Rumbastic Abfüllungen</span> \
    const ul = document.createElement('ul');
</a> \
    ul.id = BLOCK_ID;
</li> \
    ul.className = 'toggle-list__list';
<li class="toggle-list-item"> \
 
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:The_Tasteful_8"> \
    // Header/Toggle
<span class="minerva-icon"></span> \
    const [headerLabel] = LINKS[0];
<span class="toggle-list-item__label">The Tasteful 8</span> \
    const headerLi = document.createElement('li');
</a> \
    headerLi.className = 'toggle-list-item';
</li> \
    const headerBtn = document.createElement('button');
<li class="toggle-list-item"> \
    headerBtn.type = 'button';
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Còmhlan_Abfüllungen"> \
    headerBtn.className = 'toggle-list-item__anchor';
<span class="minerva-icon"></span> \
    headerBtn.setAttribute('aria-expanded', 'true');
<span class="toggle-list-item__label">Còmhlan Abfüllungen</span> \
    headerBtn.innerHTML =
</a> \
      '<span class="minerva-icon minerva-icon--listBullet"></span>' +
</li> \
      `<span class="toggle-list-item__label">${headerLabel}</span>`;
<li class="toggle-list-item"> \
    headerLi.appendChild(headerBtn);
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Friendly_Mr._Z_Whiskytainment_Abfüllungen"> \
    ul.appendChild(headerLi);
<span class="minerva-icon"></span> \
 
<span class="toggle-list-item__label">Friendly Mr. Z Whiskytainment Abfüllungen</span> \
    // Container für die eigentlichen Links (collapsible)
</a> \
    const innerUl = document.createElement('ul');
</li> \
    innerUl.className = 'toggle-list__list';
<li class="toggle-list-item"> \
    innerUl.style.marginLeft = '12px';
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:Die_Whisky_Elfen_Abfüllungen"> \
 
<span class="minerva-icon"></span> \
    for (let i = 1; i < LINKS.length; i++) {
<span class="toggle-list-item__label">Die Whisky Elfen Abfüllungen</span> \
      const [label, title] = LINKS[i];
</a> \
      const li = document.createElement('li');
</li> \
      li.className = 'toggle-list-item';
<li class="toggle-list-item"> \
 
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:The_Fine_Art_of_Whisky_Abfüllungen"> \
      const a = document.createElement('a');
<span class="minerva-icon"></span> \
      a.className = 'toggle-list-item__anchor';
<span class="toggle-list-item__label">The Fine Art of Whisky Abfüllungen</span> \
      a.textContent = label;
</a> \
 
</li> \
      if (title) {
<li class="toggle-list-item"> \
        // sichere URL auf Basis des Seitentitels (Sonderzeichen/Leerzeichen ok)
<a class="toggle-list-item__anchor" href="/wiki/Kategorie:The_Forbidden_Kingdom"> \
        a.href = mw.util.getUrl(title);
<span class="minerva-icon"></span> \
      } else {
<span class="toggle-list-item__label">The Forbidden Kingdom</span> \
        a.href = '#';
</a> \
        a.setAttribute('role', 'button');
</li> \
      }
</ul>'
 
);
      const icon = document.createElement('span');
});
      icon.className = 'minerva-icon';
      a.prepend(icon);
 
      li.appendChild(a);
      innerUl.appendChild(li);
    }
 
    ul.appendChild(innerUl);
 
    // Toggle-Verhalten für Header
    headerBtn.addEventListener('click', function () {
      const expanded = this.getAttribute('aria-expanded') === 'true';
      this.setAttribute('aria-expanded', String(!expanded));
      innerUl.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');
        innerUl.style.display = 'none';
      }
    } catch (e) {}
 
    // Nach der ersten UL einfügen
    const firstUl = host.querySelector('ul') || host;
    (firstUl.parentNode || host).insertBefore(ul, firstUl.nextSibling);
 
    return true;
  }
 
  // Beim Laden versuchen
  document.addEventListener('DOMContentLoaded', () => setTimeout(build, 0));
 
  // Wenn das Menü erst beim Öffnen gebaut wird – nachklinken
  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: Menü taucht asynchron auf
  const obs = new MutationObserver(() => { if (build()) obs.disconnect(); });
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();
Abgerufen von „https://ados-wiki.de/wiki/MediaWiki:Minerva.js“