Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
2 lines
4.2 KiB
JavaScript
2 lines
4.2 KiB
JavaScript
class e{constructor(){this.popovers=new Map,this.usePopoverAPI=function(){if(HTMLElement.prototype.hasOwnProperty("popover"))return!0;if("showPopover"in HTMLElement.prototype)return!0;if("undefined"!=typeof CSS&&CSS.supports)try{return CSS.supports("popover","auto")}catch(e){return!1}return!1}(),this.resizeHandler=null,this.scrollHandler=null,this.usePopoverAPI?console.log("[PopoverManager] Using native Popover API"):(console.log("[PopoverManager] Using fallback implementation"),this.setupGlobalHandlers())}show(e,o={}){const{content:t="",title:i="",anchorId:s=null,position:r="top",showArrow:n=!0,offset:p=8,closeOnOutsideClick:h=!0,zIndex:l=1060}=o;if(!s)return console.warn("[PopoverManager] Popover requires anchorId"),null;const a=document.getElementById(s);return a?(this.hide(e),this.usePopoverAPI?this.showWithPopoverAPI(e,a,t,i,r,n,p,l):this.showWithFallback(e,a,t,i,r,n,p,h,l)):(console.warn(`[PopoverManager] Anchor element not found: ${s}`),null)}showWithPopoverAPI(e,o,t,i,s,r,n,p){const h=document.createElement("div");return h.setAttribute("popover","auto"),h.className=`livecomponent-popover popover--${s}`,h.id=`popover-${e}`,h.style.zIndex=p.toString(),h.innerHTML=`\n ${r?`<div class="popover-arrow popover-arrow--${s}"></div>`:""}\n ${i?`<div class="popover-header"><h4>${i}</h4></div>`:""}\n <div class="popover-body">${t}</div>\n `,h.setPopoverAnchor?h.setPopoverAnchor(o):this.positionPopover(h,o,s,n),document.body.appendChild(h),h.showPopover(),this.popovers.set(e,h),this.setupRepositioning(h,o,s,n),{element:h,hide:()=>this.hide(e),isVisible:()=>h.matches(":popover-open")}}showWithFallback(e,o,t,i,s,r,n,p,h){const l=document.createElement("div");if(l.className=`livecomponent-popover popover-fallback popover--${s}`,l.id=`popover-${e}`,l.style.zIndex=h.toString(),l.setAttribute("role","tooltip"),l.setAttribute("aria-hidden","false"),l.innerHTML=`\n ${r?`<div class="popover-arrow popover-arrow--${s}"></div>`:""}\n ${i?`<div class="popover-header"><h4>${i}</h4></div>`:""}\n <div class="popover-body">${t}</div>\n `,document.body.appendChild(l),this.positionPopover(l,o,s,n),l.style.display="block",l.classList.add("popover--show"),this.popovers.set(e,l),p){const t=t=>{l.contains(t.target)||o.contains(t.target)||this.hide(e)};setTimeout(()=>{document.addEventListener("click",t),l._clickHandler=t},0)}return this.setupRepositioning(l,o,s,n),{element:l,hide:()=>this.hide(e),isVisible:()=>l.classList.contains("popover--show")}}hide(e){const o=this.popovers.get(e);o&&(this.usePopoverAPI?o.hidePopover&&o.hidePopover():(o.classList.remove("popover--show"),o.style.display="none",o._clickHandler&&(document.removeEventListener("click",o._clickHandler),delete o._clickHandler)),o.parentNode&&o.parentNode.removeChild(o),this.popovers.delete(e))}positionPopover(e,o,t,i){const s=o.getBoundingClientRect(),r=e.getBoundingClientRect(),n=window.innerWidth,p=window.innerHeight;let h=0,l=0;switch(t){case"top":h=s.top-r.height-i,l=s.left+s.width/2-r.width/2;break;case"bottom":h=s.bottom+i,l=s.left+s.width/2-r.width/2;break;case"left":h=s.top+s.height/2-r.height/2,l=s.left-r.width-i;break;case"right":h=s.top+s.height/2-r.height/2,l=s.right+i;break;case"auto":const e=["bottom","top","right","left"];for(const o of e){const e=this.calculatePosition(s,r,o,i);if(this.isPositionValid(e,r,n,p)){t=o,({top:h,left:l}=e);break}}}l=Math.max(8,Math.min(l,n-r.width-8)),h=Math.max(8,Math.min(h,p-r.height-8)),e.style.position="fixed",e.style.top=`${h}px`,e.style.left=`${l}px`}calculatePosition(e,o,t,i){let s=0,r=0;switch(t){case"top":s=e.top-o.height-i,r=e.left+e.width/2-o.width/2;break;case"bottom":s=e.bottom+i,r=e.left+e.width/2-o.width/2;break;case"left":s=e.top+e.height/2-o.height/2,r=e.left-o.width-i;break;case"right":s=e.top+e.height/2-o.height/2,r=e.right+i}return{top:s,left:r}}isPositionValid({top:e,left:o},t,i,s){return e>=0&&o>=0&&e+t.height<=s&&o+t.width<=i}setupRepositioning(e,o,t,i){const s=()=>{this.popovers.has(e.id.replace("popover-",""))&&this.positionPopover(e,o,t,i)};window.addEventListener("scroll",s,{passive:!0}),window.addEventListener("resize",s),e._repositionHandlers={scroll:s,resize:s}}setupGlobalHandlers(){}destroy(){for(const e of this.popovers.keys())this.hide(e)}}export{e as PopoverManager};
|