@open-iframe-resizer/core 1.1.3 → 1.2.1

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 CHANGED
@@ -1,18 +1,23 @@
1
- # Open Iframe Resizer
1
+ # Open Iframe Resizer
2
+
3
+ ![NPM Version](https://img.shields.io/npm/v/%40open-iframe-resizer%2Fcore)
4
+ ![NPM License](https://img.shields.io/npm/l/%40open-iframe-resizer%2Fcore)
5
+ [![](https://data.jsdelivr.com/v1/package/npm/@open-iframe-resizer/core/badge)](https://www.jsdelivr.com/package/npm/@open-iframe-resizer/core)
2
6
 
3
7
  ## Overview
4
8
 
5
9
  A modern, lightweight alternative for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.
6
10
 
7
- If you found this plugin helpful, please consider starring the repository!
11
+ If you found this plugin helpful, please consider starring the repository!
8
12
 
9
13
  ## Getting Started
10
14
 
11
15
  ### Browser (ES6 modules)
12
16
 
13
17
  ```html
18
+
14
19
  <script type="module">
15
- import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";
20
+ import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";
16
21
 
17
22
  initialize({}, "#my-iframe");
18
23
  </script>
@@ -21,36 +26,57 @@ If you found this plugin helpful, please consider starring the repository!
21
26
  You can found a working example [here](https://codesandbox.io/p/sandbox/open-iframe-resize-browser-m655zt)
22
27
 
23
28
  ### Package
29
+
24
30
  Note you can also install the core package through [npm](https://www.npmjs.com/package/@open-iframe-resizer/core):
31
+
25
32
  ```bash
26
33
  npm install @open-iframe-resizer/core
27
34
  ```
28
35
 
29
36
  ### React
37
+
30
38
  A React component is also available:
39
+
31
40
  ```bash
32
41
  npm install @open-iframe-resizer/react
33
42
  ```
34
43
 
35
44
  ## Notes
36
45
 
37
- ### Comparison with iframe-resizer
38
- This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free.
39
- I decided to replicate some parts of the API, as it may facilitate migration to this project.
46
+ ### Performing actions after a resize
40
47
 
41
- Some features from this library are missing, but they could be implemented in future versions.
48
+ You can execute a custom function after an iframe has been resized. Also, you can use built-in functions
49
+ like `updateParentScrollOnResize` to help keep the iframe within the viewport after resizing:
50
+
51
+ ```javascript
52
+ import { initialize, updateParentScrollOnResize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";
53
+
54
+ initialize({ onIframeResize: updateParentScrollOnResize }, "#myIframe");
55
+ ```
42
56
 
43
57
  ### Resize iframes from a different origin
44
- - If you have control over the embedded page, you need to load the script on your child page to enable messaging between the two windows (you do not need to call the initialize function in the child; loading the module is sufficient).
45
58
 
46
- - If you have no control over the child iframe domain, and, by chance, the child page loads the legacy *iframe-resizer* script, you can initialize the library with the compatibility mode; it will try to connect to the child iframe:
59
+ - If you have control over the embedded page, you need to load the script on your child page to enable messaging between the two windows (you do not need to call the initialize function in the child;
60
+ loading the module is sufficient).
47
61
 
48
- ```javascript
49
- initialize({ enableLegacyLibSupport: true }, "#my-iframe");
50
- ```
62
+ Here is an example of the [parent page](https://codesandbox.io/p/sandbox/xj24pg) and the [child](https://codesandbox.io/p/sandbox/growing-iframe-msv4hr).
63
+
64
+
65
+ - If you have no control over the child iframe domain, and, by chance, the child page loads the legacy *iframe-resizer* script, you can initialize the library with the compatibility mode; it will try
66
+ to connect to the child iframe:
67
+ ```javascript
68
+ initialize({ enableLegacyLibSupport: true }, "#my-iframe");
69
+ ```
70
+
71
+ ### Comparison with iframe-resizer
72
+
73
+ This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free.
74
+ I decided to replicate some parts of the API, as it may facilitate migration to this project.
75
+
76
+ Some features from this library are missing, but they could be implemented in future versions.
51
77
 
52
78
  ## Browser support
53
79
 
54
- | Chrome | Safari | Firefox | Opera | IE |
55
- |--------|--------|---------|-------|-----------|
80
+ | Chrome | Safari | Firefox | Opera | IE |
81
+ |--------|--------|---------|-------|-------|
56
82
  | 64+ | 13.1+ | 69+ | 51+ | 🙅‍♂️ |
package/dist/index.d.ts CHANGED
@@ -1,3 +1,77 @@
1
- export * from './parent';
2
- export * from './child';
3
- export type * from './type';
1
+ export declare type IframeResizeEvent = MessageEvent<IframeResizeEventData>;
2
+
3
+ export declare type IframeResizeEventData = {
4
+ type: "iframe-resized";
5
+ width: number;
6
+ height?: number;
7
+ };
8
+
9
+ export declare const initialize: InitializeFunction;
10
+
11
+ export declare function initializeChildListener(): void;
12
+
13
+ /**
14
+ * Automatically resize the selected iframes when their inner content grows.
15
+ * @param settings The settings for the selected iframes. The default settings properties are picked if empty.
16
+ * @param selector The selector for the iframe(s) or the HTMLIFrameElement to be resized. If empty, all document iframe elements will be selected.
17
+ * @returns A result array, which can be used to clean up the listeners if you often remove iframes from the document.
18
+ */
19
+ export declare type InitializeFunction = (settings?: Partial<Settings>, selector?: string | HTMLIFrameElement) => InitializeResult[];
20
+
21
+ export declare type InitializeResult = { unsubscribe: () => void };
22
+
23
+ export declare type InteractionState = {
24
+ isHovered: boolean;
25
+ };
26
+
27
+ export declare type ResizeContext = {
28
+ iframe: HTMLIFrameElement;
29
+ settings: Settings;
30
+ interactionState: InteractionState;
31
+ previousRenderState: ResizeRenderState;
32
+ nextRenderState: ResizeRenderState;
33
+ };
34
+
35
+ export declare type ResizeRenderState = { rect: DOMRect };
36
+
37
+ export declare type Settings = {
38
+ /**
39
+ * Offset added to the resize size (in pixels).
40
+ *
41
+ * Default: `0`
42
+ */
43
+ offsetSize: number;
44
+ /**
45
+ * Specifies whether to check the origin of incoming messages.
46
+ * Accepts an array of allowed origins or a boolean.
47
+ * If `true`, incoming messages are allowed from the origins of the registered iframes.
48
+ *
49
+ * Default: `true`
50
+ */
51
+ checkOrigin: string[] | boolean;
52
+ /**
53
+ * Allows the library to communicate with a cross-origin child iframe
54
+ * containing the original "iframe-resizer" script.
55
+ * Useful if you do not control the child domain.
56
+ *
57
+ * Default: `false`
58
+ */
59
+ enableLegacyLibSupport: boolean;
60
+ /**
61
+ * Listener that is called after the iframe has been resized.
62
+ * You can use a predefined handler like `updateParentScrollOnResize` or create your own custom handler.
63
+ *
64
+ * Default: `undefined`
65
+ */
66
+ onIframeResize?: (context: ResizeContext) => void;
67
+ };
68
+
69
+ /**
70
+ * Resize handler that scrolls to restore the iframe's position in the viewport as it was before the resize.
71
+ *
72
+ * *Note:* This behavior only triggers if the iframe is currently being hovered by the user,
73
+ * in order to try to limit the number of scroll as it can affect the user experience.
74
+ */
75
+ export declare const updateParentScrollOnResize: ({ previousRenderState, nextRenderState, interactionState }: ResizeContext) => void;
76
+
77
+ export { }
package/dist/index.js CHANGED
@@ -1,145 +1,169 @@
1
- const m = () => window && window.self !== window.top, l = (e) => e instanceof HTMLIFrameElement, h = (e, n) => {
2
- e.document.readyState === "complete" ? n() : e.addEventListener("load", n);
3
- }, b = (e, n) => {
4
- n(), e.addEventListener("load", n);
5
- }, L = (e, n) => {
1
+ const g = () => typeof window < "u", L = () => window.self !== window.top, m = (e) => e instanceof HTMLIFrameElement, w = (e, t) => {
2
+ e.document.readyState === "complete" ? t() : e.addEventListener("load", t);
3
+ }, y = (e, t) => {
4
+ t(), e.addEventListener("load", t);
5
+ }, p = (e, t) => {
6
6
  var i, o;
7
- const t = ((i = e.contentWindow) == null ? void 0 : i.document.readyState) === "complete";
8
- return e.src !== "about:blank" && ((o = e.contentWindow) == null ? void 0 : o.location.href) !== "about:blank" && t ? n() : e.addEventListener("load", n);
9
- }, y = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), w = (e) => {
7
+ const n = ((i = e.contentWindow) == null ? void 0 : i.document.readyState) === "complete";
8
+ return e.src !== "about:blank" && ((o = e.contentWindow) == null ? void 0 : o.location.href) !== "about:blank" && n ? t() : e.addEventListener("load", t);
9
+ }, v = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), b = (e) => {
10
10
  try {
11
11
  return new URL(e.src).origin === window.location.origin;
12
12
  } catch {
13
13
  return !1;
14
14
  }
15
- }, p = (e) => {
15
+ }, I = (e) => {
16
16
  try {
17
- const n = new URL(e.src).origin;
18
- if (n !== "about:blank")
19
- return n;
17
+ const t = new URL(e.src).origin;
18
+ if (t !== "about:blank")
19
+ return t;
20
20
  } catch {
21
21
  }
22
22
  return null;
23
- }, O = (e) => (Object.keys(e).forEach((n) => e[n] === void 0 && delete e[n]), e), g = (e) => {
24
- const { height: n } = e.documentElement.getBoundingClientRect() ?? {};
25
- return n ? Math.ceil(n) : void 0;
23
+ }, R = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), h = (e) => {
24
+ const { height: t } = e.documentElement.getBoundingClientRect();
25
+ return Math.ceil(t);
26
26
  };
27
27
  function z(e) {
28
- b(
28
+ y(
29
29
  e,
30
30
  () => {
31
- var n;
32
- return (n = e.contentWindow) == null ? void 0 : n.postMessage("[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false", "*");
31
+ var t;
32
+ return (t = e.contentWindow) == null ? void 0 : t.postMessage("[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false", "*");
33
33
  }
34
34
  );
35
35
  }
36
- function I(e) {
36
+ function O(e) {
37
37
  if (typeof e.data == "string" && e.data.startsWith("[iFrameSizer]")) {
38
- const [n, t] = e.data.split(":"), r = +t;
38
+ const [t, n] = e.data.split(":"), r = +n;
39
39
  return r > 0 ? r : null;
40
40
  }
41
41
  return null;
42
42
  }
43
- const f = C();
44
- let d = [];
45
- const W = (e, n) => {
46
- const t = { ...y(), ...O(e ?? {}) }, r = v(n), i = S(t, r);
43
+ const a = g() ? M() : null;
44
+ let l = [];
45
+ const D = (e, t) => {
46
+ if (!g())
47
+ return [];
48
+ const n = { ...v(), ...R(e ?? {}) }, r = S(t), i = E(n, r);
47
49
  return r.map((o) => {
48
- d.push({ iframe: o, settings: t });
49
- const c = R(o, t, i);
50
- return {
50
+ const s = { iframe: o, settings: n, interactionState: { isHovered: !1 } }, d = C(s, i);
51
+ return l.push(s), {
51
52
  unsubscribe: () => {
52
- c(), d = d.filter((s) => s.iframe !== o);
53
+ d(), l = l.filter((u) => u.iframe !== o);
53
54
  }
54
55
  };
55
56
  });
56
57
  };
57
- function v(e) {
58
- return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(l) : e ? l(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
58
+ function S(e) {
59
+ return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(m) : e ? m(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
59
60
  }
60
- function S(e, n) {
61
+ function E(e, t) {
61
62
  if (Array.isArray(e.checkOrigin))
62
63
  return e.checkOrigin;
63
64
  if (!e.checkOrigin)
64
65
  return [];
65
- const t = [];
66
- for (const r of n) {
67
- const i = p(r);
68
- i && t.push(i);
66
+ const n = [];
67
+ for (const r of t) {
68
+ const i = I(r);
69
+ i && n.push(i);
69
70
  }
70
- return t;
71
+ return n;
71
72
  }
72
- function R(e, n, t) {
73
- return w(e) ? k(e) : E(e, n, t);
73
+ function C(e, t) {
74
+ const n = b(e.iframe) ? B(e) : k(e, t), r = H(e);
75
+ return () => {
76
+ n(), r();
77
+ };
74
78
  }
75
- function E(e, n, t) {
76
- const r = (i) => {
77
- var s;
78
- const o = !n.checkOrigin || t.includes(i.origin);
79
- if (!(!(e.contentWindow === i.source) || !o)) {
80
- if (((s = i.data) == null ? void 0 : s.type) === "iframe-resized") {
81
- const { height: a } = i.data;
82
- a && u({ height: a, iframe: e, settings: n });
79
+ function k(e, t) {
80
+ const { iframe: n, settings: r } = e, i = (o) => {
81
+ var u;
82
+ const s = !r.checkOrigin || t.includes(o.origin);
83
+ if (!(!(n.contentWindow === o.source) || !s)) {
84
+ if (((u = o.data) == null ? void 0 : u.type) === "iframe-resized") {
85
+ const { height: c } = o.data;
86
+ c && f({ newHeight: c, registeredElement: e });
83
87
  return;
84
88
  }
85
- if (n.enableLegacyLibSupport) {
86
- const a = I(i);
87
- a !== null && u({ height: a, iframe: e, settings: n });
89
+ if (r.enableLegacyLibSupport) {
90
+ const c = O(o);
91
+ c !== null && f({ newHeight: c, registeredElement: e });
88
92
  return;
89
93
  }
90
94
  }
91
95
  };
92
- return window.addEventListener("message", r), n.enableLegacyLibSupport && z(e), () => window.removeEventListener("message", r);
96
+ return window.addEventListener("message", i), r.enableLegacyLibSupport && z(n), () => window.removeEventListener("message", i);
93
97
  }
94
- function k(e) {
95
- const n = () => {
98
+ function B({ iframe: e }) {
99
+ const t = () => {
96
100
  var r;
97
- const t = (r = e.contentDocument) == null ? void 0 : r.body;
98
- if (!t) {
99
- console.error("Unable to observe the iframe content document body");
100
- return;
101
- }
102
- f.observe(t);
101
+ const n = (r = e.contentDocument) == null ? void 0 : r.body;
102
+ n && (a == null || a.observe(n));
103
103
  };
104
- return L(e, n), () => {
105
- var t;
106
- (t = e.contentDocument) != null && t.body && f.unobserve(e.contentDocument.body), e.removeEventListener("load", n);
104
+ return p(e, t), () => {
105
+ var n;
106
+ (n = e.contentDocument) != null && n.body && (a == null || a.unobserve(e.contentDocument.body)), e.removeEventListener("load", t);
107
107
  };
108
108
  }
109
- function C() {
110
- const e = ({ target: n }) => {
111
- const t = d.find((c) => {
109
+ function H({ iframe: e, interactionState: t }) {
110
+ const n = () => {
111
+ t.isHovered = !0;
112
+ }, r = () => {
113
+ t.isHovered = !1;
114
+ };
115
+ return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", r), () => {
116
+ e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", r);
117
+ };
118
+ }
119
+ function M() {
120
+ const e = ({ target: t }) => {
121
+ const n = l.find((o) => {
112
122
  var s;
113
- return ((s = c.iframe.contentDocument) == null ? void 0 : s.body) === n;
123
+ return ((s = o.iframe.contentDocument) == null ? void 0 : s.body) === t;
114
124
  });
115
- if (!t)
125
+ if (!n)
116
126
  return;
117
- const { iframe: r, settings: i } = t;
127
+ const { iframe: r } = n;
118
128
  if (!r.contentDocument)
119
129
  return;
120
- const o = g(r.contentDocument);
121
- o && u({ height: o, iframe: r, settings: i });
130
+ const i = h(r.contentDocument);
131
+ i && f({ newHeight: i, registeredElement: n });
122
132
  };
123
- return new ResizeObserver((n) => n.forEach(e));
133
+ return new ResizeObserver((t) => t.forEach(e));
124
134
  }
125
- function u({ height: e, iframe: n, settings: t }) {
126
- n.style.height = `${e + t.offsetSize}px`;
135
+ function f({ registeredElement: e, newHeight: t }) {
136
+ const { iframe: n, settings: r, interactionState: i } = e, o = n.getBoundingClientRect(), s = t + r.offsetSize;
137
+ if (n.style.height = `${s}px`, !r.onIframeResize)
138
+ return;
139
+ const d = {
140
+ iframe: n,
141
+ settings: { ...r },
142
+ interactionState: { ...i },
143
+ previousRenderState: { rect: o },
144
+ nextRenderState: { rect: n.getBoundingClientRect() }
145
+ };
146
+ r.onIframeResize(d);
127
147
  }
128
- m() && D();
129
- function D() {
130
- h(window, () => {
148
+ W();
149
+ function W() {
150
+ !g() || !L() || w(window, () => {
131
151
  const e = () => {
132
- const t = {
152
+ const n = {
133
153
  type: "iframe-resized",
134
154
  width: document.documentElement.scrollWidth,
135
- height: g(document) ?? void 0
155
+ height: h(document)
136
156
  };
137
- window.parent.postMessage(t, "*");
157
+ window.parent.postMessage(n, "*");
138
158
  };
139
159
  new ResizeObserver(e).observe(document.body);
140
160
  });
141
161
  }
162
+ const A = ({ previousRenderState: e, nextRenderState: t, interactionState: n }) => {
163
+ n.isHovered && window.scrollBy(0, t.rect.bottom - e.rect.bottom);
164
+ };
142
165
  export {
143
- W as initialize,
144
- D as initializeChildListener
166
+ D as initialize,
167
+ W as initializeChildListener,
168
+ A as updateParentScrollOnResize
145
169
  };
@@ -1 +1 @@
1
- (function(s,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(s=typeof globalThis<"u"?globalThis:s||self,c(s.iframeResizer={}))})(this,function(s){"use strict";const c=()=>window&&window.self!==window.top,g=e=>e instanceof HTMLIFrameElement,y=(e,n)=>{e.document.readyState==="complete"?n():e.addEventListener("load",n)},p=(e,n)=>{n(),e.addEventListener("load",n)},L=(e,n)=>{var r,o;const t=((r=e.contentWindow)==null?void 0:r.document.readyState)==="complete";return e.src!=="about:blank"&&((o=e.contentWindow)==null?void 0:o.location.href)!=="about:blank"&&t?n():e.addEventListener("load",n)},w=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),O=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},z=e=>{try{const n=new URL(e.src).origin;if(n!=="about:blank")return n}catch{}return null},I=e=>(Object.keys(e).forEach(n=>e[n]===void 0&&delete e[n]),e),m=e=>{const{height:n}=e.documentElement.getBoundingClientRect()??{};return n?Math.ceil(n):void 0};function v(e){p(e,()=>{var n;return(n=e.contentWindow)==null?void 0:n.postMessage("[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false","*")})}function S(e){if(typeof e.data=="string"&&e.data.startsWith("[iFrameSizer]")){const[n,t]=e.data.split(":"),i=+t;return i>0?i:null}return null}const h=T();let u=[];const R=(e,n)=>{const t={...w(),...I(e??{})},i=E(n),r=k(t,i);return i.map(o=>{u.push({iframe:o,settings:t});const f=C(o,t,r);return{unsubscribe:()=>{f(),u=u.filter(a=>a.iframe!==o)}}})};function E(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(g):e?g(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function k(e,n){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const t=[];for(const i of n){const r=z(i);r&&t.push(r)}return t}function C(e,n,t){return O(e)?M(e):D(e,n,t)}function D(e,n,t){const i=r=>{var a;const o=!n.checkOrigin||t.includes(r.origin);if(!(!(e.contentWindow===r.source)||!o)){if(((a=r.data)==null?void 0:a.type)==="iframe-resized"){const{height:d}=r.data;d&&l({height:d,iframe:e,settings:n});return}if(n.enableLegacyLibSupport){const d=S(r);d!==null&&l({height:d,iframe:e,settings:n});return}}};return window.addEventListener("message",i),n.enableLegacyLibSupport&&v(e),()=>window.removeEventListener("message",i)}function M(e){const n=()=>{var i;const t=(i=e.contentDocument)==null?void 0:i.body;if(!t){console.error("Unable to observe the iframe content document body");return}h.observe(t)};return L(e,n),()=>{var t;(t=e.contentDocument)!=null&&t.body&&h.unobserve(e.contentDocument.body),e.removeEventListener("load",n)}}function T(){const e=({target:n})=>{const t=u.find(f=>{var a;return((a=f.iframe.contentDocument)==null?void 0:a.body)===n});if(!t)return;const{iframe:i,settings:r}=t;if(!i.contentDocument)return;const o=m(i.contentDocument);o&&l({height:o,iframe:i,settings:r})};return new ResizeObserver(n=>n.forEach(e))}function l({height:e,iframe:n,settings:t}){n.style.height=`${e+t.offsetSize}px`}c()&&b();function b(){y(window,()=>{const e=()=>{const t={type:"iframe-resized",width:document.documentElement.scrollWidth,height:m(document)??void 0};window.parent.postMessage(t,"*")};new ResizeObserver(e).observe(document.body)})}s.initialize=R,s.initializeChildListener=b,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
1
+ (function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a.iframeResizer={}))})(this,function(a){"use strict";const c=()=>typeof window<"u",p=()=>window.self!==window.top,h=e=>e instanceof HTMLIFrameElement,y=(e,t)=>{e.document.readyState==="complete"?t():e.addEventListener("load",t)},b=(e,t)=>{t(),e.addEventListener("load",t)},v=(e,t)=>{var r,o;const n=((r=e.contentWindow)==null?void 0:r.document.readyState)==="complete";return e.src!=="about:blank"&&((o=e.contentWindow)==null?void 0:o.location.href)!=="about:blank"&&n?t():e.addEventListener("load",t)},z=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),R=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},S=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},I=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),L=e=>{const{height:t}=e.documentElement.getBoundingClientRect();return Math.ceil(t)};function O(e){b(e,()=>{var t;return(t=e.contentWindow)==null?void 0:t.postMessage("[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false","*")})}function E(e){if(typeof e.data=="string"&&e.data.startsWith("[iFrameSizer]")){const[t,n]=e.data.split(":"),i=+n;return i>0?i:null}return null}const d=c()?D():null;let f=[];const C=(e,t)=>{if(!c())return[];const n={...z(),...I(e??{})},i=k(t),r=B(n,i);return i.map(o=>{const s={iframe:o,settings:n,interactionState:{isHovered:!1}},l=H(s,r);return f.push(s),{unsubscribe:()=>{l(),f=f.filter(g=>g.iframe!==o)}}})};function k(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(h):e?h(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function B(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const i of t){const r=S(i);r&&n.push(r)}return n}function H(e,t){const n=R(e.iframe)?T(e):M(e,t),i=W(e);return()=>{n(),i()}}function M(e,t){const{iframe:n,settings:i}=e,r=o=>{var g;const s=!i.checkOrigin||t.includes(o.origin);if(!(!(n.contentWindow===o.source)||!s)){if(((g=o.data)==null?void 0:g.type)==="iframe-resized"){const{height:u}=o.data;u&&m({newHeight:u,registeredElement:e});return}if(i.enableLegacyLibSupport){const u=E(o);u!==null&&m({newHeight:u,registeredElement:e});return}}};return window.addEventListener("message",r),i.enableLegacyLibSupport&&O(n),()=>window.removeEventListener("message",r)}function T({iframe:e}){const t=()=>{var i;const n=(i=e.contentDocument)==null?void 0:i.body;n&&(d==null||d.observe(n))};return v(e,t),()=>{var n;(n=e.contentDocument)!=null&&n.body&&(d==null||d.unobserve(e.contentDocument.body)),e.removeEventListener("load",t)}}function W({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},i=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",i),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",i)}}function D(){const e=({target:t})=>{const n=f.find(o=>{var s;return((s=o.iframe.contentDocument)==null?void 0:s.body)===t});if(!n)return;const{iframe:i}=n;if(!i.contentDocument)return;const r=L(i.contentDocument);r&&m({newHeight:r,registeredElement:n})};return new ResizeObserver(t=>t.forEach(e))}function m({registeredElement:e,newHeight:t}){const{iframe:n,settings:i,interactionState:r}=e,o=n.getBoundingClientRect(),s=t+i.offsetSize;if(n.style.height=`${s}px`,!i.onIframeResize)return;const l={iframe:n,settings:{...i},interactionState:{...r},previousRenderState:{rect:o},nextRenderState:{rect:n.getBoundingClientRect()}};i.onIframeResize(l)}w();function w(){!c()||!p()||y(window,()=>{const e=()=>{const n={type:"iframe-resized",width:document.documentElement.scrollWidth,height:L(document)};window.parent.postMessage(n,"*")};new ResizeObserver(e).observe(document.body)})}const P=({previousRenderState:e,nextRenderState:t,interactionState:n})=>{n.isHovered&&window.scrollBy(0,t.rect.bottom-e.rect.bottom)};a.initialize=C,a.initializeChildListener=w,a.updateParentScrollOnResize=P,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,16 +1,13 @@
1
1
  {
2
2
  "name": "@open-iframe-resizer/core",
3
3
  "private": false,
4
- "version": "1.1.3",
4
+ "version": "1.2.1",
5
5
  "description": "Open-source modern iframe resizer",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
9
9
  "url": "git+https://github.com/Lemick/open-iframe-resizer.git"
10
10
  },
11
- "engines": {
12
- "node": ">=20.0.0"
13
- },
14
11
  "keywords": [
15
12
  "iframe",
16
13
  "Resizing",
@@ -39,10 +36,10 @@
39
36
  "README.md"
40
37
  ],
41
38
  "scripts": {
42
- "docs": "npm run typedoc",
39
+ "docs": "typedoc --options typedoc.json src/",
43
40
  "lint": "biome lint ./src",
44
- "build": "tsc && npm run lint && vite build && typedoc",
45
- "build:watch": "vite build --watch && typedoc",
41
+ "build": "tsc && npm run lint && vite build && npm run docs",
42
+ "build:watch": "vite build --watch && npm run docs",
46
43
  "dev": "concurrently \"vite build --watch\" \"npm run serve\"",
47
44
  "serve": "concurrently \"vite --port 5550\" \"vite --port 5551\"",
48
45
  "test": "npm run test:unit && npm run test:e2e",
package/dist/child.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare function initializeChildListener(): void;
2
- export { initializeChildListener };
package/dist/common.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import { Settings } from './type';
2
- export declare const isInIframe: () => boolean;
3
- export declare const isHtmlIframeElement: (element: Element) => element is HTMLIFrameElement;
4
- export declare const deferWhenWindowIsLoaded: (_window: Window, executable: () => void) => void;
5
- /**
6
- * Post the message twice, it assures the target to receive the message at least once
7
- */
8
- export declare const safePostMessageToCrossOriginIframe: (iframe: HTMLIFrameElement, executable: () => void) => void;
9
- export declare const deferWhenSameOriginIframeIsLoaded: (iframe: HTMLIFrameElement, executable: () => void) => void;
10
- export declare const getDefaultSettings: () => Settings;
11
- export declare const isIframeSameOrigin: (iframe: HTMLIFrameElement) => boolean;
12
- export declare const extractIframeOrigin: (iframe: HTMLIFrameElement) => string | null;
13
- export declare const removeUndefinedProperties: <T extends {
14
- [key: string]: unknown;
15
- }>(object: T) => T;
16
- export declare const getBoundingRectHeight: (document: Document) => number | undefined;
package/dist/compat.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare function sendLegacyLibInitMessageOnIframeLoad(iframe: HTMLIFrameElement): void;
2
- export declare function handleLegacyLibResizeMessage(event: MessageEvent): number | null;
package/dist/parent.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { InitializeFunction } from './type';
2
- declare const initialize: InitializeFunction;
3
- export { initialize };
package/dist/type.d.ts DELETED
@@ -1,47 +0,0 @@
1
- interface Window {
2
- iframeResizer: {
3
- initialize: InitializeFunction;
4
- };
5
- }
6
-
7
- /**
8
- * Automatically resizes the selected iframes.
9
- * @param settings The settings for the selected iframes. The default settings properties are picked if empty.
10
- * @param selector The selector for the iframe(s) or the HTMLIFrameElement to be resized. If empty, all document iframe elements will be selected.
11
- * @returns A result array, which can be used to clean up the listeners if you often remove iframes from the document.
12
- */
13
- export type InitializeFunction = (settings?: Partial<Settings>, selector?: string | HTMLIFrameElement) => InitializeResult[];
14
- export type InitializeResult = { unsubscribe: () => void };
15
-
16
- export type Settings = {
17
- /**
18
- * Offset added to the resize size (in pixels).
19
- *
20
- * Default: 0
21
- */
22
- offsetSize: number;
23
- /**
24
- * Specifies whether to check the origin of incoming messages.
25
- * Accepts an array of allowed origins or a boolean.
26
- * If true, incoming messages are allowed from the origins of the registered iframes.
27
- *
28
- * Default: true
29
- */
30
- checkOrigin: string[] | boolean;
31
- /**
32
- * Allows the library to communicate with a cross-origin child iframe
33
- * containing the original "iframe-resizer" script.
34
- * Useful if you do not control the child domain.
35
- *
36
- * Default: false
37
- */
38
- enableLegacyLibSupport: boolean;
39
- };
40
-
41
- export type IframeResizeEventData = {
42
- type: "iframe-resized";
43
- width: number;
44
- height?: number;
45
- };
46
-
47
- export type IframeResizeEvent = MessageEvent<IframeResizeEventData>;