|
// CapSach — Mobile TOC overlay (all skins; phone widths)
/* 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 () {
// Don’t run on very wide screens (tablet/desktop have native TOC)
/* ---------------- utilities ---------------- */
if (window.matchMedia('(min-width: 768px)').matches) return;
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(); }
// Only on normal content pages
function getContentRoot() {
if (window.mw && mw.config && mw.config.get) {
return (
var isArticle = !!mw.config.get('wgIsArticle');
document.querySelector('#mw-content-text .mw-parser-output') ||
if (!isArticle) return;
document.querySelector('.mw-parser-output') ||
document.getElementById('mw-content-text') ||
document.querySelector('#content') ||
document.body
);
}
// Find the content root; MobileFrontend restructures DOM, so be flexible
// Scroll while compensating for any sticky headers in mobile skins.
var root =
function smoothScrollTo(el) {
document.querySelector('#mw-content-text .mw-parser-output') ||
var offset = 0;
document.querySelector('.mw-parser-output') ||
try {
document.getElementById('mw-content-text') ||
document.querySelectorAll('header, .minerva-header, .mw-header, .site-header, #header, .header').forEach(function (node) {
document.querySelector('#content') ||
var cs = getComputedStyle(node);
document.body;
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); }
}
// InCollect MWheadings 1(H2–H6).43+ IDsPrefer mayspans be onwith .mw-headline (insidestable theanchor heading wrapperids). :contentReference[oaicite:2]{index=2}
var items = [];
function anchorForHeadingEl(hEl) {
var headings = root.querySelectorAll('h2, h3, h4, h5, h6');
if (!hEl) return null;
headings.forEach(function (h) {
var span = hEl.querySelector && hEl.querySelector('.mw-headline[id]');
var level = parseInt(h.tagName.slice(1), 10);
if (span) return span;
returnif hEl.id(level ?< hEl2 :|| nulllevel > 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 });
});
// Show only if there are enough headings to be useful (match core default)
/* ---------------- section open logic ---------------- */
if (items.length < 3) return;
// 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;
}
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
function h2IsCollapsed(h2El) {
var btn = document.createElement('button');
if (!h2El) return false;
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
// Newer pattern: wrapper section with aria-expanded controls visibility.
var secoverlay = h2Eldocument.closestcreateElement('section[aria-expanded]div');
overlay.id = 'cps-toc-overlay';
if (sec) return sec.getAttribute('aria-expanded') === 'false';
overlay.setAttribute('aria-hidden', 'true');
var panel = document.createElement('div');
// Toggle state on heading/button itself.
panel.id = 'cps-toc-panel';
var t = getH2Toggle(h2El);
panel.setAttribute('role', 'dialog');
if (t) {
var ae = tpanel.getAttributesetAttribute('aria-expandedmodal', 'true');
panel.setAttribute('aria-label', 'Table of contents');
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;
}
var header = document.createElement('div');
// Synthesize a robust "activation" to trigger MF's own handler if present.
header.id = 'cps-toc-header';
function activate(el) {
header.innerHTML =
var ev = { bubbles: true, cancelable: true, view: window };
'<h2 id="cps-toc-title">Contents</h2>' +
try { el.dispatchEvent(new MouseEvent('mousedown', ev)); } catch (_) {}
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';
try { el.dispatchEvent(new MouseEvent('mouseup', ev)); } catch (_) {}
try { el.dispatchEvent(new MouseEvent('click', ev)); } catch (_) { el.click(); }
}
var list = document.createElement('ul');
// **Guarantee** the H2 section is open:
list.id = 'cps-toc-list';
// 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();
items.forEach(function (it) {
var toggle = getH2Toggle(h2El);
var obs = null, doneli = falsedocument.createElement('li');
li.setAttribute('data-level', String(it.level));
function finish() { if (!done) { done = true; if (obs) obs.disconnect(); resolve(); } }
var a = document.createElement('a');
a.href = '#' + it.id;
a.textContent = it.text;
li.appendChild(a);
list.appendChild(li);
});
panel.appendChild(header);
if (window.MutationObserver) {
panel.appendChild(list);
obs = new MutationObserver(function () {
overlay.appendChild(panel);
if (!h2IsCollapsed(h2El)) finish();
document.body.appendChild(overlay);
});
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'] });
});
}
// Focus handling
// Step 1: Attempt the *real* toggle
var lastFocus = null;
if (toggle) activate(toggle);
function openOverlay() {
lastFocus = document.activeElement;
// Step 2: After a short tick, **force open** if still collapsed
overlay.classList.add('is-open');
setTimeout(function () {
overlay.setAttribute('aria-hidden', 'false');
if (!h2IsCollapsed(h2El)) return finish();
document.body.style.overflow = 'hidden';
// Focus first link for accessibility
// Wrapper <section aria-expanded>
var secfirstLink = h2Ellist.closestquerySelector('section[aria-expanded]a');
if (secfirstLink) secfirstLink.setAttributefocus('aria-expanded',{ preventScroll: 'true' });
}
function closeOverlay() {
// Toggle element state
overlay.classList.remove('is-open');
if (toggle) {
toggleoverlay.setAttribute('aria-expandedhidden', 'true');
document.body.style.overflow = '';
var cid = toggle.getAttribute('aria-controls');
if (lastFocus && lastFocus.focus) lastFocus.focus({ preventScroll: true });
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);
});
}
btn.style.display = 'flex'; // reveal trigger now that we know we have headings
/* ---------------- main initializer ---------------- */
btn.addEventListener('click', openOverlay);
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
overlay.addEventListener('click', function (e) {
var root = getContentRoot();
// Click outside the bottom sheet closes
if (e.target === overlay) closeOverlay();
});
overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
overlay.addEventListener('keydown', function (e) {
// Build heading list + indices
varif items(e.key === 'Escape') []closeOverlay();
});
var indexById = Object.create(null);
var headingElById = Object.create(null);
// Navigate and try to ensure mobile-collapsed sections are visible
root.querySelectorAll('h2, h3, h4, h5, h6').forEach(function (h) {
list.addEventListener('click', function (e) {
var level = parseInt(h.tagName.slice(1), 10);
var a = e.target.closest('a');
if (level < 2 || level > 6) return;
if (!a) return;
var anchor = h.querySelector('.mw-headline[id]') || h; // works pre/post Heading-HTML changes :contentReference[oaicite:3]{index=3}
e.preventDefault();
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;
});
var targetId = a.getAttribute('href').slice(1);
if (items.length < 3) return; // mirror core TOC threshold
var target = document.getElementById(targetId);
closeOverlay();
if (target) {
// UI: trigger button
try {
var btn = document.createElement('button');
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
btn.id = 'cps-open-toc';
btn.type = 'button';} catch (_) {
target.scrollIntoView(true);
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);
// Update URL hash after a tick (so browser back works)
// UI: overlay + panel
setTimeout(function () {
var overlay = document.createElement('div');
if (history && history.replaceState) {
overlay.id = 'cps-toc-overlay';
history.replaceState(null, '', '#' + targetId);
overlay.setAttribute('aria-hidden', 'true');
} else {
location.hash = targetId;
}
}, 200);
// MobileFrontend: headings may be inside collapsed sections.
var panel = document.createElement('div');
// Heuristic: click the nearest toggle if present.
panel.id = 'cps-toc-panel';
var maybeToggle = target.closest('.collapsible-block, .mf-section') ||
panel.setAttribute('role', 'dialog');
target.closest('section');
panel.setAttribute('aria-modal', 'true');
if (maybeToggle && maybeToggle.classList.contains('collapsed')) {
panel.setAttribute('aria-label', 'Table of contents');
// Try to open; fallback by clicking the first heading inside
var headingToggle = maybeToggle.querySelector('.section-heading, h2, h3, h4, h5, h6');
var header = document.createElement('div');
if (headingToggle) headingToggle.click();
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 });
}
});
// Re-hide on rotation/resize to tablet/desktop
btn.style.display = 'flex';
btnwindow.addEventListener('clickresize', openOverlayfunction (); {
if (window.matchMedia('(min-width: 768px)').matches) {
overlay.addEventListener('click', function (e) { if (e.target === overlay) closeOverlay(); });
btn.style.display = 'none';
overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
overlay.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeOverlay(); });
} else {
btn.style.display = 'flex';
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;
}
}, { passive: true });
// 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(); });
}
})();
|