Versie 0.2.0

client/ui/popover.js

@@ -0,0 +1,60 @@
+// 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 };
+}