MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 9. Oktober 2025, 08:46 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */
mw.loader.using(['mediawiki.util']).done(function () {
  // Nur auf schmalen Screens aktiv
  if (!window.matchMedia('(max-width: 768px)').matches) return;

  // Burger-Button einfügen (mit ARIA)
  var $btn = $('<button class="mw-burger" aria-label="Menü" aria-controls="column-navigation" aria-expanded="false"><span></span></button>');
  $('body').append($btn);

  // Overlay zum Schließen
  var $overlay = $('<div class="nav-overlay" tabindex="-1" aria-hidden="true"></div>');
  $('body').append($overlay);

  function closeMenu() {
    $('body').removeClass('nav-open');
    $btn.attr('aria-expanded', 'false');
  }
  function toggleMenu() {
    var open = !$('body').hasClass('nav-open');
    $('body').toggleClass('nav-open', open);
    $btn.attr('aria-expanded', String(open));
  }

  $btn.on('click', toggleMenu);
  $overlay.on('click', closeMenu);
  $(document).on('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });

  // Schließt das Menü, wenn Viewport wieder breit wird
  window.matchMedia('(min-width: 769px)').addEventListener('change', function (mql) {
    if (mql.matches) closeMenu();
  });
});





mw.loader.using(['mediawiki.util']).done(function () {
  var bp = '(max-width: 768px)';
  var mql = window.matchMedia(bp);

  // Zustände merken
  var moved = false;
  var $srcBody = null;          // #p-usertools .mw-portlet-body (Quelle)
  var $dstBody = null;          // #p-usertools-mobile .mw-portlet-body (Ziel im Menü)
  var $movedItems = $();        // jQuery-Collection der verschobenen Kindelemente
  var placeholder = null;       // Platzhalter-Kommentar an ursprünglicher Position

  function getOrCreateDestination() {
    // Menü-Spalte (Off-Canvas) – in Anisa ist das die linke Spalte
    var $col = $('#column-navigation');
    if (!$col.length) return null;

    // Bevorzugt innerhalb von #mw-navigation arbeiten, wenn vorhanden
    var $mwNav = $('#mw-navigation');
    var $container = $mwNav.length ? $mwNav : $col;

    // Ziel-Portlet anlegen, falls nicht vorhanden
    var $portlet = $('#p-usertools-mobile');
    if (!$portlet.length) {
      $portlet = $(
        '<div id="p-usertools-mobile" class="mw-portlet">' +
          '<h3>Benutzer</h3>' +
          '<div class="mw-portlet-body"></div>' +
        '</div>'
      );
      // Sinnvoll weit oben einfügen
      $container.prepend($portlet);
    }
    return $portlet.find('.mw-portlet-body');
  }

  function moveBodyChildrenIntoMenu() {
    if (moved) return;

    $srcBody = $('#p-usertools .mw-portlet-body');
    if (!$srcBody.length) return; // Quelle existiert nicht → nichts tun

    $dstBody = getOrCreateDestination();
    if (!$dstBody || !$dstBody.length) return;

    // Kinder der Source-Body ermitteln (nur echte Kindelemente, Whitespace vermeiden)
    var children = $srcBody.contents().filter(function () {
      // Knoten: ELEMENT_NODE (1) oder Text mit sichtbarem Inhalt
      return this.nodeType === 1 || (this.nodeType === 3 && this.nodeValue.trim().length > 0);
    });
    if (!children.length) return; // nichts zu verschieben

    // Platzhalter an der Originalposition, um die spätere Rückkehr zu erleichtern
    placeholder = document.createComment('p-usertools-body-placeholder');
    $srcBody[0].appendChild(placeholder);

    // Inhalte abklemmen und ins Ziel hängen (nicht klonen, Zustände behalten)
    $movedItems = $(children).detach();
    $dstBody.append($movedItems);

    moved = true;
  }

  function moveBackToOriginalBody() {
    if (!moved) return;
    if (!$srcBody || !$srcBody.length || !$movedItems.length) {
      // Failsafe: Reset interner Flags
      moved = false;
      $movedItems = $();
      placeholder = null;
      return;
    }

    // Zurück in die ursprüngliche Body
    $movedItems.detach().appendTo($srcBody);

    // Ziel-Portlet optional aufräumen, wenn leer
    if ($dstBody && $dstBody.length && !$dstBody.children().length) {
      var $portlet = $dstBody.closest('#p-usertools-mobile');
      if ($portlet.length) $portlet.remove();
    }

    // Platzhalter entfernen
    if (placeholder && placeholder.parentNode) {
      placeholder.parentNode.removeChild(placeholder);
    }

    // Reset
    moved = false;
    $movedItems = $();
    placeholder = null;
    $dstBody = null;
  }

  function apply() {
    if (mql.matches) {
      // Mobile → nur Body-Inhalte verschieben
      moveBodyChildrenIntoMenu();
    } else {
      // Desktop → zurückschieben
      moveBackToOriginalBody();
    }
  }

  // initial und bei Breakpoint-Wechsel
  apply();
  if (mql.addEventListener) mql.addEventListener('change', apply);
  else mql.addListener(apply);

  // Bei AJAX/Soft-Navigation (z. B. nach Seitenwechsel per PJAX) erneut anwenden
  mw.hook('wikipage.content').add(apply);
});