@epigraph/solutions 0.0.1-alpha → 0.0.4-alpha
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 +13 -0
- package/dist/AppHelpers-DdbyrHJf.js +1702 -0
- package/dist/HotspotsManager-mmFi8qV9.js +1426 -0
- package/dist/ObjectTransforms-D_d0xJKX.js +21 -0
- package/dist/baseUiComponent-_PPHqnvV.js +1214 -0
- package/dist/dimensions-manager.js +439 -0
- package/dist/epg-button-view-in-your-space-29ehH_AX.js +72 -0
- package/dist/epigraph-button.js +191 -0
- package/dist/epigraph-solutions.js +14 -0
- package/dist/epigraph-threed-core-oXi9QFHJ.js +21421 -0
- package/dist/epigraph-threed-core.js +8 -0
- package/dist/epigraph-tour.js +196 -0
- package/dist/epigraph-viewer-7qd24J-r.js +9722 -0
- package/dist/epigraph-viewer.js +12 -0
- package/dist/hotspots-manager.js +6 -0
- package/dist/screenshots-manager.js +90 -0
- package/dist/three.module-CYfxkCtM.js +17845 -0
- package/package.json +6 -5
- package/dist/assets/index.js +0 -8371
- package/dist/assets/styles.css +0 -1
- package/dist/index.html +0 -55
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import "./HotspotsManager-mmFi8qV9.js";
|
|
2
|
+
import { V as r, E as p } from "./epigraph-viewer-7qd24J-r.js";
|
|
3
|
+
import "./epg-button-view-in-your-space-29ehH_AX.js";
|
|
4
|
+
import "./dimensions-manager.js";
|
|
5
|
+
import { E as h, x as l } from "./three.module-CYfxkCtM.js";
|
|
6
|
+
import { P as m, A as c } from "./AppHelpers-DdbyrHJf.js";
|
|
7
|
+
class d extends r {
|
|
8
|
+
constructor({ nexusApiResultPayload: t }) {
|
|
9
|
+
super({ nexusApiResultPayload: t }), this._loggerContext = "TOUR EXPERIENCE DATA", this._data = t, window.epigraph.logger.info({ title: "nexusApiPayload", details: t, contextOverride: this._loggerContext });
|
|
10
|
+
}
|
|
11
|
+
getHotspots() {
|
|
12
|
+
return this._data.product_variant.hotspots;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
class o extends p {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(), this.featuresToEnable = {
|
|
18
|
+
viewer: !0,
|
|
19
|
+
hotspots: !0,
|
|
20
|
+
dimensions: !0,
|
|
21
|
+
viewInYourSpace: !0,
|
|
22
|
+
help: !0
|
|
23
|
+
}, this.epigraphWebsiteRedirectUrls = {
|
|
24
|
+
icon: "https://www.epigraph.us/?utm_source=web&utm_medium=experience&utm_campaign=tour&utm_id=powered-by&utm_content=icon",
|
|
25
|
+
modal: "https://www.epigraph.us/?utm_source=web&utm_medium=experience&utm_campaign=tour&utm_id=powered-by&utm_content=icon"
|
|
26
|
+
}, this._loggerContext = o.webComponentName.toUpperCase();
|
|
27
|
+
}
|
|
28
|
+
static {
|
|
29
|
+
this.webComponentName = "epigraph-tour";
|
|
30
|
+
}
|
|
31
|
+
static {
|
|
32
|
+
this.styles = [super.styles];
|
|
33
|
+
}
|
|
34
|
+
static setupWebComponent() {
|
|
35
|
+
window.customElements.get(o.webComponentName) || window.customElements.define(o.webComponentName, o);
|
|
36
|
+
}
|
|
37
|
+
async _fetchDataFromNexus() {
|
|
38
|
+
const t = new m(
|
|
39
|
+
c.resolveNexusEndpoint(this.apiMode),
|
|
40
|
+
window.location.href,
|
|
41
|
+
window.epigraph.epigraphSessionId,
|
|
42
|
+
this.solutionVersion,
|
|
43
|
+
this.xPath
|
|
44
|
+
);
|
|
45
|
+
let e = null;
|
|
46
|
+
switch (this._identifierType) {
|
|
47
|
+
case "sku":
|
|
48
|
+
e = await t.getTourBySku(this._identifier);
|
|
49
|
+
break;
|
|
50
|
+
case "shopify_variant_id":
|
|
51
|
+
e = await t.getTourByShopifyVariantId(this._identifier);
|
|
52
|
+
break;
|
|
53
|
+
case "upc":
|
|
54
|
+
e = await t.getTourByUpc(this._identifier);
|
|
55
|
+
break;
|
|
56
|
+
case "asin":
|
|
57
|
+
e = await t.getTourByAsin(this._identifier);
|
|
58
|
+
break;
|
|
59
|
+
default:
|
|
60
|
+
return window.epigraph.logger.error({
|
|
61
|
+
title: `Identifier type: '${this._identifierType}' not supported!`,
|
|
62
|
+
contextOverride: this._loggerContext
|
|
63
|
+
}), Promise.reject();
|
|
64
|
+
}
|
|
65
|
+
return e;
|
|
66
|
+
}
|
|
67
|
+
_initializeExperienceData(t) {
|
|
68
|
+
this._experienceData = new d({ nexusApiResultPayload: t.payload });
|
|
69
|
+
}
|
|
70
|
+
toggleHotspots() {
|
|
71
|
+
this.hotspotsManager.enabled ? this.hideHotspots() : this.showHotspots();
|
|
72
|
+
}
|
|
73
|
+
showHotspots() {
|
|
74
|
+
window.epigraph.logger.info({ title: "Showing Hotspots" }), this.hotspotsManager.enabled = !0, this.areHotspotsActive = !0, this.cameraManager.mainCameraControls.maxDistance = this.cameraManager.mainCameraControls.maxDistance + 0.3, this.appEvents.hotspotsVisibilityChanged.fire({ visible: !0 });
|
|
75
|
+
}
|
|
76
|
+
hideHotspots() {
|
|
77
|
+
window.epigraph.logger.info({ title: "Hiding Hotspots" }), this.hotspotsManager.enabled = !1, this.areHotspotsActive = !1, this.cameraManager.mainCameraControls.maxDistance = this.cameraManager.mainCameraControls.maxDistance - 0.3, this.appEvents.hotspotsVisibilityChanged.fire({ visible: !1 });
|
|
78
|
+
}
|
|
79
|
+
updateHotspotsOrder(t) {
|
|
80
|
+
this.hotspotsManager.updateHotspotsOrder(t);
|
|
81
|
+
}
|
|
82
|
+
_onHotspotsToolControlClick(t) {
|
|
83
|
+
t.stopPropagation(), t.preventDefault(), t.target.active ? this.showHotspots() : this.hideHotspots();
|
|
84
|
+
}
|
|
85
|
+
// Hotspot Tool functions
|
|
86
|
+
openHotspot({ hotspotId: t, state: e }) {
|
|
87
|
+
this.hotspotsManager.openHotspot({ hotspotId: t, state: e });
|
|
88
|
+
}
|
|
89
|
+
closeActiveHotspot() {
|
|
90
|
+
this.hotspotsManager.closeActiveHotspot();
|
|
91
|
+
}
|
|
92
|
+
setActiveHotspotState(t) {
|
|
93
|
+
this.hotspotsManager.setActiveHotspotState(t);
|
|
94
|
+
}
|
|
95
|
+
nextHotspot() {
|
|
96
|
+
return this.hotspotsManager.nextHotspot();
|
|
97
|
+
}
|
|
98
|
+
previousHotspot() {
|
|
99
|
+
return this.hotspotsManager.previousHotspot();
|
|
100
|
+
}
|
|
101
|
+
getActiveHotspot() {
|
|
102
|
+
return this.hotspotsManager.activeHotspot;
|
|
103
|
+
}
|
|
104
|
+
areHotspotsVisible() {
|
|
105
|
+
return this.hotspotsManager.enabled;
|
|
106
|
+
}
|
|
107
|
+
getAllHotspots() {
|
|
108
|
+
return Array.from(this.hotspotsManager.hotspots.values());
|
|
109
|
+
}
|
|
110
|
+
getAllHotspotIds() {
|
|
111
|
+
return Array.from(this.hotspotsManager.hotspots.keys());
|
|
112
|
+
}
|
|
113
|
+
// Getters
|
|
114
|
+
getHotspotById(t) {
|
|
115
|
+
return this.hotspotsManager.hotspots.get(t);
|
|
116
|
+
}
|
|
117
|
+
createHotspots(t) {
|
|
118
|
+
this.hotspotsManager.createHotspots(t);
|
|
119
|
+
}
|
|
120
|
+
updateHotspots(t) {
|
|
121
|
+
this.hotspotsManager.updateHotspots(t);
|
|
122
|
+
}
|
|
123
|
+
removeHotspots(t) {
|
|
124
|
+
this.hotspotsManager.removeHotspots(t);
|
|
125
|
+
}
|
|
126
|
+
_onCameraPositionUpdate() {
|
|
127
|
+
super._onCameraPositionUpdate(), this.hotspotsManager?.enabled && this.hotspotsManager.recalculateHotspotPositions();
|
|
128
|
+
}
|
|
129
|
+
_resolveAnimationsOnHotspotEntry(t) {
|
|
130
|
+
this.stopAllAnimations();
|
|
131
|
+
for (const e of t)
|
|
132
|
+
this._activeAnimations.get(e.entry) || this.playAnimationByName({ animationName: e.entry }), setTimeout(
|
|
133
|
+
() => {
|
|
134
|
+
this._activeAnimations.delete(e.entry), this._activeAnimations.get(e.loop)?.loop || this.playAnimationByName({
|
|
135
|
+
animationName: e.loop,
|
|
136
|
+
loop: !0
|
|
137
|
+
});
|
|
138
|
+
},
|
|
139
|
+
this._animationFadeDurationInMiliseconds
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
_setupEventListeners() {
|
|
143
|
+
super._setupEventListeners(), this.addEventListener(
|
|
144
|
+
this.appEvents.hotspotOpenEvent.name,
|
|
145
|
+
(t) => {
|
|
146
|
+
this._isActiveHotspot = !0, this._resolveAnimationsOnHotspotEntry(t.detail.hotspot.animation);
|
|
147
|
+
}
|
|
148
|
+
), this.addEventListener(
|
|
149
|
+
this.appEvents.hotspotClosedEvent.name,
|
|
150
|
+
() => {
|
|
151
|
+
this._isActiveHotspot = !1;
|
|
152
|
+
}
|
|
153
|
+
), this.addEventListener(
|
|
154
|
+
this.appEvents.hotspotNextEvent.name,
|
|
155
|
+
(t) => {
|
|
156
|
+
this._resolveAnimationsOnHotspotEntry(t.detail.hotspot.animation);
|
|
157
|
+
}
|
|
158
|
+
), this.addEventListener(
|
|
159
|
+
this.appEvents.hotspotPreviousEvent.name,
|
|
160
|
+
(t) => {
|
|
161
|
+
this._resolveAnimationsOnHotspotEntry(t.detail.hotspot.animation);
|
|
162
|
+
}
|
|
163
|
+
), this.addEventListener(
|
|
164
|
+
this.appEvents.hotspotClosedEvent.name,
|
|
165
|
+
(t) => {
|
|
166
|
+
const s = this.hotspotsManager.hotspots.get(t.detail.hotspotId)?.animation;
|
|
167
|
+
if (s)
|
|
168
|
+
for (const i of s) {
|
|
169
|
+
const a = i.loop, n = i.exit;
|
|
170
|
+
a && this.stopAnimationByName(a), n && this.playAnimationByName({ animationName: n });
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
_renderHotspotsToolControl() {
|
|
176
|
+
return this._experienceData?.getHotspots()?.length ? l`
|
|
177
|
+
<epg-tool-control
|
|
178
|
+
size="medium"
|
|
179
|
+
togglable="true"
|
|
180
|
+
left-icon="selective-solid"
|
|
181
|
+
label="Hotspots"
|
|
182
|
+
?show-label=${this._isToolsetLargerThanTheLeftBottomQuadrant}
|
|
183
|
+
tooltip-label="Hotspots"
|
|
184
|
+
tooltip-placement=${this._isToolsetLargerThanTheLeftBottomQuadrant ? "none" : "top-center"}
|
|
185
|
+
?active=${this.areHotspotsActive}
|
|
186
|
+
@epgonclick=${this._onHotspotsToolControlClick}
|
|
187
|
+
></epg-tool-control>
|
|
188
|
+
` : h;
|
|
189
|
+
}
|
|
190
|
+
_repopulateHotspotsOnIdentifierChange() {
|
|
191
|
+
this.hotspotsManager.removeAllHotspots(), this.createHotspots(this._experienceData.getHotspots());
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
export {
|
|
195
|
+
o as EpigraphTour
|
|
196
|
+
};
|