@open-iframe-resizer/vue 1.4.3 → 1.5.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as O, ref as k, onMounted as M, onBeforeUnmount as
|
|
2
|
-
const S = () => typeof window < "u",
|
|
1
|
+
import { defineComponent as O, ref as k, onMounted as M, onBeforeUnmount as B, createElementBlock as P, openBlock as A, mergeProps as H } from "vue";
|
|
2
|
+
const S = () => typeof window < "u", _ = () => window.self !== window.top, v = (e) => e instanceof HTMLIFrameElement, D = (e) => {
|
|
3
3
|
window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
|
|
4
4
|
}, T = (e, t) => {
|
|
5
5
|
t(), e.addEventListener("load", t);
|
|
@@ -13,7 +13,7 @@ const S = () => typeof window < "u", D = () => window.self !== window.top, v = (
|
|
|
13
13
|
} catch {
|
|
14
14
|
return !1;
|
|
15
15
|
}
|
|
16
|
-
},
|
|
16
|
+
}, F = (e) => {
|
|
17
17
|
try {
|
|
18
18
|
const t = new URL(e.src).origin;
|
|
19
19
|
if (t !== "about:blank")
|
|
@@ -21,12 +21,12 @@ const S = () => typeof window < "u", D = () => window.self !== window.top, v = (
|
|
|
21
21
|
} catch {
|
|
22
22
|
}
|
|
23
23
|
return null;
|
|
24
|
-
},
|
|
24
|
+
}, $ = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), E = (e) => {
|
|
25
25
|
const { height: t, width: n } = e.getBoundingClientRect();
|
|
26
26
|
return { height: Math.ceil(t), width: Math.ceil(n) };
|
|
27
|
-
},
|
|
27
|
+
}, m = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, z = (e, t) => {
|
|
28
28
|
e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
|
|
29
|
-
},
|
|
29
|
+
}, b = (e) => e <= 100 ? 100 : e <= 120 ? 1e3 : 1e4, N = () => "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";
|
|
30
30
|
function U(e) {
|
|
31
31
|
if (typeof e.data != "string" || !e.data.startsWith("[iFrameSizer]") || !e.data.endsWith("mutationObserver") && !e.data.endsWith("resizeObserver"))
|
|
32
32
|
return null;
|
|
@@ -34,21 +34,21 @@ function U(e) {
|
|
|
34
34
|
return r > 0 ? r : null;
|
|
35
35
|
}
|
|
36
36
|
const w = X();
|
|
37
|
-
let
|
|
37
|
+
let f = [];
|
|
38
38
|
const j = (e, t) => {
|
|
39
39
|
if (!S())
|
|
40
40
|
return [];
|
|
41
|
-
const n = { ...C(),
|
|
42
|
-
return r.map((
|
|
43
|
-
const
|
|
44
|
-
iframe:
|
|
41
|
+
const n = { ...C(), ...$(e ?? {}) }, r = q(t), i = G(n, r);
|
|
42
|
+
return r.map((a) => {
|
|
43
|
+
const o = {
|
|
44
|
+
iframe: a,
|
|
45
45
|
settings: n,
|
|
46
46
|
interactionState: { isHovered: !1 },
|
|
47
47
|
initContext: { isInitialized: !1, retryAttempts: 0 }
|
|
48
|
-
}, s = K(
|
|
49
|
-
return
|
|
48
|
+
}, s = K(o, i);
|
|
49
|
+
return f.push(o), {
|
|
50
50
|
unsubscribe: () => {
|
|
51
|
-
s(),
|
|
51
|
+
s(), f = f.filter((d) => d.iframe !== a);
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
});
|
|
@@ -63,7 +63,7 @@ function G(e, t) {
|
|
|
63
63
|
return [];
|
|
64
64
|
const n = [];
|
|
65
65
|
for (const r of t) {
|
|
66
|
-
const i =
|
|
66
|
+
const i = F(r);
|
|
67
67
|
i && n.push(i);
|
|
68
68
|
}
|
|
69
69
|
return n;
|
|
@@ -78,44 +78,44 @@ function V(e, t) {
|
|
|
78
78
|
const {
|
|
79
79
|
iframe: n,
|
|
80
80
|
initContext: r,
|
|
81
|
-
settings: { checkOrigin: i, enableLegacyLibSupport:
|
|
82
|
-
} = e,
|
|
81
|
+
settings: { checkOrigin: i, enableLegacyLibSupport: a, targetElementSelector: o, bodyPadding: s, bodyMargin: d }
|
|
82
|
+
} = e, l = (c) => {
|
|
83
83
|
var h;
|
|
84
84
|
const I = !i || t.includes(c.origin);
|
|
85
85
|
if (!(n.contentWindow !== c.source || !I)) {
|
|
86
86
|
if (((h = c.data) == null ? void 0 : h.type) === "iframe-resized") {
|
|
87
87
|
const { height: u } = c.data;
|
|
88
|
-
u &&
|
|
88
|
+
u && g({ newHeight: u, registeredElement: e });
|
|
89
89
|
return;
|
|
90
90
|
}
|
|
91
|
-
if (
|
|
91
|
+
if (a) {
|
|
92
92
|
const u = U(c);
|
|
93
|
-
u !== null &&
|
|
93
|
+
u !== null && g({ newHeight: u, registeredElement: e });
|
|
94
94
|
return;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
|
-
window.addEventListener("message",
|
|
99
|
-
const
|
|
98
|
+
window.addEventListener("message", l);
|
|
99
|
+
const L = a ? N() : { type: "iframe-child-init", targetElementSelector: o, bodyPadding: s, bodyMargin: d }, y = () => {
|
|
100
100
|
T(n, () => {
|
|
101
101
|
var c;
|
|
102
|
-
return (c = n.contentWindow) == null ? void 0 : c.postMessage(
|
|
103
|
-
}), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(y,
|
|
102
|
+
return (c = n.contentWindow) == null ? void 0 : c.postMessage(L, "*");
|
|
103
|
+
}), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(y, b(r.retryAttempts));
|
|
104
104
|
};
|
|
105
|
-
return y(), () => window.removeEventListener("message",
|
|
105
|
+
return y(), () => window.removeEventListener("message", l);
|
|
106
106
|
}
|
|
107
107
|
function J(e) {
|
|
108
108
|
const { iframe: t, settings: n } = e, { targetElementSelector: r } = n;
|
|
109
109
|
let i = 0;
|
|
110
|
-
const
|
|
111
|
-
const
|
|
112
|
-
if (!t.contentDocument || !
|
|
113
|
-
return i++, setTimeout(
|
|
114
|
-
z(t.contentDocument, n), w().observe(
|
|
110
|
+
const a = () => {
|
|
111
|
+
const o = m(t.contentDocument, r);
|
|
112
|
+
if (!t.contentDocument || !o)
|
|
113
|
+
return i++, setTimeout(a, b(i));
|
|
114
|
+
z(t.contentDocument, n), w().observe(o);
|
|
115
115
|
};
|
|
116
|
-
return x(t,
|
|
117
|
-
const
|
|
118
|
-
|
|
116
|
+
return x(t, a), () => {
|
|
117
|
+
const o = m(t.contentDocument, r);
|
|
118
|
+
o && w().unobserve(o), t.removeEventListener("load", a);
|
|
119
119
|
};
|
|
120
120
|
}
|
|
121
121
|
function Q({ iframe: e, interactionState: t }) {
|
|
@@ -133,53 +133,55 @@ function X() {
|
|
|
133
133
|
return () => {
|
|
134
134
|
if (!e) {
|
|
135
135
|
const t = ({ target: n }) => {
|
|
136
|
-
const r =
|
|
136
|
+
const r = f.find(({ iframe: d }) => d.contentDocument === n.ownerDocument);
|
|
137
137
|
if (!r)
|
|
138
138
|
return;
|
|
139
|
-
const { iframe: i, settings:
|
|
140
|
-
if (!
|
|
139
|
+
const { iframe: i, settings: a } = r, o = m(i.contentDocument, a.targetElementSelector);
|
|
140
|
+
if (!o)
|
|
141
141
|
return;
|
|
142
|
-
const { height: s } = E(
|
|
143
|
-
s &&
|
|
142
|
+
const { height: s } = E(o);
|
|
143
|
+
s && g({ newHeight: s, registeredElement: r });
|
|
144
144
|
};
|
|
145
145
|
e = new ResizeObserver((n) => n.forEach(t));
|
|
146
146
|
}
|
|
147
147
|
return e;
|
|
148
148
|
};
|
|
149
149
|
}
|
|
150
|
-
function
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
if (n.style.height = `${s}px`, !r.onIframeResize)
|
|
150
|
+
function g({ registeredElement: e, newHeight: t }) {
|
|
151
|
+
var n;
|
|
152
|
+
const { iframe: r, settings: i, interactionState: a, initContext: o } = e;
|
|
153
|
+
if (o.isInitialized || (o.isInitialized = !0, clearTimeout(o.retryTimeoutId)), ((n = i.onBeforeIframeResize) == null ? void 0 : n.call(i, { iframe: r, settings: { ...i }, observedHeight: t })) === !1)
|
|
155
154
|
return;
|
|
156
|
-
const d =
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
155
|
+
const s = r.getBoundingClientRect(), d = t + i.offsetSize;
|
|
156
|
+
if (r.style.height = `${d}px`, !i.onIframeResize)
|
|
157
|
+
return;
|
|
158
|
+
const l = {
|
|
159
|
+
iframe: r,
|
|
160
|
+
settings: { ...i },
|
|
161
|
+
interactionState: { ...a },
|
|
162
|
+
previousRenderState: { rect: s },
|
|
163
|
+
nextRenderState: { rect: r.getBoundingClientRect() }
|
|
162
164
|
};
|
|
163
|
-
|
|
165
|
+
i.onIframeResize(l);
|
|
164
166
|
}
|
|
165
167
|
const Y = ee();
|
|
166
168
|
let p = !1;
|
|
167
169
|
Z();
|
|
168
170
|
function Z() {
|
|
169
|
-
!S() || !
|
|
171
|
+
!S() || !_() || window.addEventListener("message", (e) => {
|
|
170
172
|
var t;
|
|
171
|
-
((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" &&
|
|
173
|
+
((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && D(() => R(e));
|
|
172
174
|
});
|
|
173
175
|
}
|
|
174
|
-
function
|
|
175
|
-
const { targetElementSelector: n, bodyPadding: r, bodyMargin: i } = e.data,
|
|
176
|
+
function R(e, t = 0) {
|
|
177
|
+
const { targetElementSelector: n, bodyPadding: r, bodyMargin: i } = e.data, a = m(document, n);
|
|
176
178
|
if (p || window.parent !== e.source)
|
|
177
179
|
return;
|
|
178
|
-
if (!
|
|
179
|
-
return setTimeout(() =>
|
|
180
|
+
if (!a)
|
|
181
|
+
return setTimeout(() => R(e, t + 1), b(t));
|
|
180
182
|
z(document, { bodyMargin: i, bodyPadding: r });
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
+
const o = Y();
|
|
184
|
+
o.disconnect(), o.observe(a), p = !0;
|
|
183
185
|
}
|
|
184
186
|
function ee() {
|
|
185
187
|
let e = null;
|
|
@@ -200,6 +202,7 @@ const te = O({
|
|
|
200
202
|
offsetSize: [String, Number, Object],
|
|
201
203
|
checkOrigin: [Boolean, Array],
|
|
202
204
|
onIframeResize: Function,
|
|
205
|
+
onBeforeIframeResize: Function,
|
|
203
206
|
targetElementSelector: [String],
|
|
204
207
|
bodyMargin: [String, Number],
|
|
205
208
|
bodyPadding: [String, Number],
|
|
@@ -208,24 +211,25 @@ const te = O({
|
|
|
208
211
|
setup(e, { attrs: t }) {
|
|
209
212
|
const n = k(null);
|
|
210
213
|
let r = [];
|
|
211
|
-
const i = (
|
|
212
|
-
const
|
|
214
|
+
const i = (a) => {
|
|
215
|
+
const o = {
|
|
213
216
|
offsetSize: e.offsetSize,
|
|
214
217
|
enableLegacyLibSupport: e.enableLegacyLibSupport,
|
|
215
218
|
checkOrigin: e.checkOrigin,
|
|
216
219
|
onIframeResize: e.onIframeResize,
|
|
220
|
+
onBeforeIframeResize: e.onBeforeIframeResize,
|
|
217
221
|
targetElementSelector: e.targetElementSelector,
|
|
218
222
|
bodyMargin: e.bodyMargin,
|
|
219
223
|
bodyPadding: e.bodyPadding
|
|
220
224
|
};
|
|
221
|
-
Object.keys(
|
|
222
|
-
|
|
223
|
-
}), r = j(
|
|
225
|
+
Object.keys(o).forEach((s) => {
|
|
226
|
+
o[s] === void 0 && delete o[s];
|
|
227
|
+
}), r = j(o, a);
|
|
224
228
|
};
|
|
225
229
|
return M(() => {
|
|
226
230
|
n.value && i(n.value);
|
|
227
|
-
}),
|
|
228
|
-
r.forEach((
|
|
231
|
+
}), B(() => {
|
|
232
|
+
r.forEach((a) => a.unsubscribe()), r = [];
|
|
229
233
|
}), {
|
|
230
234
|
iframeRef: n,
|
|
231
235
|
attrs: t
|
|
@@ -237,8 +241,8 @@ const te = O({
|
|
|
237
241
|
n[r] = i;
|
|
238
242
|
return n;
|
|
239
243
|
};
|
|
240
|
-
function re(e, t, n, r, i,
|
|
241
|
-
return
|
|
244
|
+
function re(e, t, n, r, i, a) {
|
|
245
|
+
return A(), P("iframe", H({ ref: "iframeRef" }, e.$attrs), null, 16);
|
|
242
246
|
}
|
|
243
247
|
const ie = /* @__PURE__ */ ne(te, [["render", re]]), ae = {
|
|
244
248
|
install(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,s){"use strict";const
|
|
1
|
+
(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,s){"use strict";const v=()=>typeof window<"u",M=()=>window.self!==window.top,p=e=>e instanceof HTMLIFrameElement,k=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},B=(e,t)=>{t(),e.addEventListener("load",t)},P=(e,t)=>{var n,r;const i=((n=e.contentWindow)==null?void 0:n.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&i?t():e.addEventListener("load",t)},T=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),A=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},H=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},_=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),w=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},m=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,S=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},b=e=>e<=100?100:e<=120?1e3:1e4,D=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function x(e){if(typeof e.data!="string"||!e.data.startsWith("[iFrameSizer]")||!e.data.endsWith("mutationObserver")&&!e.data.endsWith("resizeObserver"))return null;const[t,n]=e.data.split(":"),r=+n;return r>0?r:null}const z=U();let g=[];const C=(e,t)=>{if(!v())return[];const n={...T(),..._(e??{})},r=W(t),i=F(n,r);return r.map(a=>{const o={iframe:a,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=$(o,i);return g.push(o),{unsubscribe:()=>{c(),g=g.filter(l=>l.iframe!==a)}}})};function W(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(p):e?p(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function F(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=H(r);i&&n.push(i)}return n}function $(e,t){const n=A(e.iframe)?N(e):j(e,t),r=q(e);return()=>{n(),r()}}function j(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:a,targetElementSelector:o,bodyPadding:c,bodyMargin:l}}=e,y=u=>{var O;const ee=!i||t.includes(u.origin);if(!(n.contentWindow!==u.source||!ee)){if(((O=u.data)==null?void 0:O.type)==="iframe-resized"){const{height:f}=u.data;f&&h({newHeight:f,registeredElement:e});return}if(a){const f=x(u);f!==null&&h({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",y);const Z=a?D():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:c,bodyMargin:l},I=()=>{B(n,()=>{var u;return(u=n.contentWindow)==null?void 0:u.postMessage(Z,"*")}),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(I,b(r.retryAttempts))};return I(),()=>window.removeEventListener("message",y)}function N(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const a=()=>{const o=m(t.contentDocument,r);if(!t.contentDocument||!o)return i++,setTimeout(a,b(i));S(t.contentDocument,n),z().observe(o)};return P(t,a),()=>{const o=m(t.contentDocument,r);o&&z().unobserve(o),t.removeEventListener("load",a)}}function q({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},r=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",r),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",r)}}function U(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=g.find(({iframe:l})=>l.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:a}=r,o=m(i.contentDocument,a.targetElementSelector);if(!o)return;const{height:c}=w(o);c&&h({newHeight:c,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function h({registeredElement:e,newHeight:t}){var n;const{iframe:r,settings:i,interactionState:a,initContext:o}=e;if(o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId)),((n=i.onBeforeIframeResize)==null?void 0:n.call(i,{iframe:r,settings:{...i},observedHeight:t}))===!1)return;const c=r.getBoundingClientRect(),l=t+i.offsetSize;if(r.style.height=`${l}px`,!i.onIframeResize)return;const y={iframe:r,settings:{...i},interactionState:{...a},previousRenderState:{rect:c},nextRenderState:{rect:r.getBoundingClientRect()}};i.onIframeResize(y)}const V=K();let E=!1;G();function G(){!v()||!M()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&k(()=>R(e))})}function R(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,a=m(document,n);if(E||window.parent!==e.source)return;if(!a)return setTimeout(()=>R(e,t+1),b(t));S(document,{bodyMargin:i,bodyPadding:r});const o=V();o.disconnect(),o.observe(a),E=!0}function K(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=w(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const J=s.defineComponent({name:"ResizableIframe",props:{offsetSize:[String,Number,Object],checkOrigin:[Boolean,Array],onIframeResize:Function,onBeforeIframeResize:Function,targetElementSelector:[String],bodyMargin:[String,Number],bodyPadding:[String,Number],enableLegacyLibSupport:Boolean},setup(e,{attrs:t}){const n=s.ref(null);let r=[];const i=a=>{const o={offsetSize:e.offsetSize,enableLegacyLibSupport:e.enableLegacyLibSupport,checkOrigin:e.checkOrigin,onIframeResize:e.onIframeResize,onBeforeIframeResize:e.onBeforeIframeResize,targetElementSelector:e.targetElementSelector,bodyMargin:e.bodyMargin,bodyPadding:e.bodyPadding};Object.keys(o).forEach(c=>{o[c]===void 0&&delete o[c]}),r=C(o,a)};return s.onMounted(()=>{n.value&&i(n.value)}),s.onBeforeUnmount(()=>{r.forEach(a=>a.unsubscribe()),r=[]}),{iframeRef:n,attrs:t}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function X(e,t,n,r,i,a){return s.openBlock(),s.createElementBlock("iframe",s.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const L=Q(J,[["render",X]]),Y={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=Y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@open-iframe-resizer/vue",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.5.0",
|
|
5
5
|
"description": "Open-source modern iframe resizer component",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"test": "npx playwright install --with-deps && npx playwright test"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@open-iframe-resizer/core": "1.
|
|
46
|
+
"@open-iframe-resizer/core": "1.5.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@vitejs/plugin-vue": "^5.2.3",
|