@erain20029/tooltips 2.0.136 → 2.0.137

package/dist/tooltip-overlay.umd.js

@@ -1,27 +1,18 @@
-(function(d){typeof define=="function"&&define.amd?define(d):d()})((function(){"use strict";const d=".tooltip-overlay{position:fixed;z-index:9999;pointer-events:none;background:#53616e;border-radius:8px;box-shadow:0 4px 20px #00000040;color:#dadadb;min-width:45px;max-width:300px;overflow:visible}.tooltip-overlay.with-image{max-width:384px}.tooltip-card{display:flex;align-items:center;gap:16px;padding:10px;box-sizing:border-box}.tooltip-image{width:80px;height:80px;border-radius:8px;object-fit:cover}.tooltip-text{flex:1;color:#fff}.tooltip-title{font-weight:300;line-height:1.3}.tooltip-desc{margin-top:8px;line-height:1.5;font-weight:300;letter-spacing:.2px;overflow-wrap:break-word}.tooltip-arrow .icon{width:40px;height:40px;position:absolute}.tooltip-arrow.rotated .icon{transform:rotate(180deg)}";(function(){function x(){if(document.getElementById("tooltip-overlay-styles"))return;const o=document.createElement("style");o.id="tooltip-overlay-styles",o.textContent=d,document.head.appendChild(o)}let c=null,p=null,f=[],g=!1;function w(o){const e=o.getBoundingClientRect(),t=window.innerWidth,i=window.innerHeight,n=e.left+e.width/2,l=e.top+e.height/2;return{coordinates:{x:e.left,y:e.top,left:e.left,top:e.top,right:t-e.right,bottom:i-e.bottom,width:e.width,height:e.height},position:{horizontal:n<t/2?"left":"right",vertical:l<i/2?"top":"bottom"}}}function y(o,e){if(!o)return{titleSize:16,descriptionSize:12};let t=16,i=12,n="left",l="left";switch(o.title){case"small":t=16,n="left";break;case"medium":t=18;break;case"large":t=22;break}switch(o.description){case"small":i=12;break;case"medium":i=14;break;case"large":i=16;break}switch(e.title){case"left":n="left";break;case"center":n="center";break;case"right":n="right";break}switch(e.description){case"left":l="left";break;case"center":l="center";break;case"right":l="right";break}return{titleSize:t,descriptionSize:i,titleAlign:n,descriptionAlign:l}}function m(){c&&(c.remove(),c=null,p=null)}async function v(){if(g)return;const o=localStorage.getItem("product");if(!o)return;const e=JSON.parse(o).id,t=document.createElement("script");if(t.type="module",t.src=`http://localhost:3000/documentation/${e}/tooltip.js`,await new Promise((n,l)=>{t.onload=n,t.onerror=l,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const i=await window.tooltipGetter();f=Array.isArray(i)?i:[],g=!0}function b(o,e){m(),x();const t=document.createElement("div");t.className="tooltip-overlay",t.style.position="fixed",t.style.pointerEvents="none",t.style.zIndex="9999";const i=document.createElement("div");i.className="tooltip-arrow",i.style.position="absolute";const n=document.createElement("div");n.className="tooltip-card";const l=e.image?`<img class="tooltip-image" src="http://localhost:3000${e.image}" />`:"";n.innerHTML=`
-    ${e.position?.image==="left"?l:""}
-    <div class="tooltip-text">
-      <div class="tooltip-title">${e.title}</div>
-      <div class="tooltip-desc">${e.description}</div>
-    </div>
-    ${e.position?.image==="right"?l:""}
-  `,i.innerHTML=`
-        <svg
-            class="icon"
-            width="38"
-            height="38"
-            viewBox="0 0 60 40"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M26.5 6 L6 38 L47 38 Z"
-                fill="#53616E"
-            />
-        </svg>
-  `,t.appendChild(i),t.appendChild(n),document.body.appendChild(t);const{titleSize:$,descriptionSize:T,titleAlign:z,descriptionAlign:k}=y(e.size,e.position);t.querySelector(".tooltip-title").style.cssText=`
-    font-size: ${$}px;
-    text-align: ${z};
-  `,t.querySelector(".tooltip-desc").style.cssText=`
-    font-size: ${T}px;
-    text-align: ${k};
-  `,requestAnimationFrame(()=>{const r=o.getBoundingClientRect(),h=t.getBoundingClientRect(),s=w(o).position,E=s.horizontal==="left"&&s.vertical==="top",L=s.horizontal==="left"&&s.vertical==="bottom",S=s.horizontal==="right"&&s.vertical==="top",A=s.horizontal==="right"&&s.vertical==="bottom",a=15,u=30;E&&(t.style.left=`${r.left}px`,t.style.top=`${r.top+r.height+a}px`,i.style.left=`${a}px`,i.style.bottom=`${h.height}px`),L&&(t.style.left=`${r.left}px`,t.style.bottom=`${window.innerHeight-r.bottom+r.height+u}px`,i.style.left=`${a}px`,i.style.top=`${h.height-a}px`,i.classList.add("rotated")),S&&(t.style.right=`${window.innerWidth-r.right}px`,t.style.top=`${r.top+r.height+a}px`,i.style.right=`${a}px`,i.style.bottom=`${h.height}px`),A&&(t.style.right=`${window.innerWidth-r.right}px`,t.style.bottom=`${window.innerHeight-r.bottom+r.height+a}px`,i.style.right=`${a}px`,i.style.top=`${h.height-u}px`,i.classList.add("rotated"))}),c=t,p=o}document.addEventListener("mouseenter",async o=>{if(!(o.target instanceof Element)||o.target.closest(".tooltip-overlay")||(await v(),!g))return;const e=f.find(i=>o.target.closest(i.selector));if(!e)return;const t=o.target.closest(e.selector);t&&b(t,e)},!0),document.addEventListener("mouseleave",o=>{if(!c||!p)return;const e=o.relatedTarget;e&&!c.contains(e)&&!p.contains(e)&&m()},!0)})()}));
+(function(d){typeof define=="function"&&define.amd?define(d):d()})((function(){"use strict";const d=".tooltip-overlay{position:fixed;z-index:9999;pointer-events:none;background:#53616e;border-radius:8px;box-shadow:0 4px 20px #00000040;color:#dadadb;min-width:45px;max-width:300px;overflow:visible}.tooltip-overlay.with-image{max-width:384px}.tooltip-card{display:flex;align-items:center;gap:16px;padding:10px;box-sizing:border-box}.tooltip-image{width:80px;height:80px;border-radius:8px;object-fit:cover}.tooltip-text{flex:1;color:#fff}.tooltip-title{font-weight:300;line-height:1.3}.tooltip-desc{margin-top:8px;line-height:1.5;font-weight:300;letter-spacing:.2px;overflow-wrap:break-word}.tooltip-arrow .icon{width:40px;height:40px;position:absolute}.tooltip-arrow.rotated .icon{transform:rotate(180deg)}";(function(){function x(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=d,document.head.appendChild(i)}let a=null,p=null,f=[],h=!1;const l=15,m=15;function y(i){const e=i.getBoundingClientRect(),t=window.innerWidth,o=window.innerHeight,c=e.left+e.width/2,s=e.top+e.height/2;return{coordinates:{left:e.left,top:e.top,right:t-e.right,bottom:o-e.bottom,width:e.width,height:e.height},position:{horizontal:c<t/2?"left":"right",vertical:s<o/2?"top":"bottom"}}}function v(i={},e={}){const t={small:16,medium:18,large:22},o={small:12,medium:14,large:16};return{titleSize:t[i.title]??16,descSize:o[i.description]??12,titleAlign:e.title??"left",descAlign:e.description??"left"}}function u(){a&&(a.remove(),a=null,p=null)}async function w(){if(h)return;const i=localStorage.getItem("product");if(!i)return;const{id:e}=JSON.parse(i),t=document.createElement("script");if(t.type="module",t.src=`http://localhost:3000/documentation/${e}/tooltip.js`,await new Promise((c,s)=>{t.onload=c,t.onerror=s,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const o=await window.tooltipGetter();f=Array.isArray(o)?o:[],h=!0}function $(i,e){u(),x();const t=document.createElement("div");t.className="tooltip-overlay",t.style.position="fixed",t.style.pointerEvents="none",t.style.zIndex="9999",e.image&&t.classList.add("with-image");const o=document.createElement("div");o.className="tooltip-arrow",o.innerHTML=`
+      <svg class="icon" viewBox="0 0 60 40">
+        <path d="M26.5 6 L6 38 L47 38 Z" />
+      </svg>
+    `;const c=e.image?`<img class="tooltip-image" src="http://localhost:3000${e.image}" />`:"",s=document.createElement("div");s.className="tooltip-card",s.innerHTML=`
+      ${e.position?.image==="left"?c:""}
+      <div class="tooltip-text">
+        <div class="tooltip-title">${e.title}</div>
+        <div class="tooltip-desc">${e.description}</div>
+      </div>
+      ${e.position?.image==="right"?c:""}
+    `,t.appendChild(o),t.appendChild(s),document.body.appendChild(t);const{titleSize:b,descSize:T,titleAlign:z,descAlign:E}=v(e.size,e.position);t.querySelector(".tooltip-title").style.cssText=`
+      font-size: ${b}px;
+      text-align: ${z};
+    `,t.querySelector(".tooltip-desc").style.cssText=`
+      font-size: ${T}px;
+      text-align: ${E};
+    `,requestAnimationFrame(()=>{i.getBoundingClientRect();const g=t.getBoundingClientRect(),{position:r,coordinates:n}=y(i),L=r.horizontal==="left"&&r.vertical==="top",A=r.horizontal==="left"&&r.vertical==="bottom",C=r.horizontal==="right"&&r.vertical==="top",O=r.horizontal==="right"&&r.vertical==="bottom";L&&(t.style.left=`${n.left}px`,t.style.top=`${n.top+n.height+l}px`,o.style.left=`${l}px`,o.style.bottom=`${g.height}px`),A&&(t.style.left=`${n.left}px`,t.style.bottom=`${n.bottom+n.height+l}px`,o.style.left=`${l}px`,o.style.top=`${g.height-m}px`,o.classList.add("rotated")),C&&(t.style.right=`${n.right}px`,t.style.top=`${n.top+n.height+l}px`,o.style.right=`${l}px`,o.style.bottom=`${g.height}px`),O&&(t.style.right=`${n.right}px`,t.style.bottom=`${n.bottom+n.height+l}px`,o.style.right=`${l}px`,o.style.top=`${g.height-m}px`,o.classList.add("rotated"))}),a=t,p=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await w(),!h))return;const e=f.find(o=>i.target.closest(o.selector));if(!e)return;const t=i.target.closest(e.selector);t&&$(t,e)},!0),document.addEventListener("mouseleave",i=>{if(!a||!p)return;const e=i.relatedTarget;e&&!a.contains(e)&&!p.contains(e)&&u()},!0)})()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erain20029/tooltips",
-  "version": "2.0.136",
+  "version": "2.0.137",
   "description": "Universal tooltip overlay for any HTML project",
   "license": "MIT",
   "author": "Erik",