MediaWiki:Mobile.js: Difference between revisions

Content deleted Content added
Inline
Revision as of 22:35, 17 October 2025

/* All JavaScript here will be loaded for users of the mobile site */
/* Note, there is no corresponding User:Username/mobile.js; however users may use User:Username/minerva.js */
function addPortletLink() {
  mw.log.warn(
    'addPortletLink is deprecated on desktop and never implemented on mobile',
    'More information on https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_(users)#addPortletLink'
  );
}

/* CapSach — Mobile TOC overlay (phones); ALWAYS open parent H2 before scrolling to H3+ */
(function () {
  /* ---------------- utilities ---------------- */
  function isMobileSite() {
    // Stable MF signal on <body> for gadgets/scripts.
    return document.body && document.body.classList.contains('mw-mf'); // MobileFrontend active. :contentReference[oaicite:1]{index=1}
  }
  function once(id) { return !document.getElementById(id); }
  function onReady(fn) { if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn); else fn(); }

  function getContentRoot() {
    return (
      document.querySelector('#mw-content-text .mw-parser-output') ||
      document.querySelector('.mw-parser-output') ||
      document.getElementById('mw-content-text') ||
      document.querySelector('#content') ||
      document.body
    );
  }

  // Scroll while compensating for any sticky headers in mobile skins.
  function smoothScrollTo(el) {
    var offset = 0;
    try {
      document.querySelectorAll('header, .minerva-header, .mw-header, .site-header, #header, .header').forEach(function (node) {
        var cs = getComputedStyle(node);
        if (cs.position === 'fixed' || cs.position === 'sticky') {
          var r = node.getBoundingClientRect();
          if (r.top <= 0 && r.bottom > 0) offset = Math.max(offset, r.bottom);
        }
      });
    } catch (_) {}
    var y = el.getBoundingClientRect().top + window.pageYOffset - Math.max(0, Math.floor(offset));
    try { window.scrollTo({ top: y, behavior: 'smooth' }); } catch (_) { window.scrollTo(0, y); }
  }

  // In MW 1.43+ IDs may be on .mw-headline (inside the heading wrapper). :contentReference[oaicite:2]{index=2}
  function anchorForHeadingEl(hEl) {
    if (!hEl) return null;
    var span = hEl.querySelector && hEl.querySelector('.mw-headline[id]');
    if (span) return span;
    return hEl.id ? hEl : null;
  }

  /* ---------------- section open logic ---------------- */
  // Try to locate the *actual* toggle that MobileFrontend attached.
  function getH2Toggle(h2El) {
    if (!h2El) return null;
    var wrapper = h2El.closest('.mw-heading') || h2El.parentElement || h2El;
    // Most robust: a button with aria-controls; otherwise any control with aria-expanded.
    var ctrl = wrapper.querySelector('button[aria-controls], [data-event-name="section-toggle"], .mf-section-toggle');
    if (!ctrl) ctrl = wrapper.querySelector('[aria-expanded]');
    // Legacy: the H2 or its sibling acts as the toggle.
    if (!ctrl && (h2El.hasAttribute('aria-expanded') || h2El.classList.contains('section-heading') || h2El.classList.contains('collapsible-heading'))) ctrl = h2El;
    if (!ctrl && h2El.previousElementSibling && (h2El.previousElementSibling.matches('[aria-expanded], .section-heading, .collapsible-heading'))) ctrl = h2El.previousElementSibling;
    if (!ctrl && h2El.nextElementSibling && (h2El.nextElementSibling.matches('[aria-expanded], .section-heading, .collapsible-heading'))) ctrl = h2El.nextElementSibling;
    return ctrl;
  }

  function h2IsCollapsed(h2El) {
    if (!h2El) return false;

    // Newer pattern: wrapper section with aria-expanded controls visibility.
    var sec = h2El.closest('section[aria-expanded]');
    if (sec) return sec.getAttribute('aria-expanded') === 'false';

    // Toggle state on heading/button itself.
    var t = getH2Toggle(h2El);
    if (t) {
      var ae = t.getAttribute('aria-expanded');
      if (ae === 'false') return true;
      if (ae === 'true') return false;
      var cid = t.getAttribute('aria-controls');
      if (cid) {
        var block = document.getElementById(cid);
        if (block) {
          if (block.hidden || block.getAttribute('hidden') !== null) return true;
          if (block.classList.contains('collapsible-block') && !block.classList.contains('open-block')) return true;
        }
      }
    }
    // Legacy: sibling .collapsible-block right after H2
    var sib = h2El.nextElementSibling;
    if (sib && sib.classList.contains('collapsible-block')) return !sib.classList.contains('open-block');
    return false;
  }

  // Synthesize a robust "activation" to trigger MF's own handler if present.
  function activate(el) {
    var ev = { bubbles: true, cancelable: true, view: window };
    try { el.dispatchEvent(new MouseEvent('mousedown', ev)); } catch (_) {}
    try { el.dispatchEvent(new MouseEvent('mouseup', ev)); } catch (_) {}
    try { el.dispatchEvent(new MouseEvent('click', ev)); } catch (_) { el.click(); }
  }

  // **Guarantee** the H2 section is open:
  // 1) try MF's toggle; 2) if still closed, **force-open** the DOM (wrapper+block).
  function ensureH2Open(h2El) {
    return new Promise(function (resolve) {
      if (!h2El || !h2IsCollapsed(h2El)) return resolve();

      var toggle = getH2Toggle(h2El);
      var obs = null, done = false;
      function finish() { if (!done) { done = true; if (obs) obs.disconnect(); resolve(); } }

      if (window.MutationObserver) {
        obs = new MutationObserver(function () {
          if (!h2IsCollapsed(h2El)) finish();
        });
        var targets = [];
        if (toggle) targets.push(toggle);
        var sec = h2El.closest('section[aria-expanded]');
        if (sec) targets.push(sec);
        var cid = toggle && toggle.getAttribute('aria-controls');
        var block = cid && document.getElementById(cid);
        if (block) targets.push(block);
        targets.forEach(function (t) {
          obs.observe(t, { attributes: true, attributeFilter: ['aria-expanded', 'class', 'hidden', 'style'] });
        });
      }

      // Step 1: Attempt the *real* toggle
      if (toggle) activate(toggle);

      // Step 2: After a short tick, **force open** if still collapsed
      setTimeout(function () {
        if (!h2IsCollapsed(h2El)) return finish();

        // Wrapper <section aria-expanded>
        var sec = h2El.closest('section[aria-expanded]');
        if (sec) sec.setAttribute('aria-expanded', 'true');

        // Toggle element state
        if (toggle) {
          toggle.setAttribute('aria-expanded', 'true');
          var cid = toggle.getAttribute('aria-controls');
          var block = cid && document.getElementById(cid);
          if (block) {
            block.hidden = false;
            block.removeAttribute('hidden');
            block.classList.add('open-block'); // legacy open marker
            block.style.display = '';          // clear any inline display:none
          }
        }

        // Legacy sibling block after H2
        var sib = h2El.nextElementSibling;
        if (sib && sib.classList.contains('collapsible-block')) {
          sib.hidden = false;
          sib.removeAttribute('hidden');
          sib.classList.add('open-block');
          sib.style.display = '';
        }

        // Final safety: even if some CSS remains, proceed; scrolling to H3 will now work.
        finish();
      }, 120);

      // Hard stop to prevent hangs
      setTimeout(finish, 900);
    });
  }

  /* ---------------- main initializer ---------------- */
  function initTOC() {
    if (window.matchMedia('(min-width: 768px)').matches) return;        // phones only
    if (mw.config && !mw.config.get('wgIsArticle')) return;             // content pages only
    if (!once('cps-open-toc')) return;                                  // avoid duplicates

    var root = getContentRoot();

    // Build heading list + indices
    var items = [];
    var indexById = Object.create(null);
    var headingElById = Object.create(null);

    root.querySelectorAll('h2, h3, h4, h5, h6').forEach(function (h) {
      var level = parseInt(h.tagName.slice(1), 10);
      if (level < 2 || level > 6) return;
      var anchor = h.querySelector('.mw-headline[id]') || h;            // works pre/post Heading-HTML changes :contentReference[oaicite:3]{index=3}
      var id = anchor.id || h.id;
      var text = (anchor.textContent || h.textContent || '').trim();
      if (!id || !text) return;
      items.push({ id: id, text: text, level: level });
      indexById[id] = items.length - 1;
      headingElById[id] = h;
    });

    if (items.length < 3) return; // mirror core TOC threshold

    // UI: trigger button
    var btn = document.createElement('button');
    btn.id = 'cps-open-toc';
    btn.type = 'button';
    btn.setAttribute('aria-label', 'Open table of contents');
    btn.innerHTML = '<span class="icon" aria-hidden="true">≡</span><span class="label">TOC</span>';
    document.body.appendChild(btn);

    // UI: overlay + panel
    var overlay = document.createElement('div');
    overlay.id = 'cps-toc-overlay';
    overlay.setAttribute('aria-hidden', 'true');

    var panel = document.createElement('div');
    panel.id = 'cps-toc-panel';
    panel.setAttribute('role', 'dialog');
    panel.setAttribute('aria-modal', 'true');
    panel.setAttribute('aria-label', 'Table of contents');

    var header = document.createElement('div');
    header.id = 'cps-toc-header';
    header.innerHTML = '<h2 id="cps-toc-title">Contents</h2><button id="cps-toc-close" type="button" aria-label="Close">×</button>';

    var list = document.createElement('ul');
    list.id = 'cps-toc-list';

    items.forEach(function (it) {
      var li = document.createElement('li');
      li.setAttribute('data-level', String(it.level));
      var a = document.createElement('a');
      a.href = '#' + it.id;
      a.textContent = it.text;
      li.appendChild(a);
      list.appendChild(li);
    });

    panel.appendChild(header);
    panel.appendChild(list);
    overlay.appendChild(panel);
    document.body.appendChild(overlay);

    // Open/close overlay
    var lastFocus = null;
    function openOverlay() {
      lastFocus = document.activeElement;
      overlay.classList.add('is-open');
      overlay.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
      var first = list.querySelector('a');
      if (first) first.focus({ preventScroll: true });
    }
    function closeOverlay() {
      overlay.classList.remove('is-open');
      overlay.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
      if (lastFocus && lastFocus.focus) lastFocus.focus({ preventScroll: true });
    }

    btn.style.display = 'flex';
    btn.addEventListener('click', openOverlay);
    overlay.addEventListener('click', function (e) { if (e.target === overlay) closeOverlay(); });
    overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
    overlay.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeOverlay(); });

    function parentH2For(id) {
      var idx = indexById[id];
      if (typeof idx !== 'number') return null;
      for (var i = idx - 1; i >= 0; i--) if (items[i].level === 2) return items[i];
      return null;
    }

    // NAV: open parent H2 (forced if needed) THEN scroll to the H3+ target
    list.addEventListener('click', function (e) {
      var a = e.target && e.target.closest('a');
      if (!a) return;
      e.preventDefault();

      var targetId = a.getAttribute('href').slice(1);
      var li = a.closest('li');
      var level = li ? parseInt(li.getAttribute('data-level') || '0', 10) : 0;

      closeOverlay(); // let layout settle first (iOS)

      if (level >= 3) {
        var p = parentH2For(targetId);
        if (p) {
          var h2El = headingElById[p.id];
          ensureH2Open(h2El).then(function () {
            // Prefer the intended H3; fall back to H2 anchor if needed
            var dest = document.getElementById(targetId) || anchorForHeadingEl(h2El) || h2El;
            if (!dest) return;
            requestAnimationFrame(function () {
              smoothScrollTo(dest);
              var finalId = dest.id || targetId;
              setTimeout(function () {
                if (history && history.replaceState) history.replaceState(null, '', '#' + finalId);
                else location.hash = finalId;
              }, 120);
            });
          });
          return;
        }
      }

      // H2 (or no parent): direct scroll
      var dest = document.getElementById(targetId) ||
                 (level === 2 ? anchorForHeadingEl(headingElById[targetId]) : null);
      if (!dest) return;
      requestAnimationFrame(function () {
        smoothScrollTo(dest);
        setTimeout(function () {
          if (history && history.replaceState) history.replaceState(null, '', '#' + (dest.id || targetId));
          else location.hash = dest.id || targetId;
        }, 120);
      });
    });

    // Hide/show the floating button on rotation
    window.addEventListener('resize', function () {
      if (window.matchMedia('(min-width: 768px)').matches) { btn.style.display = 'none'; closeOverlay(); }
      else { btn.style.display = 'flex'; }
    }, { passive: true });
  }

  /* ---------------- bootstrap ---------------- */
  if (window.mw && mw.loader) {
    // Wait for MobileFrontend client (sections/toggles are provided by it). :contentReference[oaicite:4]{index=4}
    mw.loader.using('mobile.startup').then(function () {
      onReady(function () { if (isMobileSite()) initTOC(); });
      if (mw.hook) mw.hook('wikipage.content').add(function () { if (isMobileSite()) initTOC(); });
    });
  } else {
    onReady(function () { if (isMobileSite()) initTOC(); });
  }
})();