npm - @open-iframe-resizer/core - Versions diffs - 1.2.1 → 1.3.1 - Mend

@open-iframe-resizer/core 1.2.1 → 1.3.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.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -8,7 +8,7 @@
 A modern, lightweight alternative for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.
-If you found this plugin helpful, please consider starring the repository!
+If you found this project helpful, please consider starring the repository!
 ## Getting Started
@@ -41,39 +41,10 @@ A React component is also available:
 npm install @open-iframe-resizer/react
 ```
-## Notes
+## Full documentation
-### Performing actions after a resize
+Explore the [full documentation](https://lemick.github.io/open-iframe-resizer/guides/getting-started/#_top)
-You can execute a custom function after an iframe has been resized. Also, you can use built-in functions
-like `updateParentScrollOnResize` to help keep the iframe within the viewport after resizing:
-```javascript
-import { initialize, updateParentScrollOnResize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";
-initialize({ onIframeResize: updateParentScrollOnResize }, "#myIframe");
-```
-### Resize iframes from a different origin
-- 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).
-  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).
-- 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:
-  ```javascript
-  initialize({ enableLegacyLibSupport: true }, "#my-iframe");
-  ```
-### Comparison with iframe-resizer
-This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free.
-I decided to replicate some parts of the API, as it may facilitate migration to this project.
-Some features from this library are missing, but they could be implemented in future versions.
 ## Browser support

package/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,10 @@
+export declare type IframeChildInitEventData = {
+    type: "iframe-child-init";
+    targetElementSelector?: string;
+    bodyPadding?: string;
+    bodyMargin?: string;
+};
 export declare type IframeResizeEvent = MessageEvent<IframeResizeEventData>;
 export declare type IframeResizeEventData = {
@@ -24,6 +31,13 @@ export declare type InteractionState = {
     isHovered: boolean;
 };
+export declare type RegisteredElement = {
+    iframe: HTMLIFrameElement;
+    settings: Settings;
+    interactionState: InteractionState;
+    initContext: { isInitialized: boolean; retryAttempts: number; retryTimeoutId?: number };
+};
 export declare type ResizeContext = {
     iframe: HTMLIFrameElement;
     settings: Settings;
@@ -57,6 +71,28 @@ export declare type Settings = {
      * Default: `false`
      */
     enableLegacyLibSupport: boolean;
+    /**
+     * By default, the root element observed for resizing is the <html> document.
+     * In more complex layouts, the scrolling container may be elsewhere.
+     * This setting allows you to customize the root element that should be observed for resize events.
+     *
+     * Default: `undefined`
+     */
+    targetElementSelector?: string;
+    /**
+     * Customize the padding style of the iframe body.
+     *
+     * Default: `undefined`
+     */
+    bodyPadding?: string;
+    /**
+     * Customize the margin style of the iframe body.
+     *
+     * Default: `undefined`
+     */
+    bodyMargin?: string;
     /**
      * Listener that is called after the iframe has been resized.
      * You can use a predefined handler like `updateParentScrollOnResize` or create your own custom handler.
@@ -69,9 +105,9 @@ export declare type Settings = {
 /**
  * Resize handler that scrolls to restore the iframe's position in the viewport as it was before the resize.
  *
- * *Note:* This behavior only triggers if the iframe is currently being hovered by the user,
+ * *Note:* This behavior only triggers if the iframe currently has focus,
  * in order to try to limit the number of scroll as it can affect the user experience.
  */
-export declare const updateParentScrollOnResize: ({ previousRenderState, nextRenderState, interactionState }: ResizeContext) => void;
+export declare const updateParentScrollOnResize: ({ previousRenderState, nextRenderState, iframe }: ResizeContext) => void;
 export { }

package/dist/index.js CHANGED Viewed

@@ -1,18 +1,18 @@
-const g = () => typeof window < "u", L = () => window.self !== window.top, m = (e) => e instanceof HTMLIFrameElement, w = (e, t) => {
-  e.document.readyState === "complete" ? t() : e.addEventListener("load", t);
-}, y = (e, t) => {
+const p = () => typeof window < "u", R = () => window.self !== window.top, b = (e) => e instanceof HTMLIFrameElement, M = (e) => {
+  window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
+}, T = (e, t) => {
   t(), e.addEventListener("load", t);
-}, p = (e, t) => {
-  var i, o;
-  const n = ((i = e.contentWindow) == null ? void 0 : i.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);
-}, v = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), b = (e) => {
+}, C = (e, t) => {
+  var o, r;
+  const n = ((o = e.contentWindow) == null ? void 0 : o.document.readyState) === "complete";
+  return e.src !== "about:blank" && ((r = e.contentWindow) == null ? void 0 : r.location.href) !== "about:blank" && n ? t() : e.addEventListener("load", t);
+}, k = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), B = (e) => {
   try {
     return new URL(e.src).origin === window.location.origin;
   } catch {
     return !1;
   }
-}, I = (e) => {
+}, D = (e) => {
   try {
     const t = new URL(e.src).origin;
     if (t !== "about:blank")
@@ -20,150 +20,185 @@ const g = () => typeof window < "u", L = () => window.self !== window.top, m = (
   } catch {
   }
   return null;
-}, R = (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 z(e) {
-  y(
-    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 O(e) {
+}, A = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), L = (e) => {
+  const { height: t, width: n } = e.getBoundingClientRect();
+  return { height: Math.ceil(t), width: Math.ceil(n) };
+}, f = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, I = (e, t) => {
+  e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
+}, m = (e) => e <= 100 ? 100 : e <= 120 ? 1e3 : 1e4, H = () => "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";
+function P(e) {
   if (typeof e.data == "string" && e.data.startsWith("[iFrameSizer]")) {
-    const [t, n] = e.data.split(":"), r = +n;
-    return r > 0 ? r : null;
+    const [t, n] = e.data.split(":"), i = +n;
+    return i > 0 ? i : null;
   }
   return null;
 }
-const a = g() ? M() : null;
+const v = q();
 let l = [];
-const D = (e, t) => {
-  if (!g())
+const K = (e, t) => {
+  if (!p())
     return [];
-  const n = { ...v(), ...R(e ?? {}) }, r = S(t), i = E(n, r);
-  return r.map((o) => {
-    const s = { iframe: o, settings: n, interactionState: { isHovered: !1 } }, d = C(s, i);
+  const n = { ...k(), ...A(e ?? {}) }, i = W(t), o = x(n, i);
+  return i.map((r) => {
+    const s = {
+      iframe: r,
+      settings: n,
+      interactionState: { isHovered: !1 },
+      initContext: { isInitialized: !1, retryAttempts: 0 }
+    }, a = F(s, o);
     return l.push(s), {
       unsubscribe: () => {
-        d(), l = l.filter((u) => u.iframe !== o);
+        a(), l = l.filter((d) => d.iframe !== r);
       }
     };
   });
 };
-function S(e) {
-  return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(m) : e ? m(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
+function W(e) {
+  return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(b) : e ? b(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
 }
-function E(e, t) {
+function x(e, t) {
   if (Array.isArray(e.checkOrigin))
     return e.checkOrigin;
   if (!e.checkOrigin)
     return [];
   const n = [];
-  for (const r of t) {
-    const i = I(r);
-    i && n.push(i);
+  for (const i of t) {
+    const o = D(i);
+    o && n.push(o);
   }
   return n;
 }
-function C(e, t) {
-  const n = b(e.iframe) ? B(e) : k(e, t), r = H(e);
+function F(e, t) {
+  const n = B(e.iframe) ? U(e) : N(e, t), i = $(e);
   return () => {
-    n(), r();
+    n(), i();
   };
 }
-function k(e, t) {
-  const { iframe: n, settings: r } = e, i = (o) => {
-    var u;
-    const s = !r.checkOrigin || t.includes(o.origin);
-    if (!(!(n.contentWindow === o.source) || !s)) {
-      if (((u = o.data) == null ? void 0 : u.type) === "iframe-resized") {
-        const { height: c } = o.data;
-        c && f({ newHeight: c, registeredElement: e });
+function N(e, t) {
+  const {
+    iframe: n,
+    initContext: i,
+    settings: { checkOrigin: o, enableLegacyLibSupport: r, targetElementSelector: s, bodyPadding: a, bodyMargin: d }
+  } = e, h = (c) => {
+    var y;
+    const E = !o || t.includes(c.origin);
+    if (!(!(n.contentWindow === c.source) || !E)) {
+      if (((y = c.data) == null ? void 0 : y.type) === "iframe-resized") {
+        const { height: u } = c.data;
+        u && g({ newHeight: u, registeredElement: e });
         return;
       }
-      if (r.enableLegacyLibSupport) {
-        const c = O(o);
-        c !== null && f({ newHeight: c, registeredElement: e });
+      if (r) {
+        const u = P(c);
+        u !== null && g({ newHeight: u, registeredElement: e });
         return;
       }
     }
   };
-  return window.addEventListener("message", i), r.enableLegacyLibSupport && z(n), () => window.removeEventListener("message", i);
+  window.addEventListener("message", h);
+  const S = r ? H() : { type: "iframe-child-init", targetElementSelector: s, bodyPadding: a, bodyMargin: d }, w = () => {
+    T(n, () => {
+      var c;
+      return (c = n.contentWindow) == null ? void 0 : c.postMessage(S, "*");
+    }), i.retryAttempts++, i.retryTimeoutId = window.setTimeout(w, m(i.retryAttempts));
+  };
+  return w(), () => window.removeEventListener("message", h);
 }
-function B({ iframe: e }) {
-  const t = () => {
-    var r;
-    const n = (r = e.contentDocument) == null ? void 0 : r.body;
-    n && (a == null || a.observe(n));
+function U(e) {
+  const { iframe: t, settings: n } = e, { targetElementSelector: i } = n;
+  let o = 0;
+  const r = () => {
+    const s = f(t.contentDocument, i);
+    if (!t.contentDocument || !s)
+      return o++, setTimeout(r, m(o));
+    I(t.contentDocument, n), v().observe(s);
   };
-  return p(e, t), () => {
-    var n;
-    (n = e.contentDocument) != null && n.body && (a == null || a.unobserve(e.contentDocument.body)), e.removeEventListener("load", t);
+  return C(t, r), () => {
+    const s = f(t.contentDocument, i);
+    s && v().unobserve(s), t.removeEventListener("load", r);
   };
 }
-function H({ iframe: e, interactionState: t }) {
+function $({ iframe: e, interactionState: t }) {
   const n = () => {
     t.isHovered = !0;
-  }, r = () => {
+  }, i = () => {
     t.isHovered = !1;
   };
-  return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", r), () => {
-    e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", r);
+  return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", i), () => {
+    e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", i);
   };
 }
-function M() {
-  const e = ({ target: t }) => {
-    const n = l.find((o) => {
-      var s;
-      return ((s = o.iframe.contentDocument) == null ? void 0 : s.body) === t;
-    });
-    if (!n)
-      return;
-    const { iframe: r } = n;
-    if (!r.contentDocument)
-      return;
-    const i = h(r.contentDocument);
-    i && f({ newHeight: i, registeredElement: n });
+function q() {
+  let e = null;
+  return () => {
+    if (!e) {
+      const t = ({ target: n }) => {
+        const i = l.find(({ iframe: d }) => d.contentDocument === n.ownerDocument);
+        if (!i)
+          return;
+        const { iframe: o, settings: r } = i, s = f(o.contentDocument, r.targetElementSelector);
+        if (!s)
+          return;
+        const { height: a } = L(s);
+        a && g({ newHeight: a, registeredElement: i });
+      };
+      e = new ResizeObserver((n) => n.forEach(t));
+    }
+    return e;
   };
-  return new ResizeObserver((t) => t.forEach(e));
 }
-function f({ registeredElement: e, newHeight: t }) {
-  const { iframe: n, settings: r, interactionState: i } = e, o = n.getBoundingClientRect(), s = t + r.offsetSize;
-  if (n.style.height = `${s}px`, !r.onIframeResize)
+function g({ registeredElement: e, newHeight: t }) {
+  const { iframe: n, settings: i, interactionState: o, initContext: r } = e;
+  r.isInitialized || (r.isInitialized = !0, clearTimeout(r.retryTimeoutId));
+  const s = n.getBoundingClientRect(), a = t + i.offsetSize;
+  if (n.style.height = `${a}px`, !i.onIframeResize)
     return;
   const d = {
     iframe: n,
-    settings: { ...r },
-    interactionState: { ...i },
-    previousRenderState: { rect: o },
+    settings: { ...i },
+    interactionState: { ...o },
+    previousRenderState: { rect: s },
     nextRenderState: { rect: n.getBoundingClientRect() }
   };
-  r.onIframeResize(d);
+  i.onIframeResize(d);
 }
-W();
-function W() {
-  !g() || !L() || w(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 V = G();
+let z = !1;
+_();
+function _() {
+  !p() || !R() || window.addEventListener("message", (e) => {
+    var t;
+    ((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && M(() => O(e));
   });
 }
-const A = ({ previousRenderState: e, nextRenderState: t, interactionState: n }) => {
-  n.isHovered && window.scrollBy(0, t.rect.bottom - e.rect.bottom);
+function O(e, t = 0) {
+  const { targetElementSelector: n, bodyPadding: i, bodyMargin: o } = e.data, r = f(document, n);
+  if (z || window.parent !== e.source)
+    return;
+  if (!r)
+    return setTimeout(() => O(e, t + 1), m(t));
+  I(document, { bodyMargin: o, bodyPadding: i });
+  const s = V();
+  s.disconnect(), s.observe(r), z = !0;
+}
+function G() {
+  let e = null;
+  return () => (e || (e = new ResizeObserver((t) => {
+    if (!t[0].target)
+      return;
+    const { height: n, width: i } = L(t[0].target), o = {
+      type: "iframe-resized",
+      width: i,
+      height: n
+    };
+    window.parent.postMessage(o, "*");
+  })), e);
+}
+const Q = ({ previousRenderState: e, nextRenderState: t, iframe: n }) => {
+  document.activeElement === n && window.scrollBy(0, t.rect.bottom - e.rect.bottom);
 };
 export {
-  D as initialize,
-  W as initializeChildListener,
-  A as updateParentScrollOnResize
+  K as initialize,
+  _ as initializeChildListener,
+  Q as updateParentScrollOnResize
 };

package/dist/index.umd.cjs CHANGED Viewed

	@@ -1 +1 @@
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"})});
1	+ (function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a\|\|self,l(a.iframeResizer={}))})(this,function(a){"use strict";const l=()=>typeof window<"u",E=()=>window.self!==window.top,w=e=>e instanceof HTMLIFrameElement,T=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},M=(e,t)=>{t(),e.addEventListener("load",t)},C=(e,t)=>{var o,r;const n=((o=e.contentWindow)==null?void 0:o.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&n?t():e.addEventListener("load",t)},k=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),B=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},D=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},P=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),b=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},g=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,p=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},h=e=>e<=100?100:e<=120?1e3:1e4,A=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function H(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 z=V();let m=[];const W=(e,t)=>{if(!l())return[];const n={...k(),...P(e??{})},i=x(t),o=F(n,i);return i.map(r=>{const s={iframe:r,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=N(s,o);return m.push(s),{unsubscribe:()=>{c(),m=m.filter(u=>u.iframe!==r)}}})};function x(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(w):e?w(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 i of t){const o=D(i);o&&n.push(o)}return n}function N(e,t){const n=B(e.iframe)?$(e):U(e,t),i=q(e);return()=>{n(),i()}}function U(e,t){const{iframe:n,initContext:i,settings:{checkOrigin:o,enableLegacyLibSupport:r,targetElementSelector:s,bodyPadding:c,bodyMargin:u}}=e,I=d=>{var R;const K=!o\|\|t.includes(d.origin);if(!(!(n.contentWindow===d.source)\|\|!K)){if(((R=d.data)==null?void 0:R.type)==="iframe-resized"){const{height:f}=d.data;f&&y({newHeight:f,registeredElement:e});return}if(r){const f=H(d);f!==null&&y({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",I);const J=r?A():{type:"iframe-child-init",targetElementSelector:s,bodyPadding:c,bodyMargin:u},S=()=>{M(n,()=>{var d;return(d=n.contentWindow)==null?void 0:d.postMessage(J,"")}),i.retryAttempts++,i.retryTimeoutId=window.setTimeout(S,h(i.retryAttempts))};return S(),()=>window.removeEventListener("message",I)}function $(e){const{iframe:t,settings:n}=e,{targetElementSelector:i}=n;let o=0;const r=()=>{const s=g(t.contentDocument,i);if(!t.contentDocument\|\|!s)return o++,setTimeout(r,h(o));p(t.contentDocument,n),z().observe(s)};return C(t,r),()=>{const s=g(t.contentDocument,i);s&&z().unobserve(s),t.removeEventListener("load",r)}}function q({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 V(){let e=null;return()=>{if(!e){const t=({target:n})=>{const i=m.find(({iframe:u})=>u.contentDocument===n.ownerDocument);if(!i)return;const{iframe:o,settings:r}=i,s=g(o.contentDocument,r.targetElementSelector);if(!s)return;const{height:c}=b(s);c&&y({newHeight:c,registeredElement:i})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function y({registeredElement:e,newHeight:t}){const{iframe:n,settings:i,interactionState:o,initContext:r}=e;r.isInitialized\|\|(r.isInitialized=!0,clearTimeout(r.retryTimeoutId));const s=n.getBoundingClientRect(),c=t+i.offsetSize;if(n.style.height=`${c}px`,!i.onIframeResize)return;const u={iframe:n,settings:{...i},interactionState:{...o},previousRenderState:{rect:s},nextRenderState:{rect:n.getBoundingClientRect()}};i.onIframeResize(u)}const _=j();let v=!1;L();function L(){!l()\|\|!E()\|\|window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&T(()=>O(e))})}function O(e,t=0){const{targetElementSelector:n,bodyPadding:i,bodyMargin:o}=e.data,r=g(document,n);if(v\|\|window.parent!==e.source)return;if(!r)return setTimeout(()=>O(e,t+1),h(t));p(document,{bodyMargin:o,bodyPadding:i});const s=_();s.disconnect(),s.observe(r),v=!0}function j(){let e=null;return()=>(e\|\|(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:i}=b(t[0].target),o={type:"iframe-resized",width:i,height:n};window.parent.postMessage(o,"")})),e)}const G=({previousRenderState:e,nextRenderState:t,iframe:n})=>{document.activeElement===n&&window.scrollBy(0,t.rect.bottom-e.rect.bottom)};a.initialize=W,a.initializeChildListener=L,a.updateParentScrollOnResize=G,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "@open-iframe-resizer/core",
 	"private": false,
-	"version": "1.2.1",
+	"version": "1.3.1",
 	"description": "Open-source modern iframe resizer",
 	"license": "MIT",
 	"repository": {
@@ -21,14 +21,14 @@
 		"responsive"
 	],
 	"type": "module",
-	"main": "./dist/index.cjs",
+	"main": "./dist/index.umd.cjs",
 	"module": "./dist/index.js",
 	"typings": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js",
-			"require": "./dist/index.cjs"
+			"require": "./dist/index.umd.cjs"
 		}
 	},
 	"files": [
@@ -46,8 +46,5 @@
 		"test:e2e": "npx playwright install --with-deps && npx playwright test",
 		"test:unit": "vitest run",
 		"prepare": "copyfiles -V ../../README.md packages/core"
-	},
-	"devDependencies": {
-		"@microsoft/tsdoc": "^0.15.0"
 	}
 }