graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 3.48 kB
JavaScript
import{arrow,autoUpdate,computePosition,flip,hide,offset,shift}from"@floating-ui/dom";export class TooltipInstance{constructor(t,e){this.referenceElement=t,this.config=e,this.cleanupAutoUpdate=null,this.isVisible=!1,this.isDestroyed=!1,this.pendingDestroy=!1,this.createFloatingElement(),this.createArrowElement()}show(){this.pendingDestroy=!1,this.isVisible||(this.config.onShow&&this.config.onShow(),this.isVisible=!0,this.appendToTarget(),this.cleanupAutoUpdate=autoUpdate(this.referenceElement,this.floatingElement,()=>this.updatePosition()),this.updatePosition(),this.floatingElement.style.visibility="visible",this.floatingElement.style.opacity="0.9")}hide(){this.isVisible&&(this.isVisible=!1,this.config.onHide&&this.config.onHide(),this.floatingElement.style.visibility="hidden",this.floatingElement.style.opacity="0",this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null))}setContent(t){const e=this.floatingElement.querySelector(".tooltip-content");e&&(this.config.allowHTML?e.innerHTML=t:e.textContent=t)}destroy(){this.isDestroyed||(this.pendingDestroy=!0,setTimeout(()=>{this.pendingDestroy&&(this.hide(),this.floatingElement&&this.floatingElement.remove(),this.isDestroyed=!0,delete this.floatingElement.tooltipTarget,delete this.referenceElement._tooltipInstance,delete this.referenceElement.hideTooltip)},TooltipInstance.DESTROY_DELAY_MS))}createFloatingElement(){var t,e;this.floatingElement=document.createElement("div"),this.floatingElement.className="tooltip-box",this.floatingElement.dataset.theme=this.config.theme,this.floatingElement.style.position="absolute",this.floatingElement.style.top="0",this.floatingElement.style.left="0",this.floatingElement.style.visibility="hidden",this.floatingElement.style.opacity="0",this.floatingElement.style.transition="opacity 0.2s ease-in-out",this.floatingElement.style.zIndex="9999";const i=document.createElement("div");i.className="tooltip-content",this.config.allowHTML?i.innerHTML=null!==(t=this.config.content)&&void 0!==t?t:"":i.textContent=null!==(e=this.config.content)&&void 0!==e?e:"",this.floatingElement.appendChild(i),this.floatingElement.tooltipTarget=this.referenceElement,this.referenceElement.hideTooltip=()=>{this.destroy()}}createArrowElement(){this.arrowElement=document.createElement("div"),this.arrowElement.className="tooltip-arrow",this.arrowElement.style.position="absolute",this.floatingElement.appendChild(this.arrowElement)}appendToTarget(){const t=this.config.appendTo;let e;e="function"==typeof t?t(this.referenceElement):"parent"===t?this.referenceElement.parentElement||document.body:t,e.appendChild(this.floatingElement)}async updatePosition(){const t=[hide(),flip(),offset(8),shift({padding:5}),arrow({element:this.arrowElement})],e=this.mapPlacement(this.config.placement),{x:i,y:n,placement:o,middlewareData:l}=await computePosition(this.referenceElement,this.floatingElement,{placement:e,middleware:t});if(l.hide&&Object.assign(this.floatingElement.style,{visibility:l.hide.referenceHidden?"hidden":"visible"}),Object.assign(this.floatingElement.style,{left:`${i}px`,top:`${n}px`}),this.floatingElement.dataset.placement=o,l.arrow){const{x:t,y:e}=l.arrow,i={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]];this.arrowElement.dataset.placement=i,Object.assign(this.arrowElement.style,{left:null===t?"":`${t}px`,top:null===e?"":`${e}px`,[i]:"-5px"})}}mapPlacement(t){return t&&"auto"!==t?t:"right"}}TooltipInstance.DESTROY_DELAY_MS=100;