MediaWiki:Mobile.js: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 1: / Zeile 1: @@
-/* Das folgende JavaScript wird für alle Nutzer der mobilen Ansicht geladen. */
+/* ADOS – Hauptkategorien ins Hamburger-Menü (robust für lazy Drawer) */
+mw.loader.using(['mediawiki.util']).then(function () {
-/* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */
+  var CATS = [
-$(document).ready(function() {
+    { title: 'Kategorie:Alle A Dream of Scotland Abfüllungen', label: 'A Dream of Scotland' },
-$('.menu ul:first').after(
+    { title: 'Kategorie:Alle A Dream of Ireland Abfüllungen',  label: 'A Dream of Ireland' },
-'<ul class="toggle-list__list"> \
+    { title: 'Kategorie:Alle A Dream of... – Der Rest der Welt Abfüllungen', label: 'Rest der Welt' },
-<li class="toggle-list-item"> \
+    { title: 'Kategorie:Cigar Malt Übersicht', label: 'Cigar Malt' },
-<a class="toggle-list-item__anchor" href="#"> \
+    { title: 'Kategorie:Alle Rumbastic Abfüllungen', label: 'Rumbastic' }
-<span class="minerva-icon minerva-icon--listBullet"></span> \
+  ];
-<span class="toggle-list-item__label">Beliebte Artikel</span> \
-</a> \
+  function blockHTML() {
-</li> \
+    var h = '<ul class="ados-hauptkategorien"><li class="menu-heading">Hauptkategorien</li>';
-<li class="toggle-list-item"> \
+    CATS.forEach(function (c) {
-<a class="toggle-list-item__anchor" href="/index.php?title=Kategorie:Alle_A_Dream_of_Scotland_Abfüllungen"> \
+      h += '<li><a class="mw-ui-icon mw-ui-icon-before" href="' +
-<span class="minerva-icon"></span> \
+        mw.util.getUrl(c.title) + '"><span>' +
-<span class="toggle-list-item__label">A Dream of Scotland</span> \
+        (c.label || c.title.replace(/^Kategorie:/,'')) +
-</a> \
+      '</span></a></li>';
-</li> \
+    });
-<li class="toggle-list-item"> \
+    return h + '</ul>';
-<a class="toggle-list-item__anchor" href="/index.php?title=Kategorie:Alle_A_Dream_of_Ireland_Abfüllungen"> \
+  }
-<span class="minerva-icon"></span> \
-<span class="toggle-list-item__label">A Dream of Ireland</span> \
+  function injectOnce() {
-</a> \
+    var menu = document.querySelector('#mw-mf-page-left .menu, .drawer .menu, .menu');
-</li> \
+    if (!menu || menu.querySelector('.ados-hauptkategorien')) return !!menu;
-<li class="toggle-list-item"> \
+    var firstUl = menu.querySelector('ul');
-<a class="toggle-list-item__anchor" href="/index.php?title=Kategorie:Alle_A_Dream_of..._–_Der_Rest_der_Welt_Abfüllungen"> \
+    if (!firstUl) return false;
-<span class="minerva-icon"></span> \
+    firstUl.insertAdjacentHTML('afterend', blockHTML());
-<span class="toggle-list-item__label">Rest der Welt</span> \
+    return true;
-</a> \
+  }
-</li> \
-<li class="toggle-list-item"> \
+  function onOpen() {
-<a class="toggle-list-item__anchor" href="/index.php?title=Kategorie:Cigar_Malt_Übersicht"> \
+    setTimeout(injectOnce, 10);
-<span class="minerva-icon"></span> \
+    setTimeout(injectOnce, 200);
-<span class="toggle-list-item__label">Cigar Malt</span> \
+    setTimeout(injectOnce, 600);
-</a> \
+  }
-</li> \
-<li class="toggle-list-item"> \
+  // Falls der Drawer schon im DOM ist
-<a class="toggle-list-item__anchor" href="/index.php?title=Kategorie:Alle_Rumbastic_Abfüllungen"> \
+  injectOnce();
-<span class="minerva-icon"></span> \
-<span class="toggle-list-item__label">Rumbastic</span> \
+  // Beim Öffnen des Hamburgers (verschiedene Selektoren je nach Version)
-</a> \
+  document.addEventListener('click', function (e) {
-</li> \
+    if (e.target.closest('#mw-mf-main-menu-button,.mw-ui-icon-minerva-drawer,.hamburger,.toggle-list-button')) onOpen();
-</ul>'
+  }, true);
-);
+  // Fallback: sobald der Drawer nachgeladen wird
+  new MutationObserver(injectOnce).observe(document.body, { childList: true, subtree: true });
 });