MediaWiki:Mobile.js: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
 
(24 intermediate revisions by the same user not shown)
Line 1:
// 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 () {
// Don’t run on very wide screens (tablet/desktop have native TOC)
if// (window1.matchMedia('( REMOVED the "min-width: 768px)')" check.matches) return;Now runs everywhere.
 
// Only run on normalpages contentwhere pagesit makes sense (Articles/MainPage)
if (window.mw && mw.config && mw.config.get) {
var isArticleisAllowed = !!mw.config.get('wgIsArticle') || mw.config.get('wgIsMainPage');
if (!isArticleisAllowed) return;
}
 
Line 36 ⟶ 31:
});
 
// Show only if there are enough headings to be useful (match core default)
// CHANGED: Lowered requirement to 1 heading so it always shows if there is any structure
if (items.length < 3) return;
if (items.length < 1) return;
 
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
Line 100 ⟶ 96:
}
 
// Force button display immediately
btn.style.display = 'flex'; // reveal trigger now that we know we have headings
btn.style.display = 'flex';
btn.addEventListener('click', openOverlay);
 
Line 113 ⟶ 110:
});
 
// Navigate and try to ensure mobile-collapsed sections are visible
// Helpers — find collapsed parent section and its H2 heading/anchor
list.addEventListener('click', function (e) {
function findCollapsedAncestor(el) {
var a = e.target.closest('a');
// Newer MF markup: <section aria-expanded="false">…</section>
if (!a) return;
var sec = el.closest && el.closest('section[aria-expanded="false"]');
e.preventDefault();
if (sec) return { type: 'section', node: sec };
 
var targetId = a.getAttribute('href').slice(1);
// Older MF markup: content block with no .open-block; header is previous sibling
var target = document.getElementById(targetId);
var block = el.closest && el.closest('.collapsible-block');
closeOverlay();
if (block && !block.classList.contains('open-block')) {
return { type: 'block', node: block };
}
return null;
}
 
if (target) {
function findSectionHeading(collapsed) {
try {
if (!collapsed) return null;
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
if (collapsed.type === 'section') {
} catch (_) {
// Prefer the H2 in this section; fall back to any .section-heading
target.scrollIntoView(true);
return collapsed.node.querySelector('h2.section-heading, h2, .section-heading');
}
// .collapsible-block: heading toggle is the previous element
var prev = collapsed.node.previousElementSibling;
if (prev && (prev.matches('h2, .section-heading, .collapsible-heading'))) return prev;
return null;
}
 
// Update URL hash after a tick (so browser back works)
function findAnchorForHeading(heading) {
setTimeout(function () {
if (!heading) return null;
if (history && history.replaceState) {
// In most wikis the anchor id lives on span.mw-headline (inside h2)
history.replaceState(null, '', '#' + targetId);
var span = heading.querySelector && heading.querySelector('.mw-headline[id]');
} else {
if (span) return span;
location.hash = targetId;
// Otherwise the H2 itself may carry the id
}
return heading.id ? heading : null;
}, 200);
}
 
// MobileFrontend: headings may be inside collapsed sections.
function scrollToElement(el) {
// Heuristic: click the nearest toggle if present.
try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
var maybeToggle = target.closest('.collapsible-block, .mf-section') ||
catch (_) { el.scrollIntoView(true); }
target.closest('section');
}
if (maybeToggle && maybeToggle.classList.contains('collapsed')) {
// Try to open; fallback by clicking the first heading inside
var headingToggle = maybeToggle.querySelector('.section-heading, h2, h3, h4, h5, h6');
if (headingToggle) headingToggle.click();
}
}
});
 
// 2. REMOVED the "resize" event listener that was hiding the button.
// ⬇️ Replace your existing list click handler with this one
// The button now persists on all screen sizes.
list.addEventListener('click', function (e) {
})();
var a = e.target && e.target.closest('a');
if (!a) return;
 
$(document).ready(function() {
e.preventDefault();
// Check if the button already exists to prevent duplicates
var targetId = a.getAttribute('href').slice(1);
if ($('#custom-email-btn').length === 0) {
var target = document.getElementById(targetId);
closeOverlay();
// Create the email button element
var emailBtn = $('<a>', {
id: 'custom-email-btn',
href: 'mailto:services@axabrain.com',
// Simple accessible title
title: 'Contact AXA BRAIN Services'
});
 
// Determine the clicked level (we set// thisAdd init <lito data-level="…">the whenbody buildingof the list)page
var li = a.closest $('libody').append(emailBtn);
var level = li ? parseInt(li.getAttribute('data-level') || '0', 10) : 0;
 
// If user tapped an H3+ and its H2 section is collapsed → go to that H2 instead
if (target && level >= 3) {
var collapsed = findCollapsedAncestor(target);
if (collapsed) {
var h2 = findSectionHeading(collapsed);
var anchorEl = findAnchorForHeading(h2) || h2;
if (anchorEl) {
scrollToElement(anchorEl);
// Update URL to the H2's anchor if available
if (anchorEl.id) {
setTimeout(function () {
if (history && history.replaceState) {
history.replaceState(null, '', '#' + anchorEl.id);
} else {
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);
}
});
 
// 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 });
})();