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(el, key) {
    // prüft href (inkl. URL-encodiert), data-href, title, Text
    var href = (el.getAttribute('href') || '');
    if (href.indexOf('#' + key + ':') === 0) return href;                 // "#link:..."
    if (href.indexOf('%23' + key + ':') !== -1) return href;              // "...%23link:..."
    var dh  = el.getAttribute('data-href') || '';
    if (dh.indexOf('#' + key + ':') === 0) return dh;
    var tt  = el.getAttribute('title') || '';
    if (tt.indexOf('#' + key + ':') === 0) return tt;
    var tx  = (el.textContent || '').trim();
    if (tx.indexOf('#' + key + ':') === 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);
    }
  });
});