Insurer Brain

MediaWiki:Mobile.js: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 2:
/* Note, there is no corresponding User:Username/mobile.js; however users may use User:Username/minerva.js */
function addPortletLink() {
mw.log.warn(
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');
'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)
/* CapSach — Mobile TOC overlay (all skins; phone widths) */
(function () {
// Detect MobileFrontend site (works across mobile skins)
// Don’t run on very wide screens (tablet/desktop have native TOC)
function isMobileSite() {
if (window.matchMedia('(min-width: 768px)').matches) return;
return document.body && document.body.classList.contains('mw-mf');
}
 
function once(id) {
// Only on normal content pages
// Avoid duplicates across hook re-runs
if (window.mw && mw.config && mw.config.get) {
return !document.getElementById(id);
var isArticle = !!mw.config.get('wgIsArticle');
if (!isArticle) return;
}
 
function ready(fn) {
// Find the content root; MobileFrontend restructures DOM, so be flexible
if (document.readyState === 'loading') {
var root =
document.querySelectoraddEventListener('#mw-content-text .mw-parser-outputDOMContentLoaded'), ||fn);
} else {
document.querySelector('.mw-parser-output') ||
fn();
document.getElementById('mw-content-text') ||
}
document.querySelector('#content') ||
}
document.body;
 
function runInit() {
// Collect headings (H2–H6). Prefer spans with .mw-headline (stable anchor ids)
// Don’t run on very wide screens (tablet/desktop have native TOC)
var items = [];
if (window.matchMedia('(min-width: 768px)').matches) return;
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 });
});
 
// Only on normal content pages
// Show only if there are enough headings to be useful (match core default)
if (window.mw && mw.config && mw.config.get) {
if (items.length < 3) return;
if (!mw.config.get('wgIsArticle')) return;
}
 
// Prevent duplicate UI
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
if (!once('cps-open-toc')) return;
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);
 
// Find the content root; MobileFrontend restructures DOM, so be flexible
// Overlay + panel
var root =
var overlay = document.createElement('div');
document.querySelector('#mw-content-text .mw-parser-output') ||
overlay.id = 'cps-toc-overlay';
document.querySelector('.mw-parser-output') ||
overlay.setAttribute('aria-hidden', 'true');
document.getElementById('mw-content-text') ||
document.querySelector('#content') ||
document.body;
 
// Collect headings (H2–H6). Prefer spans with .mw-headline (stable anchor ids)
var panel = document.createElement('div');
var items = [];
panel.id = 'cps-toc-panel';
var indexById = Object.create(null);
panel.setAttribute('role', 'dialog');
var headingElById = Object.create(null);
panel.setAttribute('aria-modal', 'true');
panel.setAttribute('aria-label', 'Table of contents');
 
var headerheadings = documentroot.createElementquerySelectorAll('divh2, h3, h4, h5, h6');
headings.forEach(function (h) {
header.id = 'cps-toc-header';
var level = parseInt(h.tagName.slice(1), 10);
header.innerHTML =
if (level < 2 || level > 6) return;
'<h2 id="cps-toc-title">Contents</h2>' +
var headline = h.querySelector('.mw-headline') || h;
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';
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 });
var list = document.createElement('ul');
indexById[id] = items.length - 1;
list.id = 'cps-toc-list';
headingElById[id] = h; // keep the <h2..h6> for collapse checks
});
 
// Show only if there are enough headings to be useful (match core default)
items.forEach(function (it) {
if (items.length < 3) return;
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);
});
 
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
panel.appendChild(header);
var btn = document.createElement('button');
panel.appendChild(list);
btn.id = 'cps-open-toc';
overlay.appendChild(panel);
btn.type = 'button';
document.body.appendChild(overlay);
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);
 
// FocusOverlay + handlingpanel
var overlay = document.createElement('div');
var lastFocus = null;
overlay.id = 'cps-toc-overlay';
function openOverlay() {
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 });
}
 
var panel = document.createElement('div');
btn.style.display = 'flex'; // reveal trigger now that we know we have headings
panel.id = 'cps-toc-panel';
btn.addEventListener('click', openOverlay);
panel.setAttribute('role', 'dialog');
panel.setAttribute('aria-modal', 'true');
panel.setAttribute('aria-label', 'Table of contents');
 
var header = document.createElement('div');
overlay.addEventListener('click', function (e) {
header.id = 'cps-toc-header';
// Click outside the bottom sheet closes
header.innerHTML =
if (e.target === overlay) closeOverlay();
'<h2 id="cps-toc-title">Contents</h2>' +
});
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';
overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
 
var list = document.createElement('ul');
overlay.addEventListener('keydown', function (e) {
if (elist.keyid === 'Escapecps-toc-list') closeOverlay();
});
 
items.forEach(function (it) {
// Helpers — find collapsed parent section and its H2 heading/anchor
var li = document.createElement('li');
function findCollapsedAncestor(el) {
li.setAttribute('data-level', String(it.level));
// Newer MF markup: <section aria-expanded="false">…</section>
var a = document.createElement('a');
var sec = el.closest && el.closest('section[aria-expanded="false"]');
if (sec) return { type:a.href = 'section#', node: sec+ }it.id;
a.textContent = it.text;
li.appendChild(a);
list.appendChild(li);
});
 
panel.appendChild(header);
// Older MF markup: content block with no .open-block; header is previous sibling
panel.appendChild(list);
var block = el.closest && el.closest('.collapsible-block');
overlay.appendChild(panel);
if (block && !block.classList.contains('open-block')) {
document.body.appendChild(overlay);
return { type: 'block', node: block };
}
return null;
}
 
// Focus handling
function findSectionHeading(collapsed) {
if (!collapsed) returnvar lastFocus = null;
function openOverlay() {
if (collapsed.type === 'section') {
lastFocus = document.activeElement;
// Prefer the H2 in this section; fall back to any .section-heading
overlay.classList.add('is-open');
return collapsed.node.querySelector('h2.section-heading, h2, .section-heading');
overlay.setAttribute('aria-hidden', 'false');
}
document.body.style.overflow = 'hidden';
// .collapsible-block: heading toggle is the previous element
var firstLink = list.querySelector('a');
var prev = collapsed.node.previousElementSibling;
if (firstLink) firstLink.focus({ preventScroll: true });
if (prev && (prev.matches('h2, .section-heading, .collapsible-heading'))) return prev;
return null; }
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
function findAnchorForHeading(heading) {
btn.addEventListener('click', openOverlay);
if (!heading) return null;
// In most wikis the anchor id lives on span.mw-headline (inside h2)
var span = heading.querySelector && heading.querySelector('.mw-headline[id]');
if (span) return span;
// Otherwise the H2 itself may carry the id
return heading.id ? heading : null;
}
 
overlay.addEventListener('click', function (e) {
function scrollToElement(el) {
// Click outside the bottom sheet closes
try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
if (e.target === overlay) closeOverlay();
catch (_) { el.scrollIntoView(true); }
});
}
overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
 
overlay.addEventListener('keydown', function (e) {
// ⬇️ Replace your existing list click handler with this one
if (e.key === 'Escape') closeOverlay();
list.addEventListener('click', function (e) {
});
var a = e.target && e.target.closest('a');
 
if (!a) return;
// ---------- 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');
e.preventDefault();
var targetIdlevel = ali ? parseInt(li.getAttribute('hrefdata-level').slice(1 || '0', 10) : 0;
var target = document.getElementById(targetId);
closeOverlay();
 
// If user tapped H3+ and its parent H2 is collapsed → go to that H2 instead
// Determine the clicked level (we set this in <li data-level="…"> when building the list)
var li = a.closest if ('li'level >= 3); {
var parentH2Item = findParentH2Item(targetId);
var level = li ? parseInt(li.getAttribute('data-level') || '0', 10) : 0;
if (parentH2Item) {
var h2El = headingElById[parentH2Item.id] || null;
var anchorEl = findAnchorForHeadingEl(h2El) || h2El;
 
// If user tapped an H3+ and its // Route to H2 sectionif isit's collapsed, →or goif tofor thatany H2reason the H3 anchor isn’t insteadreachable
if (target(h2El && levelisH2Collapsed(h2El)) >=|| 3!target) {
if (anchorEl) {
var collapsed = findCollapsedAncestor(target);
scrollToElement(anchorEl);
if (collapsed) {
var h2 = findSectionHeading if (collapsedanchorEl.id); {
var anchorEl = findAnchorForHeading setTimeout(h2)function ||() h2;{
if (anchorElhistory && history.replaceState) {
scrollToElement history.replaceState(null, '', '#' + anchorEl.id);
// Update URL to the H2's anchor if available } else {
if ( location.hash = anchorEl.id) {;
setTimeout(function () { }
if (history && history.replaceState) {}, 200);
history.replaceState(null, '', '#' + anchorEl.id);}
} else {return;
location.hash = anchorEl.id;
}
}, 200);
}
return; // done
}
}
}
 
// 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);
}
}, 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
// Re-hide on rotation/resize to tablet/desktop
if (window.addEventListener('resize',mw function&& (mw.loader) {
mw.loader.using('mobile.startup').then(function () {
if (window.matchMedia('(min-width: 768px)').matches) {
btn.style.display// =Initial 'none';run
closeOverlayready(function (); {
if (isMobileSite()) runInit();
} else {
btn.style.display = 'flex'});
// Run again when content is replaced (edit preview, post-edit, etc.)
}
if (mw.hook) {
}, { passive: true });
mw.hook('wikipage.content').add(function () {
if (isMobileSite()) runInit();
});
}
});
} else {
// Extremely defensive fallback (shouldn’t happen on MobileFrontend)
ready(function () {
if (isMobileSite()) runInit();
});
}
})();
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.js"