MediaWiki:Mobile.js: Difference between revisions

Content deleted Content added
No edit summary
Tag: Manual revert
No edit summary
Line 113:
});
 
// Helpers — find collapsed parent section and its H2 heading/anchor
// Navigate and try to ensure mobile-collapsed sections are visible
function findCollapsedAncestor(el) {
list.addEventListener('click', function (e) {
// Newer MF markup: <section aria-expanded="false">…</section>
var a = e.target.closest('a');
var sec = el.closest && el.closest('section[aria-expanded="false"]');
if (!a) return;
if (sec) return { type: 'section', node: sec };
e.preventDefault();
 
// Older MF markup: content block with no .open-block; header is previous sibling
var targetId = a.getAttribute('href').slice(1);
var block = el.closest && el.closest('.collapsible-block');
var target = document.getElementById(targetId);
if (block && !block.classList.contains('open-block')) {
closeOverlay();
return { type: 'block', node: block };
}
return null;
}
 
function findSectionHeading(collapsed) {
if (target) {
if (!collapsed) return null;
try {
if (collapsed.type === 'section') {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Prefer the H2 in this section; fall back to any .section-heading
} catch (_) {
return collapsed.node.querySelector('h2.section-heading, h2, .section-heading');
target.scrollIntoView(true);
}
// .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;
}
 
function findAnchorForHeading(heading) {
// Update URL hash after a tick (so browser back works)
if (!heading) return null;
setTimeout(function () {
// In most wikis the anchor id lives on span.mw-headline (inside h2)
if (history && history.replaceState) {
var span = heading.querySelector && heading.querySelector('.mw-headline[id]');
history.replaceState(null, '', '#' + targetId);
if (span) return span;
} else {
// Otherwise the H2 itself may carry the id
location.hash = targetId;
return heading.id ? heading : null;
}
}
}, 200);
 
function scrollToElement(el) {
// MobileFrontend: headings may be inside collapsed sections.
try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
// Heuristic: click the nearest toggle if present.
catch (_) { el.scrollIntoView(true); }
var maybeToggle = target.closest('.collapsible-block, .mf-section') ||
}
target.closest('section');
 
if (maybeToggle && maybeToggle.classList.contains('collapsed')) {
// ⬇️ Replace your existing list click handler with this one
// Try to open; fallback by clicking the first heading inside
list.addEventListener('click', function (e) {
var headingToggle = maybeToggle.querySelector('.section-heading, h2, h3, h4, h5, h6');
var a = e.target && e.target.closest('a');
if (headingToggle) headingToggle.click();
if (!a) return;
 
e.preventDefault();
var targetId = a.getAttribute('href').slice(1);
var target = document.getElementById(targetId);
closeOverlay();
 
// Determine the clicked level (we set this in <li data-level="…"> when building the list)
var li = a.closest('li');
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