@pexip-engage-public/plugin 1.1.26-canary-20250728164214 → 1.1.26
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/CHANGELOG.md +2 -3
- package/dist/events/index.d.ts +0 -11
- package/dist/events/index.d.ts.map +1 -1
- package/dist/events/index.js +0 -2
- package/dist/events/index.js.map +1 -1
- package/dist/instance/PexipEngagePluginFrame.d.ts +1 -11
- package/dist/instance/PexipEngagePluginFrame.d.ts.map +1 -1
- package/dist/instance/PexipEngagePluginFrame.js +6 -46
- package/dist/instance/PexipEngagePluginFrame.js.map +1 -1
- package/dist/instance/PluginInstance.d.ts.map +1 -1
- package/dist/instance/PluginInstance.js +35 -34
- package/dist/instance/PluginInstance.js.map +1 -1
- package/dist/state/PluginState.schema.d.ts +6 -6
- package/package.json +9 -10
- package/src/@types/iframe-resizer.iframeResizer.d.ts +211 -0
- package/src/events/index.ts +0 -14
- package/src/instance/PexipEngagePluginFrame.ts +8 -66
- package/src/instance/PluginInstance.ts +44 -36
- package/dist/resizer/child.d.ts +0 -15
- package/dist/resizer/child.d.ts.map +0 -1
- package/dist/resizer/child.js +0 -96
- package/dist/resizer/child.js.map +0 -1
- package/dist/resizer/common.d.ts +0 -27
- package/dist/resizer/common.d.ts.map +0 -1
- package/dist/resizer/common.js +0 -4
- package/dist/resizer/common.js.map +0 -1
- package/dist/resizer/parent.d.ts +0 -3
- package/dist/resizer/parent.d.ts.map +0 -1
- package/dist/resizer/parent.js +0 -71
- package/dist/resizer/parent.js.map +0 -1
- package/src/resizer/child.ts +0 -140
- package/src/resizer/common.ts +0 -27
- package/src/resizer/parent.ts +0 -110
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
declare module "iframe-resizer/js/iframeResizer.js" {
|
|
2
|
+
export interface IFrameObject {
|
|
3
|
+
/**
|
|
4
|
+
* Remove the iFrame from the page.
|
|
5
|
+
*/
|
|
6
|
+
close(): void;
|
|
7
|
+
/**
|
|
8
|
+
* Detach event listeners from iFrame. This is option allows Virtual DOMs to remove an iFrame tag. It should not normally be required.
|
|
9
|
+
*/
|
|
10
|
+
removeListeners(): void;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Move to anchor in iFrame.
|
|
14
|
+
*/
|
|
15
|
+
moveToAnchor(anchor: string): void;
|
|
16
|
+
/**
|
|
17
|
+
* Tell the iFrame to resize itself.
|
|
18
|
+
*/
|
|
19
|
+
resize(): void;
|
|
20
|
+
/**
|
|
21
|
+
*
|
|
22
|
+
* Send data to the containing page, message can be any data type that can be serialized into JSON. The targetOrigin option is used to restrict where the message is sent to, in case your iFrame navigates away to another domain.
|
|
23
|
+
*/
|
|
24
|
+
sendMessage(
|
|
25
|
+
message: import("../events/event-types.js").IFrameObjectMessage,
|
|
26
|
+
targetOrigin?: string,
|
|
27
|
+
): void;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface IFrameComponent extends HTMLIFrameElement {
|
|
31
|
+
iFrameResizer: IFrameObject;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export interface IFrameOptions {
|
|
35
|
+
/**
|
|
36
|
+
* When enabled changes to the Window size or the DOM will cause the iFrame to resize to the new content size.
|
|
37
|
+
* Disable if using size method with custom dimensions.
|
|
38
|
+
*/
|
|
39
|
+
autoResize?: boolean | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* Override the body background style in the iFrame.
|
|
42
|
+
*/
|
|
43
|
+
bodyBackground?: string | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* Override the default body margin style in the iFrame. A string can be any valid value for the
|
|
46
|
+
* CSS margin attribute, for example '8px 3em'. A number value is converted into px.
|
|
47
|
+
*/
|
|
48
|
+
bodyMargin?: number | string | undefined;
|
|
49
|
+
/**
|
|
50
|
+
* Override the default body padding style in the iFrame. A string can be any valid value for the
|
|
51
|
+
* CSS margin attribute, for example '8px 3em'. A number value is converted into px.
|
|
52
|
+
*/
|
|
53
|
+
bodyPadding?: number | string | undefined;
|
|
54
|
+
/**
|
|
55
|
+
* When set to true, only allow incoming messages from the domain listed in the src property of the iFrame tag.
|
|
56
|
+
* If your iFrame navigates between different domains, ports or protocols; then you will need to
|
|
57
|
+
* provide an array of URLs or disable this option.
|
|
58
|
+
*/
|
|
59
|
+
checkOrigin?: boolean | string[] | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* When enabled in page linking inside the iFrame and from the iFrame to the parent page will be enabled.
|
|
62
|
+
*/
|
|
63
|
+
inPageLinks?: boolean | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* Height calculation method.
|
|
66
|
+
*/
|
|
67
|
+
heightCalculationMethod?: HeightCalculationMethod | undefined;
|
|
68
|
+
/**
|
|
69
|
+
* Setting the log option to true will make the scripts in both the host page and the iFrame output
|
|
70
|
+
* everything they do to the JavaScript console so you can see the communication between the two scripts.
|
|
71
|
+
*/
|
|
72
|
+
log?: boolean | undefined;
|
|
73
|
+
/**
|
|
74
|
+
* Set maximum height of iFrame.
|
|
75
|
+
*/
|
|
76
|
+
maxHeight?: number | undefined;
|
|
77
|
+
/**
|
|
78
|
+
* Set maximum width of iFrame.
|
|
79
|
+
*/
|
|
80
|
+
maxWidth?: number | undefined;
|
|
81
|
+
/**
|
|
82
|
+
* Set minimum height of iFrame.
|
|
83
|
+
*/
|
|
84
|
+
minHeight?: number | undefined;
|
|
85
|
+
/**
|
|
86
|
+
* Set minimum width of iFrame.
|
|
87
|
+
*/
|
|
88
|
+
minWidth?: number | undefined;
|
|
89
|
+
/**
|
|
90
|
+
* Listen for resize events from the parent page, or the iFrame. Select the 'child' value if the iFrame
|
|
91
|
+
* can be resized independently of the browser window. Selecting this value can cause issues with some
|
|
92
|
+
* height calculation methods on mobile devices.
|
|
93
|
+
*/
|
|
94
|
+
resizeFrom?: "parent" | "child" | undefined;
|
|
95
|
+
/**
|
|
96
|
+
* Enable scroll bars in iFrame.
|
|
97
|
+
*/
|
|
98
|
+
scrolling?: boolean | "omit" | undefined;
|
|
99
|
+
/**
|
|
100
|
+
* Resize iFrame to content height.
|
|
101
|
+
*/
|
|
102
|
+
sizeHeight?: boolean | undefined;
|
|
103
|
+
/**
|
|
104
|
+
* Resize iFrame to content width.
|
|
105
|
+
*/
|
|
106
|
+
sizeWidth?: boolean | undefined;
|
|
107
|
+
/**
|
|
108
|
+
* Set the number of pixels the iFrame content size has to change by, before triggering a resize of the iFrame.
|
|
109
|
+
*/
|
|
110
|
+
tolerance?: number | undefined;
|
|
111
|
+
/**
|
|
112
|
+
* Width calculation method.
|
|
113
|
+
*/
|
|
114
|
+
widthCalculationMethod?: WidthCalculationMethod | undefined;
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* Called when iFrame is closed via parentIFrame.close() or iframe.iframeResizer.close() methods.
|
|
118
|
+
* Returning false will prevent the iFrame from closing.
|
|
119
|
+
*/
|
|
120
|
+
onClose?(iframeId: string): boolean;
|
|
121
|
+
/**
|
|
122
|
+
*
|
|
123
|
+
* Called after iFrame is closed via parentIFrame.close() or iframe.iFrameResizer.close() methods.
|
|
124
|
+
*/
|
|
125
|
+
onClosed?(iframeId: string): void;
|
|
126
|
+
/**
|
|
127
|
+
* Initial setup callback function.
|
|
128
|
+
*/
|
|
129
|
+
onInit?(iframe: IFrameComponent): void;
|
|
130
|
+
/**
|
|
131
|
+
* Receive message posted from iFrame with the parentIFrame.sendMessage() method.
|
|
132
|
+
*/
|
|
133
|
+
onMessage?(data: IFrameMessageData): void;
|
|
134
|
+
/**
|
|
135
|
+
*
|
|
136
|
+
* Function called after the mouse enters the iframe. Passes messageData object containing the iFrame, screenX, screenY and the type of event that triggered the callback.
|
|
137
|
+
*/
|
|
138
|
+
onMouseEnter?(data: {
|
|
139
|
+
iframe: IFrameComponent;
|
|
140
|
+
height: number;
|
|
141
|
+
width: number;
|
|
142
|
+
type: string;
|
|
143
|
+
}): void;
|
|
144
|
+
/**
|
|
145
|
+
*
|
|
146
|
+
* Function called after the mouse leaves the iframe. Passes messageData object containing the iFrame, screenX, screenY and the type of event that triggered the callback.
|
|
147
|
+
*/
|
|
148
|
+
onMouseLeave?(data: {
|
|
149
|
+
iframe: IFrameComponent;
|
|
150
|
+
height: number;
|
|
151
|
+
width: number;
|
|
152
|
+
type: string;
|
|
153
|
+
}): void;
|
|
154
|
+
/**
|
|
155
|
+
* Function called after iFrame resized. Passes in messageData object containing the iFrame, height, width
|
|
156
|
+
* and the type of event that triggered the iFrame to resize.
|
|
157
|
+
*/
|
|
158
|
+
onResized?(data: IFrameResizedData): void;
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* Called before the page is repositioned after a request from the iFrame, due to either an in page link,
|
|
162
|
+
* or a direct request from either parentIFrame.scrollTo() or parentIFrame.scrollToOffset().
|
|
163
|
+
* If this callback function returns false, it will stop the library from repositioning the page, so that
|
|
164
|
+
* you can implement your own animated page scrolling instead.
|
|
165
|
+
*/
|
|
166
|
+
onScroll?(data: IFrameScrollData): boolean;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
type HeightCalculationMethod =
|
|
170
|
+
| "bodyOffset"
|
|
171
|
+
| "bodyScroll"
|
|
172
|
+
| "documentElementOffset"
|
|
173
|
+
| "documentElementScroll"
|
|
174
|
+
| "max"
|
|
175
|
+
| "min"
|
|
176
|
+
| "grow"
|
|
177
|
+
| "lowestElement"
|
|
178
|
+
| "taggedElement";
|
|
179
|
+
|
|
180
|
+
type WidthCalculationMethod =
|
|
181
|
+
| "bodyOffset"
|
|
182
|
+
| "bodyScroll"
|
|
183
|
+
| "documentElementOffset"
|
|
184
|
+
| "documentElementScroll"
|
|
185
|
+
| "max"
|
|
186
|
+
| "min"
|
|
187
|
+
| "scroll"
|
|
188
|
+
| "rightMostElement"
|
|
189
|
+
| "taggedElement";
|
|
190
|
+
|
|
191
|
+
export interface IFrameResizedData {
|
|
192
|
+
iframe: IFrameComponent;
|
|
193
|
+
height: number;
|
|
194
|
+
width: number;
|
|
195
|
+
type: string;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
export interface IFrameMessageData {
|
|
199
|
+
iframe: IFrameComponent;
|
|
200
|
+
message: import("../events/event-types.js").IFrameMessage;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export interface IFrameScrollData {
|
|
204
|
+
x: number;
|
|
205
|
+
y: number;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
function iframeResizer(options: IFrameOptions, target: string | HTMLElement): IFrameComponent[];
|
|
209
|
+
|
|
210
|
+
export default iframeResizer;
|
|
211
|
+
}
|
package/src/events/index.ts
CHANGED
|
@@ -1,16 +1,2 @@
|
|
|
1
|
-
import type { IFrameMessage, IFrameObjectMessage } from "./event-types.js";
|
|
2
|
-
|
|
3
1
|
// biome-ignore lint/performance/noReExportAll: types only, ignore
|
|
4
2
|
export * from "./event-types.js";
|
|
5
|
-
export const IFRAME_CHILD_MESSAGE = "iframe-child-message";
|
|
6
|
-
export const IFRAME_PARENT_MESSAGE = "iframe-parent-message";
|
|
7
|
-
|
|
8
|
-
export type IframeChildMessageEventData = {
|
|
9
|
-
type: typeof IFRAME_CHILD_MESSAGE;
|
|
10
|
-
message: IFrameObjectMessage;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export type IframeParentMessageEventData = {
|
|
14
|
-
type: typeof IFRAME_PARENT_MESSAGE;
|
|
15
|
-
message: IFrameMessage;
|
|
16
|
-
};
|
|
@@ -1,73 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IFRAME_CHILD_MESSAGE,
|
|
3
|
-
IFRAME_PARENT_MESSAGE,
|
|
4
|
-
type IFrameMessage,
|
|
5
|
-
type IFrameObjectMessage,
|
|
6
|
-
} from "../events/index.js";
|
|
7
|
-
import { initialize } from "../resizer/parent.js";
|
|
8
|
-
|
|
9
1
|
const SPINNER_STYLE =
|
|
10
2
|
"<style>@keyframes spin{to{transform: rotate(360deg);}}.container{display: flex; align-items: center; justify-content: center; height: calc(700px - 1rem);}svg{fill: rgb(10 33 54); color: rgb(229 231 235); animation: spin 1s linear infinite;}</style>";
|
|
11
3
|
const SPINNER_DOM = `<div class="container"><svg aria-hidden="true" fill="none" viewBox="0 0 100 101" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" ></path> <path fill="currentFill" d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"></path></svg></div>`;
|
|
12
4
|
|
|
13
5
|
const spinnerHtml = `<!DOCTYPE html><html><head>${SPINNER_STYLE}</head><body>${SPINNER_DOM}</body></html>`;
|
|
6
|
+
|
|
7
|
+
const spinnerTemplate = document.createElement("template");
|
|
8
|
+
spinnerTemplate.innerHTML = `${SPINNER_STYLE}${SPINNER_DOM}`;
|
|
9
|
+
|
|
14
10
|
class PexipEngagePluginFrame extends HTMLElement {
|
|
15
11
|
readonly #shadowRoot: ShadowRoot;
|
|
16
|
-
static observedAttributes = ["src"];
|
|
17
|
-
#cleanup: (() => void) | null = null;
|
|
18
|
-
#iframe: HTMLIFrameElement | null = null;
|
|
19
|
-
|
|
20
12
|
constructor() {
|
|
21
13
|
super();
|
|
22
|
-
|
|
23
14
|
this.#shadowRoot = this.attachShadow({ mode: "open" });
|
|
15
|
+
this.#shadowRoot.appendChild(spinnerTemplate.content.cloneNode(true));
|
|
24
16
|
}
|
|
25
17
|
|
|
26
|
-
|
|
27
|
-
console.log("PexipEngagePluginFrame connected");
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
disconnectedCallback() {
|
|
31
|
-
console.log("PexipEngagePluginFrame disconnected");
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
connectedMoveCallback() {
|
|
35
|
-
console.log("PexipEngagePluginFrame moved");
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
adoptedCallback() {
|
|
39
|
-
console.log("PexipEngagePluginFrame adopted");
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
|
|
43
|
-
console.log(`Attribute ${name} has changed from ${oldValue} to ${newValue}.`);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
postMessage(message: IFrameObjectMessage) {
|
|
47
|
-
this.#iframe?.contentWindow?.postMessage({ message, type: IFRAME_CHILD_MESSAGE }, "*");
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
validateMessageEvent(event: MessageEvent) {
|
|
51
|
-
const isTargetIframe =
|
|
52
|
-
Boolean(this.#iframe?.contentWindow && this.#iframe.contentWindow === event.source) &&
|
|
53
|
-
event.data.type === IFRAME_PARENT_MESSAGE;
|
|
54
|
-
|
|
55
|
-
if (!isTargetIframe) {
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const message = event.data.message as IFrameMessage;
|
|
60
|
-
|
|
61
|
-
return message;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
createPexipPlugin() {
|
|
65
|
-
this.#cleanup?.();
|
|
66
|
-
const src = this.getAttribute("src");
|
|
67
|
-
if (!src) throw new Error("Source URL is required to create the Pexip Engage Plugin frame.");
|
|
68
|
-
|
|
18
|
+
createPexipPlugin(src: string): HTMLIFrameElement {
|
|
69
19
|
const iframe = document.createElement("iframe");
|
|
70
|
-
this.#iframe = iframe;
|
|
71
20
|
iframe.src = src;
|
|
72
21
|
iframe.style.border = "0px";
|
|
73
22
|
iframe.style.overflow = "hidden";
|
|
@@ -79,21 +28,14 @@ class PexipEngagePluginFrame extends HTMLElement {
|
|
|
79
28
|
iframe.referrerPolicy = "strict-origin-when-cross-origin";
|
|
80
29
|
iframe.allow = "clipboard-write; geolocation";
|
|
81
30
|
|
|
31
|
+
// iframe.loading = "lazy";
|
|
82
32
|
iframe.onload = () => iframe.removeAttribute("srcdoc");
|
|
83
33
|
iframe.srcdoc = spinnerHtml;
|
|
84
34
|
|
|
85
35
|
this.#shadowRoot.innerHTML = "";
|
|
86
36
|
this.#shadowRoot.appendChild(iframe);
|
|
87
37
|
|
|
88
|
-
|
|
89
|
-
this.#cleanup = () => {
|
|
90
|
-
result.unsubscribe();
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
unsubscribe() {
|
|
95
|
-
this.#cleanup?.();
|
|
96
|
-
this.#cleanup = null;
|
|
38
|
+
return iframe;
|
|
97
39
|
}
|
|
98
40
|
}
|
|
99
41
|
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { getCurrentPosition } from "@pexip-engage-public/utils/get-current-position";
|
|
2
|
+
import resizer, {
|
|
3
|
+
type IFrameComponent,
|
|
4
|
+
type IFrameMessageData,
|
|
5
|
+
} from "iframe-resizer/js/iframeResizer.js";
|
|
6
|
+
|
|
2
7
|
import { parsePluginConfiguration } from "../configuration-parser/index.js";
|
|
3
8
|
import { encodeURIParameters, pluginSearchParams } from "../encoding.js";
|
|
4
9
|
import type {
|
|
@@ -22,12 +27,13 @@ import { getPexipEngagePluginFrame } from "./PexipEngagePluginFrame.js";
|
|
|
22
27
|
|
|
23
28
|
type PluginEventListener = (event: PluginCustomEvent) => unknown;
|
|
24
29
|
|
|
30
|
+
const PexipEngagePluginFrame = getPexipEngagePluginFrame();
|
|
31
|
+
|
|
25
32
|
export class PluginInstance {
|
|
33
|
+
#instance: IFrameComponent;
|
|
26
34
|
readonly #target: HTMLElement;
|
|
27
|
-
#element: InstanceType<ReturnType<typeof getPexipEngagePluginFrame>> | null = null;
|
|
28
35
|
#state: StateUpdateMessage["payload"] | null = null;
|
|
29
36
|
#meta: Record<string, unknown> = {};
|
|
30
|
-
// biome-ignore lint/correctness/noUnusedPrivateClassMembers: Not in use currently
|
|
31
37
|
#status: "pending" | "success" | "error" | "disposed" = "pending";
|
|
32
38
|
#fallbackTimeoutId: number | null = null;
|
|
33
39
|
readonly #fallbackHTML: string;
|
|
@@ -58,7 +64,7 @@ export class PluginInstance {
|
|
|
58
64
|
this.#fallbackHTML = existingInstance ? existingInstance.#fallbackHTML : this.#target.innerHTML;
|
|
59
65
|
existingInstance?.dispose();
|
|
60
66
|
|
|
61
|
-
this.#createInstance();
|
|
67
|
+
this.#instance = this.#createInstance();
|
|
62
68
|
PluginInstance.#instances.push(this);
|
|
63
69
|
queueMacroTask(() => {
|
|
64
70
|
dispatchEvent({
|
|
@@ -70,10 +76,7 @@ export class PluginInstance {
|
|
|
70
76
|
});
|
|
71
77
|
}
|
|
72
78
|
|
|
73
|
-
#handleMessage = async (
|
|
74
|
-
const message = this.#element?.validateMessageEvent(event);
|
|
75
|
-
if (!message) return;
|
|
76
|
-
|
|
79
|
+
#handleMessage = async ({ message }: IFrameMessageData) => {
|
|
77
80
|
if (message.type === "STATE_UPDATE") {
|
|
78
81
|
this.#state = message.payload;
|
|
79
82
|
|
|
@@ -111,7 +114,7 @@ export class PluginInstance {
|
|
|
111
114
|
});
|
|
112
115
|
}
|
|
113
116
|
|
|
114
|
-
this.#
|
|
117
|
+
this.#instance.iFrameResizer.sendMessage({
|
|
115
118
|
payload: { meta: this.#meta },
|
|
116
119
|
type: "PRE_APPOINTMENT_REQUEST",
|
|
117
120
|
});
|
|
@@ -120,7 +123,7 @@ export class PluginInstance {
|
|
|
120
123
|
}
|
|
121
124
|
|
|
122
125
|
if (message.type === "REQUEST_ORIGIN_URL") {
|
|
123
|
-
this.#
|
|
126
|
+
this.#instance.iFrameResizer.sendMessage({
|
|
124
127
|
payload: { href: window.location.href },
|
|
125
128
|
type: "REQUEST_ORIGIN_URL",
|
|
126
129
|
});
|
|
@@ -131,7 +134,7 @@ export class PluginInstance {
|
|
|
131
134
|
if (message.type === "REQUEST_GEOLOCATION") {
|
|
132
135
|
const geolocation = getCurrentPosition();
|
|
133
136
|
|
|
134
|
-
this.#
|
|
137
|
+
this.#instance.iFrameResizer.sendMessage({
|
|
135
138
|
payload: await geolocation.catch((error) =>
|
|
136
139
|
typeof error === "string" ? { error } : { error: "Unknown error" },
|
|
137
140
|
),
|
|
@@ -171,38 +174,44 @@ export class PluginInstance {
|
|
|
171
174
|
};
|
|
172
175
|
|
|
173
176
|
#createInstance() {
|
|
174
|
-
const searchParams = pluginSearchParams.encode(this.#config.config);
|
|
175
|
-
const src = `${PluginInstance.#url}/plugin?${searchParams}`;
|
|
176
|
-
|
|
177
|
-
const PexipEngagePluginFrame = getPexipEngagePluginFrame();
|
|
178
177
|
const container = new PexipEngagePluginFrame();
|
|
179
|
-
container.setAttribute("src", src);
|
|
180
|
-
|
|
181
|
-
this.#element = container;
|
|
182
178
|
this.#target.innerHTML = "";
|
|
183
179
|
this.#target.appendChild(container);
|
|
184
180
|
|
|
185
|
-
|
|
186
|
-
|
|
181
|
+
const searchParams = pluginSearchParams.encode(this.#config.config);
|
|
182
|
+
const src = `${PluginInstance.#url}/plugin?${searchParams}`;
|
|
187
183
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
184
|
+
const iframe = container.createPexipPlugin(src);
|
|
185
|
+
const self = this;
|
|
186
|
+
const [instance] = resizer(
|
|
187
|
+
{
|
|
188
|
+
checkOrigin: false,
|
|
189
|
+
heightCalculationMethod: "taggedElement",
|
|
190
|
+
log: false,
|
|
191
|
+
onInit() {
|
|
192
|
+
self.#status = "success";
|
|
193
|
+
dispatchEvent({
|
|
194
|
+
bubbles: true,
|
|
195
|
+
cancelable: true,
|
|
196
|
+
detail: { instance: self, type: PluginInstance.EVENT_LOADED },
|
|
197
|
+
target: self.#target,
|
|
198
|
+
});
|
|
199
|
+
},
|
|
200
|
+
onMessage: this.#handleMessage,
|
|
201
|
+
resizeFrom: "child",
|
|
202
|
+
},
|
|
203
|
+
iframe,
|
|
204
|
+
);
|
|
195
205
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
}
|
|
206
|
+
if (!instance) throw new Error("Failed to create resizer instance");
|
|
207
|
+
|
|
208
|
+
return instance;
|
|
200
209
|
}
|
|
201
210
|
|
|
202
211
|
#restart = () => {
|
|
203
|
-
window.removeEventListener("message", this.#handleMessage);
|
|
204
212
|
// leave event listeners intact.
|
|
205
|
-
this.#
|
|
213
|
+
this.#instance.iFrameResizer.close();
|
|
214
|
+
this.#instance = this.#createInstance();
|
|
206
215
|
};
|
|
207
216
|
|
|
208
217
|
/** Destroy the instance */
|
|
@@ -217,8 +226,7 @@ export class PluginInstance {
|
|
|
217
226
|
window.clearTimeout(this.#fallbackTimeoutId);
|
|
218
227
|
}
|
|
219
228
|
|
|
220
|
-
|
|
221
|
-
this.#element?.unsubscribe();
|
|
229
|
+
this.#instance.iFrameResizer.close();
|
|
222
230
|
const idx = PluginInstance.#instances.indexOf(this);
|
|
223
231
|
if (idx !== -1) {
|
|
224
232
|
PluginInstance.#instances.splice(idx, 1);
|
|
@@ -230,11 +238,11 @@ export class PluginInstance {
|
|
|
230
238
|
setCSSVariable = (name: string, value: string) => {
|
|
231
239
|
warnPrivate({ name: "setCSSVariable", type: "function" });
|
|
232
240
|
|
|
233
|
-
this.#
|
|
241
|
+
this.#instance.iFrameResizer.sendMessage({ payload: { name, value }, type: "CSS_VAR_UPDATE" });
|
|
234
242
|
};
|
|
235
243
|
|
|
236
244
|
setCustomCSS = (css: string) => {
|
|
237
|
-
this.#
|
|
245
|
+
this.#instance.iFrameResizer.sendMessage({ payload: { css }, type: "CUSTOM_CSS_UPDATE" });
|
|
238
246
|
};
|
|
239
247
|
|
|
240
248
|
#listeners = new Set<EventListener>();
|
package/dist/resizer/child.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { IFrameMessage, IFrameObjectMessage } from "../events/index.js";
|
|
2
|
-
export declare class IframeChildInstance {
|
|
3
|
-
#private;
|
|
4
|
-
sendMessage: (message: IFrameMessage) => void;
|
|
5
|
-
scrollToOffset: (offset: {
|
|
6
|
-
top: number;
|
|
7
|
-
}) => void;
|
|
8
|
-
constructor({ onReady, onMessage, }: {
|
|
9
|
-
onReady: () => void;
|
|
10
|
-
onMessage: (message: IFrameObjectMessage) => void;
|
|
11
|
-
});
|
|
12
|
-
initialize: () => void;
|
|
13
|
-
unsubscribe: () => void;
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=child.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"child.d.ts","sourceRoot":"","sources":["../../src/resizer/child.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EAGpB,MAAM,oBAAoB,CAAC;AAQ5B,qBAAa,mBAAmB;;IAgD9B,WAAW,GAAI,SAAS,aAAa,UAanC;IAEF,cAAc,GAAI,QAAQ;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,UAOvC;gBAyBU,EACV,OAAO,EACP,SAAS,GACV,EAAE;QACD,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;KACnD;IAKD,UAAU,aAIR;IAEF,WAAW,aAGT;CACH"}
|
package/dist/resizer/child.js
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import { isBrowser, } from "./common.js";
|
|
2
|
-
export class IframeChildInstance {
|
|
3
|
-
#queue = [];
|
|
4
|
-
#isQueueConsumed = false;
|
|
5
|
-
#initialized = false;
|
|
6
|
-
#_resizeObserver = null;
|
|
7
|
-
get #resizeObserver() {
|
|
8
|
-
if (!this.#_resizeObserver) {
|
|
9
|
-
this.#_resizeObserver = new ResizeObserver((entries) => {
|
|
10
|
-
console.log("ResizeObserver entries:", entries);
|
|
11
|
-
if (!entries[0]?.target) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
const clientRect = entries[0].target.getBoundingClientRect();
|
|
15
|
-
const height = Math.ceil(clientRect.height);
|
|
16
|
-
const width = Math.ceil(clientRect.width);
|
|
17
|
-
const data = {
|
|
18
|
-
height,
|
|
19
|
-
type: "iframe-resized",
|
|
20
|
-
width,
|
|
21
|
-
};
|
|
22
|
-
window.parent.postMessage(data, "*");
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
return this.#_resizeObserver;
|
|
26
|
-
}
|
|
27
|
-
#handleInitializeSignal = (event) => {
|
|
28
|
-
const elementToObserve = document.documentElement;
|
|
29
|
-
if (this.#initialized || window.parent !== event.source) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
this.#resizeObserver.disconnect();
|
|
33
|
-
console.log("Observing element for resize:", elementToObserve);
|
|
34
|
-
this.#resizeObserver.observe(elementToObserve);
|
|
35
|
-
this.#initialized = true;
|
|
36
|
-
this.#isQueueConsumed = true;
|
|
37
|
-
this.#queue.forEach((message) => this.sendMessage(message));
|
|
38
|
-
this.#queue.length = 0;
|
|
39
|
-
this.#onReady();
|
|
40
|
-
};
|
|
41
|
-
sendMessage = (message) => {
|
|
42
|
-
if (!this.#isQueueConsumed && isInIframe()) {
|
|
43
|
-
this.#queue.push(message);
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const data = {
|
|
47
|
-
message,
|
|
48
|
-
type: "iframe-parent-message",
|
|
49
|
-
};
|
|
50
|
-
this.#sendMessage(data);
|
|
51
|
-
};
|
|
52
|
-
scrollToOffset = (offset) => {
|
|
53
|
-
const data = {
|
|
54
|
-
top: offset.top,
|
|
55
|
-
type: "iframe-scroll-to-offset",
|
|
56
|
-
};
|
|
57
|
-
this.#sendMessage(data);
|
|
58
|
-
};
|
|
59
|
-
#sendMessage(data) {
|
|
60
|
-
if (!isBrowser() || !isInIframe())
|
|
61
|
-
return;
|
|
62
|
-
window.parent.postMessage(data, "*");
|
|
63
|
-
}
|
|
64
|
-
#handleMessage = (event) => {
|
|
65
|
-
if (event.data?.type === "iframe-child-init") {
|
|
66
|
-
return deferWhenWindowDocumentIsLoaded(() => this.#handleInitializeSignal(event));
|
|
67
|
-
}
|
|
68
|
-
if (event.data?.type === "iframe-child-message") {
|
|
69
|
-
this.#onMessage(event.data.message);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
#onReady;
|
|
73
|
-
#onMessage;
|
|
74
|
-
constructor({ onReady, onMessage, }) {
|
|
75
|
-
this.#onReady = onReady;
|
|
76
|
-
this.#onMessage = onMessage;
|
|
77
|
-
}
|
|
78
|
-
initialize = () => {
|
|
79
|
-
if (!isBrowser() || !isInIframe())
|
|
80
|
-
return;
|
|
81
|
-
window.addEventListener("message", this.#handleMessage);
|
|
82
|
-
};
|
|
83
|
-
unsubscribe = () => {
|
|
84
|
-
window.removeEventListener("message", this.#handleMessage);
|
|
85
|
-
this.#resizeObserver.disconnect();
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
function isInIframe() {
|
|
89
|
-
return window.self !== window.top;
|
|
90
|
-
}
|
|
91
|
-
function deferWhenWindowDocumentIsLoaded(executable) {
|
|
92
|
-
window.document.readyState === "complete"
|
|
93
|
-
? executable()
|
|
94
|
-
: window.addEventListener("load", executable);
|
|
95
|
-
}
|
|
96
|
-
//# sourceMappingURL=child.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"child.js","sourceRoot":"","sources":["../../src/resizer/child.ts"],"names":[],"mappings":"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"}
|
package/dist/resizer/common.d.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export declare function isBrowser(): boolean;
|
|
2
|
-
export type InitializeResult = {
|
|
3
|
-
unsubscribe: () => void;
|
|
4
|
-
};
|
|
5
|
-
export type IframeResizeEventData = {
|
|
6
|
-
type: "iframe-resized";
|
|
7
|
-
width: number;
|
|
8
|
-
height?: number;
|
|
9
|
-
};
|
|
10
|
-
export type IframeScrollData = {
|
|
11
|
-
type: "iframe-scroll-to-offset";
|
|
12
|
-
top: number;
|
|
13
|
-
};
|
|
14
|
-
export type IframeChildInitEventData = {
|
|
15
|
-
type: "iframe-child-init";
|
|
16
|
-
};
|
|
17
|
-
export type IframeResizeEvent = MessageEvent<IframeResizeEventData>;
|
|
18
|
-
export type IframeScrollEvent = MessageEvent<IframeScrollData>;
|
|
19
|
-
export interface RegisteredElement {
|
|
20
|
-
iframe: HTMLIFrameElement;
|
|
21
|
-
initContext: {
|
|
22
|
-
isInitialized: boolean;
|
|
23
|
-
retryAttempts: number;
|
|
24
|
-
retryTimeoutId?: number;
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
//# sourceMappingURL=common.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/resizer/common.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,YAExB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,yBAAyB,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,mBAAmB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,qBAAqB,CAAC,CAAC;AACpE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,WAAW,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,aAAa,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzF"}
|
package/dist/resizer/common.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/resizer/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC"}
|
package/dist/resizer/parent.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"parent.d.ts","sourceRoot":"","sources":["../../src/resizer/parent.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,gBAAgB,EAGtB,MAAM,aAAa,CAAC;AAIrB,wBAAgB,UAAU,CAAC,MAAM,EAAE,iBAAiB,GAAG,gBAAgB,CAkBtE"}
|