@erain20029/tooltips 2.0.20 → 2.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tooltip-overlay.es.js +0 -148
- package/dist/tooltip-overlay.umd.cjs +1 -23
- package/package.json +1 -1
|
@@ -1,149 +1 @@
|
|
|
1
|
-
const w = ".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}", p = {
|
|
2
|
-
tooltips: [],
|
|
3
|
-
ready: !1
|
|
4
|
-
}, m = /* @__PURE__ */ new Set();
|
|
5
|
-
function y(t) {
|
|
6
|
-
return m.has(t) ? Promise.resolve() : new Promise((e, o) => {
|
|
7
|
-
const i = document.createElement("script");
|
|
8
|
-
i.src = t, i.async = !0, i.onload = () => {
|
|
9
|
-
m.add(t), e();
|
|
10
|
-
}, i.onerror = () => o(new Error(`Failed to load script: ${t}`)), document.head.appendChild(i);
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
async function h() {
|
|
14
|
-
if (p.ready) return;
|
|
15
|
-
const t = localStorage.getItem("product");
|
|
16
|
-
if (!t) return;
|
|
17
|
-
const e = JSON.parse(t).id;
|
|
18
|
-
await y(`http://localhost:3000/documentation/${e}/tooltip.js`), p.tooltips = await window.tooltipGetter(), p.ready = !0;
|
|
19
|
-
}
|
|
20
|
-
async function b(t) {
|
|
21
|
-
await h();
|
|
22
|
-
const e = t.target;
|
|
23
|
-
if (!(e instanceof Element)) return;
|
|
24
|
-
const o = p.tooltips.find(
|
|
25
|
-
(v) => e.matches(v.selector)
|
|
26
|
-
);
|
|
27
|
-
if (!o) return;
|
|
28
|
-
const i = e.getBoundingClientRect(), l = k(i), { x: n, y: s } = C(
|
|
29
|
-
l,
|
|
30
|
-
i.left,
|
|
31
|
-
i.top
|
|
32
|
-
);
|
|
33
|
-
H({
|
|
34
|
-
tooltip: o,
|
|
35
|
-
rect: i,
|
|
36
|
-
x: n,
|
|
37
|
-
y: s
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
function $(t) {
|
|
41
|
-
r && (t.target === r || t.target === u) && x();
|
|
42
|
-
}
|
|
43
|
-
let g = !1;
|
|
44
|
-
async function L() {
|
|
45
|
-
g || (g = !0, await h(), document.addEventListener(
|
|
46
|
-
"mouseenter",
|
|
47
|
-
b,
|
|
48
|
-
!0
|
|
49
|
-
), document.addEventListener(
|
|
50
|
-
"mouseleave",
|
|
51
|
-
$,
|
|
52
|
-
!0
|
|
53
|
-
));
|
|
54
|
-
}
|
|
55
|
-
function T({ title: t, description: e, image: o }) {
|
|
56
|
-
const i = (n) => n === "center" || n === "right" ? n : "left", l = (n) => n === "top" || n === "right" ? n : "left";
|
|
57
|
-
return {
|
|
58
|
-
title: i(t),
|
|
59
|
-
description: i(e),
|
|
60
|
-
image: l(o)
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
function z({ title: t, description: e }) {
|
|
64
|
-
const o = {
|
|
65
|
-
small: 14,
|
|
66
|
-
medium: 16,
|
|
67
|
-
large: 20
|
|
68
|
-
};
|
|
69
|
-
return {
|
|
70
|
-
title: o[t] ?? 16,
|
|
71
|
-
description: o[e] ?? 14
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
const d = 500, f = 200;
|
|
75
|
-
let c = 0, a = 0, r = null, u = null;
|
|
76
|
-
function x() {
|
|
77
|
-
r && (r.remove(), r = null, u = null);
|
|
78
|
-
}
|
|
79
|
-
function C(t, e, o) {
|
|
80
|
-
switch (t) {
|
|
81
|
-
case "left-bottom":
|
|
82
|
-
c = e, a = o + 36;
|
|
83
|
-
break;
|
|
84
|
-
case "right-bottom":
|
|
85
|
-
c = e - d + 45, a = o + 36;
|
|
86
|
-
break;
|
|
87
|
-
case "left-top":
|
|
88
|
-
c = e, a = o - f - 18;
|
|
89
|
-
break;
|
|
90
|
-
case "right-top":
|
|
91
|
-
c = e - d + 45, a = o - f - 18;
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
return { x: c, y: a };
|
|
95
|
-
}
|
|
96
|
-
function E() {
|
|
97
|
-
const t = document.createElement("style");
|
|
98
|
-
t.textContent = w, document.body.appendChild(t);
|
|
99
|
-
}
|
|
100
|
-
function S(t) {
|
|
101
|
-
const e = document.createElement("div");
|
|
102
|
-
return e.className = t, e;
|
|
103
|
-
}
|
|
104
|
-
function H(t) {
|
|
105
|
-
if (!t?.tooltip) return null;
|
|
106
|
-
x();
|
|
107
|
-
const e = t.tooltip, o = S("overlay");
|
|
108
|
-
o.style.position = "fixed", o.style.width = `${d}px`, o.style.height = `${f}px`, o.style.left = `${t.x}px`, o.style.top = `${t.y}px`;
|
|
109
|
-
const i = z({
|
|
110
|
-
title: e.size.title,
|
|
111
|
-
description: e.size.description
|
|
112
|
-
}), l = T({
|
|
113
|
-
title: e.position.title,
|
|
114
|
-
description: e.position.description,
|
|
115
|
-
image: e.position.image
|
|
116
|
-
});
|
|
117
|
-
console.log(e);
|
|
118
|
-
const s = e.image ? `<img class="tooltip-image" src="http://localhost:3000${e.image}" alt="" />` : "";
|
|
119
|
-
return o.innerHTML = `
|
|
120
|
-
${l.image === "top" ? `<div class="tooltip-media">
|
|
121
|
-
${s}
|
|
122
|
-
</div>` : ""}
|
|
123
|
-
<div class="tooltip-card">
|
|
124
|
-
${l.image === "left" ? `<div class="tooltip-media">
|
|
125
|
-
${s}
|
|
126
|
-
</div>` : ""}
|
|
127
1
|
|
|
128
|
-
<div class="tooltip-text">
|
|
129
|
-
<div class="tooltip-title" style="font-size: ${i.title}px; text-align: ${l.title}">
|
|
130
|
-
${e.title}
|
|
131
|
-
</div>
|
|
132
|
-
<div class="tooltip-desc" style="font-size: ${i.description}px; text-align: ${l.description}">
|
|
133
|
-
${e.description}
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
|
|
137
|
-
${l.image === "right" ? `<div class="tooltip-media">
|
|
138
|
-
${s}
|
|
139
|
-
</div>` : ""}
|
|
140
|
-
</div>
|
|
141
|
-
`, document.body.appendChild(o), E(), r = o, u = t.rect, o;
|
|
142
|
-
}
|
|
143
|
-
function k(t) {
|
|
144
|
-
const e = window.innerWidth / 2, o = window.innerHeight / 2, i = t.left + t.width / 2, l = t.top + t.height / 2, n = i < e, s = l < o;
|
|
145
|
-
return n && s ? "left-bottom" : !n && s ? "right-bottom" : n && !s ? "left-top" : "right-top";
|
|
146
|
-
}
|
|
147
|
-
export {
|
|
148
|
-
L as initTooltips
|
|
149
|
-
};
|
|
@@ -1,23 +1 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
${l.image==="top"?`<div class="tooltip-media">
|
|
3
|
-
${s}
|
|
4
|
-
</div>`:""}
|
|
5
|
-
<div class="tooltip-card">
|
|
6
|
-
${l.image==="left"?`<div class="tooltip-media">
|
|
7
|
-
${s}
|
|
8
|
-
</div>`:""}
|
|
9
|
-
|
|
10
|
-
<div class="tooltip-text">
|
|
11
|
-
<div class="tooltip-title" style="font-size: ${i.title}px; text-align: ${l.title}">
|
|
12
|
-
${e.title}
|
|
13
|
-
</div>
|
|
14
|
-
<div class="tooltip-desc" style="font-size: ${i.description}px; text-align: ${l.description}">
|
|
15
|
-
${e.description}
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
${l.image==="right"?`<div class="tooltip-media">
|
|
20
|
-
${s}
|
|
21
|
-
</div>`:""}
|
|
22
|
-
</div>
|
|
23
|
-
`,document.body.appendChild(o),E(),c=o,g=t.rect,o}function O(t){const e=window.innerWidth/2,o=window.innerHeight/2,i=t.left+t.width/2,l=t.top+t.height/2,n=i<e,s=l<o;return n&&s?"left-bottom":!n&&s?"right-bottom":n&&!s?"left-top":"right-top"}r.initTooltips=T,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(n){typeof define=="function"&&define.amd?define(n):n()})((function(){"use strict"}));
|