MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 9. Oktober 2025, 08:41 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 bpMobile = '(max-width: 768px)';
  var mql = window.matchMedia(bpMobile);

  var originalParent, placeholder, moved = false;

  function ensurePortlet() {
    // Linke Spalte (Off-Canvas), darin sitzt bei Anisa die Navigation
    var $col = $('#column-navigation');
    if (!$col.length) return null;

    // Wenn noch kein Portlet für user-tools existiert: anlegen
    var $portlet = $('#p-usertools');
    if (!$portlet.length) {
      $portlet = $('<div id="p-usertools" class="portal"></div>');
      $portlet.append('<h3>Benutzer</h3><div class="body"></div>');
      // Sinnvoll weit oben einhängen – direkt unter Logo/Navigation
      // Entweder in #mw-navigation oder direkt ans Ende von #column-navigation
      var $mwNav = $('#mw-navigation');
      if ($mwNav.length) { $mwNav.prepend($portlet); }
      else { $col.prepend($portlet); }
    }
    return $portlet.find('.body');
  }

  function moveIntoMenu() {
    if (moved) return;
    var $userTools = $('#user-tools');
    if (!$userTools.length) return;

    // Merke ursprünglichen Ort, um bei Desktop zurückzusetzen
    originalParent = $userTools.parent()[0];
    placeholder = document.createComment('user-tools-placeholder');
    $userTools.before(placeholder);

    var $target = ensurePortlet();
    if (!$target) return;

    // Verschieben (nicht klonen, damit Zustände/Links konsistent bleiben)
    $userTools.appendTo($target);
    moved = true;

    // ARIA/Erreichbarkeit
    $userTools.attr({
      'role': 'navigation',
      'aria-label': 'Benutzerwerkzeuge'
    });
  }

  function moveBackToHeader() {
    if (!moved) return;
    var $userTools = $('#user-tools');
    if (!$userTools.length || !placeholder) return;

    // Zurück an die ursprüngliche Position
    $(placeholder).after($userTools);
    $(placeholder).remove();
    placeholder = null;
    moved = false;
  }

  function apply() {
    if (mql.matches) moveIntoMenu();
    else moveBackToHeader();
  }

  // Erster Lauf + bei Breakpoint-Wechsel
  apply();
  if (mql.addEventListener) mql.addEventListener('change', apply);
  else mql.addListener(apply); // ältere Browser

  // Failsafe: bei Artikel-/Ajax-Navigation erneut prüfen
  mw.hook('wikipage.content').add(apply);
});