@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.
@@ -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
+ }
@@ -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
- connectedCallback() {
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
- const result = initialize(iframe);
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 (event: MessageEvent) => {
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.#element?.postMessage({
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.#element?.postMessage({
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.#element?.postMessage({
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
- try {
186
- container.createPexipPlugin();
181
+ const searchParams = pluginSearchParams.encode(this.#config.config);
182
+ const src = `${PluginInstance.#url}/plugin?${searchParams}`;
187
183
 
188
- this.#status = "success";
189
- dispatchEvent({
190
- bubbles: true,
191
- cancelable: true,
192
- detail: { instance: this, type: PluginInstance.EVENT_LOADED },
193
- target: this.#target,
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
- window.addEventListener("message", this.#handleMessage);
197
- } catch (err) {
198
- throw new Error("Failed to create resizer instance");
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.#createInstance();
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
- window.addEventListener("message", this.#handleMessage);
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.#element?.postMessage({ payload: { name, value }, type: "CSS_VAR_UPDATE" });
241
+ this.#instance.iFrameResizer.sendMessage({ payload: { name, value }, type: "CSS_VAR_UPDATE" });
234
242
  };
235
243
 
236
244
  setCustomCSS = (css: string) => {
237
- this.#element?.postMessage({ payload: { css }, type: "CUSTOM_CSS_UPDATE" });
245
+ this.#instance.iFrameResizer.sendMessage({ payload: { css }, type: "CUSTOM_CSS_UPDATE" });
238
246
  };
239
247
 
240
248
  #listeners = new Set<EventListener>();
@@ -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"}
@@ -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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"}
@@ -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"}
@@ -1,4 +0,0 @@
1
- export function isBrowser() {
2
- return typeof window !== "undefined";
3
- }
4
- //# sourceMappingURL=common.js.map
@@ -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"}
@@ -1,3 +0,0 @@
1
- import { type InitializeResult } from "./common.js";
2
- export declare function initialize(iframe: HTMLIFrameElement): InitializeResult;
3
- //# sourceMappingURL=parent.d.ts.map
@@ -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"}