|
// CapSach — Sticky TOC overlay (UNRESTRICTED: Works on iPad/Desktop/Mobile)
/* 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); robust H2-open-before-scroll for H3+ */
(function () {
/* ---------- utilities ---------- */
// 1. REMOVED the "min-width: 768px" check. Now runs everywhere.
function isMobileSite() {
// Stable way to detect the MobileFrontend site (<body class="mw-mf">).
return document.body && document.body.classList.contains('mw-mf'); /* MF site */ /* */
}
// Only run on pages where it makes sense (Articles/MainPage)
function once(id) { return !document.getElementById(id); }
if (window.mw && mw.config && mw.config.get) {
var isAllowed = mw.config.get('wgIsArticle') || mw.config.get('wgIsMainPage');
function onReady(fn) {
if (!isAllowed) return;
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn);
else fn();
}
// Find the content root; MobileFrontend restructures DOM, so be flexible
function getContentRoot() {
var root return (=
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)
// Account for sticky headers when scrolling
var items = [];
function smoothScrollTo(el) {
var headings = root.querySelectorAll('h2, h3, h4, h5, h6');
var offset = 0;
headings.forEach(function (h) {
try {
var level = parseInt(h.tagName.slice(1), 10);
var fixed = document.querySelectorAll('header, .minerva-header, .mw-header, .site-header, #header, .header');
if (level < 2 || level > 6) return;
fixed.forEach(function (node) {
var csheadline = getComputedStyleh.querySelector(node'.mw-headline') || h;
var id = headline.id || h.id;
if (cs.position === 'fixed' || cs.position === 'sticky') {
var text = (headline.textContent || h.textContent || '').trim();
var r = node.getBoundingClientRect();
if (!id || !text) return;
if (r.top <= 0 && r.bottom > 0) offset = Math.max(offset, r.bottom);
items.push({ id: id, text: text, level: level });
}
});
} 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); }
}
// Show only if there are enough headings to be useful
/* ---------- MF section helpers ---------- */
// CHANGED: Lowered requirement to 1 heading so it always shows if there is any structure
// NEW heading markup: ids can be on <hN> or on .mw-headline (MW 1.43+ wrappers)
if (items.length < 1) return;
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; /* MW 1.44+ may put id on <hN> */
}
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
// Find the element that actually toggles the H2 section (owns aria-expanded / aria-controls)
var btn = document.createElement('button');
function getH2Toggle(h2El) {
btn.id = 'cps-open-toc';
if (!h2El) return null;
btn.type = 'button';
var w = h2El.closest('.mw-heading') || h2El;
btn.setAttribute('aria-label', 'Open table of contents');
// Prefer a real control with aria-controls
btn.innerHTML = '<span class="icon" aria-hidden="true">≡</span><span class="label">TOC</span>';
var ctrl = w.querySelector('button[aria-controls], [aria-expanded][aria-controls]');
document.body.appendChild(btn);
if (ctrl) return ctrl;
// Next-best: any descendant exposing aria-expanded
ctrl = w.querySelector('[aria-expanded]');
if (ctrl) return ctrl;
// Legacy: the heading itself behaves as the toggle
if (h2El.hasAttribute('aria-expanded') || h2El.classList.contains('section-heading') ||
h2El.classList.contains('collapsible-heading')) {
return h2El;
}
// As a last resort, some old MF put a separate preceding/next sibling as the toggle
var prev = h2El.previousElementSibling, next = h2El.nextElementSibling;
if (prev && (prev.matches('[aria-expanded], .section-heading, .collapsible-heading'))) return prev;
if (next && (next.matches('[aria-expanded], .section-heading, .collapsible-heading'))) return next;
return null;
}
// Overlay + panel
function h2IsCollapsed(h2El) {
var overlay = document.createElement('div');
if (!h2El) return false;
overlay.id = 'cps-toc-overlay';
var toggle = getH2Toggle(h2El);
overlay.setAttribute('aria-hidden', 'true');
if (toggle) {
var ae = toggle.getAttribute('aria-expanded');
if (ae === 'false') return true;
if (ae === 'true') return false;
var cid = toggle.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 block
var sib = h2El.nextElementSibling;
if (sib && sib.classList.contains('collapsible-block')) return !sib.classList.contains('open-block');
// Newer wrapper pattern: <section aria-expanded="false"> around heading+content
var sec = h2El.closest('section[aria-expanded]');
if (sec) return sec.getAttribute('aria-expanded') === 'false';
return false;
}
var panel = document.createElement('div');
function fireActivation(el) {
panel.id = 'cps-toc-panel';
// Fire a sequence of events so whichever MF handler is present reacts
panel.setAttribute('role', 'dialog');
var opts = { bubbles: true, cancelable: true, view: window };
panel.setAttribute('aria-modal', 'true');
try { el.dispatchEvent(new PointerEvent('pointerdown', opts)); } catch (_) {}
panel.setAttribute('aria-label', 'Table of contents');
try { el.dispatchEvent(new MouseEvent('mousedown', opts)); } catch (_) {}
try { el.dispatchEvent(new TouchEvent('touchstart', opts)); } catch (_) {}
try { el.dispatchEvent(new TouchEvent('touchend', opts)); } catch (_) {}
try { el.dispatchEvent(new MouseEvent('mouseup', opts)); } catch (_) {}
try { el.dispatchEvent(new MouseEvent('click', opts)); } catch (_) { el.click(); }
}
var header = document.createElement('div');
// Open H2 if needed; resolve when open (or after timeout)
header.id = 'cps-toc-header';
function ensureH2Open(h2El) {
header.innerHTML =
return new Promise(function (resolve) {
'<h2 id="cps-toc-title">Contents</h2>' +
if (!h2El || !h2IsCollapsed(h2El)) return resolve();
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';
var togglelist = getH2Toggledocument.createElement(h2El'ul');
list.id = 'cps-toc-list';
var triedManual = false;
items.forEach(function (it) {
// Observe changes to aria-expanded / classes / hidden
var obsli = nulldocument.createElement('li');
li.setAttribute('data-level', String(it.level));
if (window.MutationObserver) {
var a = document.createElement('a');
obs = new MutationObserver(function () {
a.href = '#' + it.id;
if (!h2IsCollapsed(h2El)) {
a.textContent = it.text;
if (obs) obs.disconnect();
resolveli.appendChild(a);
list.appendChild(li);
}
});
var targets = [];
if (toggle) targets.push(toggle);
var cid = toggle && toggle.getAttribute('aria-controls');
var controlled = cid && document.getElementById(cid);
if (controlled) targets.push(controlled);
// Also watch the wrapper <section aria-expanded>
var sec = h2El.closest('section[aria-expanded]');
if (sec) targets.push(sec);
if (targets.length) {
targets.forEach(function (t) {
obs.observe(t, { attributes: true, attributeFilter: ['aria-expanded', 'class', 'hidden'] });
});
}
}
panel.appendChild(header);
// First: try to use MF’s own handler
panel.appendChild(list);
if (toggle) fireActivation(toggle);
overlay.appendChild(panel);
document.body.appendChild(overlay);
// Focus handling
// Fallback (after a short tick) – manually open if still collapsed
var lastFocus = null;
setTimeout(function manualIfNeeded() {
function openOverlay() {
if (!h2IsCollapsed(h2El)) return; // already open
lastFocus = document.activeElement;
if (!triedManual) {
overlay.classList.add('is-open');
triedManual = true;
overlay.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
// Manual open strategy:
// Focus first link for accessibility
// 1) If we have a controls target, unhide it + mark open-block
var cidfirstLink = toggle && togglelist.getAttributequerySelector('aria-controlsa');
if (firstLink) firstLink.focus({ preventScroll: true });
var block = cid && document.getElementById(cid);
if (block) {
block.hidden = false;
block.removeAttribute('hidden');
block.classList.add('open-block');
}
// 2) If a wrapper <section aria-expanded> exists, flip it
var sec = h2El.closest('section[aria-expanded]');
if (sec) sec.setAttribute('aria-expanded', 'true');
// 3) If legacy sibling block exists, mark it open
var sib = h2El.nextElementSibling;
if (sib && sib.classList.contains('collapsible-block')) {
sib.classList.add('open-block');
sib.hidden = false;
sib.removeAttribute('hidden');
}
}
// Final safety timeout: stop waiting after 900ms overall
}, 120);
setTimeout(function () {
if (obs) obs.disconnect();
resolve(); // even if still closed, we won’t hang
}, 900);
});
}
function closeOverlay() {
overlay.classList.remove('is-open');
/* ---------- main initializer ---------- */
function initTOC() {
// phones only
if (window.matchMedia('(min-width: 768px)').matches) return;
// only in article view
if (mw.config && !mw.config.get('wgIsArticle')) return;
// avoid duplicate buttons
if (!once('cps-open-toc')) return;
var root = getContentRoot();
// Build heading list and 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;
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; // match 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');
document.body.style.overflow = '';
if (lastFocus && lastFocus.focus) lastFocus.focus({ preventScroll: true });
}
// Force button display immediately
var panel = document.createElement('div');
panelbtn.idstyle.display = 'cps-toc-panelflex';
panelbtn.setAttributeaddEventListener('roleclick', 'dialog'openOverlay);
panel.setAttribute('aria-modal', 'true');
panel.setAttribute('aria-label', 'Table of contents');
overlay.addEventListener('click', function (e) {
var header = document.createElement('div');
// Click outside the bottom sheet closes
header.id = 'cps-toc-header';
if (e.target === overlay) closeOverlay();
header.innerHTML =
});
'<h2 id="cps-toc-title">Contents</h2>' +
overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';
overlay.addEventListener('keydown', function (e) {
var list = document.createElement('ul');
listif (e.idkey === 'cps-toc-listEscape') closeOverlay();
});
// Navigate and try to ensure mobile-collapsed sections are visible
items.forEach(function (it) {
list.addEventListener('click', function (e) {
var li = document.createElement('li');
var a = e.target.closest('a');
li.setAttribute('data-level', String(it.level));
if (!a) return;
var a = document.createElement('a');
ae.href = '#' + it.idpreventDefault();
a.textContent = it.text;
li.appendChild(a);
list.appendChild(li);
});
var targetId = a.getAttribute('href').slice(1);
panel.appendChild(header);
var target = document.getElementById(targetId);
panel.appendChild(list);
overlay.appendChildcloseOverlay(panel);
document.body.appendChild(overlay);
//if open/close(target) {
var lastFocus =try null;{
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
function openOverlay() {
} catch (_) {
lastFocus = document.activeElement;
overlay target.classList.addscrollIntoView('is-open'true);
}
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';
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(); });
// Update URL hash after a tick (so browser back works)
// parent H2 lookup
setTimeout(function parentH2For(id) {
if (history && history.replaceState) {
var idx = indexById[id];
history.replaceState(null, '', '#' + targetId);
if (typeof idx !== 'number') return null;
} else {
for (var i = idx - 1; i >= 0; i--) if (items[i].level === 2) return items[i];
location.hash = targetId;
return null;
}
}, 200);
// navMobileFrontend: openheadings parentmay H2be (ifinside collapsed), then scroll to target H3 (or fallback to H2)sections.
// Heuristic: click the nearest toggle if present.
list.addEventListener('click', function (e) {
var amaybeToggle = e.target && e.target.closest('a.collapsible-block, .mf-section'); ||
target.closest('section');
if (!a) return;
if (maybeToggle && maybeToggle.classList.contains('collapsed')) {
e.preventDefault();
// Try to open; fallback by clicking the first heading inside
var headingToggle = maybeToggle.querySelector('.section-heading, h2, h3, h4, h5, h6');
var targetId = a.getAttribute('href').slice(1);
var li =if a(headingToggle) headingToggle.closestclick('li');
var level = li ? parseInt(li.getAttribute('data-level') || '0', 10) : 0;
closeOverlay();
// H3+ — ensure its parent H2 is open first
if (level >= 3) {
var p = parentH2For(targetId);
if (p) {
var h2El = headingElById[p.id];
ensureH2Open(h2El).then(function () {
// Prefer the intended H3 anchor; if missing, fall back to H2
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;
}
}
}
});
// 2. REMOVED the "resize" event listener that was hiding the button.
// H2 or no parent found: go straight to target
// The button now persists on all screen sizes.
var h = document.getElementById(targetId) ||
})();
(level === 2 ? anchorForHeadingEl(headingElById[targetId]) : null);
if (!h) return;
requestAnimationFrame(function () {
smoothScrollTo(h);
setTimeout(function () {
if (history && history.replaceState) history.replaceState(null, '', '#' + (h.id || targetId));
else location.hash = h.id || targetId;
}, 120);
});
});
$(document).ready(function() {
// Hide/show trigger on rotation
// Check if the button already exists to prevent duplicates
window.addEventListener('resize', function () {
if ($('#custom-email-btn').length === 0) {
if (window.matchMedia('(min-width: 768px)').matches) { btn.style.display = 'none'; closeOverlay(); }
else { btn.style.display = 'flex'; }
// Create the email button element
}, { passive: true });
var emailBtn = $('<a>', {
}
id: 'custom-email-btn',
href: 'mailto:services@axabrain.com',
// Simple accessible title
title: 'Contact AXA BRAIN Services'
});
// Add it to the body of the page
/* ---------- bootstrap ---------- */
$('body').append(emailBtn);
if (window.mw && mw.loader) {
}
// Ensure MobileFrontend client pieces are present before we poke at headings/sections
});
mw.loader.using('mobile.startup').then(function () { /* MF site modules */
onReady(function () { if (isMobileSite()) initTOC(); });
if (mw.hook) mw.hook('wikipage.content').add(function () { /* re-run after SPA updates */
if (isMobileSite()) initTOC();
});
});
} else {
onReady(function () { if (isMobileSite()) initTOC(); });
}
})();
|