js-cloudimage-hotspot 1.1.2 → 1.1.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/README.md +1 -1
- package/dist/core/ci-hotspot.d.ts.map +1 -1
- package/dist/core/config.d.ts.map +1 -1
- package/dist/core/types.d.ts +6 -0
- package/dist/core/types.d.ts.map +1 -1
- package/dist/editor/js-cloudimage-hotspot-editor.cjs.js +2 -2
- package/dist/editor/js-cloudimage-hotspot-editor.cjs.js.map +1 -1
- package/dist/editor/js-cloudimage-hotspot-editor.esm.js +75 -69
- package/dist/editor/js-cloudimage-hotspot-editor.esm.js.map +1 -1
- package/dist/editor/js-cloudimage-hotspot-editor.min.js +2 -2
- package/dist/editor/js-cloudimage-hotspot-editor.min.js.map +1 -1
- package/dist/js-cloudimage-hotspot.cjs.js +1 -1
- package/dist/js-cloudimage-hotspot.cjs.js.map +1 -1
- package/dist/js-cloudimage-hotspot.esm.js +58 -52
- package/dist/js-cloudimage-hotspot.esm.js.map +1 -1
- package/dist/js-cloudimage-hotspot.min.js +1 -1
- package/dist/js-cloudimage-hotspot.min.js.map +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +72 -66
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -17,10 +17,10 @@ function h(a, t, e) {
|
|
|
17
17
|
i.setAttribute(o, r);
|
|
18
18
|
return i;
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function m(a, ...t) {
|
|
21
21
|
a.classList.add(...t);
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function b(a, ...t) {
|
|
24
24
|
a.classList.remove(...t);
|
|
25
25
|
}
|
|
26
26
|
function Q(a) {
|
|
@@ -64,6 +64,8 @@ const nt = {
|
|
|
64
64
|
sceneTransition: "fade",
|
|
65
65
|
scrollHint: !0,
|
|
66
66
|
invertMarkerTheme: !1,
|
|
67
|
+
markerTheme: "default",
|
|
68
|
+
brandColor: "#00aaff",
|
|
67
69
|
fullscreenButton: !0,
|
|
68
70
|
zoomControlsPosition: "bottom-right"
|
|
69
71
|
}, at = {
|
|
@@ -90,6 +92,8 @@ const nt = {
|
|
|
90
92
|
"data-ci-hotspot-scene-transition": { key: "sceneTransition", type: "string" },
|
|
91
93
|
"data-ci-hotspot-scene-aspect-ratio": { key: "sceneAspectRatio", type: "string" },
|
|
92
94
|
"data-ci-hotspot-invert-marker-theme": { key: "invertMarkerTheme", type: "boolean" },
|
|
95
|
+
"data-ci-hotspot-marker-theme": { key: "markerTheme", type: "string" },
|
|
96
|
+
"data-ci-hotspot-brand-color": { key: "brandColor", type: "string" },
|
|
93
97
|
"data-ci-hotspot-fullscreen-button": { key: "fullscreenButton", type: "boolean" },
|
|
94
98
|
"data-ci-hotspot-zoom-controls-position": { key: "zoomControlsPosition", type: "string" }
|
|
95
99
|
};
|
|
@@ -175,10 +179,10 @@ function dt(a, t) {
|
|
|
175
179
|
});
|
|
176
180
|
if (e.style.left = `${a.x}%`, e.style.top = `${a.y}%`, a.className) {
|
|
177
181
|
const i = a.className.trim().split(/\s+/).filter(Boolean);
|
|
178
|
-
i.length &&
|
|
182
|
+
i.length && m(e, ...i);
|
|
179
183
|
}
|
|
180
|
-
if (a.hidden &&
|
|
181
|
-
|
|
184
|
+
if (a.hidden && m(e, "ci-hotspot-marker--hidden"), t && m(e, "ci-hotspot-marker--pulse"), a.icon && ut(e, a.icon), a.markerStyle === "dot-label" && a.label) {
|
|
185
|
+
m(e, "ci-hotspot-marker--dot-label");
|
|
182
186
|
const i = h("span", "ci-hotspot-marker-label");
|
|
183
187
|
i.textContent = a.label, e.appendChild(i);
|
|
184
188
|
}
|
|
@@ -234,42 +238,42 @@ function ut(a, t) {
|
|
|
234
238
|
a.appendChild(i);
|
|
235
239
|
}
|
|
236
240
|
}
|
|
237
|
-
function
|
|
238
|
-
t ? (
|
|
241
|
+
function v(a, t) {
|
|
242
|
+
t ? (m(a, "ci-hotspot-marker--active"), a.setAttribute("aria-expanded", "true")) : (b(a, "ci-hotspot-marker--active"), a.setAttribute("aria-expanded", "false"));
|
|
239
243
|
}
|
|
240
244
|
function ft(a, t) {
|
|
241
|
-
t ?
|
|
245
|
+
t ? m(a, "ci-hotspot-marker--hidden") : b(a, "ci-hotspot-marker--hidden");
|
|
242
246
|
}
|
|
243
247
|
function P(a) {
|
|
244
248
|
a.remove();
|
|
245
249
|
}
|
|
246
|
-
function
|
|
247
|
-
const o = a.getBoundingClientRect(), r = e.getBoundingClientRect(), s = t.offsetWidth, n = t.offsetHeight, c = o.left + o.width / 2 - r.left, l = o.top + o.height / 2 - r.top, d = o.top - r.top, u = o.bottom - r.top, p = o.left - r.left, g = o.right - r.left,
|
|
248
|
-
top: d -
|
|
249
|
-
bottom: k - u -
|
|
250
|
-
left: p -
|
|
251
|
-
right:
|
|
250
|
+
function mt(a, t, e, i) {
|
|
251
|
+
const o = a.getBoundingClientRect(), r = e.getBoundingClientRect(), s = t.offsetWidth, n = t.offsetHeight, c = o.left + o.width / 2 - r.left, l = o.top + o.height / 2 - r.top, d = o.top - r.top, u = o.bottom - r.top, p = o.left - r.left, g = o.right - r.left, y = e.offsetWidth, k = e.offsetHeight, x = 8, L = {
|
|
252
|
+
top: d - x,
|
|
253
|
+
bottom: k - u - x,
|
|
254
|
+
left: p - x,
|
|
255
|
+
right: y - g - x
|
|
252
256
|
};
|
|
253
257
|
let w = i.placement;
|
|
254
|
-
w === "auto" && (w =
|
|
258
|
+
w === "auto" && (w = gt(L)), w = vt(w, s, n, L);
|
|
255
259
|
let T, S, $ = 0;
|
|
256
260
|
switch (w) {
|
|
257
261
|
case "top":
|
|
258
|
-
T = c - s / 2, S = d -
|
|
262
|
+
T = c - s / 2, S = d - x - n;
|
|
259
263
|
break;
|
|
260
264
|
case "bottom":
|
|
261
|
-
T = c - s / 2, S = u +
|
|
265
|
+
T = c - s / 2, S = u + x;
|
|
262
266
|
break;
|
|
263
267
|
case "left":
|
|
264
|
-
T = p -
|
|
268
|
+
T = p - x - s, S = l - n / 2;
|
|
265
269
|
break;
|
|
266
270
|
case "right":
|
|
267
|
-
T = g +
|
|
271
|
+
T = g + x, S = l - n / 2;
|
|
268
272
|
break;
|
|
269
273
|
default:
|
|
270
|
-
T = c - s / 2, S = d -
|
|
274
|
+
T = c - s / 2, S = d - x - n;
|
|
271
275
|
}
|
|
272
|
-
const I = bt(T, S, s, n,
|
|
276
|
+
const I = bt(T, S, s, n, y, k);
|
|
273
277
|
return $ = w === "top" || w === "bottom" ? T - I.x : S - I.y, {
|
|
274
278
|
x: I.x,
|
|
275
279
|
y: I.y,
|
|
@@ -277,7 +281,7 @@ function gt(a, t, e, i) {
|
|
|
277
281
|
arrowOffset: $
|
|
278
282
|
};
|
|
279
283
|
}
|
|
280
|
-
function
|
|
284
|
+
function gt(a) {
|
|
281
285
|
const t = Math.max(a.top, a.bottom, a.left, a.right);
|
|
282
286
|
return t === a.top ? "top" : t === a.bottom ? "bottom" : t === a.right ? "right" : "left";
|
|
283
287
|
}
|
|
@@ -303,7 +307,7 @@ function bt(a, t, e, i, o, r) {
|
|
|
303
307
|
let n = a, c = t;
|
|
304
308
|
return e > o - 2 * 4 ? n = (o - e) / 2 : (n < 4 && (n = 4), n + e > o - 4 && (n = o - 4 - e)), i > r - 2 * 4 ? c = (r - i) / 2 : (c < 4 && (c = 4), c + i > r - 4 && (c = r - 4 - i)), { x: n, y: c };
|
|
305
309
|
}
|
|
306
|
-
const
|
|
310
|
+
const yt = /* @__PURE__ */ new Set([
|
|
307
311
|
"a",
|
|
308
312
|
"b",
|
|
309
313
|
"br",
|
|
@@ -323,7 +327,7 @@ const xt = /* @__PURE__ */ new Set([
|
|
|
323
327
|
"span",
|
|
324
328
|
"strong",
|
|
325
329
|
"ul"
|
|
326
|
-
]),
|
|
330
|
+
]), xt = /* @__PURE__ */ new Set([
|
|
327
331
|
"class",
|
|
328
332
|
"href",
|
|
329
333
|
"src",
|
|
@@ -355,7 +359,7 @@ function et(a) {
|
|
|
355
359
|
if (e.nodeType !== Node.TEXT_NODE)
|
|
356
360
|
if (e.nodeType === Node.ELEMENT_NODE) {
|
|
357
361
|
const i = e, o = i.tagName.toLowerCase();
|
|
358
|
-
if (!
|
|
362
|
+
if (!yt.has(o)) {
|
|
359
363
|
i.remove();
|
|
360
364
|
continue;
|
|
361
365
|
}
|
|
@@ -366,7 +370,7 @@ function et(a) {
|
|
|
366
370
|
i.removeAttribute(s.name);
|
|
367
371
|
continue;
|
|
368
372
|
}
|
|
369
|
-
if (!
|
|
373
|
+
if (!xt.has(n)) {
|
|
370
374
|
i.removeAttribute(s.name);
|
|
371
375
|
continue;
|
|
372
376
|
}
|
|
@@ -439,7 +443,7 @@ class W {
|
|
|
439
443
|
/** Show the popover */
|
|
440
444
|
show() {
|
|
441
445
|
var t, e;
|
|
442
|
-
this.clearHideTimer(), !this.visible && (this.visible = !0,
|
|
446
|
+
this.clearHideTimer(), !this.visible && (this.visible = !0, m(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "false"), this.updatePosition(), (e = (t = this.options).onOpen) == null || e.call(t, this.hotspot));
|
|
443
447
|
}
|
|
444
448
|
/** Schedule hide with delay (for hover mode) */
|
|
445
449
|
scheduleHide(t = 200) {
|
|
@@ -450,7 +454,7 @@ class W {
|
|
|
450
454
|
/** Hide the popover immediately */
|
|
451
455
|
hide() {
|
|
452
456
|
var t, e;
|
|
453
|
-
this.clearHideTimer(), this.visible && (this.visible = !1,
|
|
457
|
+
this.clearHideTimer(), this.visible && (this.visible = !1, b(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "true"), (e = (t = this.options).onClose) == null || e.call(t, this.hotspot));
|
|
454
458
|
}
|
|
455
459
|
/** Clear any pending hide timer */
|
|
456
460
|
clearHideTimer() {
|
|
@@ -459,7 +463,7 @@ class W {
|
|
|
459
463
|
/** Update popover position relative to marker */
|
|
460
464
|
updatePosition() {
|
|
461
465
|
if (!this.markerEl || !this.containerEl || !this.visible) return;
|
|
462
|
-
const t =
|
|
466
|
+
const t = mt(
|
|
463
467
|
this.markerEl,
|
|
464
468
|
this.element,
|
|
465
469
|
this.containerEl,
|
|
@@ -564,13 +568,13 @@ class Ht {
|
|
|
564
568
|
};
|
|
565
569
|
this.container.addEventListener("dblclick", e), this.cleanups.push(() => this.container.removeEventListener("dblclick", e));
|
|
566
570
|
const i = (s) => {
|
|
567
|
-
!this.enabled || this.zoom <= 1 || s.button === 0 && (this.isDragging = !0, this.dragStartX = s.clientX, this.dragStartY = s.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY,
|
|
571
|
+
!this.enabled || this.zoom <= 1 || s.button === 0 && (this.isDragging = !0, this.dragStartX = s.clientX, this.dragStartY = s.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY, m(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = "grabbing", s.preventDefault());
|
|
568
572
|
}, o = (s) => {
|
|
569
573
|
if (!this.isDragging) return;
|
|
570
574
|
const n = (s.clientX - this.dragStartX) / this.zoom, c = (s.clientY - this.dragStartY) / this.zoom;
|
|
571
575
|
this.panX = this.lastPanX + n, this.panY = this.lastPanY + c, this.clampPan(), this.applyTransform();
|
|
572
576
|
}, r = () => {
|
|
573
|
-
this.isDragging && (this.isDragging = !1,
|
|
577
|
+
this.isDragging && (this.isDragging = !1, b(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = this.zoom > 1 ? "grab" : "");
|
|
574
578
|
};
|
|
575
579
|
this.container.addEventListener("mousedown", i), document.addEventListener("mousemove", o), document.addEventListener("mouseup", r), this.cleanups.push(
|
|
576
580
|
() => this.container.removeEventListener("mousedown", i),
|
|
@@ -847,7 +851,7 @@ function Vt(a, t = {}) {
|
|
|
847
851
|
function r() {
|
|
848
852
|
var g;
|
|
849
853
|
const p = o();
|
|
850
|
-
e.innerHTML = p ? Xt : G, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ?
|
|
854
|
+
e.innerHTML = p ? Xt : G, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ? m(a, "ci-hotspot-container--fullscreen") : b(a, "ci-hotspot-container--fullscreen"), (g = t.onChange) == null || g.call(t, p);
|
|
851
855
|
}
|
|
852
856
|
function s() {
|
|
853
857
|
o() ? Y().catch(() => {
|
|
@@ -870,7 +874,7 @@ function Vt(a, t = {}) {
|
|
|
870
874
|
i.push(d), a.appendChild(e);
|
|
871
875
|
function u() {
|
|
872
876
|
o() && Y().catch(() => {
|
|
873
|
-
}),
|
|
877
|
+
}), b(a, "ci-hotspot-container--fullscreen"), i.forEach((p) => p()), i.length = 0, e.remove();
|
|
874
878
|
}
|
|
875
879
|
return {
|
|
876
880
|
element: e,
|
|
@@ -881,7 +885,7 @@ function Vt(a, t = {}) {
|
|
|
881
885
|
destroy: u
|
|
882
886
|
};
|
|
883
887
|
}
|
|
884
|
-
const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-border-width: 2px;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .8);--ci-hotspot-marker-border: var(--ci-hotspot-marker-border-width) solid var(--ci-hotspot-marker-border-color);--ci-hotspot-marker-border-radius: 50%;--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .3);--ci-hotspot-pulse-color: rgba(0, 0, 0, .2);--ci-hotspot-pulse-size: 40px;--ci-hotspot-pulse-duration: 1.8s;--ci-hotspot-popover-bg: #ffffff;--ci-hotspot-popover-color: #1a1a1a;--ci-hotspot-popover-border: 1px solid rgba(0, 0, 0, .1);--ci-hotspot-popover-border-radius: 12px;--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .12);--ci-hotspot-popover-padding: 16px;--ci-hotspot-popover-max-width: 320px;--ci-hotspot-popover-max-height: 400px;--ci-hotspot-popover-font-family: inherit;--ci-hotspot-popover-font-size: 14px;--ci-hotspot-popover-line-height: 1.5;--ci-hotspot-popover-z-index: 1000;--ci-hotspot-arrow-size: 8px;--ci-hotspot-arrow-color: var(--ci-hotspot-popover-bg);--ci-hotspot-title-font-size: 16px;--ci-hotspot-title-font-weight: 600;--ci-hotspot-title-color: #1a1a1a;--ci-hotspot-price-color: #2d8c3c;--ci-hotspot-price-font-size: 18px;--ci-hotspot-price-font-weight: 700;--ci-hotspot-description-color: #666666;--ci-hotspot-cta-bg: #0058a3;--ci-hotspot-cta-color: #ffffff;--ci-hotspot-cta-border-radius: 8px;--ci-hotspot-cta-padding: 8px 16px;--ci-hotspot-original-price-color: #999999;--ci-hotspot-popover-text-align: left;--ci-hotspot-hover-transition: .2s ease;--ci-hotspot-popover-transition: .3s ease;--ci-hotspot-scene-transition-duration: .4s;--ci-hotspot-zoom-controls-bg: rgba(255, 255, 255, .9);--ci-hotspot-zoom-controls-color: #333333;--ci-hotspot-zoom-controls-border-radius: 8px;--ci-hotspot-zoom-controls-shadow: 0 2px 8px rgba(0, 0, 0, .15)}.ci-hotspot-container *,.ci-hotspot-container *:before,.ci-hotspot-container *:after{box-sizing:border-box}.ci-hotspot-container{position:relative;overflow:hidden;width:100%;line-height:0;user-select:none;-webkit-user-select:none}.ci-hotspot-viewport{position:relative;width:100%;transform-origin:0 0;will-change:transform;transition:transform .3s ease}.ci-hotspot-viewport--dragging{transition:none}.ci-hotspot-image{display:block;width:100%;height:auto;pointer-events:none}.ci-hotspot-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ci-hotspot-marker{position:absolute;width:var(--ci-hotspot-marker-size);height:var(--ci-hotspot-marker-size);padding:0;border:var(--ci-hotspot-marker-border);border-radius:var(--ci-hotspot-marker-border-radius);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);box-shadow:var(--ci-hotspot-marker-shadow);cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));transition:transform var(--ci-hotspot-hover-transition),box-shadow var(--ci-hotspot-hover-transition);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;outline:none}.ci-hotspot-marker:hover{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));box-shadow:0 4px 12px #0006}.ci-hotspot-marker:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-marker--active{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));z-index:2}.ci-hotspot-marker--hidden{display:none}.ci-hotspot-marker--dot-label{overflow:visible}.ci-hotspot-marker-label{position:absolute;left:calc(50% + var(--ci-hotspot-marker-size) / 2 + 4px);top:50%;transform:translateY(-50%);padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--ci-hotspot-marker-color);background:var(--ci-hotspot-marker-bg);border:var(--ci-hotspot-marker-border);border-radius:100px;box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-marker--dot-label.ci-hotspot-marker--pulse{animation:none}.ci-hotspot-marker--pulse:before{content:"";position:absolute;top:50%;left:50%;width:var(--ci-hotspot-pulse-size);height:var(--ci-hotspot-pulse-size);border-radius:50%;background:var(--ci-hotspot-pulse-color);transform:translate(-50%,-50%) scale(1);animation:ci-hotspot-pulse var(--ci-hotspot-pulse-duration) ease-out infinite;pointer-events:none}@keyframes ci-hotspot-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.ci-hotspot-marker--pulse{animation:ci-hotspot-breathe 2.4s ease-in-out infinite}.ci-hotspot-marker--pulse:hover,.ci-hotspot-marker--pulse.ci-hotspot-marker--active{animation:none}@keyframes ci-hotspot-breathe{0%,to{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)))}50%{transform:translate(-50%,-50%) scale(calc(1.15 / var(--zoom, 1)))}}.ci-hotspot-popover{position:absolute;z-index:var(--ci-hotspot-popover-z-index);max-width:var(--ci-hotspot-popover-max-width);background:var(--ci-hotspot-popover-bg);color:var(--ci-hotspot-popover-color);border:var(--ci-hotspot-popover-border);border-radius:var(--ci-hotspot-popover-border-radius);box-shadow:var(--ci-hotspot-popover-shadow);font-family:var(--ci-hotspot-popover-font-family);font-size:var(--ci-hotspot-popover-font-size);line-height:var(--ci-hotspot-popover-line-height);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--ci-hotspot-popover-transition),transform var(--ci-hotspot-popover-transition)}.ci-hotspot-popover--visible{opacity:1;pointer-events:auto;transform:translateY(0);animation:ci-hotspot-popover-in var(--ci-hotspot-popover-transition) forwards}@keyframes ci-hotspot-popover-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.ci-hotspot-popover-arrow{position:absolute;width:calc(var(--ci-hotspot-arrow-size) * 2);height:calc(var(--ci-hotspot-arrow-size) * 2);background:var(--ci-hotspot-arrow-color);transform:rotate(45deg);pointer-events:none}.ci-hotspot-popover[data-placement=top] .ci-hotspot-popover-arrow{bottom:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=bottom] .ci-hotspot-popover-arrow{top:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=left] .ci-hotspot-popover-arrow{right:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=right] .ci-hotspot-popover-arrow{left:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover-content{padding:var(--ci-hotspot-popover-padding);max-height:var(--ci-hotspot-popover-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--ci-hotspot-popover-border-radius)}.ci-hotspot-popover-image-wrapper{aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--ci-hotspot-popover-border-radius) - 4px) calc(var(--ci-hotspot-popover-border-radius) - 4px) 0 0;margin:calc(var(--ci-hotspot-popover-padding) * -1);margin-bottom:12px;width:calc(100% + var(--ci-hotspot-popover-padding) * 2)}.ci-hotspot-popover-image{display:block;width:100%;height:100%;object-fit:cover}.ci-hotspot-popover-body{line-height:1.5;text-align:var(--ci-hotspot-popover-text-align)}.ci-hotspot-popover-title{margin:0 0 4px;font-size:var(--ci-hotspot-title-font-size);font-weight:var(--ci-hotspot-title-font-weight);color:var(--ci-hotspot-title-color)}.ci-hotspot-popover-price{display:inline-block;margin-bottom:8px;font-size:var(--ci-hotspot-price-font-size);font-weight:var(--ci-hotspot-price-font-weight);color:var(--ci-hotspot-price-color)}.ci-hotspot-popover-price-row{display:inline-flex;align-items:baseline;gap:6px;margin-bottom:8px;flex-wrap:wrap}.ci-hotspot-popover-price-row .ci-hotspot-popover-price{margin-bottom:0}.ci-hotspot-popover-original-price{font-size:calc(var(--ci-hotspot-price-font-size) - 2px);font-weight:500;color:var(--ci-hotspot-original-price-color);text-decoration:line-through}.ci-hotspot-popover-description{margin:0 0 12px;color:var(--ci-hotspot-description-color)}.ci-hotspot-popover-cta{display:inline-block;padding:var(--ci-hotspot-cta-padding);background:var(--ci-hotspot-cta-bg);color:var(--ci-hotspot-cta-color);border-radius:var(--ci-hotspot-cta-border-radius);text-decoration:none;font-weight:600;font-size:14px;transition:opacity .2s ease}.ci-hotspot-popover-cta:hover{opacity:.9}.ci-hotspot-popover-cta:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-zoom-controls{position:absolute;display:flex;gap:2px;background:var(--ci-hotspot-zoom-controls-bg);border-radius:var(--ci-hotspot-zoom-controls-border-radius);box-shadow:var(--ci-hotspot-zoom-controls-shadow);z-index:10;overflow:hidden}.ci-hotspot-zoom-controls button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--ci-hotspot-zoom-controls-color);cursor:pointer;font-size:18px;line-height:1;padding:0;transition:background .15s ease}.ci-hotspot-zoom-controls button:hover{background:#0000000d}.ci-hotspot-zoom-controls button:disabled{opacity:.3;cursor:default}.ci-hotspot-zoom-controls button:disabled:hover{background:transparent}.ci-hotspot-zoom-controls button svg{width:18px;height:18px}.ci-hotspot-zoom-controls button:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:-3px}.ci-hotspot-zoom-controls[data-position=bottom-right]{bottom:16px;right:16px}.ci-hotspot-zoom-controls[data-position=bottom-left]{bottom:16px;left:16px}.ci-hotspot-zoom-controls[data-position=bottom-center]{bottom:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]{top:16px;right:16px}.ci-hotspot-zoom-controls[data-position=top-left]{top:16px;left:16px}.ci-hotspot-zoom-controls[data-position=top-center]{top:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]~.ci-hotspot-fullscreen-btn{right:136px}.ci-hotspot-cluster{position:absolute;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:16px;border:2px solid rgba(255,255,255,.8);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-loading .ci-hotspot-image{opacity:0;transition:opacity .3s ease}.ci-hotspot-loading .ci-hotspot-markers{display:none}.ci-hotspot-theme-dark{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-pulse-color: rgba(255, 255, 255, .2);--ci-hotspot-popover-bg: #1a1a1a;--ci-hotspot-popover-color: #f0f0f0;--ci-hotspot-popover-border: 1px solid rgba(255, 255, 255, .1);--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .4);--ci-hotspot-title-color: #f0f0f0;--ci-hotspot-description-color: #aaaaaa;--ci-hotspot-original-price-color: #777777;--ci-hotspot-zoom-controls-bg: rgba(30, 30, 30, .9);--ci-hotspot-zoom-controls-color: #f0f0f0}.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(0, 0, 0, .3);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci-hotspot-pulse-color: rgba(0, 0, 0, .15)}.ci-hotspot-theme-dark.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .3);--ci-hotspot-pulse-color: rgba(255, 255, 255, .15)}.ci-hotspot-scroll-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(4px);padding:8px 16px;border-radius:20px;background:#000000b3;color:#fff;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;white-space:nowrap;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.ci-hotspot-scroll-hint--visible{opacity:1;transform:translate(-50%) translateY(0)}.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{overflow:hidden;height:0}.ci-hotspot-container--fixed-ratio .ci-hotspot-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.ci-hotspot-container--fixed-ratio .ci-hotspot-markers{z-index:1}.ci-hotspot-scene-incoming{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.ci-hotspot-scene-fade-in{animation:ci-hotspot-scene-fade-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-fade-out{animation:ci-hotspot-scene-fade-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ci-hotspot-scene-fade-out{0%{opacity:1}to{opacity:0}}.ci-hotspot-scene-slide-in{animation:ci-hotspot-scene-slide-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out{animation:ci-hotspot-scene-slide-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out{0%{transform:translate(0)}to{transform:translate(-100%)}}.ci-hotspot-scene-slide-in-reverse{animation:ci-hotspot-scene-slide-in-reverse var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-reverse{animation:ci-hotspot-scene-slide-out-reverse var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}.ci-hotspot-scene-slide-in-up{animation:ci-hotspot-scene-slide-in-up var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-up{animation:ci-hotspot-scene-slide-out-up var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-up{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(100%)}}.ci-hotspot-scene-slide-in-down{animation:ci-hotspot-scene-slide-in-down var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-down{animation:ci-hotspot-scene-slide-out-down var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-down{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.ci-hotspot-marker--navigate{--ci-hotspot-marker-bg: rgba(0, 88, 163, .7)}.ci-hotspot-navigate-icon{width:75%;height:75%;display:block}.ci-hotspot-scene-transitioning .ci-hotspot-markers{opacity:0;pointer-events:none;transition:opacity .1s ease}.ci-hotspot-scene-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(0,0,0,.1);border-top-color:#00000080;border-radius:50%;animation:ci-hotspot-spin .6s linear infinite;z-index:10;pointer-events:none}.ci-hotspot-theme-dark .ci-hotspot-scene-loading:after,.ci-hotspot-scene-loading.ci-hotspot-theme-dark:after{border-color:#ffffff1a;border-top-color:#ffffff80}@keyframes ci-hotspot-spin{to{transform:rotate(360deg)}}.ci-hotspot-fullscreen-btn{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--ci-hotspot-zoom-controls-border-radius);background:var(--ci-hotspot-zoom-controls-bg);color:var(--ci-hotspot-zoom-controls-color);box-shadow:var(--ci-hotspot-zoom-controls-shadow);cursor:pointer;padding:0;z-index:10;transition:background .15s ease}.ci-hotspot-fullscreen-btn:hover{background:#e6e6e6f2}.ci-hotspot-fullscreen-btn svg{width:18px;height:18px}.ci-hotspot-fullscreen-btn:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-container--fullscreen{background:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.ci-hotspot-container--fullscreen .ci-hotspot-viewport{width:fit-content;max-width:100%;max-height:100%}.ci-hotspot-container--fullscreen .ci-hotspot-image{max-height:100vh;width:auto;max-width:100%;object-fit:contain}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{width:100%;height:100%;padding-bottom:0}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-image{width:100%;height:100%;max-height:none}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn{background:#1e1e1ee6;color:#f0f0f0}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn:hover,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn:hover{background:#3c3c3cf2}@media (prefers-reduced-motion: reduce){.ci-hotspot-marker,.ci-hotspot-marker:before,.ci-hotspot-popover{animation:none!important;transition-duration:.01ms!important}.ci-hotspot-viewport,.ci-hotspot-scroll-hint{transition-duration:.01ms!important}.ci-hotspot-scene-fade-in,.ci-hotspot-scene-fade-out,.ci-hotspot-scene-slide-in,.ci-hotspot-scene-slide-out,.ci-hotspot-scene-slide-in-reverse,.ci-hotspot-scene-slide-out-reverse,.ci-hotspot-scene-slide-in-up,.ci-hotspot-scene-slide-out-up,.ci-hotspot-scene-slide-in-down,.ci-hotspot-scene-slide-out-down{animation-duration:.01ms!important}.ci-hotspot-scene-transitioning .ci-hotspot-markers{transition-duration:.01ms!important}.ci-hotspot-scene-loading:after{animation-duration:.01ms!important}.ci-hotspot-fullscreen-btn{transition-duration:.01ms!important}}', H = class H {
|
|
888
|
+
const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-border-width: 2px;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-marker-border: var(--ci-hotspot-marker-border-width) solid var(--ci-hotspot-marker-border-color);--ci-hotspot-marker-border-radius: 50%;--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci-hotspot-pulse-color: rgba(0, 0, 0, .15);--ci-hotspot-pulse-size: 40px;--ci-hotspot-pulse-duration: 1.8s;--ci-hotspot-popover-bg: #ffffff;--ci-hotspot-popover-color: #1a1a1a;--ci-hotspot-popover-border: 1px solid rgba(0, 0, 0, .1);--ci-hotspot-popover-border-radius: 12px;--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .12);--ci-hotspot-popover-padding: 16px;--ci-hotspot-popover-max-width: 320px;--ci-hotspot-popover-max-height: 400px;--ci-hotspot-popover-font-family: inherit;--ci-hotspot-popover-font-size: 14px;--ci-hotspot-popover-line-height: 1.5;--ci-hotspot-popover-z-index: 1000;--ci-hotspot-arrow-size: 8px;--ci-hotspot-arrow-color: var(--ci-hotspot-popover-bg);--ci-hotspot-title-font-size: 16px;--ci-hotspot-title-font-weight: 600;--ci-hotspot-title-color: #1a1a1a;--ci-hotspot-price-color: #2d8c3c;--ci-hotspot-price-font-size: 18px;--ci-hotspot-price-font-weight: 700;--ci-hotspot-description-color: #666666;--ci-hotspot-cta-bg: #0058a3;--ci-hotspot-cta-color: #ffffff;--ci-hotspot-cta-border-radius: 8px;--ci-hotspot-cta-padding: 8px 16px;--ci-hotspot-original-price-color: #999999;--ci-hotspot-popover-text-align: left;--ci-hotspot-hover-transition: .2s ease;--ci-hotspot-popover-transition: .3s ease;--ci-hotspot-scene-transition-duration: .4s;--ci-hotspot-zoom-controls-bg: rgba(255, 255, 255, .9);--ci-hotspot-zoom-controls-color: #333333;--ci-hotspot-zoom-controls-border-radius: 8px;--ci-hotspot-zoom-controls-shadow: 0 2px 8px rgba(0, 0, 0, .15)}.ci-hotspot-container *,.ci-hotspot-container *:before,.ci-hotspot-container *:after{box-sizing:border-box}.ci-hotspot-container{position:relative;overflow:hidden;width:100%;line-height:0;user-select:none;-webkit-user-select:none}.ci-hotspot-viewport{position:relative;width:100%;transform-origin:0 0;will-change:transform;transition:transform .3s ease}.ci-hotspot-viewport--dragging{transition:none}.ci-hotspot-image{display:block;width:100%;height:auto;pointer-events:none}.ci-hotspot-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ci-hotspot-marker{position:absolute;width:var(--ci-hotspot-marker-size);height:var(--ci-hotspot-marker-size);padding:0;border:var(--ci-hotspot-marker-border);border-radius:var(--ci-hotspot-marker-border-radius);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);box-shadow:var(--ci-hotspot-marker-shadow);cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));transition:transform var(--ci-hotspot-hover-transition),box-shadow var(--ci-hotspot-hover-transition);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;outline:none}.ci-hotspot-marker:hover{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));box-shadow:0 4px 12px #0006}.ci-hotspot-marker:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-marker--active{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));z-index:2}.ci-hotspot-marker--hidden{display:none}.ci-hotspot-marker--dot-label{overflow:visible}.ci-hotspot-marker-label{position:absolute;left:calc(50% + var(--ci-hotspot-marker-size) / 2 + 4px);top:50%;transform:translateY(-50%);padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--ci-hotspot-marker-color);background:var(--ci-hotspot-marker-bg);border:var(--ci-hotspot-marker-border);border-radius:100px;box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-marker--dot-label.ci-hotspot-marker--pulse{animation:none}.ci-hotspot-marker--pulse:before{content:"";position:absolute;top:50%;left:50%;width:var(--ci-hotspot-pulse-size);height:var(--ci-hotspot-pulse-size);border-radius:50%;background:var(--ci-hotspot-pulse-color);transform:translate(-50%,-50%) scale(1);animation:ci-hotspot-pulse var(--ci-hotspot-pulse-duration) ease-out infinite;pointer-events:none}@keyframes ci-hotspot-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.ci-hotspot-marker--pulse{animation:ci-hotspot-breathe 2.4s ease-in-out infinite}.ci-hotspot-marker--pulse:hover,.ci-hotspot-marker--pulse.ci-hotspot-marker--active{animation:none}@keyframes ci-hotspot-breathe{0%,to{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)))}50%{transform:translate(-50%,-50%) scale(calc(1.15 / var(--zoom, 1)))}}.ci-hotspot-popover{position:absolute;z-index:var(--ci-hotspot-popover-z-index);max-width:var(--ci-hotspot-popover-max-width);background:var(--ci-hotspot-popover-bg);color:var(--ci-hotspot-popover-color);border:var(--ci-hotspot-popover-border);border-radius:var(--ci-hotspot-popover-border-radius);box-shadow:var(--ci-hotspot-popover-shadow);font-family:var(--ci-hotspot-popover-font-family);font-size:var(--ci-hotspot-popover-font-size);line-height:var(--ci-hotspot-popover-line-height);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--ci-hotspot-popover-transition),transform var(--ci-hotspot-popover-transition)}.ci-hotspot-popover--visible{opacity:1;pointer-events:auto;transform:translateY(0);animation:ci-hotspot-popover-in var(--ci-hotspot-popover-transition) forwards}@keyframes ci-hotspot-popover-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.ci-hotspot-popover-arrow{position:absolute;width:calc(var(--ci-hotspot-arrow-size) * 2);height:calc(var(--ci-hotspot-arrow-size) * 2);background:var(--ci-hotspot-arrow-color);transform:rotate(45deg);pointer-events:none}.ci-hotspot-popover[data-placement=top] .ci-hotspot-popover-arrow{bottom:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=bottom] .ci-hotspot-popover-arrow{top:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=left] .ci-hotspot-popover-arrow{right:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=right] .ci-hotspot-popover-arrow{left:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover-content{padding:var(--ci-hotspot-popover-padding);max-height:var(--ci-hotspot-popover-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--ci-hotspot-popover-border-radius)}.ci-hotspot-popover-image-wrapper{aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--ci-hotspot-popover-border-radius) - 4px) calc(var(--ci-hotspot-popover-border-radius) - 4px) 0 0;margin:calc(var(--ci-hotspot-popover-padding) * -1);margin-bottom:12px;width:calc(100% + var(--ci-hotspot-popover-padding) * 2)}.ci-hotspot-popover-image{display:block;width:100%;height:100%;object-fit:cover}.ci-hotspot-popover-body{line-height:1.5;text-align:var(--ci-hotspot-popover-text-align)}.ci-hotspot-popover-title{margin:0 0 4px;font-size:var(--ci-hotspot-title-font-size);font-weight:var(--ci-hotspot-title-font-weight);color:var(--ci-hotspot-title-color)}.ci-hotspot-popover-price{display:inline-block;margin-bottom:8px;font-size:var(--ci-hotspot-price-font-size);font-weight:var(--ci-hotspot-price-font-weight);color:var(--ci-hotspot-price-color)}.ci-hotspot-popover-price-row{display:inline-flex;align-items:baseline;gap:6px;margin-bottom:8px;flex-wrap:wrap}.ci-hotspot-popover-price-row .ci-hotspot-popover-price{margin-bottom:0}.ci-hotspot-popover-original-price{font-size:calc(var(--ci-hotspot-price-font-size) - 2px);font-weight:500;color:var(--ci-hotspot-original-price-color);text-decoration:line-through}.ci-hotspot-popover-description{margin:0 0 12px;color:var(--ci-hotspot-description-color)}.ci-hotspot-popover-cta{display:inline-block;padding:var(--ci-hotspot-cta-padding);background:var(--ci-hotspot-cta-bg);color:var(--ci-hotspot-cta-color);border-radius:var(--ci-hotspot-cta-border-radius);text-decoration:none;font-weight:600;font-size:14px;transition:opacity .2s ease}.ci-hotspot-popover-cta:hover{opacity:.9}.ci-hotspot-popover-cta:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-zoom-controls{position:absolute;display:flex;gap:2px;background:var(--ci-hotspot-zoom-controls-bg);border-radius:var(--ci-hotspot-zoom-controls-border-radius);box-shadow:var(--ci-hotspot-zoom-controls-shadow);z-index:10;overflow:hidden}.ci-hotspot-zoom-controls button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--ci-hotspot-zoom-controls-color);cursor:pointer;font-size:18px;line-height:1;padding:0;transition:background .15s ease}.ci-hotspot-zoom-controls button:hover{background:#0000000d}.ci-hotspot-zoom-controls button:disabled{opacity:.3;cursor:default}.ci-hotspot-zoom-controls button:disabled:hover{background:transparent}.ci-hotspot-zoom-controls button svg{width:18px;height:18px}.ci-hotspot-zoom-controls button:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:-3px}.ci-hotspot-zoom-controls[data-position=bottom-right]{bottom:16px;right:16px}.ci-hotspot-zoom-controls[data-position=bottom-left]{bottom:16px;left:16px}.ci-hotspot-zoom-controls[data-position=bottom-center]{bottom:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]{top:16px;right:16px}.ci-hotspot-zoom-controls[data-position=top-left]{top:16px;left:16px}.ci-hotspot-zoom-controls[data-position=top-center]{top:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]~.ci-hotspot-fullscreen-btn{right:136px}.ci-hotspot-cluster{position:absolute;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:16px;border:2px solid rgba(255,255,255,.8);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-loading .ci-hotspot-image{opacity:0;transition:opacity .3s ease}.ci-hotspot-loading .ci-hotspot-markers{display:none}.ci-hotspot-theme-dark{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .6);--ci-hotspot-pulse-color: rgba(255, 255, 255, .15);--ci-hotspot-popover-bg: #1a1a1a;--ci-hotspot-popover-color: #f0f0f0;--ci-hotspot-popover-border: 1px solid rgba(255, 255, 255, .1);--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .4);--ci-hotspot-title-color: #f0f0f0;--ci-hotspot-description-color: #aaaaaa;--ci-hotspot-original-price-color: #777777;--ci-hotspot-zoom-controls-bg: rgba(30, 30, 30, .9);--ci-hotspot-zoom-controls-color: #f0f0f0}.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .8);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .3);--ci-hotspot-pulse-color: rgba(0, 0, 0, .2)}.ci-hotspot-theme-dark.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-pulse-color: rgba(255, 255, 255, .2)}.ci-hotspot-marker-brand{--ci-hotspot-marker-bg: var(--ci-hotspot-brand-color, #00aaff);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .9);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .25);--ci-hotspot-pulse-color: var(--ci-hotspot-brand-color, #00aaff)}.ci-hotspot-scroll-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(4px);padding:8px 16px;border-radius:20px;background:#000000b3;color:#fff;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;white-space:nowrap;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.ci-hotspot-scroll-hint--visible{opacity:1;transform:translate(-50%) translateY(0)}.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{overflow:hidden;height:0}.ci-hotspot-container--fixed-ratio .ci-hotspot-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.ci-hotspot-container--fixed-ratio .ci-hotspot-markers{z-index:1}.ci-hotspot-scene-incoming{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.ci-hotspot-scene-fade-in{animation:ci-hotspot-scene-fade-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-fade-out{animation:ci-hotspot-scene-fade-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ci-hotspot-scene-fade-out{0%{opacity:1}to{opacity:0}}.ci-hotspot-scene-slide-in{animation:ci-hotspot-scene-slide-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out{animation:ci-hotspot-scene-slide-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out{0%{transform:translate(0)}to{transform:translate(-100%)}}.ci-hotspot-scene-slide-in-reverse{animation:ci-hotspot-scene-slide-in-reverse var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-reverse{animation:ci-hotspot-scene-slide-out-reverse var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}.ci-hotspot-scene-slide-in-up{animation:ci-hotspot-scene-slide-in-up var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-up{animation:ci-hotspot-scene-slide-out-up var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-up{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(100%)}}.ci-hotspot-scene-slide-in-down{animation:ci-hotspot-scene-slide-in-down var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-down{animation:ci-hotspot-scene-slide-out-down var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-down{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.ci-hotspot-navigate-icon{width:75%;height:75%;display:block}.ci-hotspot-scene-transitioning .ci-hotspot-markers{opacity:0;pointer-events:none;transition:opacity .1s ease}.ci-hotspot-scene-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(0,0,0,.1);border-top-color:#00000080;border-radius:50%;animation:ci-hotspot-spin .6s linear infinite;z-index:10;pointer-events:none}.ci-hotspot-theme-dark .ci-hotspot-scene-loading:after,.ci-hotspot-scene-loading.ci-hotspot-theme-dark:after{border-color:#ffffff1a;border-top-color:#ffffff80}@keyframes ci-hotspot-spin{to{transform:rotate(360deg)}}.ci-hotspot-fullscreen-btn{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--ci-hotspot-zoom-controls-border-radius);background:var(--ci-hotspot-zoom-controls-bg);color:var(--ci-hotspot-zoom-controls-color);box-shadow:var(--ci-hotspot-zoom-controls-shadow);cursor:pointer;padding:0;z-index:10;transition:background .15s ease}.ci-hotspot-fullscreen-btn:hover{background:#e6e6e6f2}.ci-hotspot-fullscreen-btn svg{width:18px;height:18px}.ci-hotspot-fullscreen-btn:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-container--fullscreen{background:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.ci-hotspot-container--fullscreen .ci-hotspot-viewport{width:fit-content;max-width:100%;max-height:100%}.ci-hotspot-container--fullscreen .ci-hotspot-image{max-height:100vh;width:auto;max-width:100%;object-fit:contain}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{width:100%;height:100%;padding-bottom:0}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-image{width:100%;height:100%;max-height:none}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn{background:#1e1e1ee6;color:#f0f0f0}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn:hover,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn:hover{background:#3c3c3cf2}@media (prefers-reduced-motion: reduce){.ci-hotspot-marker,.ci-hotspot-marker:before,.ci-hotspot-popover{animation:none!important;transition-duration:.01ms!important}.ci-hotspot-viewport,.ci-hotspot-scroll-hint{transition-duration:.01ms!important}.ci-hotspot-scene-fade-in,.ci-hotspot-scene-fade-out,.ci-hotspot-scene-slide-in,.ci-hotspot-scene-slide-out,.ci-hotspot-scene-slide-in-reverse,.ci-hotspot-scene-slide-out-reverse,.ci-hotspot-scene-slide-in-up,.ci-hotspot-scene-slide-out-up,.ci-hotspot-scene-slide-in-down,.ci-hotspot-scene-slide-out-down{animation-duration:.01ms!important}.ci-hotspot-scene-transitioning .ci-hotspot-markers{transition-duration:.01ms!important}.ci-hotspot-scene-loading:after{animation-duration:.01ms!important}.ci-hotspot-fullscreen-btn{transition-duration:.01ms!important}}', H = class H {
|
|
885
889
|
constructor(t, e) {
|
|
886
890
|
this.markers = /* @__PURE__ */ new Map(), this.popovers = /* @__PURE__ */ new Map(), this.normalizedHotspots = /* @__PURE__ */ new Map(), this.scrollHint = null, this.zoomPan = null, this.zoomControls = null, this.cloudimageHandler = null, this.resizeObserver = null, this.keyboardHandler = null, this.fullscreenControl = null, this.focusTraps = /* @__PURE__ */ new Map(), this.cleanups = [], this.hotspotCleanups = /* @__PURE__ */ new Map(), this.imageLoaded = !1, this.destroyed = !1, this.scenesMap = /* @__PURE__ */ new Map(), this.isTransitioning = !1, this.activeTimers = /* @__PURE__ */ new Set(), this.sceneHotspotOverrides = /* @__PURE__ */ new Map(), this.preloadedScenes = /* @__PURE__ */ new Set(), this.rootEl = st(t), this.config = X(e), j(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), q(), Q(ot), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive();
|
|
887
891
|
}
|
|
@@ -900,18 +904,20 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
900
904
|
alt: this.config.alt || "",
|
|
901
905
|
draggable: "false"
|
|
902
906
|
}), this.markersEl = h("div", "ci-hotspot-markers"), this.viewportEl.appendChild(this.imgEl), this.viewportEl.appendChild(this.markersEl), this.containerEl.appendChild(this.viewportEl), this.containerEl.setAttribute("role", "group"), this.containerEl.setAttribute("aria-label", this.config.alt || "Image with hotspots"), this.config.sceneAspectRatio) {
|
|
903
|
-
|
|
907
|
+
m(this.containerEl, "ci-hotspot-container--fixed-ratio");
|
|
904
908
|
const t = this.config.sceneAspectRatio.split(/[:/\s]+/).map(Number);
|
|
905
909
|
t.length >= 2 && t[0] > 0 && t[1] > 0 && (this.viewportEl.style.paddingBottom = `${t[1] / t[0] * 100}%`);
|
|
906
910
|
}
|
|
907
|
-
this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad &&
|
|
911
|
+
this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad && m(this.containerEl, "ci-hotspot-loading");
|
|
908
912
|
}
|
|
909
913
|
applyTheme() {
|
|
910
|
-
this.config.theme === "dark"
|
|
914
|
+
this.config.theme === "dark" ? m(this.containerEl, "ci-hotspot-theme-dark") : b(this.containerEl, "ci-hotspot-theme-dark");
|
|
915
|
+
const t = this.config.markerTheme && this.config.markerTheme !== "default" ? this.config.markerTheme : this.config.invertMarkerTheme ? "inverted" : "default";
|
|
916
|
+
b(this.containerEl, "ci-hotspot-marker-inverted"), b(this.containerEl, "ci-hotspot-marker-brand"), this.containerEl.style.removeProperty("--ci-hotspot-brand-color"), t === "inverted" ? m(this.containerEl, "ci-hotspot-marker-inverted") : t === "brand" && (m(this.containerEl, "ci-hotspot-marker-brand"), this.config.brandColor && this.containerEl.style.setProperty("--ci-hotspot-brand-color", this.config.brandColor));
|
|
911
917
|
}
|
|
912
918
|
setupImage() {
|
|
913
919
|
const t = () => {
|
|
914
|
-
|
|
920
|
+
b(this.containerEl, "ci-hotspot-loading"), this.imageLoaded = !0, this.renormalizePixelCoordinates(), this.syncMarkersToImage(), this.showLoadTriggerPopovers();
|
|
915
921
|
};
|
|
916
922
|
if (this.imgEl.addEventListener("load", t), this.cleanups.push(() => this.imgEl.removeEventListener("load", t)), this.config.lazyLoad && typeof IntersectionObserver < "u") {
|
|
917
923
|
const e = new IntersectionObserver(
|
|
@@ -961,8 +967,8 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
961
967
|
P(p), this.markers.delete(t.id), (d = this.popovers.get(t.id)) == null || d.destroy(), this.popovers.delete(t.id);
|
|
962
968
|
const g = this.hotspotCleanups.get(t.id);
|
|
963
969
|
g && (g.forEach((k) => k()), this.hotspotCleanups.delete(t.id));
|
|
964
|
-
const
|
|
965
|
-
|
|
970
|
+
const y = this.focusTraps.get(t.id);
|
|
971
|
+
y && (y.destroy(), this.focusTraps.delete(t.id));
|
|
966
972
|
}
|
|
967
973
|
const { x: e, y: i } = V(
|
|
968
974
|
t.x,
|
|
@@ -977,8 +983,8 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
977
983
|
if (t.navigateTo) {
|
|
978
984
|
const p = this.enrichNavigateHotspot(t);
|
|
979
985
|
if (!!(p.data || p.content || this.config.renderPopover)) {
|
|
980
|
-
const
|
|
981
|
-
placement:
|
|
986
|
+
const y = t.placement || this.config.placement || "top", k = new W(p, {
|
|
987
|
+
placement: y,
|
|
982
988
|
triggerMode: "hover",
|
|
983
989
|
renderFn: this.config.renderPopover,
|
|
984
990
|
onOpen: this.config.onOpen,
|
|
@@ -996,7 +1002,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
996
1002
|
onOpen: this.config.onOpen,
|
|
997
1003
|
onClose: this.config.onClose
|
|
998
1004
|
});
|
|
999
|
-
this.popovers.set(t.id, l), l.mount(this.containerEl, s), this.bindTrigger(t, s, l, n), n === "load" && this.imageLoaded && (this.closeAll(), l.show(),
|
|
1005
|
+
this.popovers.set(t.id, l), l.mount(this.containerEl, s), this.bindTrigger(t, s, l, n), n === "load" && this.imageLoaded && (this.closeAll(), l.show(), v(s, !0), this.ensureFocusTrap(t.id, l.element, s), (u = this.focusTraps.get(t.id)) == null || u.activate());
|
|
1000
1006
|
}
|
|
1001
1007
|
/** For navigateTo hotspots without explicit data/content, generate popover content from the destination scene */
|
|
1002
1008
|
enrichNavigateHotspot(t) {
|
|
@@ -1008,24 +1014,24 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1008
1014
|
} : t;
|
|
1009
1015
|
}
|
|
1010
1016
|
bindNavigateTrigger(t, e, i) {
|
|
1011
|
-
if (
|
|
1017
|
+
if (m(e, "ci-hotspot-marker--navigate"), e.innerHTML = H.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
|
|
1012
1018
|
const n = e.querySelector("svg");
|
|
1013
1019
|
n && (n.style.transform = `rotate(${t.arrowDirection}deg)`);
|
|
1014
1020
|
}
|
|
1015
1021
|
const o = t.label || t.navigateTo;
|
|
1016
1022
|
if (e.setAttribute("aria-label", `Navigate to ${o}`), e.setAttribute("aria-roledescription", "navigation hotspot"), i) {
|
|
1017
1023
|
const n = f(e, "mouseenter", () => {
|
|
1018
|
-
this.preloadSceneImage(t.navigateTo), i.clearHideTimer(), i.show(),
|
|
1024
|
+
this.preloadSceneImage(t.navigateTo), i.clearHideTimer(), i.show(), v(e, !0);
|
|
1019
1025
|
}), c = () => {
|
|
1020
1026
|
this.trackedTimeout(() => {
|
|
1021
|
-
i.isVisible() ||
|
|
1027
|
+
i.isVisible() || v(e, !1);
|
|
1022
1028
|
}, 250);
|
|
1023
1029
|
}, l = f(e, "mouseleave", () => {
|
|
1024
1030
|
i.scheduleHide(200), c();
|
|
1025
1031
|
}), d = f(i.element, "mouseleave", () => {
|
|
1026
1032
|
c();
|
|
1027
1033
|
}), u = f(e, "focus", () => {
|
|
1028
|
-
this.preloadSceneImage(t.navigateTo), i.clearHideTimer(), i.show(),
|
|
1034
|
+
this.preloadSceneImage(t.navigateTo), i.clearHideTimer(), i.show(), v(e, !0);
|
|
1029
1035
|
}), p = f(e, "blur", () => {
|
|
1030
1036
|
i.scheduleHide(200), c();
|
|
1031
1037
|
});
|
|
@@ -1040,10 +1046,10 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1040
1046
|
}
|
|
1041
1047
|
const r = f(e, "click", (n) => {
|
|
1042
1048
|
var c, l, d;
|
|
1043
|
-
n.stopPropagation(), i == null || i.hide(),
|
|
1049
|
+
n.stopPropagation(), i == null || i.hide(), v(e, !1), (l = (c = this.config).onClick) == null || l.call(c, n, t), (d = t.onClick) == null || d.call(t, n, t), this.goToScene(t.navigateTo);
|
|
1044
1050
|
}), s = f(e, "keydown", (n) => {
|
|
1045
1051
|
var c, l, d;
|
|
1046
|
-
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), i == null || i.hide(),
|
|
1052
|
+
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), i == null || i.hide(), v(e, !1), (l = (c = this.config).onClick) == null || l.call(c, n, t), (d = t.onClick) == null || d.call(t, n, t), this.goToScene(t.navigateTo));
|
|
1047
1053
|
});
|
|
1048
1054
|
this.addHotspotCleanups(t.id, r, s);
|
|
1049
1055
|
}
|
|
@@ -1052,10 +1058,10 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1052
1058
|
}
|
|
1053
1059
|
bindHoverTrigger(t, e, i) {
|
|
1054
1060
|
const o = f(e, "mouseenter", () => {
|
|
1055
|
-
i.clearHideTimer(), i.show(),
|
|
1061
|
+
i.clearHideTimer(), i.show(), v(e, !0);
|
|
1056
1062
|
}), r = () => {
|
|
1057
1063
|
this.trackedTimeout(() => {
|
|
1058
|
-
i.isVisible() ||
|
|
1064
|
+
i.isVisible() || v(e, !1);
|
|
1059
1065
|
}, 250);
|
|
1060
1066
|
}, s = f(e, "mouseleave", () => {
|
|
1061
1067
|
i.scheduleHide(200), r();
|
|
@@ -1069,22 +1075,22 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1069
1075
|
this.focusTraps.set(t.id, o);
|
|
1070
1076
|
const r = f(e, "click", (n) => {
|
|
1071
1077
|
var c, l, d;
|
|
1072
|
-
n.stopPropagation(), (l = (c = this.config).onClick) == null || l.call(c, n, t), (d = t.onClick) == null || d.call(t, n, t), i.isVisible() ? (i.hide(),
|
|
1078
|
+
n.stopPropagation(), (l = (c = this.config).onClick) == null || l.call(c, n, t), (d = t.onClick) == null || d.call(t, n, t), i.isVisible() ? (i.hide(), v(e, !1), o.deactivate()) : (this.closeAll(), i.show(), v(e, !0), o.activate());
|
|
1073
1079
|
}), s = f(this.containerEl, "click", (n) => {
|
|
1074
|
-
i.isVisible() && !t.keepOpen && !i.element.contains(n.target) && !e.contains(n.target) && (i.hide(),
|
|
1080
|
+
i.isVisible() && !t.keepOpen && !i.element.contains(n.target) && !e.contains(n.target) && (i.hide(), v(e, !1), o.deactivate());
|
|
1075
1081
|
});
|
|
1076
1082
|
this.addHotspotCleanups(t.id, r, s);
|
|
1077
1083
|
}
|
|
1078
1084
|
bindKeyboardTrigger(t, e, i, o) {
|
|
1079
1085
|
const r = f(e, "focus", () => {
|
|
1080
|
-
o === "hover" && (i.clearHideTimer(), i.show(),
|
|
1086
|
+
o === "hover" && (i.clearHideTimer(), i.show(), v(e, !0));
|
|
1081
1087
|
}), s = f(e, "blur", () => {
|
|
1082
1088
|
o === "hover" && (i.scheduleHide(200), this.trackedTimeout(() => {
|
|
1083
|
-
i.isVisible() ||
|
|
1089
|
+
i.isVisible() || v(e, !1);
|
|
1084
1090
|
}, 250));
|
|
1085
1091
|
}), n = f(e, "keydown", (c) => {
|
|
1086
1092
|
var l, d, u, p, g;
|
|
1087
|
-
c.key === "Enter" || c.key === " " ? (c.preventDefault(), (d = (l = this.config).onClick) == null || d.call(l, c, t), i.isVisible() ? (i.hide(),
|
|
1093
|
+
c.key === "Enter" || c.key === " " ? (c.preventDefault(), (d = (l = this.config).onClick) == null || d.call(l, c, t), i.isVisible() ? (i.hide(), v(e, !1), (u = this.focusTraps.get(t.id)) == null || u.deactivate()) : (this.closeAll(), i.show(), v(e, !0), this.ensureFocusTrap(t.id, i.element, e), (p = this.focusTraps.get(t.id)) == null || p.activate())) : c.key === "Escape" && i.isVisible() && (i.hide(), v(e, !1), (g = this.focusTraps.get(t.id)) == null || g.deactivate(), e.focus());
|
|
1088
1094
|
});
|
|
1089
1095
|
this.addHotspotCleanups(t.id, r, s, n);
|
|
1090
1096
|
}
|
|
@@ -1107,7 +1113,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1107
1113
|
if (((o == null ? void 0 : o.trigger) || this.config.trigger || "hover") === "load" && !i.isVisible()) {
|
|
1108
1114
|
i.show();
|
|
1109
1115
|
const s = this.markers.get(e);
|
|
1110
|
-
s && (
|
|
1116
|
+
s && (v(s, !0), this.ensureFocusTrap(e, i.element, s), (t = this.focusTraps.get(e)) == null || t.activate());
|
|
1111
1117
|
break;
|
|
1112
1118
|
}
|
|
1113
1119
|
}
|
|
@@ -1257,7 +1263,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1257
1263
|
return;
|
|
1258
1264
|
}
|
|
1259
1265
|
const r = this.getSceneTransitionDuration();
|
|
1260
|
-
|
|
1266
|
+
m(this.containerEl, "ci-hotspot-scene-transitioning");
|
|
1261
1267
|
const s = h("img", "ci-hotspot-scene-incoming", {
|
|
1262
1268
|
alt: t.alt || "",
|
|
1263
1269
|
draggable: "false"
|
|
@@ -1268,19 +1274,19 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1268
1274
|
} else
|
|
1269
1275
|
s.src = t.src;
|
|
1270
1276
|
const n = () => {
|
|
1271
|
-
this.destroyed || (e === "fade" ? (
|
|
1277
|
+
this.destroyed || (e === "fade" ? (m(s, "ci-hotspot-scene-fade-in"), m(this.imgEl, "ci-hotspot-scene-fade-out")) : e === "slide" && (m(s, `ci-hotspot-scene-slide-in${i}`), m(this.imgEl, `ci-hotspot-scene-slide-out${i}`)), this.viewportEl.insertBefore(s, this.markersEl), this.transitionTimer = setTimeout(() => {
|
|
1272
1278
|
if (this.transitionTimer = void 0, this.destroyed) return;
|
|
1273
1279
|
this.clearHotspots(), this.switchToScene(t);
|
|
1274
1280
|
const l = () => {
|
|
1275
|
-
s.remove(),
|
|
1281
|
+
s.remove(), b(this.imgEl, "ci-hotspot-scene-fade-out"), b(this.imgEl, `ci-hotspot-scene-slide-out${i}`), b(this.containerEl, "ci-hotspot-scene-transitioning"), o();
|
|
1276
1282
|
};
|
|
1277
1283
|
this.imgEl.complete && this.imgEl.naturalWidth > 0 ? l() : (this.imgEl.addEventListener("load", l, { once: !0 }), this.imgEl.addEventListener("error", l, { once: !0 }));
|
|
1278
1284
|
}, r));
|
|
1279
1285
|
};
|
|
1280
|
-
s.complete ? n() : (
|
|
1281
|
-
|
|
1286
|
+
s.complete ? n() : (m(this.containerEl, "ci-hotspot-scene-loading"), s.onload = () => {
|
|
1287
|
+
b(this.containerEl, "ci-hotspot-scene-loading"), n();
|
|
1282
1288
|
}, s.onerror = () => {
|
|
1283
|
-
this.destroyed || (
|
|
1289
|
+
this.destroyed || (b(this.containerEl, "ci-hotspot-scene-loading"), s.remove(), b(this.containerEl, "ci-hotspot-scene-transitioning"), this.clearHotspots(), this.switchToScene(t), o());
|
|
1284
1290
|
});
|
|
1285
1291
|
}
|
|
1286
1292
|
switchToScene(t) {
|
|
@@ -1310,13 +1316,13 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1310
1316
|
var o;
|
|
1311
1317
|
if (this.destroyed) return;
|
|
1312
1318
|
const e = this.popovers.get(t), i = this.markers.get(t);
|
|
1313
|
-
!e || !i || e.isVisible() || (this.closeAll(), e.show(),
|
|
1319
|
+
!e || !i || e.isVisible() || (this.closeAll(), e.show(), v(i, !0), (o = this.focusTraps.get(t)) == null || o.activate());
|
|
1314
1320
|
}
|
|
1315
1321
|
close(t) {
|
|
1316
1322
|
var o;
|
|
1317
1323
|
if (this.destroyed) return;
|
|
1318
1324
|
const e = this.popovers.get(t), i = this.markers.get(t);
|
|
1319
|
-
e && i && (e.hide(),
|
|
1325
|
+
e && i && (e.hide(), v(i, !1), (o = this.focusTraps.get(t)) == null || o.deactivate());
|
|
1320
1326
|
}
|
|
1321
1327
|
closeAll() {
|
|
1322
1328
|
var t;
|
|
@@ -1325,7 +1331,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1325
1331
|
if (i.isVisible()) {
|
|
1326
1332
|
i.hide();
|
|
1327
1333
|
const o = this.markers.get(e);
|
|
1328
|
-
o &&
|
|
1334
|
+
o && v(o, !1), (t = this.focusTraps.get(e)) == null || t.deactivate();
|
|
1329
1335
|
}
|
|
1330
1336
|
}
|
|
1331
1337
|
}
|
|
@@ -1762,7 +1768,7 @@ class qt {
|
|
|
1762
1768
|
if (this.rafId = null, !this.markerEl) return;
|
|
1763
1769
|
const g = t.querySelector(".ci-hotspot-image");
|
|
1764
1770
|
if (!g) return;
|
|
1765
|
-
const
|
|
1771
|
+
const y = g.getBoundingClientRect(), k = (u - y.left) / y.width * 100, x = (p - y.top) / y.height * 100, L = Math.max(0, Math.min(100, k)), w = Math.max(0, Math.min(100, x));
|
|
1766
1772
|
this.markerEl.style.left = `${L}%`, this.markerEl.style.top = `${w}%`;
|
|
1767
1773
|
});
|
|
1768
1774
|
}, o = (c) => {
|
|
@@ -1770,10 +1776,10 @@ class qt {
|
|
|
1770
1776
|
if (this.dragging && this.markerEl) {
|
|
1771
1777
|
const l = t.querySelector(".ci-hotspot-image");
|
|
1772
1778
|
if (l) {
|
|
1773
|
-
const d = l.getBoundingClientRect(), u = (c.clientX - d.left) / d.width * 100, p = (c.clientY - d.top) / d.height * 100, g = Math.max(0, Math.min(100, Math.round(u * 100) / 100)),
|
|
1779
|
+
const d = l.getBoundingClientRect(), u = (c.clientX - d.left) / d.width * 100, p = (c.clientY - d.top) / d.height * 100, g = Math.max(0, Math.min(100, Math.round(u * 100) / 100)), y = Math.max(0, Math.min(100, Math.round(p * 100) / 100));
|
|
1774
1780
|
this.editor.updateHotspot(this.dragId, {
|
|
1775
1781
|
x: `${g}%`,
|
|
1776
|
-
y: `${
|
|
1782
|
+
y: `${y}%`
|
|
1777
1783
|
});
|
|
1778
1784
|
}
|
|
1779
1785
|
}
|