MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Phoenix-Larp Wiki

Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
(6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 34: Zeile 34:




 
// MediaWiki:Common.js  (ggf. zusätzlich in MediaWiki:Mobile.js, falls MobileFrontend aktiv ist)
 
mw.loader.using(['mediawiki.util']).done(function () {
mw.loader.using(['mediawiki.util']).done(function () {
   var bp = '(max-width: 768px)';
   function findSourceBody() {
  var mql = window.matchMedia(bp);
    var sel = [
 
      '#p-usertools .mw-portlet-body',
  // Zustände merken
      '#p-user-tools .mw-portlet-body',
  var moved = false;
       '#p-personal .mw-portlet-body'   // Fallback – hier sitzen "Anmelden", "Benutzerkonto…"
  var $srcBody = null;          // #p-usertools .mw-portlet-body (Quelle)
     ];
  var $dstBody = null;          // #p-usertools-mobile .mw-portlet-body (Ziel im Menü)
     for (var i = 0; i < sel.length; i++) {
  var $movedItems = $();        // jQuery-Collection der verschobenen Kindelemente
       var $el = $(sel[i]);
  var placeholder = null;       // Platzhalter-Kommentar an ursprünglicher Position
       if ($el.length) return $el;
 
  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');
     return $(); // leer
   }
   }


   function moveBodyChildrenIntoMenu() {
   function ensureClonePortlet($nav, headingText) {
     if (moved) return;
     var $clone = $('#p-usertools-left');
 
     if ($clone.length) return $clone.find('.mw-portlet-body');
    $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)
     // Portlet mit Standard-Classes => erbt 1:1 den Skin-Stil
     var children = $srcBody.contents().filter(function () {
     $clone = $(
       // Knoten: ELEMENT_NODE (1) oder Text mit sichtbarem Inhalt
       '<div id="p-usertools-left" class="mw-portlet" role="navigation" aria-label="' + headingText + '">' +
      return this.nodeType === 1 || (this.nodeType === 3 && this.nodeValue.trim().length > 0);
        '<h3>' + $('<div>').text(headingText).html() + '</h3>' +
    });
        '<div class="mw-portlet-body"></div>' +
     if (!children.length) return; // nichts zu verschieben
      '</div>'
     );


     // Platzhalter an der Originalposition, um die spätere Rückkehr zu erleichtern
     // ANS ENDE der bestehenden Portlets hängen -> "unter die bisherigen Menüpunkte"
     placeholder = document.createComment('p-usertools-body-placeholder');
     $nav.append($clone);
    $srcBody[0].appendChild(placeholder);
     return $clone.find('.mw-portlet-body');
 
    // Inhalte abklemmen und ins Ziel hängen (nicht klonen, Zustände behalten)
     $movedItems = $(children).detach();
    $dstBody.append($movedItems);
 
    moved = true;
   }
   }


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


     // Zurück in die ursprüngliche Body
     // Ziel-Container: zuerst #mw-navigation (Anisa), sonst #column-navigation als Fallback
     $movedItems.detach().appendTo($srcBody);
    var $nav = $('#mw-navigation');
     if (!$nav.length) $nav = $('#column-navigation');
    if (!$nav.length) return;


     // Ziel-Portlet optional aufräumen, wenn leer
     // Überschrift übernehmen (z.B. "Benutzer" oder "Persönliche Werkzeuge")
    if ($dstBody && $dstBody.length && !$dstBody.children().length) {
    var heading = ($srcBody.closest('.mw-portlet').children('h3').first().text() || 'Benutzer').trim();
      var $portlet = $dstBody.closest('#p-usertools-mobile');
      if ($portlet.length) $portlet.remove();
    }


     // Platzhalter entfernen
     var $dstBody = ensureClonePortlet($nav, heading);
     if (placeholder && placeholder.parentNode) {
     if (!$dstBody.length) return;
      placeholder.parentNode.removeChild(placeholder);
    }


     // Reset
     // Ziel leeren, dann frische KOPIE der direkten Kinder einfügen
     moved = false;
     $dstBody.empty();
     $movedItems = $();
     $srcBody.children().each(function () {
    placeholder = null;
      var $clone = $(this).clone(true, true);
    $dstBody = null;
      // doppelte IDs vermeiden
      $clone.find('[id]').addBack('[id]').removeAttr('id');
      $dstBody.append($clone);
    });
   }
   }


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


  // initial und bei Breakpoint-Wechsel
   apply();
   apply();
   if (mql.addEventListener) mql.addEventListener('change', apply);
   mw.hook('wikipage.content').add(apply); // bei Soft-Navigation erneut
  else mql.addListener(apply);
 
  // Bei AJAX/Soft-Navigation (z. B. nach Seitenwechsel per PJAX) erneut anwenden
  mw.hook('wikipage.content').add(apply);
});
});

Aktuelle Version vom 9. November 2025, 20:35 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();
  });
});



// MediaWiki:Common.js  (ggf. zusätzlich in MediaWiki:Mobile.js, falls MobileFrontend aktiv ist)
mw.loader.using(['mediawiki.util']).done(function () {
  function findSourceBody() {
    var sel = [
      '#p-usertools .mw-portlet-body',
      '#p-user-tools .mw-portlet-body',
      '#p-personal .mw-portlet-body'   // Fallback – hier sitzen "Anmelden", "Benutzerkonto…"
    ];
    for (var i = 0; i < sel.length; i++) {
      var $el = $(sel[i]);
      if ($el.length) return $el;
    }
    return $(); // leer
  }

  function ensureClonePortlet($nav, headingText) {
    var $clone = $('#p-usertools-left');
    if ($clone.length) return $clone.find('.mw-portlet-body');

    // Portlet mit Standard-Classes => erbt 1:1 den Skin-Stil
    $clone = $(
      '<div id="p-usertools-left" class="mw-portlet" role="navigation" aria-label="' + headingText + '">' +
        '<h3>' + $('<div>').text(headingText).html() + '</h3>' +
        '<div class="mw-portlet-body"></div>' +
      '</div>'
    );

    // ANS ENDE der bestehenden Portlets hängen -> "unter die bisherigen Menüpunkte"
    $nav.append($clone);
    return $clone.find('.mw-portlet-body');
  }

  function cloneUserStuffIntoLeftMenu() {
    var $srcBody = findSourceBody();
    if (!$srcBody.length) return;

    // Ziel-Container: zuerst #mw-navigation (Anisa), sonst #column-navigation als Fallback
    var $nav = $('#mw-navigation');
    if (!$nav.length) $nav = $('#column-navigation');
    if (!$nav.length) return;

    // Überschrift übernehmen (z.B. "Benutzer" oder "Persönliche Werkzeuge")
    var heading = ($srcBody.closest('.mw-portlet').children('h3').first().text() || 'Benutzer').trim();

    var $dstBody = ensureClonePortlet($nav, heading);
    if (!$dstBody.length) return;

    // Ziel leeren, dann frische KOPIE der direkten Kinder einfügen
    $dstBody.empty();
    $srcBody.children().each(function () {
      var $clone = $(this).clone(true, true);
      // doppelte IDs vermeiden
      $clone.find('[id]').addBack('[id]').removeAttr('id');
      $dstBody.append($clone);
    });
  }

  function apply() {
    cloneUserStuffIntoLeftMenu();
  }

  apply();
  mw.hook('wikipage.content').add(apply); // bei Soft-Navigation erneut
});