MediaWiki:Common.js: Unterschied zwischen den Versionen

/* Das folgende JavaScript wird für alle Benutzer geladen. */
/*
/* Sidebar: Heading als Link + Untermenüs (#group:) – Vector 2022 */
mw.loader.using( ['mediawiki.util'] ).then(function () {
  if ( mw.config.get('skin') !== 'vector-2022' ) return;

  var panel = document.getElementById('mw-panel');
  if (!panel) return;

function getDirective(a, key) {
  if (!a) return null;
  var want = '#' + key.toLowerCase() + ':'; // z.B. "#group:" oder "#link:"
  var href = a.getAttribute('href') || '';

  // 1) Normales href – Hash sauber auslesen (funktioniert auch bei /wiki/…#group:…)
  try {
    var u = new URL(href, location.href);
    var hash = (u.hash || '').toLowerCase(); // inkl. führendem '#'
    if (hash.indexOf(want) === 0) return u.hash;                              // "#group:Mana"
    var pos = hash.indexOf(want);
    if (pos > 0) return u.hash.slice(pos);                                    // "...#group:Mana"
  } catch (e) {
    // Falls es keine gültige URL ist, fallback auf einfache Stringsuche
    var low = href.toLowerCase();
    if (low.indexOf(want) === 0) return href;
    var pos2 = low.indexOf(want);
    if (pos2 > 0) return href.slice(pos2);
  }

  // 2) data-href oder title tragen manchmal die Direktive
  var dh = (a.getAttribute('data-href') || '').toLowerCase();
  if (dh.indexOf(want) === 0) return a.getAttribute('data-href');

  var tt = (a.getAttribute('title') || '').toLowerCase();
  if (tt.indexOf(want) === 0) return a.getAttribute('title');

  // 3) Notfalls steht die Direktive als sichtbarer Text im Link
  var tx = (a.textContent || '').trim();
  if (tx.toLowerCase().indexOf(want) === 0) return tx;

  return null;
}

  function directiveTarget(directiveValue) {
    // extrahiert den Teil nach "link:" bzw. "group:"
    var v = decodeURIComponent(directiveValue.replace(/^.*?(#|%23)(link|group):/, ''));
    return v.replace(/^\s+|\s+$/g, '');
  }
  function wikiHref(title) { return mw.util.getUrl(title); }

  function makeToggleBtn(expanded) {
    var b = document.createElement('button');
    b.type = 'button';
    b.className = 'kr-sb-toggle';
    b.setAttribute('aria-expanded', expanded ? 'true' : 'false');
    b.setAttribute('title', expanded ? 'Zuklappen' : 'Aufklappen');
    b.addEventListener('click', function (e) {
      e.preventDefault();
      var wrap = b.closest('.kr-sb-wrap, .kr-sb-group');
      var isCollapsed = wrap.classList.toggle('is-collapsed');
      b.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
    });
    return b;
  }

  panel.querySelectorAll('.vector-menu-portal').forEach(function (portlet) {
    var heading = portlet.querySelector('.vector-menu-heading');
    var list    = portlet.querySelector('.vector-menu-content-list');
    if (!heading || !list) return;

    // 1) #link:… → Überschrift klickbar machen
    var linkDirectiveAnchor = Array.from(list.querySelectorAll('li > a')).find(function (a) {
      return !!getDirective(a, 'link');
    });
    if (linkDirectiveAnchor) {
      var dir = getDirective(linkDirectiveAnchor, 'link');
      var target = directiveTarget(dir) || 'Hauptseite';
      var labelEl = heading.querySelector('.vector-menu-heading-label') || heading;
      var labelText = labelEl.textContent.trim() || target;
      var link = document.createElement('a');
      link.className = 'kr-sb-heading-link';
      link.href = wikiHref(target);
      link.textContent = labelText;
      labelEl.textContent = '';
      labelEl.appendChild(link);
      // Direktive entfernen
      linkDirectiveAnchor.closest('li').remove();
    }

    // 2) Portlet-Toggle hinzufügen (Heading bleibt Link, Pfeil klappt)
    if (!portlet.classList.contains('kr-sb-wrap')) {
      portlet.classList.add('kr-sb-wrap');
      heading.appendChild( makeToggleBtn(true) );
    }

    // 3) #group:… → Untermenüs bauen
    var items = Array.from(list.children); // <li>…
    for (var i = 0; i < items.length; i++) {
      var li = items[i];
      if (!li) continue;
      var a  = li.querySelector('a');
      if (!a) continue;
      var gdir = getDirective(a, 'group');
      if (!gdir) continue;

      var groupLabel = a.textContent.trim() || directiveTarget(gdir) || 'Gruppe';
      li.textContent = '';
      li.classList.add('kr-sb-group');

      var header = document.createElement('div');
      header.className = 'kr-sb-group-header';
      var titleSpan = document.createElement('span');
      titleSpan.className = 'kr-sb-group-title';
      titleSpan.textContent = groupLabel;
      var btn = makeToggleBtn(true);
      header.appendChild(titleSpan);
      header.appendChild(btn);
      li.appendChild(header);

      var sub = document.createElement('ul');
      sub.className = 'kr-sb-sub';
      while (items[i+1] && !getDirective((items[i+1].querySelector('a')||{}), 'group')) {
        sub.appendChild(items[i+1]);
        items[i+1] = null; // verbraucht
        i++;
      }
      li.appendChild(sub);
    }
  });
});