61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
// Generated, do not edit. sha256:0538b89d6c5865b07db285c6e78de905962d2d2f2b35ac9aeee58cf04054fbe2
|
|
let current = null;
|
|
|
|
export function isPopoverOpen() { return current !== null; }
|
|
|
|
export function closePopover() {
|
|
if (!current) return;
|
|
const c = current;
|
|
current = null;
|
|
c.cleanup();
|
|
c.el.remove();
|
|
if (c.onClose) c.onClose();
|
|
}
|
|
|
|
export function openPopover(anchorEl, { className, onClose } = {}) {
|
|
closePopover();
|
|
|
|
const el = document.createElement('div');
|
|
el.className = className || 'popover';
|
|
const overlays = document.querySelectorAll('.dialog-overlay');
|
|
(overlays.length ? overlays[overlays.length - 1] : document.body).appendChild(el);
|
|
|
|
function position() {
|
|
const r = anchorEl.getBoundingClientRect();
|
|
const pad = 8;
|
|
let left = r.left;
|
|
let top = r.bottom + 6;
|
|
const pw = el.offsetWidth, ph = el.offsetHeight;
|
|
if (left + pw > window.innerWidth - pad) left = window.innerWidth - pad - pw;
|
|
if (left < pad) left = pad;
|
|
if (top + ph > window.innerHeight - pad) top = Math.max(pad, r.top - ph - 6);
|
|
el.style.left = `${left}px`;
|
|
el.style.top = `${top}px`;
|
|
}
|
|
|
|
const reposition = () => { if (current && current.el === el) position(); };
|
|
const onDocClick = e => {
|
|
if (el.contains(e.target) || (anchorEl && anchorEl.contains(e.target))) return;
|
|
closePopover();
|
|
};
|
|
const onKey = e => { if (e.key === 'Escape') closePopover(); };
|
|
|
|
let bindTimer = null;
|
|
const cleanup = () => {
|
|
clearTimeout(bindTimer);
|
|
document.removeEventListener('click', onDocClick, true);
|
|
document.removeEventListener('keydown', onKey);
|
|
window.removeEventListener('resize', reposition);
|
|
window.removeEventListener('scroll', reposition, true);
|
|
};
|
|
|
|
current = { el, cleanup, onClose };
|
|
|
|
bindTimer = setTimeout(() => document.addEventListener('click', onDocClick, true), 0);
|
|
document.addEventListener('keydown', onKey);
|
|
window.addEventListener('resize', reposition);
|
|
window.addEventListener('scroll', reposition, true);
|
|
|
|
return { el, position, close: closePopover };
|
|
}
|