popover-lite/dist/index.js

Tiny wrapper over the native Popover API + CSS Anchor Positioning

"use strict";var m=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var O=(o,e)=>{for(var r in e)m(o,r,{get:e[r],enumerable:!0})},S=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of L(e))!T.call(o,l)&&l!==r&&m(o,l,{get:()=>e[l],enumerable:!(t=H(e,l))||t.enumerable});return o};var A=o=>S(m({},"__esModule",{value:!0}),o);var j={};O(j,{computeScores:()=>b,createPopover:()=>$});module.exports=A(j);function P(o,e){o.style.setProperty("--placement",e),o.dataset.side=e}function C(o,e){typeof e=="number"?o.style.setProperty("--gap",`${e}px`):e&&(e.x!=null&&o.style.setProperty("--offset-x",`${e.x}px`),e.y!=null&&o.style.setProperty("--offset-y",`${e.y}px`))}function R(o){let e=[],r=o.parentElement;for(;r;){let t=getComputedStyle(r);/auto|scroll|overlay/.test(t.overflow+t.overflowX+t.overflowY)&&e.push(r),r=r.parentElement}return e.push(document.documentElement),e}function b(o,e,r={}){let t=o.getBoundingClientRect(),l=window.innerWidth,a=window.innerHeight,n={top:{placement:"top",space:t.top,overflow:Math.max(e.height-t.top,0),misalign:Math.abs(t.left+t.width/2-(t.left+e.width/2)),preference:r.top??0,score:0},bottom:{placement:"bottom",space:a-t.bottom,overflow:Math.max(e.height-(a-t.bottom),0),misalign:Math.abs(t.left+t.width/2-(t.left+e.width/2)),preference:r.bottom??0,score:0},left:{placement:"left",space:t.left,overflow:Math.max(e.width-t.left,0),misalign:Math.abs(t.top+t.height/2-(t.top+e.height/2)),preference:r.left??0,score:0},right:{placement:"right",space:l-t.right,overflow:Math.max(e.width-(l-t.right),0),misalign:Math.abs(t.top+t.height/2-(t.top+e.height/2)),preference:r.right??0,score:0}};for(let c of Object.values(n))c.score=c.space-c.overflow-c.misalign+c.preference;return Object.values(n).sort((c,s)=>s.score-c.score)}function $(o,e={}){let{placement:r="bottom",offset:t=8,preference:l={}}=e;o.id||(o.id=`anchor-${Math.random().toString(36).slice(2)}`);let a=o.id,n=document.createElement("div");n.setAttribute("popover","auto"),n.setAttribute("anchor",a),n.className="popover-lite",n.tabIndex=-1,C(n,t),P(n,Array.isArray(r)?r[0]:r),document.body.appendChild(n);function c(){let i=Array.isArray(r)?r:[r],x={width:n.offsetWidth,height:n.offsetHeight},v=b(o,x,l);for(let p=0;p<i.length;p++){let M=(i.length-p)*1e4,g=v.find(E=>E.placement===i[p]);g&&(g.score+=M)}return v[0].placement}function s(){P(n,c())}function h(){s(),n.showPopover?n.showPopover():n.togglePopover?.()}function f(){n.hidePopover?n.hidePopover():n.togglePopover?.()}function w(){n.matches(":popover-open")?f():h()}function y(){d.disconnect(),u.forEach(i=>i.removeEventListener("scroll",s)),n.remove()}let d=new ResizeObserver(()=>s());d.observe(o);let u=R(o);return u.forEach(i=>i.addEventListener("scroll",s,{passive:!0})),{element:n,show:h,hide:f,toggle:w,update:s,destroy:y}}