UNPKG

@wikimedia/codex

Version:

Codex Design System for Wikimedia

2 lines (1 loc) 4.18 kB
var p=Object.defineProperty;var d=(n,e,t)=>e in n?p(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var s=(n,e,t)=>d(n,typeof e!="symbol"?e+"":e,t);import{b8 as c,a5 as E}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CZ7OyK4g.js";/* empty css */import{a as f,c as u,o as b,f as y,b as H,h as C}from"./floating-ui.dom-CMj0Z5yx.js";function x(n,e=c){let i=Array.from(n).reduce((l,r)=>l*31+r.charCodeAt(0)&4294967295,0);i=i>>>0;const o=i.toString(36);return"".concat(e,"-").concat(o)}const a=new Map;class m{constructor(e,t){s(this,"referenceElement");s(this,"tooltipElement");s(this,"textContent");s(this,"placement");s(this,"autoUpdateCleanup");s(this,"referenceElementHandlers");s(this,"tooltipElementHandlers");s(this,"escapeHandler");s(this,"timeoutId");var l,r;const i=e.ownerDocument,o=this.generateTooltipId(t.textContent);this.referenceElement=e,this.textContent=t.textContent,this.placement=(l=t.placement)!=null?l:"bottom",this.timeoutId=null,this.tooltipElement=i.createElement("div"),this.tooltipElement.classList.add("cdx-tooltip"),this.tooltipElement.role="tooltip",this.tooltipElement.id=o,this.referenceElement.setAttribute("aria-describedby",o),this.tooltipElement.textContent=this.textContent,(r=this.referenceElement.parentElement)==null||r.appendChild(this.tooltipElement),this.referenceElementHandlers={},this.referenceElementHandlers.mouseenter=this.show.bind(this),this.referenceElementHandlers.mouseleave=this.hideAfterDelay.bind(this),this.referenceElementHandlers.focus=this.show.bind(this),this.referenceElementHandlers.blur=this.hide.bind(this),this.tooltipElementHandlers={},this.tooltipElementHandlers.mouseenter=this.show.bind(this),this.tooltipElementHandlers.mouseleave=this.hideAfterDelay.bind(this),this.escapeHandler=this.onKeyup.bind(this),this.addEventListeners(),this.autoUpdateCleanup=f(this.referenceElement,this.tooltipElement,()=>this.update())}generateTooltipId(e){var o;const t=e.trim(),i=(o=a.get(t))!=null?o:0;return a.set(t,i+1),x(t+"-"+i,"cdx-tooltip")}isVisible(){return this.tooltipElement.style.display==="block"}show(){this.timeoutId&&clearTimeout(this.timeoutId),this.tooltipElement.style.display="block",this.tooltipElement.ownerDocument.addEventListener("keyup",this.escapeHandler)}hide(){this.tooltipElement.style.display="none",this.tooltipElement.ownerDocument.removeEventListener("keyup",this.escapeHandler)}hideAfterDelay(){this.timeoutId=setTimeout(this.hide.bind(this),250)}onKeyup(e){e.key==="Escape"&&this.isVisible()&&this.hide()}addEventListeners(){Object.keys(this.referenceElementHandlers).forEach(e=>{this.referenceElement.addEventListener(e,this.referenceElementHandlers[e])}),Object.keys(this.tooltipElementHandlers).forEach(e=>{this.tooltipElement.addEventListener(e,this.tooltipElementHandlers[e])})}removeEventListeners(){Object.keys(this.referenceElementHandlers).forEach(e=>{this.referenceElement.removeEventListener(e,this.referenceElementHandlers[e])}),Object.keys(this.tooltipElementHandlers).forEach(e=>{this.tooltipElement.removeEventListener(e,this.tooltipElementHandlers[e])})}update(){u(this.referenceElement,this.tooltipElement,{placement:this.placement,middleware:[b(4),y(),H(),C()]}).then(({x:e,y:t,middlewareData:i})=>{var l,r,h;const o=(r=(l=i.offset)==null?void 0:l.placement)!=null?r:this.placement;Object.assign(this.tooltipElement.style,{left:"".concat(e,"px"),top:"".concat(t,"px"),visibility:(h=i.hide)!=null&&h.referenceHidden?"hidden":"visible",transformOrigin:E[o]})})}updateWithOptions(e){var t;this.textContent=e.textContent,this.placement=(t=e.placement)!=null?t:this.placement,this.tooltipElement.textContent=this.textContent,this.update()}remove(){this.tooltipElement.remove(),this.autoUpdateCleanup(),this.removeEventListeners()}}const I={mounted(n,{value:e,arg:t}){e&&(typeof e=="string"&&e.trim()===""||(n.tooltip=new m(n,{textContent:String(e),placement:t})))},updated(n,{value:e,arg:t}){e!==null&&(n.tooltip?n.tooltip.updateWithOptions({textContent:String(e),placement:t}):n.tooltip=new m(n,{textContent:String(e),placement:t}))},beforeUnmount(n){n.tooltip&&n.tooltip.remove()}};export{I as C};