data-preview 1.0.0 → 1.0.2

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