@erain20029/tooltips 2.0.26 → 2.0.27

package/package.json

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

package/dist/tooltip-overlay.es.js

@@ -1,123 +0,0 @@
-const x = ".overlay{background:#fff;color:#111;position:fixed;border-radius:10px;z-index:99999;box-shadow:0 0 34px #223c5033;overflow:hidden}.tooltip-card{display:flex;height:100%;align-items:center;gap:16px;padding:16px 20px;max-width:500px;box-sizing:border-box}.tooltip-media{display:flex;justify-content:center}.tooltip-image{width:120px;height:120px;object-fit:cover;border-radius:8px}.tooltip-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.tooltip-text div{width:100%;display:block}.tooltip-title{font-weight:600;line-height:1.3}.tooltip-desc{line-height:1.5;overflow-wrap:anywhere}", s = {
-  tooltips: [],
-  ready: !1
-}, m = /* @__PURE__ */ new Set();
-let r = null, f = null, h = !1;
-function y(t) {
-  return m.has(t) ? Promise.resolve() : new Promise((e, n) => {
-    const o = document.createElement("script");
-    o.src = t, o.async = !0, o.onload = () => {
-      m.add(t), e();
-    }, o.onerror = () => n(new Error(`Failed to load script: ${t}`)), document.head.appendChild(o);
-  });
-}
-async function v() {
-  if (s.ready) return;
-  const t = localStorage.getItem("product");
-  if (!t) return;
-  const e = JSON.parse(t).id;
-  if (await y(
-    `http://localhost:3000/documentation/${e}/tooltip.js`
-  ), typeof window.tooltipGetter != "function") {
-    console.warn("tooltipGetter not ready");
-    return;
-  }
-  s.tooltips = await window.tooltipGetter(), s.ready = !0;
-}
-document.addEventListener(
-  "mouseenter",
-  async (t) => {
-    if (t.target.closest(".tooltip-overlay") || (await v(), !s.ready)) return;
-    const e = t.target;
-    if (!(e instanceof Element)) return;
-    const n = s.tooltips.find(
-      (d) => e.closest(d.selector)
-    );
-    if (!n) return;
-    const o = e.closest(n.selector), i = o.getBoundingClientRect(), a = T(i), { x: l, y: u } = b(
-      a,
-      i
-    );
-    S({
-      tooltip: n,
-      x: l,
-      y: u,
-      target: o
-    });
-  },
-  !0
-);
-document.addEventListener(
-  "mouseleave",
-  (t) => {
-    if (!r || !f) return;
-    const e = t.relatedTarget;
-    e && !r.contains(e) && !f.contains(e) && g();
-  },
-  !0
-);
-const c = 500, p = 200;
-function w() {
-  if (h) return;
-  const t = document.createElement("style");
-  t.textContent = x, document.head.appendChild(t), h = !0;
-}
-function g() {
-  r && (r.remove(), r = null, f = null);
-}
-function b(t, e) {
-  let n = 0, o = 0;
-  const i = 16;
-  switch (t) {
-    case "left-bottom":
-      n = e.left, o = e.bottom + i;
-      break;
-    case "right-bottom":
-      n = e.right - c, o = e.bottom + i;
-      break;
-    case "left-top":
-      n = e.left, o = e.top - p - i;
-      break;
-    case "right-top":
-      n = e.right - c, o = e.top - p - i;
-      break;
-  }
-  return n = Math.max(8, Math.min(n, window.innerWidth - c - 8)), o = Math.max(8, Math.min(o, window.innerHeight - p - 8)), { x: n, y: o };
-}
-function T(t) {
-  const e = t.left + t.width / 2, n = t.top + t.height / 2, o = e < window.innerWidth / 2, i = n < window.innerHeight / 2;
-  return o && i ? "left-bottom" : !o && i ? "right-bottom" : o && !i ? "left-top" : "right-top";
-}
-function $({ title: t, description: e }) {
-  return {
-    title: t === "large" ? 20 : t === "small" ? 14 : 16,
-    description: e === "large" ? 16 : e === "small" ? 12 : 14
-  };
-}
-function E({ title: t, description: e, image: n }) {
-  return {
-    title: t || "left",
-    description: e || "left",
-    image: n || "left"
-  };
-}
-function S({ tooltip: t, x: e, y: n, target: o }) {
-  g(), w();
-  const i = document.createElement("div");
-  i.className = "tooltip-overlay", i.style.position = "fixed", i.style.width = `${c}px`, i.style.height = `${p}px`, i.style.left = `${e}px`, i.style.top = `${n}px`, i.style.zIndex = "999999";
-  const a = $(t.size || {}), l = E(t.position || {}), d = t.image ? `<img class="tooltip-image" src="http://localhost:3000${t.image}" />` : "";
-  i.innerHTML = `
-        <div class="tooltip-card">
-            ${l.image === "left" ? `<div>${d}</div>` : ""}
-            <div class="tooltip-text">
-                <div class="tooltip-title" style="font-size:${a.title}px;text-align:${l.title}">
-                    ${t.title}
-                </div>
-                <div class="tooltip-desc" style="font-size:${a.description}px;text-align:${l.description}">
-                    ${t.description}
-                </div>
-            </div>
-            ${l.image === "right" ? `<div>${d}</div>` : ""}
-        </div>
-    `, document.body.appendChild(i), r = i, f = o;
-}