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