MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Phoenix-Larp Wiki

Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Das folgende JavaScript wird für alle Benutzer geladen.:
Markierung: Ersetzt
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
/* Das folgende JavaScript wird für alle Benutzer geladen. */
/* Das folgende JavaScript wird für alle Benutzer geladen. */
mw.loader.using(['mediawiki.util']).done(function () {
  // Nur auf schmalen Screens aktiv werden
  if (!window.matchMedia('(max-width: 768px)').matches) return;
  // Burger-Button einfügen (Barrierefreiheit beachten)
  var $btn = $('<button class="mw-burger" aria-label="Menü" aria-controls="mw-panel" aria-expanded="false"><span></span></button>');
  $('body').append($btn);
  // Overlay zum Schließen per Tap
  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();
  });
});

Version vom 9. Oktober 2025, 08:28 Uhr

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

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

  // Overlay zum Schließen per Tap
  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();
  });
});