mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
Cell
2 lines
8.6 KiB
JavaScript
Vendored
2 lines
8.6 KiB
JavaScript
Vendored
(function(p,l){typeof exports=="object"&&typeof module<"u"?module.exports=l():typeof define=="function"&&define.amd?define(l):(p=typeof globalThis<"u"?globalThis:p||self,p.CellTooltip=l())})(this,(function(){"use strict";const p=".cell-tooltip{position:absolute;z-index:999;pointer-events:none;opacity:0;transform:scale(.97);transition:opacity .12s ease,transform .12s ease;filter:drop-shadow(0 0 4px var(--tooltip-shadow-color, rgba(255, 255, 255, .18)));--tooltip-bg: #111827;--tooltip-color: #f8fafc;--tooltip-arrow-size: 8px}.cell-tooltip[data-theme=auto],.cell-tooltip[data-theme=light]{--tooltip-bg: #ffffff;--tooltip-color: #0f172a;--tooltip-shadow-color: rgba(0, 0, 0, .18)}@media(prefers-color-scheme:dark){.cell-tooltip[data-theme=auto]{--tooltip-bg: #111827;--tooltip-color: #f8fafc;--tooltip-shadow-color: rgba(255, 255, 255, .18)}}.cell-tooltip.show{opacity:1;transform:scale(1)}.cell-tooltip-inner{max-width:240px;padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.35;color:var(--tooltip-color);background:var(--tooltip-bg);text-align:center;word-wrap:break-word}.cell-tooltip-arrow{position:absolute;width:0;height:0;transform:translate(-50%,-50%)}.cell-tooltip[data-placement=top] .cell-tooltip-arrow{bottom:calc(-1 * var(--tooltip-arrow-size));border-left:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid transparent;border-top:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=bottom] .cell-tooltip-arrow{top:0;border-left:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=left] .cell-tooltip-arrow{right:calc(-1 * var(--tooltip-arrow-size));border-top:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid transparent;border-left:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=right] .cell-tooltip-arrow{left:0;border-top:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid var(--tooltip-bg)}",l={placement:"top",trigger:"hover focus",theme:"dark",offset:8,html:!1},w={show:120,hide:80},v=["top","bottom","right","left"],m=new WeakMap;let b=0;function x(o){return b+=1,`${o}-${b}`}function T(o){return o instanceof HTMLElement}function L(o){return typeof o=="number"?{show:o,hide:o}:{show:o?.show??w.show,hide:o?.hide??w.hide}}function z(o){const t=o.trim().split(/\s+/).filter(Boolean);if(t.length===0)return["hover","focus"];const e=[];for(const i of t)(i==="hover"||i==="focus"||i==="click"||i==="manual")&&e.push(i);return e.length>0?e:["hover","focus"]}function g(o,t,e){return Math.min(Math.max(o,t),e)}function C(o){return o==="light"||o==="dark"||o==="auto"?o:l.theme}class u{element;config;tip=null;arrow=null;isEnabled=!0;timeoutId=null;hoverState=null;activeTrigger={click:!1,hover:!1,focus:!1};listeners=[];constructor(t,e={}){this.element=t;const i=h=>h.dataset.ctTitle??h.dataset.ctOriginalTitle??h.getAttribute("title")??"",a=t.getAttribute("data-ct-placement")??void 0,r=t.getAttribute("data-ct-trigger")??void 0,s=t.getAttribute("data-ct-theme")??void 0;this.config={title:e.title??i,placement:e.placement??a??l.placement,trigger:e.trigger??r??l.trigger,theme:C(e.theme??s??l.theme),container:e.container??document.body,offset:e.offset??l.offset,html:e.html??l.html,delay:L(e.delay)},t.title&&(t.setAttribute("data-ct-original-title",t.title),t.removeAttribute("title")),this.addListeners(),m.set(t,this)}static getOrCreateInstance(t,e){return m.get(t)??new u(t,e)}static initAll(t="[data-ct-title]",e){return Array.from(document.querySelectorAll(t)).map(i=>u.getOrCreateInstance(i,e))}enable(){this.isEnabled=!0}disable(){this.isEnabled=!1}toggleEnabled(){this.isEnabled=!this.isEnabled}toggle(){if(this.tip&&this.tip.classList.contains("show")){this.leave();return}this.enter()}show(){if(!this.isEnabled||!this.hasContent())return;const t=this.getTipElement();t.dataset.theme=this.config.theme;const e=t.classList.contains("show");t.isConnected||this.config.container.appendChild(t),this.setContent(t),e||(this.updatePosition(),t.classList.add("show"),this.element.setAttribute("aria-describedby",t.id))}hide(){const t=this.tip;t&&(t.classList.remove("show"),this.activeTrigger.click=!1,this.activeTrigger.focus=!1,this.activeTrigger.hover=!1,this.hoverState=null,this.element.removeAttribute("aria-describedby"),window.setTimeout(()=>{t.classList.contains("show")||t.remove()},150))}update(){this.tip&&this.tip.classList.contains("show")&&this.updatePosition()}refresh(){!this.tip||!this.tip.classList.contains("show")||(this.setContent(this.tip),this.updatePosition())}setTitle(t){this.config.title=t,this.refresh()}dispose(){this.clearTimer(),this.listeners.forEach(t=>t()),this.listeners=[],this.hide(),m.delete(this.element)}addListeners(){const t=z(this.config.trigger);for(const e of t)e!=="manual"&&(e==="hover"&&(this.bind(this.element,"mouseenter",()=>{this.activeTrigger.hover=!0,this.enter()}),this.bind(this.element,"mouseleave",()=>{this.activeTrigger.hover=!1,this.leave()})),e==="focus"&&(this.bind(this.element,"focusin",()=>{this.activeTrigger.focus=!0,this.enter()}),this.bind(this.element,"focusout",()=>{this.activeTrigger.focus=!1,this.leave()})),e==="click"&&this.bind(this.element,"click",i=>{i.preventDefault(),this.activeTrigger.click=!this.activeTrigger.click,this.toggle()}));this.bind(window,"resize",()=>this.update()),this.bind(window,"scroll",()=>{if(this.activeTrigger.hover||this.activeTrigger.focus){this.hide();return}this.update()})}bind(t,e,i){t.addEventListener(e,i),this.listeners.push(()=>t.removeEventListener(e,i))}clearTimer(){this.timeoutId!==null&&(window.clearTimeout(this.timeoutId),this.timeoutId=null)}enter(){this.isEnabled&&(this.clearTimer(),this.hoverState="show",this.timeoutId=window.setTimeout(()=>{this.hoverState==="show"&&this.show()},this.config.delay.show))}leave(){this.hasActiveTrigger()||(this.clearTimer(),this.hoverState="out",this.timeoutId=window.setTimeout(()=>{this.hoverState==="out"&&this.hide()},this.config.delay.hide))}hasActiveTrigger(){return this.activeTrigger.click||this.activeTrigger.focus||this.activeTrigger.hover}hasContent(){return this.getTitle().trim().length>0}getTitle(){const{title:t}=this.config;return typeof t=="function"?t(this.element):t}getTipElement(){if(this.tip)return this.tip;const t=document.createElement("div");t.className="cell-tooltip",t.id=x("cell-tooltip"),t.setAttribute("role","tooltip"),t.dataset.theme=this.config.theme,t.innerHTML='<div class="cell-tooltip-arrow"></div><div class="cell-tooltip-inner"></div>';const e=t.querySelector(".cell-tooltip-arrow");if(!T(e))throw new Error("Tooltip arrow element is missing");return this.tip=t,this.arrow=e,t}setContent(t){const e=t.querySelector(".cell-tooltip-inner");if(!T(e))throw new Error("Tooltip inner element is missing");const i=this.getTitle();if(this.config.html){e.innerHTML=i;return}e.textContent=i}updatePosition(){const t=this.getTipElement();t.style.top="0",t.style.left="0";const e=this.element.getBoundingClientRect(),i=t.getBoundingClientRect(),a=this.resolvePlacement(e,i);t.dataset.placement=a;const r=window.scrollX,s=window.scrollY,h=window.innerWidth,f=window.innerHeight,c=this.config.offset;let n=0,d=0;switch(a){case"top":n=e.top+s-i.height-c,d=e.left+r+(e.width-i.width)/2;break;case"bottom":n=e.bottom+s+c,d=e.left+r+(e.width-i.width)/2;break;case"left":n=e.top+s+(e.height-i.height)/2,d=e.left+r-i.width-1.5*c;break;case"right":n=e.top+s+(e.height-i.height)/2,d=e.right+r+c;break}const E=g(n,s+4,s+f-i.height-4),A=g(d,r+4,r+h-i.width-4);t.style.top=`${Math.round(E)}px`,t.style.left=`${Math.round(A)}px`,this.updateArrowPosition(a,e,{top:E,left:A,width:i.width,height:i.height})}resolvePlacement(t,e){if(this.config.placement!=="auto")return this.config.placement;const i=this.config.offset,a=t.top,r=window.innerHeight-t.bottom,s=t.left,h=window.innerWidth-t.right,f={top:a>=e.height+i,bottom:r>=e.height+i,left:s>=e.width+i,right:h>=e.width+i};for(const n of v)if(f[n])return n;const c={top:a,bottom:r,left:s,right:h};return v.reduce((n,d)=>c[d]>c[n]?d:n,"top")}updateArrowPosition(t,e,i){if(!this.arrow)return;const a=e.left+window.scrollX+e.width/2,r=e.top+window.scrollY+e.height/2;if(t==="top"||t==="bottom"){const f=a-i.left,c=g(f,10,i.width-10);this.arrow.style.left=`${c}px`,this.arrow.style.top="";return}const s=r-i.top,h=g(s,10,i.height-10);this.arrow.style.top=`${h}px`,this.arrow.style.left=""}}const y="cell-tooltip-runtime-style";function k(){if(typeof document>"u"||document.getElementById(y))return;const o=document.createElement("style");o.id=y,o.textContent=p,document.head.appendChild(o)}return k(),u}));
|