@eka-care/medassist-widget-embed 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/iframe.html +21 -1
- package/dist/iframe.js +36 -0
- package/iframe.html +21 -1
- package/iframe.ts +32 -0
- package/package.json +1 -1
package/dist/iframe.html
CHANGED
|
@@ -21,17 +21,37 @@
|
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
23
|
left: 0;
|
|
24
|
+
background-color: #1a1a1a;
|
|
24
25
|
}
|
|
25
26
|
#root {
|
|
26
27
|
width: 100vw;
|
|
27
28
|
height: 100vh;
|
|
28
29
|
height: 100dvh; /* Dynamic viewport height for mobile */
|
|
29
30
|
position: relative;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
background-color: #1a1a1a;
|
|
35
|
+
}
|
|
36
|
+
.loader {
|
|
37
|
+
width: 48px;
|
|
38
|
+
height: 48px;
|
|
39
|
+
border: 3px solid rgba(255, 255, 255, 0.1);
|
|
40
|
+
border-top-color: #09FBD3;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
animation: loader-spin 0.8s linear infinite;
|
|
43
|
+
}
|
|
44
|
+
@keyframes loader-spin {
|
|
45
|
+
to {
|
|
46
|
+
transform: rotate(360deg);
|
|
47
|
+
}
|
|
30
48
|
}
|
|
31
49
|
</style>
|
|
32
50
|
</head>
|
|
33
51
|
<body>
|
|
34
|
-
<div id="root"
|
|
52
|
+
<div id="root">
|
|
53
|
+
<div class="loader" aria-hidden="true"></div>
|
|
54
|
+
</div>
|
|
35
55
|
<!-- for local development -->
|
|
36
56
|
<!-- <script src="./iframe.js" data-widget-assets="local" async></script> -->
|
|
37
57
|
|
package/dist/iframe.js
CHANGED
|
@@ -40,6 +40,22 @@
|
|
|
40
40
|
...(apiTheme.title_img && { titleImg: apiTheme.title_img }),
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
|
+
/** Preload an image by URL so it is cached and loads faster when the widget uses it. */
|
|
44
|
+
function preloadImage(url) {
|
|
45
|
+
if (!url || typeof document === "undefined")
|
|
46
|
+
return;
|
|
47
|
+
try {
|
|
48
|
+
const link = document.createElement("link");
|
|
49
|
+
link.rel = "preload";
|
|
50
|
+
link.as = "image";
|
|
51
|
+
link.href = url;
|
|
52
|
+
document.head.appendChild(link);
|
|
53
|
+
}
|
|
54
|
+
catch {
|
|
55
|
+
const img = new Image();
|
|
56
|
+
img.src = url;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
43
59
|
/** Fetch agent-config from API with timeout; aborts if pending > 10s */
|
|
44
60
|
async function fetchAgentConfig(baseUrl, agentId) {
|
|
45
61
|
var _a;
|
|
@@ -142,6 +158,26 @@
|
|
|
142
158
|
const agentConfigPromise = earlyAgentId && earlyBaseUrl
|
|
143
159
|
? fetchAgentConfig(earlyBaseUrl, earlyAgentId)
|
|
144
160
|
: Promise.resolve(undefined);
|
|
161
|
+
// Preload background image when available (theme URL param or agent-config)
|
|
162
|
+
if (typeof document !== "undefined" && document.head) {
|
|
163
|
+
const themeParam = urlParams.get("theme");
|
|
164
|
+
if (themeParam) {
|
|
165
|
+
try {
|
|
166
|
+
const theme = JSON.parse(themeParam);
|
|
167
|
+
if (theme.backgroundImage)
|
|
168
|
+
preloadImage(theme.backgroundImage);
|
|
169
|
+
}
|
|
170
|
+
catch {
|
|
171
|
+
// ignore
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
agentConfigPromise.then((agentConfig) => {
|
|
175
|
+
var _a;
|
|
176
|
+
const url = (_a = agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.theme) === null || _a === void 0 ? void 0 : _a.background_img;
|
|
177
|
+
if (url)
|
|
178
|
+
preloadImage(url);
|
|
179
|
+
});
|
|
180
|
+
}
|
|
145
181
|
// Auto-initialize from URL parameters (no shadow DOM needed in iframe)
|
|
146
182
|
const initializeFromUrlParams = async () => {
|
|
147
183
|
var _a, _b, _c, _d, _e;
|
package/iframe.html
CHANGED
|
@@ -21,17 +21,37 @@
|
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
23
|
left: 0;
|
|
24
|
+
background-color: #1a1a1a;
|
|
24
25
|
}
|
|
25
26
|
#root {
|
|
26
27
|
width: 100vw;
|
|
27
28
|
height: 100vh;
|
|
28
29
|
height: 100dvh; /* Dynamic viewport height for mobile */
|
|
29
30
|
position: relative;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
background-color: #1a1a1a;
|
|
35
|
+
}
|
|
36
|
+
.loader {
|
|
37
|
+
width: 48px;
|
|
38
|
+
height: 48px;
|
|
39
|
+
border: 3px solid rgba(255, 255, 255, 0.1);
|
|
40
|
+
border-top-color: #09FBD3;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
animation: loader-spin 0.8s linear infinite;
|
|
43
|
+
}
|
|
44
|
+
@keyframes loader-spin {
|
|
45
|
+
to {
|
|
46
|
+
transform: rotate(360deg);
|
|
47
|
+
}
|
|
30
48
|
}
|
|
31
49
|
</style>
|
|
32
50
|
</head>
|
|
33
51
|
<body>
|
|
34
|
-
<div id="root"
|
|
52
|
+
<div id="root">
|
|
53
|
+
<div class="loader" aria-hidden="true"></div>
|
|
54
|
+
</div>
|
|
35
55
|
<!-- for local development -->
|
|
36
56
|
<!-- <script src="./iframe.js" data-widget-assets="local" async></script> -->
|
|
37
57
|
|
package/iframe.ts
CHANGED
|
@@ -74,6 +74,21 @@
|
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
+
/** Preload an image by URL so it is cached and loads faster when the widget uses it. */
|
|
78
|
+
function preloadImage(url: string): void {
|
|
79
|
+
if (!url || typeof document === "undefined") return;
|
|
80
|
+
try {
|
|
81
|
+
const link = document.createElement("link");
|
|
82
|
+
link.rel = "preload";
|
|
83
|
+
link.as = "image";
|
|
84
|
+
link.href = url;
|
|
85
|
+
document.head.appendChild(link);
|
|
86
|
+
} catch {
|
|
87
|
+
const img = new Image();
|
|
88
|
+
img.src = url;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
77
92
|
/** Fetch agent-config from API with timeout; aborts if pending > 10s */
|
|
78
93
|
async function fetchAgentConfig(
|
|
79
94
|
baseUrl: string,
|
|
@@ -188,6 +203,23 @@
|
|
|
188
203
|
? fetchAgentConfig(earlyBaseUrl, earlyAgentId)
|
|
189
204
|
: Promise.resolve(undefined);
|
|
190
205
|
|
|
206
|
+
// Preload background image when available (theme URL param or agent-config)
|
|
207
|
+
if (typeof document !== "undefined" && document.head) {
|
|
208
|
+
const themeParam = urlParams.get("theme");
|
|
209
|
+
if (themeParam) {
|
|
210
|
+
try {
|
|
211
|
+
const theme = JSON.parse(themeParam) as WidgetTheme;
|
|
212
|
+
if (theme.backgroundImage) preloadImage(theme.backgroundImage);
|
|
213
|
+
} catch {
|
|
214
|
+
// ignore
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
agentConfigPromise.then((agentConfig) => {
|
|
218
|
+
const url = agentConfig?.theme?.background_img;
|
|
219
|
+
if (url) preloadImage(url);
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
|
|
191
223
|
// Auto-initialize from URL parameters (no shadow DOM needed in iframe)
|
|
192
224
|
const initializeFromUrlParams = async (): Promise<void> => {
|
|
193
225
|
const agentId = urlParams.get("agentId");
|