MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Phoenix-Larp Wiki

Keine Bearbeitungszusammenfassung
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 () {
mw.loader.using(['mediawiki.util']).done(function () {
   // Nur auf schmalen Screens aktiv werden
   // Nur auf schmalen Screens aktiv
   if (!window.matchMedia('(max-width: 768px)').matches) return;
   if (!window.matchMedia('(max-width: 768px)').matches) return;


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


   // Overlay zum Schließen per Tap
   // Overlay zum Schließen
   var $overlay = $('<div class="nav-overlay" tabindex="-1" aria-hidden="true"></div>');
   var $overlay = $('<div class="nav-overlay" tabindex="-1" aria-hidden="true"></div>');
   $('body').append($overlay);
   $('body').append($overlay);
Zeile 16: Zeile 16:
     $btn.attr('aria-expanded', 'false');
     $btn.attr('aria-expanded', 'false');
   }
   }
   function toggleMenu() {
   function toggleMenu() {
     var open = !$('body').hasClass('nav-open');
     var open = !$('body').hasClass('nav-open');
Zeile 25: Zeile 24:
   $btn.on('click', toggleMenu);
   $btn.on('click', toggleMenu);
   $overlay.on('click', closeMenu);
   $overlay.on('click', closeMenu);
   $(document).on('keydown', function (e) {
   $(document).on('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
    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();
   });
   });
});
});

Version vom 9. Oktober 2025, 08:33 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();
  });
});