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
package/dist/react/index.js
CHANGED
|
@@ -15,6 +15,8 @@ const pt = {
|
|
|
15
15
|
sceneTransition: "fade",
|
|
16
16
|
scrollHint: !0,
|
|
17
17
|
invertMarkerTheme: !1,
|
|
18
|
+
markerTheme: "default",
|
|
19
|
+
brandColor: "#00aaff",
|
|
18
20
|
fullscreenButton: !0,
|
|
19
21
|
zoomControlsPosition: "bottom-right"
|
|
20
22
|
}, dt = {
|
|
@@ -41,6 +43,8 @@ const pt = {
|
|
|
41
43
|
"data-ci-hotspot-scene-transition": { key: "sceneTransition", type: "string" },
|
|
42
44
|
"data-ci-hotspot-scene-aspect-ratio": { key: "sceneAspectRatio", type: "string" },
|
|
43
45
|
"data-ci-hotspot-invert-marker-theme": { key: "invertMarkerTheme", type: "boolean" },
|
|
46
|
+
"data-ci-hotspot-marker-theme": { key: "markerTheme", type: "string" },
|
|
47
|
+
"data-ci-hotspot-brand-color": { key: "brandColor", type: "string" },
|
|
44
48
|
"data-ci-hotspot-fullscreen-button": { key: "fullscreenButton", type: "boolean" },
|
|
45
49
|
"data-ci-hotspot-zoom-controls-position": { key: "zoomControlsPosition", type: "string" }
|
|
46
50
|
};
|
|
@@ -122,10 +126,10 @@ function v(i, t, e) {
|
|
|
122
126
|
o.setAttribute(s, c);
|
|
123
127
|
return o;
|
|
124
128
|
}
|
|
125
|
-
function
|
|
129
|
+
function m(i, ...t) {
|
|
126
130
|
i.classList.add(...t);
|
|
127
131
|
}
|
|
128
|
-
function
|
|
132
|
+
function y(i, ...t) {
|
|
129
133
|
i.classList.remove(...t);
|
|
130
134
|
}
|
|
131
135
|
function gt(i) {
|
|
@@ -159,10 +163,10 @@ function vt(i, t) {
|
|
|
159
163
|
});
|
|
160
164
|
if (e.style.left = `${i.x}%`, e.style.top = `${i.y}%`, i.className) {
|
|
161
165
|
const o = i.className.trim().split(/\s+/).filter(Boolean);
|
|
162
|
-
o.length &&
|
|
166
|
+
o.length && m(e, ...o);
|
|
163
167
|
}
|
|
164
|
-
if (i.hidden &&
|
|
165
|
-
|
|
168
|
+
if (i.hidden && m(e, "ci-hotspot-marker--hidden"), t && m(e, "ci-hotspot-marker--pulse"), i.icon && wt(e, i.icon), i.markerStyle === "dot-label" && i.label) {
|
|
169
|
+
m(e, "ci-hotspot-marker--dot-label");
|
|
166
170
|
const o = v("span", "ci-hotspot-marker-label");
|
|
167
171
|
o.textContent = i.label, e.appendChild(o);
|
|
168
172
|
}
|
|
@@ -218,42 +222,42 @@ function wt(i, t) {
|
|
|
218
222
|
i.appendChild(o);
|
|
219
223
|
}
|
|
220
224
|
}
|
|
221
|
-
function
|
|
222
|
-
t ? (
|
|
225
|
+
function g(i, t) {
|
|
226
|
+
t ? (m(i, "ci-hotspot-marker--active"), i.setAttribute("aria-expanded", "true")) : (y(i, "ci-hotspot-marker--active"), i.setAttribute("aria-expanded", "false"));
|
|
223
227
|
}
|
|
224
228
|
function kt(i, t) {
|
|
225
|
-
t ?
|
|
229
|
+
t ? m(i, "ci-hotspot-marker--hidden") : y(i, "ci-hotspot-marker--hidden");
|
|
226
230
|
}
|
|
227
231
|
function A(i) {
|
|
228
232
|
i.remove();
|
|
229
233
|
}
|
|
230
234
|
function xt(i, t, e, o) {
|
|
231
|
-
const s = i.getBoundingClientRect(), c = e.getBoundingClientRect(), n = t.offsetWidth, r = t.offsetHeight, a = s.left + s.width / 2 - c.left, l = s.top + s.height / 2 - c.top, d = s.top - c.top, h = s.bottom - c.top, p = s.left - c.left, u = s.right - c.left,
|
|
232
|
-
top: d -
|
|
233
|
-
bottom: b - h -
|
|
234
|
-
left: p -
|
|
235
|
-
right:
|
|
235
|
+
const s = i.getBoundingClientRect(), c = e.getBoundingClientRect(), n = t.offsetWidth, r = t.offsetHeight, a = s.left + s.width / 2 - c.left, l = s.top + s.height / 2 - c.top, d = s.top - c.top, h = s.bottom - c.top, p = s.left - c.left, u = s.right - c.left, k = e.offsetWidth, b = e.offsetHeight, w = 8, M = {
|
|
236
|
+
top: d - w,
|
|
237
|
+
bottom: b - h - w,
|
|
238
|
+
left: p - w,
|
|
239
|
+
right: k - u - w
|
|
236
240
|
};
|
|
237
241
|
let E = o.placement;
|
|
238
242
|
E === "auto" && (E = Et(M)), E = zt(E, n, r, M);
|
|
239
243
|
let z, T, $ = 0;
|
|
240
244
|
switch (E) {
|
|
241
245
|
case "top":
|
|
242
|
-
z = a - n / 2, T = d -
|
|
246
|
+
z = a - n / 2, T = d - w - r;
|
|
243
247
|
break;
|
|
244
248
|
case "bottom":
|
|
245
|
-
z = a - n / 2, T = h +
|
|
249
|
+
z = a - n / 2, T = h + w;
|
|
246
250
|
break;
|
|
247
251
|
case "left":
|
|
248
|
-
z = p -
|
|
252
|
+
z = p - w - n, T = l - r / 2;
|
|
249
253
|
break;
|
|
250
254
|
case "right":
|
|
251
|
-
z = u +
|
|
255
|
+
z = u + w, T = l - r / 2;
|
|
252
256
|
break;
|
|
253
257
|
default:
|
|
254
|
-
z = a - n / 2, T = d -
|
|
258
|
+
z = a - n / 2, T = d - w - r;
|
|
255
259
|
}
|
|
256
|
-
const L = Tt(z, T, n, r,
|
|
260
|
+
const L = Tt(z, T, n, r, k, b);
|
|
257
261
|
return $ = E === "top" || E === "bottom" ? z - L.x : T - L.y, {
|
|
258
262
|
x: L.x,
|
|
259
263
|
y: L.y,
|
|
@@ -423,7 +427,7 @@ class q {
|
|
|
423
427
|
/** Show the popover */
|
|
424
428
|
show() {
|
|
425
429
|
var t, e;
|
|
426
|
-
this.clearHideTimer(), !this.visible && (this.visible = !0,
|
|
430
|
+
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));
|
|
427
431
|
}
|
|
428
432
|
/** Schedule hide with delay (for hover mode) */
|
|
429
433
|
scheduleHide(t = 200) {
|
|
@@ -434,7 +438,7 @@ class q {
|
|
|
434
438
|
/** Hide the popover immediately */
|
|
435
439
|
hide() {
|
|
436
440
|
var t, e;
|
|
437
|
-
this.clearHideTimer(), this.visible && (this.visible = !1,
|
|
441
|
+
this.clearHideTimer(), this.visible && (this.visible = !1, y(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "true"), (e = (t = this.options).onClose) == null || e.call(t, this.hotspot));
|
|
438
442
|
}
|
|
439
443
|
/** Clear any pending hide timer */
|
|
440
444
|
clearHideTimer() {
|
|
@@ -548,13 +552,13 @@ class Rt {
|
|
|
548
552
|
};
|
|
549
553
|
this.container.addEventListener("dblclick", e), this.cleanups.push(() => this.container.removeEventListener("dblclick", e));
|
|
550
554
|
const o = (n) => {
|
|
551
|
-
!this.enabled || this.zoom <= 1 || n.button === 0 && (this.isDragging = !0, this.dragStartX = n.clientX, this.dragStartY = n.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY,
|
|
555
|
+
!this.enabled || this.zoom <= 1 || n.button === 0 && (this.isDragging = !0, this.dragStartX = n.clientX, this.dragStartY = n.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY, m(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = "grabbing", n.preventDefault());
|
|
552
556
|
}, s = (n) => {
|
|
553
557
|
if (!this.isDragging) return;
|
|
554
558
|
const r = (n.clientX - this.dragStartX) / this.zoom, a = (n.clientY - this.dragStartY) / this.zoom;
|
|
555
559
|
this.panX = this.lastPanX + r, this.panY = this.lastPanY + a, this.clampPan(), this.applyTransform();
|
|
556
560
|
}, c = () => {
|
|
557
|
-
this.isDragging && (this.isDragging = !1,
|
|
561
|
+
this.isDragging && (this.isDragging = !1, y(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = this.zoom > 1 ? "grab" : "");
|
|
558
562
|
};
|
|
559
563
|
this.container.addEventListener("mousedown", o), document.addEventListener("mousemove", s), document.addEventListener("mouseup", c), this.cleanups.push(
|
|
560
564
|
() => this.container.removeEventListener("mousedown", o),
|
|
@@ -831,7 +835,7 @@ function Jt(i, t = {}) {
|
|
|
831
835
|
function c() {
|
|
832
836
|
var u;
|
|
833
837
|
const p = s();
|
|
834
|
-
e.innerHTML = p ? qt : tt, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ?
|
|
838
|
+
e.innerHTML = p ? qt : tt, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ? m(i, "ci-hotspot-container--fullscreen") : y(i, "ci-hotspot-container--fullscreen"), (u = t.onChange) == null || u.call(t, p);
|
|
835
839
|
}
|
|
836
840
|
function n() {
|
|
837
841
|
s() ? Z().catch(() => {
|
|
@@ -854,7 +858,7 @@ function Jt(i, t = {}) {
|
|
|
854
858
|
o.push(d), i.appendChild(e);
|
|
855
859
|
function h() {
|
|
856
860
|
s() && Z().catch(() => {
|
|
857
|
-
}),
|
|
861
|
+
}), y(i, "ci-hotspot-container--fullscreen"), o.forEach((p) => p()), o.length = 0, e.remove();
|
|
858
862
|
}
|
|
859
863
|
return {
|
|
860
864
|
element: e,
|
|
@@ -865,7 +869,7 @@ function Jt(i, t = {}) {
|
|
|
865
869
|
destroy: h
|
|
866
870
|
};
|
|
867
871
|
}
|
|
868
|
-
const Qt = '.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}}', P = class P {
|
|
872
|
+
const Qt = '.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}}', P = class P {
|
|
869
873
|
constructor(t, e) {
|
|
870
874
|
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 = mt(t), this.config = j(e), B(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), Q(), gt(Qt), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive();
|
|
871
875
|
}
|
|
@@ -884,18 +888,20 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
884
888
|
alt: this.config.alt || "",
|
|
885
889
|
draggable: "false"
|
|
886
890
|
}), this.markersEl = v("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) {
|
|
887
|
-
|
|
891
|
+
m(this.containerEl, "ci-hotspot-container--fixed-ratio");
|
|
888
892
|
const t = this.config.sceneAspectRatio.split(/[:/\s]+/).map(Number);
|
|
889
893
|
t.length >= 2 && t[0] > 0 && t[1] > 0 && (this.viewportEl.style.paddingBottom = `${t[1] / t[0] * 100}%`);
|
|
890
894
|
}
|
|
891
|
-
this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad &&
|
|
895
|
+
this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad && m(this.containerEl, "ci-hotspot-loading");
|
|
892
896
|
}
|
|
893
897
|
applyTheme() {
|
|
894
|
-
this.config.theme === "dark"
|
|
898
|
+
this.config.theme === "dark" ? m(this.containerEl, "ci-hotspot-theme-dark") : y(this.containerEl, "ci-hotspot-theme-dark");
|
|
899
|
+
const t = this.config.markerTheme && this.config.markerTheme !== "default" ? this.config.markerTheme : this.config.invertMarkerTheme ? "inverted" : "default";
|
|
900
|
+
y(this.containerEl, "ci-hotspot-marker-inverted"), y(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));
|
|
895
901
|
}
|
|
896
902
|
setupImage() {
|
|
897
903
|
const t = () => {
|
|
898
|
-
|
|
904
|
+
y(this.containerEl, "ci-hotspot-loading"), this.imageLoaded = !0, this.renormalizePixelCoordinates(), this.syncMarkersToImage(), this.showLoadTriggerPopovers();
|
|
899
905
|
};
|
|
900
906
|
if (this.imgEl.addEventListener("load", t), this.cleanups.push(() => this.imgEl.removeEventListener("load", t)), this.config.lazyLoad && typeof IntersectionObserver < "u") {
|
|
901
907
|
const e = new IntersectionObserver(
|
|
@@ -945,8 +951,8 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
945
951
|
A(p), this.markers.delete(t.id), (d = this.popovers.get(t.id)) == null || d.destroy(), this.popovers.delete(t.id);
|
|
946
952
|
const u = this.hotspotCleanups.get(t.id);
|
|
947
953
|
u && (u.forEach((b) => b()), this.hotspotCleanups.delete(t.id));
|
|
948
|
-
const
|
|
949
|
-
|
|
954
|
+
const k = this.focusTraps.get(t.id);
|
|
955
|
+
k && (k.destroy(), this.focusTraps.delete(t.id));
|
|
950
956
|
}
|
|
951
957
|
const { x: e, y: o } = G(
|
|
952
958
|
t.x,
|
|
@@ -961,8 +967,8 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
961
967
|
if (t.navigateTo) {
|
|
962
968
|
const p = this.enrichNavigateHotspot(t);
|
|
963
969
|
if (!!(p.data || p.content || this.config.renderPopover)) {
|
|
964
|
-
const
|
|
965
|
-
placement:
|
|
970
|
+
const k = t.placement || this.config.placement || "top", b = new q(p, {
|
|
971
|
+
placement: k,
|
|
966
972
|
triggerMode: "hover",
|
|
967
973
|
renderFn: this.config.renderPopover,
|
|
968
974
|
onOpen: this.config.onOpen,
|
|
@@ -980,7 +986,7 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
980
986
|
onOpen: this.config.onOpen,
|
|
981
987
|
onClose: this.config.onClose
|
|
982
988
|
});
|
|
983
|
-
this.popovers.set(t.id, l), l.mount(this.containerEl, n), this.bindTrigger(t, n, l, r), r === "load" && this.imageLoaded && (this.closeAll(), l.show(),
|
|
989
|
+
this.popovers.set(t.id, l), l.mount(this.containerEl, n), this.bindTrigger(t, n, l, r), r === "load" && this.imageLoaded && (this.closeAll(), l.show(), g(n, !0), this.ensureFocusTrap(t.id, l.element, n), (h = this.focusTraps.get(t.id)) == null || h.activate());
|
|
984
990
|
}
|
|
985
991
|
/** For navigateTo hotspots without explicit data/content, generate popover content from the destination scene */
|
|
986
992
|
enrichNavigateHotspot(t) {
|
|
@@ -992,24 +998,24 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
992
998
|
} : t;
|
|
993
999
|
}
|
|
994
1000
|
bindNavigateTrigger(t, e, o) {
|
|
995
|
-
if (
|
|
1001
|
+
if (m(e, "ci-hotspot-marker--navigate"), e.innerHTML = P.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
|
|
996
1002
|
const r = e.querySelector("svg");
|
|
997
1003
|
r && (r.style.transform = `rotate(${t.arrowDirection}deg)`);
|
|
998
1004
|
}
|
|
999
1005
|
const s = t.label || t.navigateTo;
|
|
1000
1006
|
if (e.setAttribute("aria-label", `Navigate to ${s}`), e.setAttribute("aria-roledescription", "navigation hotspot"), o) {
|
|
1001
1007
|
const r = f(e, "mouseenter", () => {
|
|
1002
|
-
this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(),
|
|
1008
|
+
this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), g(e, !0);
|
|
1003
1009
|
}), a = () => {
|
|
1004
1010
|
this.trackedTimeout(() => {
|
|
1005
|
-
o.isVisible() ||
|
|
1011
|
+
o.isVisible() || g(e, !1);
|
|
1006
1012
|
}, 250);
|
|
1007
1013
|
}, l = f(e, "mouseleave", () => {
|
|
1008
1014
|
o.scheduleHide(200), a();
|
|
1009
1015
|
}), d = f(o.element, "mouseleave", () => {
|
|
1010
1016
|
a();
|
|
1011
1017
|
}), h = f(e, "focus", () => {
|
|
1012
|
-
this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(),
|
|
1018
|
+
this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), g(e, !0);
|
|
1013
1019
|
}), p = f(e, "blur", () => {
|
|
1014
1020
|
o.scheduleHide(200), a();
|
|
1015
1021
|
});
|
|
@@ -1024,10 +1030,10 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1024
1030
|
}
|
|
1025
1031
|
const c = f(e, "click", (r) => {
|
|
1026
1032
|
var a, l, d;
|
|
1027
|
-
r.stopPropagation(), o == null || o.hide(),
|
|
1033
|
+
r.stopPropagation(), o == null || o.hide(), g(e, !1), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), this.goToScene(t.navigateTo);
|
|
1028
1034
|
}), n = f(e, "keydown", (r) => {
|
|
1029
1035
|
var a, l, d;
|
|
1030
|
-
(r.key === "Enter" || r.key === " ") && (r.preventDefault(), o == null || o.hide(),
|
|
1036
|
+
(r.key === "Enter" || r.key === " ") && (r.preventDefault(), o == null || o.hide(), g(e, !1), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), this.goToScene(t.navigateTo));
|
|
1031
1037
|
});
|
|
1032
1038
|
this.addHotspotCleanups(t.id, c, n);
|
|
1033
1039
|
}
|
|
@@ -1036,10 +1042,10 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1036
1042
|
}
|
|
1037
1043
|
bindHoverTrigger(t, e, o) {
|
|
1038
1044
|
const s = f(e, "mouseenter", () => {
|
|
1039
|
-
o.clearHideTimer(), o.show(),
|
|
1045
|
+
o.clearHideTimer(), o.show(), g(e, !0);
|
|
1040
1046
|
}), c = () => {
|
|
1041
1047
|
this.trackedTimeout(() => {
|
|
1042
|
-
o.isVisible() ||
|
|
1048
|
+
o.isVisible() || g(e, !1);
|
|
1043
1049
|
}, 250);
|
|
1044
1050
|
}, n = f(e, "mouseleave", () => {
|
|
1045
1051
|
o.scheduleHide(200), c();
|
|
@@ -1053,22 +1059,22 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1053
1059
|
this.focusTraps.set(t.id, s);
|
|
1054
1060
|
const c = f(e, "click", (r) => {
|
|
1055
1061
|
var a, l, d;
|
|
1056
|
-
r.stopPropagation(), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), o.isVisible() ? (o.hide(),
|
|
1062
|
+
r.stopPropagation(), (l = (a = this.config).onClick) == null || l.call(a, r, t), (d = t.onClick) == null || d.call(t, r, t), o.isVisible() ? (o.hide(), g(e, !1), s.deactivate()) : (this.closeAll(), o.show(), g(e, !0), s.activate());
|
|
1057
1063
|
}), n = f(this.containerEl, "click", (r) => {
|
|
1058
|
-
o.isVisible() && !t.keepOpen && !o.element.contains(r.target) && !e.contains(r.target) && (o.hide(),
|
|
1064
|
+
o.isVisible() && !t.keepOpen && !o.element.contains(r.target) && !e.contains(r.target) && (o.hide(), g(e, !1), s.deactivate());
|
|
1059
1065
|
});
|
|
1060
1066
|
this.addHotspotCleanups(t.id, c, n);
|
|
1061
1067
|
}
|
|
1062
1068
|
bindKeyboardTrigger(t, e, o, s) {
|
|
1063
1069
|
const c = f(e, "focus", () => {
|
|
1064
|
-
s === "hover" && (o.clearHideTimer(), o.show(),
|
|
1070
|
+
s === "hover" && (o.clearHideTimer(), o.show(), g(e, !0));
|
|
1065
1071
|
}), n = f(e, "blur", () => {
|
|
1066
1072
|
s === "hover" && (o.scheduleHide(200), this.trackedTimeout(() => {
|
|
1067
|
-
o.isVisible() ||
|
|
1073
|
+
o.isVisible() || g(e, !1);
|
|
1068
1074
|
}, 250));
|
|
1069
1075
|
}), r = f(e, "keydown", (a) => {
|
|
1070
1076
|
var l, d, h, p, u;
|
|
1071
|
-
a.key === "Enter" || a.key === " " ? (a.preventDefault(), (d = (l = this.config).onClick) == null || d.call(l, a, t), o.isVisible() ? (o.hide(),
|
|
1077
|
+
a.key === "Enter" || a.key === " " ? (a.preventDefault(), (d = (l = this.config).onClick) == null || d.call(l, a, t), o.isVisible() ? (o.hide(), g(e, !1), (h = this.focusTraps.get(t.id)) == null || h.deactivate()) : (this.closeAll(), o.show(), g(e, !0), this.ensureFocusTrap(t.id, o.element, e), (p = this.focusTraps.get(t.id)) == null || p.activate())) : a.key === "Escape" && o.isVisible() && (o.hide(), g(e, !1), (u = this.focusTraps.get(t.id)) == null || u.deactivate(), e.focus());
|
|
1072
1078
|
});
|
|
1073
1079
|
this.addHotspotCleanups(t.id, c, n, r);
|
|
1074
1080
|
}
|
|
@@ -1091,7 +1097,7 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1091
1097
|
if (((s == null ? void 0 : s.trigger) || this.config.trigger || "hover") === "load" && !o.isVisible()) {
|
|
1092
1098
|
o.show();
|
|
1093
1099
|
const n = this.markers.get(e);
|
|
1094
|
-
n && (
|
|
1100
|
+
n && (g(n, !0), this.ensureFocusTrap(e, o.element, n), (t = this.focusTraps.get(e)) == null || t.activate());
|
|
1095
1101
|
break;
|
|
1096
1102
|
}
|
|
1097
1103
|
}
|
|
@@ -1241,7 +1247,7 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1241
1247
|
return;
|
|
1242
1248
|
}
|
|
1243
1249
|
const c = this.getSceneTransitionDuration();
|
|
1244
|
-
|
|
1250
|
+
m(this.containerEl, "ci-hotspot-scene-transitioning");
|
|
1245
1251
|
const n = v("img", "ci-hotspot-scene-incoming", {
|
|
1246
1252
|
alt: t.alt || "",
|
|
1247
1253
|
draggable: "false"
|
|
@@ -1252,19 +1258,19 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1252
1258
|
} else
|
|
1253
1259
|
n.src = t.src;
|
|
1254
1260
|
const r = () => {
|
|
1255
|
-
this.destroyed || (e === "fade" ? (
|
|
1261
|
+
this.destroyed || (e === "fade" ? (m(n, "ci-hotspot-scene-fade-in"), m(this.imgEl, "ci-hotspot-scene-fade-out")) : e === "slide" && (m(n, `ci-hotspot-scene-slide-in${o}`), m(this.imgEl, `ci-hotspot-scene-slide-out${o}`)), this.viewportEl.insertBefore(n, this.markersEl), this.transitionTimer = setTimeout(() => {
|
|
1256
1262
|
if (this.transitionTimer = void 0, this.destroyed) return;
|
|
1257
1263
|
this.clearHotspots(), this.switchToScene(t);
|
|
1258
1264
|
const l = () => {
|
|
1259
|
-
n.remove(),
|
|
1265
|
+
n.remove(), y(this.imgEl, "ci-hotspot-scene-fade-out"), y(this.imgEl, `ci-hotspot-scene-slide-out${o}`), y(this.containerEl, "ci-hotspot-scene-transitioning"), s();
|
|
1260
1266
|
};
|
|
1261
1267
|
this.imgEl.complete && this.imgEl.naturalWidth > 0 ? l() : (this.imgEl.addEventListener("load", l, { once: !0 }), this.imgEl.addEventListener("error", l, { once: !0 }));
|
|
1262
1268
|
}, c));
|
|
1263
1269
|
};
|
|
1264
|
-
n.complete ? r() : (
|
|
1265
|
-
|
|
1270
|
+
n.complete ? r() : (m(this.containerEl, "ci-hotspot-scene-loading"), n.onload = () => {
|
|
1271
|
+
y(this.containerEl, "ci-hotspot-scene-loading"), r();
|
|
1266
1272
|
}, n.onerror = () => {
|
|
1267
|
-
this.destroyed || (
|
|
1273
|
+
this.destroyed || (y(this.containerEl, "ci-hotspot-scene-loading"), n.remove(), y(this.containerEl, "ci-hotspot-scene-transitioning"), this.clearHotspots(), this.switchToScene(t), s());
|
|
1268
1274
|
});
|
|
1269
1275
|
}
|
|
1270
1276
|
switchToScene(t) {
|
|
@@ -1294,13 +1300,13 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1294
1300
|
var s;
|
|
1295
1301
|
if (this.destroyed) return;
|
|
1296
1302
|
const e = this.popovers.get(t), o = this.markers.get(t);
|
|
1297
|
-
!e || !o || e.isVisible() || (this.closeAll(), e.show(),
|
|
1303
|
+
!e || !o || e.isVisible() || (this.closeAll(), e.show(), g(o, !0), (s = this.focusTraps.get(t)) == null || s.activate());
|
|
1298
1304
|
}
|
|
1299
1305
|
close(t) {
|
|
1300
1306
|
var s;
|
|
1301
1307
|
if (this.destroyed) return;
|
|
1302
1308
|
const e = this.popovers.get(t), o = this.markers.get(t);
|
|
1303
|
-
e && o && (e.hide(),
|
|
1309
|
+
e && o && (e.hide(), g(o, !1), (s = this.focusTraps.get(t)) == null || s.deactivate());
|
|
1304
1310
|
}
|
|
1305
1311
|
closeAll() {
|
|
1306
1312
|
var t;
|
|
@@ -1309,7 +1315,7 @@ const Qt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
|
|
|
1309
1315
|
if (o.isVisible()) {
|
|
1310
1316
|
o.hide();
|
|
1311
1317
|
const s = this.markers.get(e);
|
|
1312
|
-
s &&
|
|
1318
|
+
s && g(s, !1), (t = this.focusTraps.get(e)) == null || t.deactivate();
|
|
1313
1319
|
}
|
|
1314
1320
|
}
|
|
1315
1321
|
}
|
|
@@ -1598,17 +1604,17 @@ const se = ct(
|
|
|
1598
1604
|
})), O(() => {
|
|
1599
1605
|
if (!r.current || !c) return;
|
|
1600
1606
|
const h = new MutationObserver(() => {
|
|
1601
|
-
var
|
|
1602
|
-
const p = (
|
|
1607
|
+
var k;
|
|
1608
|
+
const p = (k = r.current) == null ? void 0 : k.querySelectorAll("[data-react-portal]");
|
|
1603
1609
|
if (!p) return;
|
|
1604
1610
|
const u = /* @__PURE__ */ new Map();
|
|
1605
1611
|
p.forEach((b) => {
|
|
1606
|
-
const
|
|
1607
|
-
|
|
1612
|
+
const w = b.dataset.reactPortal;
|
|
1613
|
+
w && u.set(w, b);
|
|
1608
1614
|
}), d((b) => {
|
|
1609
1615
|
if (b.size !== u.size) return u;
|
|
1610
|
-
for (const [
|
|
1611
|
-
if (b.get(
|
|
1616
|
+
for (const [w, M] of u)
|
|
1617
|
+
if (b.get(w) !== M) return u;
|
|
1612
1618
|
return b;
|
|
1613
1619
|
});
|
|
1614
1620
|
});
|
|
@@ -1616,8 +1622,8 @@ const se = ct(
|
|
|
1616
1622
|
}, [c]), /* @__PURE__ */ rt(N, { children: [
|
|
1617
1623
|
/* @__PURE__ */ W("div", { ref: r, className: o, style: s }),
|
|
1618
1624
|
c && Array.from(l.entries()).map(([h, p]) => {
|
|
1619
|
-
var
|
|
1620
|
-
const u = (
|
|
1625
|
+
var k;
|
|
1626
|
+
const u = (k = t.hotspots) == null ? void 0 : k.find((b) => b.id === h);
|
|
1621
1627
|
return u ? ht(
|
|
1622
1628
|
/* @__PURE__ */ W(N, { children: c(u) }),
|
|
1623
1629
|
p,
|