|
// 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 (all skins; phone widths) */
(function () {
// Detect MobileFrontend site (works across mobile skins)
// 1. REMOVED the "min-width: 768px" check. Now runs everywhere.
function isMobileSite() {
return document.body && document.body.classList.contains('mw-mf');
}
// Only run on pages where it makes sense (Articles/MainPage)
function once(id) {
if (window.mw && mw.config && mw.config.get) {
// Avoid duplicates across hook re-runs
var isAllowed = mw.config.get('wgIsArticle') || mw.config.get('wgIsMainPage');
return !document.getElementById(id);
if (!isAllowed) return;
}
// Find the content root; MobileFrontend restructures DOM, so be flexible
function ready(fn) {
var root =
if (document.readyState === 'loading') {
document.addEventListenerquerySelector('DOMContentLoaded',#mw-content-text fn.mw-parser-output'); ||
document.querySelector('.mw-parser-output') ||
} else {
document.getElementById('mw-content-text') ||
fn();
document.querySelector('#content') ||
}
document.body;
}
// Collect headings (H2–H6). Prefer spans with .mw-headline (stable anchor ids)
function runInit() {
var items = [];
// Don’t run on very wide screens (tablet/desktop have native TOC)
var headings = root.querySelectorAll('h2, h3, h4, h5, h6');
if (window.matchMedia('(min-width: 768px)').matches) return;
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 });
});
// Show only if there are enough headings to be useful
// Only on normal content pages
// CHANGED: Lowered requirement to 1 heading so it always shows if there is any structure
if (window.mw && mw.config && mw.config.get) {
if (!mwitems.config.get('wgIsArticle')length < 1) return;
}
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
// Prevent duplicate UI
var btn = document.createElement('button');
if (!once('cps-open-toc')) return;
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
// Find the content root; MobileFrontend restructures DOM, so be flexible
var overlay = document.createElement('div');
var root =
overlay.id = 'cps-toc-overlay';
document.querySelector('#mw-content-text .mw-parser-output') ||
overlay.setAttribute('aria-hidden', 'true');
document.querySelector('.mw-parser-output') ||
document.getElementById('mw-content-text') ||
document.querySelector('#content') ||
document.body;
var panel = document.createElement('div');
// Collect headings (H2–H6). Prefer spans with .mw-headline (stable anchor ids)
panel.id = 'cps-toc-panel';
var items = [];
panel.setAttribute('role', 'dialog');
var indexById = Object.create(null);
panel.setAttribute('aria-modal', 'true');
var headingElById = Object.create(null);
panel.setAttribute('aria-label', 'Table of contents');
var headingsheader = rootdocument.querySelectorAllcreateElement('h2, h3, h4, h5, h6div');
header.id = 'cps-toc-header';
headings.forEach(function (h) {
header.innerHTML =
var level = parseInt(h.tagName.slice(1), 10);
'<h2 id="cps-toc-title">Contents</h2>' +
if (level < 2 || level > 6) return;
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';
var headline = h.querySelector('.mw-headline') || h;
var id = headline.id || h.id;
var text = (headline.textContent || h.textContent || '').trim();
if (!id || !text) return;
var list = document.createElement('ul');
items.push({ id: id, text: text, level: level });
list.id = 'cps-toc-list';
indexById[id] = items.length - 1;
headingElById[id] = h; // keep the <h2..h6> for collapse checks
});
items.forEach(function (it) {
// Show only if there are enough headings to be useful (match core default)
var li = document.createElement('li');
if (items.length < 3) return;
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);
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
panel.appendChild(list);
var btn = document.createElement('button');
overlay.appendChild(panel);
btn.id = 'cps-open-toc';
document.body.appendChild(overlay);
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 +Focus panelhandling
var lastFocus = null;
var overlay = document.createElement('div');
function openOverlay() {
overlay.id = 'cps-toc-overlay';
lastFocus = document.activeElement;
overlay.classList.add('is-open');
overlay.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
// Focus first link for accessibility
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 });
}
// 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 Focus(target) 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 {
eltarget.scrollIntoView({ behavior: 'smooth', block: 'start' });
} catch (_) {
eltarget.scrollIntoView(true);
}
}
// Update URL hash after a tick (so browser back works)
// ---------- TOC click behavior ----------
list.addEventListener('click', setTimeout(function (e) {
var a =if e.target(history && ehistory.target.closest('a'replaceState); {
history.replaceState(null, '', '#' + targetId);
if (!a) return;
} else {
e location.preventDefault()hash = targetId;
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;
}
}
}
}, 200);
// Default behaviorMobileFrontend: goheadings tomay the requested target (H2 or H3) when notbe inside a collapsed sectionsections.
// Heuristic: click the nearest toggle if present.
if (target) {
var maybeToggle = target.closest('.collapsible-block, .mf-section') ||
scrollToElement(target);
target.closest('section');
setTimeout(function () {
if (historymaybeToggle && historymaybeToggle.replaceStateclassList.contains('collapsed')) {
// Try to open; fallback by clicking the first heading inside
history.replaceState(null, '', '#' + targetId);
var headingToggle = maybeToggle.querySelector('.section-heading, h2, h3, h4, h5, h6');
} else {
if (headingToggle) locationheadingToggle.hash = targetIdclick();
}
}, 200);
}
});
});
// 2. REMOVED the "resize" event listener that was hiding the button.
// Re-hide on rotation/resize to tablet/desktop
// The button now persists on all screen sizes.
window.addEventListener(
})();
'resize',
function () {
if (window.matchMedia('(min-width: 768px)').matches) {
btn.style.display = 'none';
closeOverlay();
} else {
btn.style.display = 'flex';
}
},
{ passive: true }
);
}
$(document).ready(function() {
// Orchestrate timing: wait for MobileFrontend to be present and re-run on dynamic updates
// Check if the button already exists to prevent duplicates
if (window.mw && mw.loader) {
mw.loader.usingif ($('mobile.startup#custom-email-btn').then(functionlength (=== 0) {
// Initial run
// Create the email button element
ready(function () {
ifvar (isMobileSite())emailBtn runInit= $();'<a>', {
id: 'custom-email-btn',
});
href: 'mailto:services@axabrain.com',
// Run again when content is replaced (edit preview, post-edit, etc.)
// Simple accessible title
if (mw.hook) {
title: 'Contact AXA BRAIN Services'
mw.hook('wikipage.content').add(function () {
if (isMobileSite()) runInit();
});
}
// Add it to the body of the page
});
$('body').append(emailBtn);
} else {
}
// Extremely defensive fallback (shouldn’t happen on MobileFrontend)
});
ready(function () {
if (isMobileSite()) runInit();
});
}
})();
|