data-preview 1.0.2 → 1.0.3
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/data-preview.es.js +96 -95
- package/dist/data-preview.umd.js +4 -4
- package/package.json +1 -1
package/dist/data-preview.es.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
1
|
+
const te = (() => {
|
|
2
|
+
const b = {
|
|
3
3
|
imgPad: 8,
|
|
4
4
|
maxWRatio: 0.9,
|
|
5
5
|
maxHRatio: 0.85,
|
|
6
6
|
delayHide: 120,
|
|
7
7
|
longPressDuration: 480,
|
|
8
8
|
badgeOffset: 6
|
|
9
|
-
}, y = 16,
|
|
10
|
-
let h, i,
|
|
11
|
-
const
|
|
12
|
-
let
|
|
13
|
-
const
|
|
9
|
+
}, y = 16, g = 12;
|
|
10
|
+
let h, i, L, u, m, p, r, M = null, T = null, k = null, P = null, _ = 0, l = null, v = null;
|
|
11
|
+
const w = /* @__PURE__ */ new Map();
|
|
12
|
+
let x = window.matchMedia("(pointer: coarse)").matches;
|
|
13
|
+
const z = window.matchMedia("(prefers-color-scheme: dark)");
|
|
14
14
|
window.matchMedia("(pointer: coarse)").addEventListener("change", (e) => {
|
|
15
|
-
|
|
15
|
+
x = e.matches;
|
|
16
16
|
});
|
|
17
|
-
function
|
|
18
|
-
h || (h =
|
|
17
|
+
function K() {
|
|
18
|
+
h || (h = H("div", {
|
|
19
19
|
style: "position:fixed;inset:0;z-index:99999;pointer-events:none;"
|
|
20
|
-
}), r =
|
|
20
|
+
}), r = H("div", {
|
|
21
21
|
style: `
|
|
22
22
|
position:fixed;
|
|
23
23
|
width:24px;height:24px;
|
|
@@ -33,7 +33,7 @@ const ee = (() => {
|
|
|
33
33
|
user-select:none;
|
|
34
34
|
backdrop-filter:blur(4px);
|
|
35
35
|
`
|
|
36
|
-
}), r.textContent = "🖼️", i =
|
|
36
|
+
}), r.textContent = "🖼️", i = H("div", {
|
|
37
37
|
style: `
|
|
38
38
|
position:fixed;
|
|
39
39
|
border-radius:12px;
|
|
@@ -45,7 +45,7 @@ const ee = (() => {
|
|
|
45
45
|
z-index:100000;
|
|
46
46
|
will-change:transform,opacity;
|
|
47
47
|
`
|
|
48
|
-
}), p =
|
|
48
|
+
}), p = H("button", {
|
|
49
49
|
style: `
|
|
50
50
|
position:absolute;top:6px;right:6px;
|
|
51
51
|
width:26px;height:26px;
|
|
@@ -55,156 +55,157 @@ const ee = (() => {
|
|
|
55
55
|
opacity:0;transition:opacity 0.15s;
|
|
56
56
|
`
|
|
57
57
|
}), p.textContent = "✕", p.setAttribute("aria-label", "关闭预览"), p.addEventListener("click", (e) => {
|
|
58
|
-
e.stopPropagation(),
|
|
58
|
+
e.stopPropagation(), D();
|
|
59
59
|
}), p.addEventListener("touchend", (e) => {
|
|
60
|
-
e.stopPropagation(),
|
|
61
|
-
}),
|
|
62
|
-
if (clearTimeout(
|
|
63
|
-
const e =
|
|
64
|
-
e &&
|
|
60
|
+
e.stopPropagation(), D();
|
|
61
|
+
}), L = H("div", { style: "position:relative;" }), u = H("img", { style: "display:block;", alt: "preview" }), m = H("div", { style: "font-size:11px;padding:5px 10px;white-space:nowrap;" }), L.append(u, p), i.append(L, m), h.append(r, i), document.body.appendChild(h), r.addEventListener("mouseenter", () => {
|
|
62
|
+
if (clearTimeout(M), clearTimeout(T), !l) return;
|
|
63
|
+
const e = R(l), n = N(l);
|
|
64
|
+
e && Q(e, n);
|
|
65
65
|
}), r.addEventListener("mouseleave", () => {
|
|
66
|
-
i.style.opacity !== "1" &&
|
|
66
|
+
i.style.opacity !== "1" && O();
|
|
67
67
|
}), r.addEventListener("click", () => {
|
|
68
|
-
i.style.opacity === "1" &&
|
|
68
|
+
i.style.opacity === "1" && D();
|
|
69
69
|
}), i.addEventListener("mouseenter", () => {
|
|
70
|
-
clearTimeout(
|
|
70
|
+
clearTimeout(M), clearTimeout(T), x || (p.style.opacity = "1");
|
|
71
71
|
}), i.addEventListener("mouseleave", () => {
|
|
72
|
-
|
|
73
|
-
}),
|
|
72
|
+
x || (p.style.opacity = "0"), O();
|
|
73
|
+
}), A(), z.addEventListener("change", A));
|
|
74
74
|
}
|
|
75
|
-
function
|
|
76
|
-
const e =
|
|
75
|
+
function A() {
|
|
76
|
+
const e = z.matches;
|
|
77
77
|
i.style.background = e ? "#1c1c1e" : "#ffffff", i.style.border = e ? "1px solid rgba(255,255,255,.12)" : "1px solid rgba(0,0,0,.1)", i.style.boxShadow = e ? "0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)" : "0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)", m.style.background = e ? "rgba(255,255,255,.06)" : "rgba(0,0,0,.04)", m.style.color = e ? "rgba(255,255,255,.4)" : "rgba(0,0,0,.4)", m.style.borderTop = e ? "1px solid rgba(255,255,255,.08)" : "1px solid rgba(0,0,0,.06)", p.style.background = e ? "rgba(255,255,255,.15)" : "rgba(0,0,0,.15)", p.style.color = e ? "rgba(255,255,255,.8)" : "rgba(0,0,0,.6)";
|
|
78
78
|
}
|
|
79
|
-
function
|
|
80
|
-
const n = e.getBoundingClientRect(), t =
|
|
79
|
+
function j(e) {
|
|
80
|
+
const n = e.getBoundingClientRect(), t = b.badgeOffset;
|
|
81
81
|
r.style.left = n.right - 24 - t + "px", r.style.top = n.top + t + "px";
|
|
82
82
|
}
|
|
83
|
-
function
|
|
84
|
-
const t =
|
|
85
|
-
let a,
|
|
86
|
-
return f >= 1 ? (a = Math.min(s, e),
|
|
83
|
+
function q(e, n) {
|
|
84
|
+
const t = b.imgPad * 2, o = m.offsetHeight || 22, s = Math.floor(window.innerWidth * b.maxWRatio) - t, d = Math.floor(window.innerHeight * b.maxHRatio) - t - o, f = e / n;
|
|
85
|
+
let a, c;
|
|
86
|
+
return f >= 1 ? (a = Math.min(s, e), c = a / f, c > d && (c = d, a = c * f)) : (c = Math.min(d, n), a = c * f, a > s && (a = s, c = a / f)), { pw: Math.round(a), ph: Math.round(c) };
|
|
87
87
|
}
|
|
88
|
-
function
|
|
89
|
-
if (!
|
|
90
|
-
const t =
|
|
91
|
-
let C;
|
|
92
|
-
t.left - x >= a + y ? C = t.left - x - a : k - t.right - x >= a + y ? C = t.right + x : C = S(t.left + (t.width - a) / 2, y, k - a - y);
|
|
88
|
+
function U(e, n) {
|
|
89
|
+
if (!l) return;
|
|
90
|
+
const t = l.getBoundingClientRect(), o = b.imgPad, s = m.offsetHeight || 22, { pw: d, ph: f } = q(e, n), a = d + o * 2, c = f + o * 2 + s, S = window.innerWidth, J = window.innerHeight;
|
|
93
91
|
let W;
|
|
94
|
-
|
|
92
|
+
t.left - g >= a + y ? W = t.left - g - a : S - t.right - g >= a + y ? W = t.right + g : W = C(t.left + (t.width - a) / 2, y, S - a - y);
|
|
93
|
+
let B;
|
|
94
|
+
J - t.bottom - g >= c + y ? B = t.bottom + g : t.top - g >= c + y ? B = t.top - g - c : B = C(t.top + (t.height - c) / 2, y, J - c - y), i.style.left = W + "px", i.style.top = B + "px", i.style.width = a + "px", L.style.padding = o + "px", u.style.width = d + "px", u.style.height = f + "px";
|
|
95
95
|
}
|
|
96
|
-
function
|
|
97
|
-
const t =
|
|
98
|
-
i.style.left =
|
|
96
|
+
function V(e, n) {
|
|
97
|
+
const t = b.imgPad, o = m.offsetHeight || 22, { pw: s, ph: d } = q(e, n), f = s + t * 2, a = d + t * 2 + o, c = window.innerWidth, S = window.innerHeight;
|
|
98
|
+
i.style.left = C((c - f) / 2, y, c - f - y) + "px", i.style.top = C((S - a) / 2, y, S - a - y) + "px", i.style.width = f + "px", L.style.padding = t + "px", u.style.width = s + "px", u.style.height = d + "px";
|
|
99
99
|
}
|
|
100
|
-
function
|
|
101
|
-
clearTimeout(
|
|
100
|
+
function X(e) {
|
|
101
|
+
v !== e && (clearTimeout(T), !(l === e && r.style.opacity === "1") && (l = e, j(e), r.style.opacity = "1", r.style.pointerEvents = "auto", h.style.pointerEvents = "auto"));
|
|
102
102
|
}
|
|
103
|
-
function
|
|
104
|
-
|
|
103
|
+
function Q(e, n) {
|
|
104
|
+
if (v && l === v) return;
|
|
105
|
+
const t = ++_;
|
|
105
106
|
m.textContent = n || "";
|
|
106
|
-
function o(s,
|
|
107
|
-
t ===
|
|
107
|
+
function o(s, d) {
|
|
108
|
+
t === _ && (x ? V(s, d) : U(s, d), i.style.opacity = "1", i.style.transform = "scale(1)", i.style.pointerEvents = "auto", x && (p.style.opacity = "1"), r.textContent = "✕", r.style.background = "rgba(220,60,60,0.75)", m.textContent = n || s + " × " + d);
|
|
108
109
|
}
|
|
109
|
-
if (
|
|
110
|
-
o(
|
|
110
|
+
if (w.get(e) === "loaded" && u.src === e) {
|
|
111
|
+
o(u.naturalWidth, u.naturalHeight);
|
|
111
112
|
return;
|
|
112
113
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
},
|
|
116
|
-
|
|
114
|
+
u.src = e, u.onload = () => {
|
|
115
|
+
w.set(e, "loaded"), o(u.naturalWidth, u.naturalHeight);
|
|
116
|
+
}, u.onerror = () => {
|
|
117
|
+
w.set(e, "error");
|
|
117
118
|
};
|
|
118
119
|
}
|
|
119
|
-
function A() {
|
|
120
|
-
clearTimeout(E), E = setTimeout(() => {
|
|
121
|
-
i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", r.style.opacity = "0", r.style.pointerEvents = "none", r.textContent = "🖼️", r.style.background = "rgba(0,0,0,0.45)", h.style.pointerEvents = "none", p.style.opacity = "0", u = null;
|
|
122
|
-
}, g.delayHide);
|
|
123
|
-
}
|
|
124
120
|
function O() {
|
|
125
|
-
clearTimeout(
|
|
121
|
+
clearTimeout(M), M = setTimeout(() => {
|
|
122
|
+
i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", r.style.opacity = "0", r.style.pointerEvents = "none", r.textContent = "🖼️", r.style.background = "rgba(0,0,0,0.45)", h.style.pointerEvents = "none", p.style.opacity = "0", l = null;
|
|
123
|
+
}, b.delayHide);
|
|
126
124
|
}
|
|
127
|
-
function
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
function D() {
|
|
126
|
+
clearTimeout(M), clearTimeout(T), ++_, l && (v = l), i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", r.style.opacity = "0", r.style.pointerEvents = "none", r.textContent = "🖼️", r.style.background = "rgba(0,0,0,0.45)", h.style.pointerEvents = "none", p.style.opacity = "0", l = null;
|
|
127
|
+
}
|
|
128
|
+
function F(e) {
|
|
129
|
+
if (!e || w.has(e)) return;
|
|
130
|
+
w.set(e, "loading");
|
|
130
131
|
const n = new Image();
|
|
131
|
-
n.onload = () =>
|
|
132
|
+
n.onload = () => w.set(e, "loaded"), n.onerror = () => w.set(e, "error"), n.src = e;
|
|
132
133
|
}
|
|
133
|
-
function
|
|
134
|
-
|
|
134
|
+
function I() {
|
|
135
|
+
l && r.style.opacity === "1" && j(l);
|
|
135
136
|
}
|
|
136
|
-
function
|
|
137
|
+
function R(e) {
|
|
137
138
|
var n;
|
|
138
139
|
return e.dataset.previewSrc || e.src || e.currentSrc || ((n = e.querySelector("img")) == null ? void 0 : n.src) || null;
|
|
139
140
|
}
|
|
140
|
-
function
|
|
141
|
+
function N(e) {
|
|
141
142
|
return e.dataset.previewLabel || e.alt || e.title || null;
|
|
142
143
|
}
|
|
143
|
-
function
|
|
144
|
+
function E(e) {
|
|
144
145
|
if (e._dpBound) return;
|
|
145
146
|
const n = {
|
|
146
147
|
mouseenter() {
|
|
147
|
-
|
|
148
|
+
x || v !== e && (clearTimeout(T), !(l === e && r.style.opacity === "1") && (F(R(e)), X(e)));
|
|
148
149
|
},
|
|
149
150
|
mouseleave(t) {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
},
|
|
151
|
+
x || e.contains(t.relatedTarget) || (v === e && (v = null), T = setTimeout(() => {
|
|
152
|
+
l === e && O();
|
|
153
|
+
}, b.delayHide));
|
|
153
154
|
},
|
|
154
155
|
touchstart(t) {
|
|
155
|
-
if (!
|
|
156
|
-
const o =
|
|
157
|
-
o && (
|
|
158
|
-
|
|
159
|
-
},
|
|
156
|
+
if (!x) return;
|
|
157
|
+
const o = R(e);
|
|
158
|
+
o && (F(o), k = setTimeout(() => {
|
|
159
|
+
l = e, Q(o, N(e));
|
|
160
|
+
}, b.longPressDuration));
|
|
160
161
|
},
|
|
161
162
|
touchend() {
|
|
162
|
-
clearTimeout(
|
|
163
|
+
clearTimeout(k);
|
|
163
164
|
},
|
|
164
165
|
touchmove() {
|
|
165
|
-
clearTimeout(
|
|
166
|
+
clearTimeout(k);
|
|
166
167
|
},
|
|
167
168
|
touchcancel() {
|
|
168
|
-
clearTimeout(
|
|
169
|
+
clearTimeout(k);
|
|
169
170
|
},
|
|
170
171
|
contextmenu(t) {
|
|
171
|
-
|
|
172
|
+
x && t.preventDefault();
|
|
172
173
|
}
|
|
173
174
|
};
|
|
174
175
|
Object.entries(n).forEach(([t, o]) => e.addEventListener(t, o)), e._dpBound = !0, e._dpHandlers = n;
|
|
175
176
|
}
|
|
176
|
-
function
|
|
177
|
+
function G(e) {
|
|
177
178
|
e._dpBound && (Object.entries(e._dpHandlers).forEach(
|
|
178
179
|
([n, t]) => e.removeEventListener(n, t)
|
|
179
180
|
), e._dpBound = !1, e._dpHandlers = null, e._dpMoveTimer = null);
|
|
180
181
|
}
|
|
181
|
-
function
|
|
182
|
-
document.querySelectorAll(e).forEach((n) =>
|
|
182
|
+
function Y(e) {
|
|
183
|
+
document.querySelectorAll(e).forEach((n) => E(n));
|
|
183
184
|
}
|
|
184
|
-
function
|
|
185
|
-
|
|
185
|
+
function Z(e = "[data-preview]") {
|
|
186
|
+
K(), document.querySelectorAll(e).forEach((n) => E(n)), window.addEventListener("scroll", I, !0), P = new MutationObserver((n) => {
|
|
186
187
|
n.forEach((t) => {
|
|
187
188
|
t.addedNodes.forEach((o) => {
|
|
188
|
-
var s,
|
|
189
|
-
o.nodeType === 1 && ((s = o.matches) != null && s.call(o, e) &&
|
|
189
|
+
var s, d;
|
|
190
|
+
o.nodeType === 1 && ((s = o.matches) != null && s.call(o, e) && E(o), (d = o.querySelectorAll) == null || d.call(o, e).forEach((f) => E(f)));
|
|
190
191
|
});
|
|
191
192
|
});
|
|
192
|
-
}),
|
|
193
|
+
}), P.observe(document.body, { childList: !0, subtree: !0 });
|
|
193
194
|
}
|
|
194
|
-
function
|
|
195
|
-
|
|
195
|
+
function $() {
|
|
196
|
+
P == null || P.disconnect(), P = null, document.querySelectorAll("[data-preview]").forEach((e) => G(e)), window.removeEventListener("scroll", I, !0), z.removeEventListener("change", A), h == null || h.remove(), h = i = L = u = m = p = r = null, w.clear(), clearTimeout(M), clearTimeout(T), clearTimeout(k), v = null;
|
|
196
197
|
}
|
|
197
|
-
function
|
|
198
|
+
function H(e, n = {}) {
|
|
198
199
|
const t = document.createElement(e);
|
|
199
200
|
return Object.entries(n).forEach(([o, s]) => {
|
|
200
201
|
o === "style" ? t.style.cssText = s : t[o] = s;
|
|
201
202
|
}), t;
|
|
202
203
|
}
|
|
203
|
-
function
|
|
204
|
+
function C(e, n, t) {
|
|
204
205
|
return Math.max(n, Math.min(e, t));
|
|
205
206
|
}
|
|
206
|
-
return { init:
|
|
207
|
+
return { init: Z, bind: E, unbind: G, bindAll: Y, destroy: $, config: b };
|
|
207
208
|
})();
|
|
208
209
|
export {
|
|
209
|
-
|
|
210
|
+
te as default
|
|
210
211
|
};
|
package/dist/data-preview.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(C,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(C=typeof globalThis<"u"?globalThis:C||self,C.DataPreview=p())})(this,(function(){"use strict";return(()=>{const p={imgPad:8,maxWRatio:.9,maxHRatio:.85,delayHide:120,longPressDuration:480,badgeOffset:6},h=16,g=12;let m,o,P,u,b,f,r,L=null,T=null,k=null,M=null,z=0,l=null,v=null;const w=new Map;let x=window.matchMedia("(pointer: coarse)").matches;const A=window.matchMedia("(prefers-color-scheme: dark)");window.matchMedia("(pointer: coarse)").addEventListener("change",e=>{x=e.matches});function U(){m||(m=H("div",{style:"position:fixed;inset:0;z-index:99999;pointer-events:none;"}),r=H("div",{style:`
|
|
2
2
|
position:fixed;
|
|
3
3
|
width:24px;height:24px;
|
|
4
4
|
border-radius:6px;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
z-index:100001;
|
|
13
13
|
user-select:none;
|
|
14
14
|
backdrop-filter:blur(4px);
|
|
15
|
-
`}),r.textContent="🖼️",
|
|
15
|
+
`}),r.textContent="🖼️",o=H("div",{style:`
|
|
16
16
|
position:fixed;
|
|
17
17
|
border-radius:12px;
|
|
18
18
|
overflow:hidden;
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
pointer-events:none;
|
|
23
23
|
z-index:100000;
|
|
24
24
|
will-change:transform,opacity;
|
|
25
|
-
`}),
|
|
25
|
+
`}),f=H("button",{style:`
|
|
26
26
|
position:absolute;top:6px;right:6px;
|
|
27
27
|
width:26px;height:26px;
|
|
28
28
|
border-radius:50%;border:none;cursor:pointer;
|
|
29
29
|
display:flex;align-items:center;justify-content:center;
|
|
30
30
|
font-size:13px;line-height:1;z-index:1;
|
|
31
31
|
opacity:0;transition:opacity 0.15s;
|
|
32
|
-
`}),
|
|
32
|
+
`}),f.textContent="✕",f.setAttribute("aria-label","关闭预览"),f.addEventListener("click",e=>{e.stopPropagation(),j()}),f.addEventListener("touchend",e=>{e.stopPropagation(),j()}),P=H("div",{style:"position:relative;"}),u=H("img",{style:"display:block;",alt:"preview"}),b=H("div",{style:"font-size:11px;padding:5px 10px;white-space:nowrap;"}),P.append(u,f),o.append(P,b),m.append(r,o),document.body.appendChild(m),r.addEventListener("mouseenter",()=>{if(clearTimeout(L),clearTimeout(T),!l)return;const e=R(l),n=G(l);e&&F(e,n)}),r.addEventListener("mouseleave",()=>{o.style.opacity!=="1"&&O()}),r.addEventListener("click",()=>{o.style.opacity==="1"&&j()}),o.addEventListener("mouseenter",()=>{clearTimeout(L),clearTimeout(T),x||(f.style.opacity="1")}),o.addEventListener("mouseleave",()=>{x||(f.style.opacity="0"),O()}),D(),A.addEventListener("change",D))}function D(){const e=A.matches;o.style.background=e?"#1c1c1e":"#ffffff",o.style.border=e?"1px solid rgba(255,255,255,.12)":"1px solid rgba(0,0,0,.1)",o.style.boxShadow=e?"0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)":"0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)",b.style.background=e?"rgba(255,255,255,.06)":"rgba(0,0,0,.04)",b.style.color=e?"rgba(255,255,255,.4)":"rgba(0,0,0,.4)",b.style.borderTop=e?"1px solid rgba(255,255,255,.08)":"1px solid rgba(0,0,0,.06)",f.style.background=e?"rgba(255,255,255,.15)":"rgba(0,0,0,.15)",f.style.color=e?"rgba(255,255,255,.8)":"rgba(0,0,0,.6)"}function q(e){const n=e.getBoundingClientRect(),t=p.badgeOffset;r.style.left=n.right-24-t+"px",r.style.top=n.top+t+"px"}function Q(e,n){const t=p.imgPad*2,i=b.offsetHeight||22,s=Math.floor(window.innerWidth*p.maxWRatio)-t,d=Math.floor(window.innerHeight*p.maxHRatio)-t-i,y=e/n;let a,c;return y>=1?(a=Math.min(s,e),c=a/y,c>d&&(c=d,a=c*y)):(c=Math.min(d,n),a=c*y,a>s&&(a=s,c=a/y)),{pw:Math.round(a),ph:Math.round(c)}}function V(e,n){if(!l)return;const t=l.getBoundingClientRect(),i=p.imgPad,s=b.offsetHeight||22,{pw:d,ph:y}=Q(e,n),a=d+i*2,c=y+i*2+s,S=window.innerWidth,K=window.innerHeight;let B;t.left-g>=a+h?B=t.left-g-a:S-t.right-g>=a+h?B=t.right+g:B=W(t.left+(t.width-a)/2,h,S-a-h);let _;K-t.bottom-g>=c+h?_=t.bottom+g:t.top-g>=c+h?_=t.top-g-c:_=W(t.top+(t.height-c)/2,h,K-c-h),o.style.left=B+"px",o.style.top=_+"px",o.style.width=a+"px",P.style.padding=i+"px",u.style.width=d+"px",u.style.height=y+"px"}function X(e,n){const t=p.imgPad,i=b.offsetHeight||22,{pw:s,ph:d}=Q(e,n),y=s+t*2,a=d+t*2+i,c=window.innerWidth,S=window.innerHeight;o.style.left=W((c-y)/2,h,c-y-h)+"px",o.style.top=W((S-a)/2,h,S-a-h)+"px",o.style.width=y+"px",P.style.padding=t+"px",u.style.width=s+"px",u.style.height=d+"px"}function Y(e){v!==e&&(clearTimeout(T),!(l===e&&r.style.opacity==="1")&&(l=e,q(e),r.style.opacity="1",r.style.pointerEvents="auto",m.style.pointerEvents="auto"))}function F(e,n){if(v&&l===v)return;const t=++z;b.textContent=n||"";function i(s,d){t===z&&(x?X(s,d):V(s,d),o.style.opacity="1",o.style.transform="scale(1)",o.style.pointerEvents="auto",x&&(f.style.opacity="1"),r.textContent="✕",r.style.background="rgba(220,60,60,0.75)",b.textContent=n||s+" × "+d)}if(w.get(e)==="loaded"&&u.src===e){i(u.naturalWidth,u.naturalHeight);return}u.src=e,u.onload=()=>{w.set(e,"loaded"),i(u.naturalWidth,u.naturalHeight)},u.onerror=()=>{w.set(e,"error")}}function O(){clearTimeout(L),L=setTimeout(()=>{o.style.opacity="0",o.style.transform="scale(0.95)",o.style.pointerEvents="none",r.style.opacity="0",r.style.pointerEvents="none",r.textContent="🖼️",r.style.background="rgba(0,0,0,0.45)",m.style.pointerEvents="none",f.style.opacity="0",l=null},p.delayHide)}function j(){clearTimeout(L),clearTimeout(T),++z,l&&(v=l),o.style.opacity="0",o.style.transform="scale(0.95)",o.style.pointerEvents="none",r.style.opacity="0",r.style.pointerEvents="none",r.textContent="🖼️",r.style.background="rgba(0,0,0,0.45)",m.style.pointerEvents="none",f.style.opacity="0",l=null}function I(e){if(!e||w.has(e))return;w.set(e,"loading");const n=new Image;n.onload=()=>w.set(e,"loaded"),n.onerror=()=>w.set(e,"error"),n.src=e}function N(){l&&r.style.opacity==="1"&&q(l)}function R(e){var n;return e.dataset.previewSrc||e.src||e.currentSrc||((n=e.querySelector("img"))==null?void 0:n.src)||null}function G(e){return e.dataset.previewLabel||e.alt||e.title||null}function E(e){if(e._dpBound)return;const n={mouseenter(){x||v!==e&&(clearTimeout(T),!(l===e&&r.style.opacity==="1")&&(I(R(e)),Y(e)))},mouseleave(t){x||e.contains(t.relatedTarget)||(v===e&&(v=null),T=setTimeout(()=>{l===e&&O()},p.delayHide))},touchstart(t){if(!x)return;const i=R(e);i&&(I(i),k=setTimeout(()=>{l=e,F(i,G(e))},p.longPressDuration))},touchend(){clearTimeout(k)},touchmove(){clearTimeout(k)},touchcancel(){clearTimeout(k)},contextmenu(t){x&&t.preventDefault()}};Object.entries(n).forEach(([t,i])=>e.addEventListener(t,i)),e._dpBound=!0,e._dpHandlers=n}function J(e){e._dpBound&&(Object.entries(e._dpHandlers).forEach(([n,t])=>e.removeEventListener(n,t)),e._dpBound=!1,e._dpHandlers=null,e._dpMoveTimer=null)}function Z(e){document.querySelectorAll(e).forEach(n=>E(n))}function $(e="[data-preview]"){U(),document.querySelectorAll(e).forEach(n=>E(n)),window.addEventListener("scroll",N,!0),M=new MutationObserver(n=>{n.forEach(t=>{t.addedNodes.forEach(i=>{var s,d;i.nodeType===1&&((s=i.matches)!=null&&s.call(i,e)&&E(i),(d=i.querySelectorAll)==null||d.call(i,e).forEach(y=>E(y)))})})}),M.observe(document.body,{childList:!0,subtree:!0})}function ee(){M==null||M.disconnect(),M=null,document.querySelectorAll("[data-preview]").forEach(e=>J(e)),window.removeEventListener("scroll",N,!0),A.removeEventListener("change",D),m==null||m.remove(),m=o=P=u=b=f=r=null,w.clear(),clearTimeout(L),clearTimeout(T),clearTimeout(k),v=null}function H(e,n={}){const t=document.createElement(e);return Object.entries(n).forEach(([i,s])=>{i==="style"?t.style.cssText=s:t[i]=s}),t}function W(e,n,t){return Math.max(n,Math.min(e,t))}return{init:$,bind:E,unbind:J,bindAll:Z,destroy:ee,config:p}})()}));
|
package/package.json
CHANGED