104 lines
3.8 KiB
JavaScript
104 lines
3.8 KiB
JavaScript
// Full-viewport Overlay component (mobile). Distinct from the .modal dialog:
|
||
// this hosts a whole rail (the folder tree or the right-rail widgets/TOC) at
|
||
// full screen with its own scroll and a top-right close control. It reuses the
|
||
// low-level focus/Escape/bfcache patterns from modal.js rather than that
|
||
// component's panel chrome.
|
||
//
|
||
// openOverlay(node) MOVES `node` (an existing rail <aside>) into the overlay
|
||
// body and restores it to its original DOM position on close, so the rail keeps
|
||
// its state (expanded tree folders, rendered TOC). Only one overlay is open at
|
||
// a time.
|
||
(function () {
|
||
var overlay = null;
|
||
var bodyEl = null;
|
||
var closeBtn = null;
|
||
var hosted = null; // the moved node
|
||
var placeholder = null; // marks where to restore it
|
||
var prevFocus = null;
|
||
var onKeydown = null;
|
||
|
||
function build() {
|
||
overlay = document.createElement('div');
|
||
overlay.className = 'overlay';
|
||
overlay.setAttribute('role', 'dialog');
|
||
overlay.setAttribute('aria-modal', 'true');
|
||
|
||
var bar = document.createElement('div');
|
||
bar.className = 'overlay-bar';
|
||
|
||
closeBtn = document.createElement('button');
|
||
closeBtn.type = 'button';
|
||
closeBtn.className = 'btn btn-fab overlay-close';
|
||
closeBtn.title = 'Close';
|
||
closeBtn.setAttribute('aria-label', 'Close');
|
||
closeBtn.textContent = '×';
|
||
closeBtn.addEventListener('click', close);
|
||
bar.appendChild(closeBtn);
|
||
|
||
bodyEl = document.createElement('div');
|
||
bodyEl.className = 'overlay-body';
|
||
// Any navigation or anchor activation inside a rail dismisses the
|
||
// overlay: tree/calendar links navigate away, TOC links scroll the
|
||
// page underneath — either way the user should see the result, and
|
||
// closing synchronously (before navigation) avoids a bfcache snapshot
|
||
// that would restore the overlay open on back-nav.
|
||
bodyEl.addEventListener('click', function (e) {
|
||
if (e.target.closest('a')) close();
|
||
});
|
||
|
||
overlay.appendChild(bar);
|
||
overlay.appendChild(bodyEl);
|
||
}
|
||
|
||
function open(node) {
|
||
if (overlay && overlay.parentNode) close();
|
||
if (!overlay) build();
|
||
|
||
prevFocus = document.activeElement;
|
||
hosted = node;
|
||
placeholder = document.createComment('overlay-slot');
|
||
node.parentNode.insertBefore(placeholder, node);
|
||
bodyEl.appendChild(node);
|
||
|
||
document.body.appendChild(overlay);
|
||
overlay.classList.add('is-open');
|
||
|
||
onKeydown = function (e) {
|
||
if (e.key === 'Escape') { e.preventDefault(); close(); }
|
||
};
|
||
document.addEventListener('keydown', onKeydown);
|
||
|
||
setTimeout(function () { closeBtn.focus(); }, 0);
|
||
}
|
||
|
||
function close() {
|
||
if (!overlay || !overlay.parentNode) return;
|
||
if (onKeydown) {
|
||
document.removeEventListener('keydown', onKeydown);
|
||
onKeydown = null;
|
||
}
|
||
// Restore the hosted rail to its original spot in the shell.
|
||
if (hosted && placeholder && placeholder.parentNode) {
|
||
placeholder.parentNode.insertBefore(hosted, placeholder);
|
||
placeholder.parentNode.removeChild(placeholder);
|
||
}
|
||
hosted = null;
|
||
placeholder = null;
|
||
overlay.classList.remove('is-open');
|
||
overlay.parentNode.removeChild(overlay);
|
||
|
||
var toRestore = prevFocus;
|
||
prevFocus = null;
|
||
if (toRestore && toRestore.focus) {
|
||
try { toRestore.focus(); } catch (e) {}
|
||
}
|
||
}
|
||
|
||
// Belt-and-suspenders bfcache guard: force the overlay closed (restoring
|
||
// the rail) if the page is being hidden while it is still open.
|
||
window.addEventListener('pagehide', close);
|
||
|
||
window.openOverlay = open;
|
||
window.closeOverlay = close;
|
||
})();
|