MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* CrabCodex — Minimal global JS. No external libs. Optional UX enhancements. */
(function () {
  'use strict';

  /* Smooth scroll for same-page anchors */
  document.querySelectorAll('a[href^="#"]').forEach(function (a) {
    var id = a.getAttribute('href').slice(1);
    if (!id) return;
    var target = document.getElementById(id);
    if (target && a.getAttribute('href') !== '#') {
      a.addEventListener('click', function (e) {
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    }
  });

  /* TOC: collapsible on small screens, optional sticky + active link */
  var toc = document.querySelector('.toc') || document.querySelector('#toc') || document.querySelector('.vector-toc');
  if (toc) {
    var titleEl = toc.querySelector('.toctitle') || toc.querySelector('div:first-child') || toc.firstElementChild;
    if (titleEl && window.matchMedia('(max-width: 767px)').matches) {
      var wrapper = document.createElement('div');
      wrapper.className = 'cc-toc-mobile';
      toc.parentNode.insertBefore(wrapper, toc);
      wrapper.appendChild(toc);
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'cc-toc-toggle';
      btn.setAttribute('aria-expanded', 'false');
      btn.textContent = titleEl.textContent || 'Contents';
      btn.style.cssText = 'width:100%;padding:12px 16px;text-align:left;font-weight:700;background:var(--cc-bg-elevated);border:1px solid var(--cc-border);border-radius:8px;cursor:pointer;color:inherit;';
      toc.style.display = 'none';
      wrapper.insertBefore(btn, toc);
      btn.addEventListener('click', function () {
        var open = toc.style.display !== 'none';
        toc.style.display = open ? 'none' : 'block';
        btn.setAttribute('aria-expanded', open ? 'false' : 'true');
      });
    }
    if (window.matchMedia('(min-width: 1024px)').matches) {
      toc.classList.add('sticky');
    }
  }

  /* Optional: highlight TOC link for current section (on scroll) */
  var tocLinks = document.querySelectorAll('.toc a[href^="#"], #toc a[href^="#"], .vector-toc a[href^="#"]');
  if (tocLinks.length && 'IntersectionObserver' in window) {
    var headings = [];
    tocLinks.forEach(function (link) {
      var id = (link.getAttribute('href') || '').slice(1);
      var el = document.getElementById(id);
      if (el) headings.push({ id: id, el: el, link: link });
    });
    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          var id = entry.target.id;
          tocLinks.forEach(function (l) { l.classList.remove('cc-toc-active'); });
          var active = document.querySelector('.toc a[href="#' + id + '"], #toc a[href="#' + id + '"]');
          if (active) active.classList.add('cc-toc-active');
        });
      },
      { rootMargin: '-80px 0px -60% 0px', threshold: 0 }
    );
    headings.forEach(function (h) { observer.observe(h.el); });
  }
})();