MediaWiki:Mobile.js

/* 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 (all skins; phone widths) */
(function () {
  // Detect MobileFrontend site (works across mobile skins)
  function isMobileSite() {
    return document.body && document.body.classList.contains('mw-mf');
  }

  function once(id) {
    // Avoid duplicates across hook re-runs
    return !document.getElementById(id);
  }

  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      fn();
    }
  }

  function runInit() {
    // Don’t run on very wide screens (tablet/desktop have native TOC)
    if (window.matchMedia('(min-width: 768px)').matches) return;

    // Only on normal content pages
    if (window.mw && mw.config && mw.config.get) {
      if (!mw.config.get('wgIsArticle')) return;
    }

    // Prevent duplicate UI
    if (!once('cps-open-toc')) return;

    // Find the content root; MobileFrontend restructures DOM, so be flexible
    var root =
      document.querySelector('#mw-content-text .mw-parser-output') ||
      document.querySelector('.mw-parser-output') ||
      document.getElementById('mw-content-text') ||
      document.querySelector('#content') ||
      document.body;

    // Collect headings (H2–H6). Prefer spans with .mw-headline (stable anchor ids)
    var items = [];
    var indexById = Object.create(null);
    var headingElById = Object.create(null);

    var headings = root.querySelectorAll('h2, h3, h4, h5, h6');
    headings.forEach(function (h) {
      var level = parseInt(h.tagName.slice(1), 10);
      if (level < 2 || level > 6) return;
      var headline = h.querySelector('.mw-headline') || h;
      var id = headline.id || h.id;
      var text = (headline.textContent || h.textContent || '').trim();
      if (!id || !text) return;

      items.push({ id: id, text: text, level: level });
      indexById[id] = items.length - 1;
      headingElById[id] = h; // keep the <h2..h6> for collapse checks
    });

    // Show only if there are enough headings to be useful (match core default)
    if (items.length < 3) return;

    // Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
    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);

    // 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);

    // Focus handling
    var lastFocus = null;
    function openOverlay() {
      lastFocus = document.activeElement;
      overlay.classList.add('is-open');
      overlay.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
      var firstLink = list.querySelector('a');
      if (firstLink) firstLink.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'; // reveal trigger now that we know we have headings
    btn.addEventListener('click', openOverlay);

    overlay.addEventListener('click', function (e) {
      // Click outside the bottom sheet closes
      if (e.target === overlay) closeOverlay();
    });
    overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);

    overlay.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') closeOverlay();
    });

    // ---------- Helpers for collapsed/parent detection ----------
    function findParentH2Item(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;
    }

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

      // Preferred: ARIA state on the heading
      var ae = h2El.getAttribute('aria-expanded');
      if (ae === 'false') return true;
      if (ae === 'true') return false;

      // Newer markup: <section aria-expanded="…"> wrapping the H2 and content
      var section = h2El.closest && h2El.closest('section');
      if (section && section.hasAttribute('aria-expanded')) {
        return section.getAttribute('aria-expanded') === 'false';
      }

      // Older MobileFrontend markup: .collapsible-block following the H2
      var next = h2El.nextElementSibling;
      if (next && next.classList.contains('collapsible-block')) {
        return !next.classList.contains('open-block');
      }

      // Last resort: hidden attribute on content block
      if (next && (next.hidden || next.getAttribute('hidden') !== null)) return true;

      return false;
    }

    function findAnchorForHeadingEl(hEl) {
      if (!hEl) return null;
      var span = hEl.querySelector && hEl.querySelector('.mw-headline[id]');
      if (span) return span;
      return hEl.id ? hEl : null;
    }

    function scrollToElement(el) {
      try {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } catch (_) {
        el.scrollIntoView(true);
      }
    }

    // ---------- TOC click behavior ----------
    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 target = document.getElementById(targetId);
      closeOverlay();

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

      // If user tapped H3+ and its parent H2 is collapsed → go to that H2 instead
      if (level >= 3) {
        var parentH2Item = findParentH2Item(targetId);
        if (parentH2Item) {
          var h2El = headingElById[parentH2Item.id] || null;
          var anchorEl = findAnchorForHeadingEl(h2El) || h2El;

          // Route to H2 if it's collapsed, or if for any reason the H3 anchor isn’t reachable
          if ((h2El && isH2Collapsed(h2El)) || !target) {
            if (anchorEl) {
              scrollToElement(anchorEl);
              if (anchorEl.id) {
                setTimeout(function () {
                  if (history && history.replaceState) {
                    history.replaceState(null, '', '#' + anchorEl.id);
                  } else {
                    location.hash = anchorEl.id;
                  }
                }, 200);
              }
              return;
            }
          }
        }
      }

      // Default behavior: go to the requested target (H2 or H3) when not inside a collapsed section
      if (target) {
        scrollToElement(target);
        setTimeout(function () {
          if (history && history.replaceState) {
            history.replaceState(null, '', '#' + targetId);
          } else {
            location.hash = targetId;
          }
        }, 200);
      }
    });

    // Re-hide on rotation/resize to tablet/desktop
    window.addEventListener(
      'resize',
      function () {
        if (window.matchMedia('(min-width: 768px)').matches) {
          btn.style.display = 'none';
          closeOverlay();
        } else {
          btn.style.display = 'flex';
        }
      },
      { passive: true }
    );
  }

  // Orchestrate timing: wait for MobileFrontend to be present and re-run on dynamic updates
  if (window.mw && mw.loader) {
    mw.loader.using('mobile.startup').then(function () {
      // Initial run
      ready(function () {
        if (isMobileSite()) runInit();
      });
      // Run again when content is replaced (edit preview, post-edit, etc.)
      if (mw.hook) {
        mw.hook('wikipage.content').add(function () {
          if (isMobileSite()) runInit();
        });
      }
    });
  } else {
    // Extremely defensive fallback (shouldn’t happen on MobileFrontend)
    ready(function () {
      if (isMobileSite()) runInit();
    });
  }
})();