@data-fair/frame 0.5.1 → 0.7.0

package/dist/d-frame-content.min.js

@@ -1,2 +1,2 @@
-var DFrameContent=function(){"use strict";var g=Object.defineProperty;var l=(a,i,s)=>i in a?g(a,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[i]=s;var n=(a,i,s)=>l(a,typeof i!="symbol"?i+"":i,s);function a(r){return r[0]==="df-parent"&&r[1]==="init"}function i(r){return r[0]==="df-parent"&&r[1]==="updateSrc"}const s=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class c{constructor(e){n(this,"initialized",!1);n(this,"options");n(this,"pendingCheckHeight",!1);n(this,"debug",!1);n(this,"id");n(this,"throttledCheckHeight");n(this,"lastHeight",0);this.options=e??{};const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},!(typeof window>"u")&&(window.addEventListener("message",o=>this.onMessage(o)),this.postMessageToParent(["df-child","init"]))}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`${this.id}:d-frame-content`,...t),e==="info"&&console.info(`${this.id}:d-frame-content`,...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;a(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`${this.id}:d-frame-content`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),i(t)&&(this.options.updateSrc?this.options.updateSrc(t[2].startsWith("/")?window.location.origin+t[2]:t[2]):window.location.href=t[2])}}postMessageToParent(e){window.parent.postMessage(e)}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...h)=>{const d=e.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=t;const o=(...h)=>{const d=e.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=o}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const e of s)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0;for(const o of e){const h=o.getAttribute("data-iframe-height"),d=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom"))+(h?parseFloat(h):0);d>t&&(t=d)}t=Math.ceil(t),t!==this.lastHeight&&(this.postMessageToParent(["df-child","height",t]),this.lastHeight=t)}}return new c}();
+var DFrameContent=function(){"use strict";var u=Object.defineProperty;var f=(o,n,r)=>n in o?u(o,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[n]=r;var a=(o,n,r)=>f(o,typeof n!="symbol"?n+"":n,r);function o(h){return h[0]==="df-parent"&&h[1]==="init"}function n(h){return h[0]==="df-parent"&&h[1]==="updateSrc"}const r=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class l{constructor(t){a(this,"initialized",!1);a(this,"options");a(this,"pendingCheckHeight",!1);a(this,"debug",!1);a(this,"id");a(this,"throttledCheckHeight");a(this,"lastHeight",0);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...e),t==="info"&&console.info(`d-frame:${this.id}:content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;o(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),n(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}ready(){this.postMessageToParent(["df-child","ready"])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...s)=>{const d=t.apply(window.history,s);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const i=(...s)=>{const d=t.apply(window.history,s);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=i}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of r)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0,i=0;for(const s of t){const d=s.getAttribute("data-iframe-height"),c=s.getBoundingClientRect().bottom+parseFloat(getComputedStyle(s).getPropertyValue("margin-bottom")),g=d?c+parseFloat(d):c;c>e&&(e=c),g>i&&(i=g)}i=Math.ceil(i),e>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}return new l}();
 //# sourceMappingURL=d-frame-content.min.js.map

package/dist/d-frame.min.js

@@ -1,12 +1,15 @@
-var H=Object.defineProperty;var M=(u,c,g)=>c in u?H(u,c,{enumerable:!0,configurable:!0,writable:!0,value:g}):u[c]=g;var o=(u,c,g)=>M(u,typeof c!="symbol"?c+"":c,g);(function(){"use strict";function u(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function g(e){return e[0]==="df-child"&&e[1]==="stateChange"}function m(e){return e[0]==="df-child"&&e[1]==="custom"}function b(e){return e[0]==="df-child"&&e[1]==="notif"}function y(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function w(e,a){if(a.origin!==e.origin)return a.href;if(a.pathname===e.pathname)return"";const t=y(e.pathname);return a.pathname.startsWith(t)?a.pathname.replace(t,"./"):a.pathname}const A=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function E(e){const a=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),r="^"+A(s).replace(/\\\*/g,"(.*)")+"$";a.push({regexp:new RegExp(r),append:i})}return a}function z(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,l)=>{for(const n of t){if(n.append&&!l.startsWith(n.append)||l===s)continue;const h=n.append?l.replace(n.append,""):l;if(h.match(n.regexp)){e.searchParams.set(h,r);break}}}),s!==null){const r=i.searchParams.get(s);r&&(e.pathname=new URL(r,e).pathname)}return e.href}function R(e,a,t,s,i){const r=new URL(t),l=new URL(a);if(s&&(r.searchParams.forEach((n,h)=>{for(const d of s){if(d.append&&!h.startsWith(d.append))continue;const f=d.append?h.replace(d.append,""):h;if(f.match(d.regexp)){l.searchParams.get(f)===null&&r.searchParams.delete(h);break}}}),l.searchParams.forEach((n,h)=>{for(const d of s){if(!h.match(d.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=d.append?d.append+h:h;r.searchParams.set(f,n);break}})),i!==null&&e){const n=w(e,l);n?r.searchParams.set(i,n):r.searchParams.delete(i)}return r}function S(e){return e.vIframe===!0&&e.uiNotification!==void 0}function v(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const a=e.error.response&&(e.error.response.data||e.error.response.status)||e.error.message||e.error;return e.msg?{type:"error",title:e.msg,detail:a}:{type:"error",title:a}}return e.type==="error"?{type:e.clientError?"warning":"error",title:e.msg,detail:e.errorMsg}:{type:e.type??"default",title:e.msg}}class P{stateChange(a,t){a==="replace"&&window.history.replaceState(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const p=document.createElement("template");p.innerHTML=`<style>
+var H=Object.defineProperty;var x=(l,d,f)=>d in l?H(l,d,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[d]=f;var n=(l,d,f)=>x(l,typeof d!="symbol"?d+"":d,f);(function(){"use strict";function l(e){return e[0]==="df-child"&&e[1]==="init"}function d(e){return e[0]==="df-child"&&e[1]==="height"}function f(e){return e[0]==="df-child"&&e[1]==="stateChange"}function m(e){return e[0]==="df-child"&&e[1]==="custom"}function b(e){return e[0]==="df-child"&&e[1]==="notif"}function y(e){return e[0]==="df-child"&&e[1]==="ready"}function w(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function E(e,a){if(a.origin!==e.origin)return a.href;if(a.pathname===e.pathname)return"";const t=w(e.pathname);return a.pathname.startsWith(t)?a.pathname.replace(t,"./"):a.pathname}const A=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function v(e){const a=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),r="^"+A(s).replace(/\\\*/g,"(.*)")+"$";a.push({regexp:new RegExp(r),append:i})}return a}function S(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,u)=>{for(const h of t){if(h.append&&!u.startsWith(h.append)||u===s)continue;const o=h.append?u.replace(h.append,""):u;if(o.match(h.regexp)){e.searchParams.set(o,r);break}}}),s!==null){const r=i.searchParams.get(s);r&&(e.pathname=new URL(r,e).pathname)}return e.href}function C(e,a,t,s,i){const r=new URL(t),u=new URL(a);if(s&&(r.searchParams.forEach((h,o)=>{for(const c of s){if(c.append&&!o.startsWith(c.append))continue;const g=c.append?o.replace(c.append,""):o;if(g.match(c.regexp)){u.searchParams.get(g)===null&&r.searchParams.delete(o);break}}}),u.searchParams.forEach((h,o)=>{for(const c of s){if(!o.match(c.regexp)||(e==null?void 0:e.searchParams.get(o))===h)continue;const g=c.append?c.append+o:o;r.searchParams.set(g,h);break}})),i!==null&&e){const h=E(e,u);h?r.searchParams.set(i,h):r.searchParams.delete(i)}return r}function P(e){return e.vIframe===!0&&e.uiNotification!==void 0}function z(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const a=e.error.response&&(e.error.response.data||e.error.response.status)||e.error.message||e.error;return e.msg?{type:"error",title:e.msg,detail:a}:{type:"error",title:a}}return e.type==="error"?{type:e.clientError?"warning":"error",title:e.msg,detail:e.errorMsg}:{type:e.type??"default",title:e.msg}}class R{stateChange(a,t){a==="replace"&&window.history.replaceState(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const p=document.createElement("template");p.innerHTML=`<style>
   :host {
     display: block;
   }
+  .d-frame-wrapper {
+    height: 100%;
+  }
   iframe.d-frame-iframe {
     display: block;
     width: 100%;
     height: 100%;
     border: none;
   }
-</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class C extends HTMLElement{constructor(){super();o(this,"adapter");o(this,"connected",!1);o(this,"initialSrc");o(this,"srcUrl");o(this,"parsedSyncParams");o(this,"iframeElement");o(this,"slotElement");o(this,"width");o(this,"aspectRatioHeight");o(this,"resizedHeight");o(this,"randomId");this.randomId=Math.random().toString(36).slice(-6);const t=p.content.cloneNode(!0);this.slotElement=t.childNodes[1],this.resize!=="yes"&&(this.slotElement.style.display="none"),this.iframeElement=t.childNodes[2],this.iframeElement.setAttribute("scrolling",this.resize==="yes"?"no":"auto"),this.iframeElement.setAttribute("loading",this.lazy?"lazy":"eager"),this.attachShadow({mode:"open"}).appendChild(t),new ResizeObserver(r=>{(this.width===void 0||Math.abs(this.width-r[0].contentRect.width)>2)&&(this.width=r[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new P,window.addEventListener("message",r=>this.onMessage(r))}get id(){return this.getAttribute("id")??this.randomId}set id(t){this.setAttribute("id",t)}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get lazy(){return this.hasAttribute("lazy")}set lazy(t){t?this.setAttribute("lazy",""):this.removeAttribute("lazy")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get aspectRatio(){const t=this.getAttribute("aspect-ratio");return t===""?"auto":t}set aspectRatio(t){t!==null?this.setAttribute("aspect-ratio",t):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(t){t?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var s;if(t.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=t.data;if(this.log("debug","received message from child",i),Array.isArray(t.data)){if(u(i)&&(this.postMessageToChild(["df-parent","init",{id:this.id,debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null,stateChangeEvents:this.stateChangeEvents}]),this.init()),c(i)&&(this.resizedHeight=i[2],this.updateStyle()),g(i)){if(this.parsedSyncParams||this.syncPath){const r=R(this.srcUrl,i[3],window.location.href,this.parsedSyncParams,this.syncPath);r.href!==window.location.href&&this.adapter.stateChange(i[2],r)}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}m(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),b(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}else S(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:v(i.uiNotification)}))}}init(){this.initialSrc=this.src}postMessageToChild(t){var s,i;this.log("debug","send message to child",t),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(t)}updateSrc(){if(!this.connected)return;this.srcUrl=new URL(this.src.startsWith("/")?window.location.origin+this.src:this.src);const t=z(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):(this.log("debug","set src attribute of iframe: "+t),this.iframeElement.setAttribute("src",t))}updateStyle(){if(!this.connected)return;let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")),this.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"&&this.aspectRatio!==null?(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.log("debug","use slot element while waiting for resize message"),this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t+=`height:${this.height};`):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t+=`height:${this.aspectRatioHeight}px;`)),this.log("debug","set style attribute of iframe: "+t),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`${this.id}:d-frame`,...s),t==="info"&&console.info(`${this.id}:d-frame`,...s))}connectedCallback(){if(this.debug&&console.time(`${this.id}:d-frame`),!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.syncParams!==null&&(this.parsedSyncParams=E(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}disconnectedCallback(){this.log("debug","disconnected"),this.debug&&console.timeEnd(`[${this.id}:d-frame]`)}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){t==="aspect-ratio"&&this.updateAspectRatioHeight(),this.connected&&(this.log("debug","attribute change",t,s,i),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc())}}customElements.define("d-frame",C)})();
+</style><div class="d-frame-wrapper"><slot name="loading"><div style="min-height:150px;"></div></slot><iframe class="d-frame-iframe" frameborder="0" style="visibility:hidden;position:absolute;height:0px;"></iframe></div>`;class M extends HTMLElement{constructor(){super();n(this,"adapter");n(this,"connected",!1);n(this,"initialSrc");n(this,"srcUrl");n(this,"parsedSyncParams");n(this,"wrapperElement");n(this,"slotElement");n(this,"iframeElement");n(this,"width");n(this,"aspectRatioHeight");n(this,"resizedHeight");n(this,"randomId");n(this,"iframeLoaded",!1);n(this,"ready",!1);this.randomId=Math.random().toString(36).slice(-6);const t=p.content.cloneNode(!0);this.wrapperElement=t.childNodes[1],this.slotElement=this.wrapperElement.childNodes[0],this.iframeElement=this.wrapperElement.childNodes[1],this.iframeElement.setAttribute("scrolling",this.resize==="yes"?"no":"auto"),this.iframeElement.setAttribute("loading",this.lazy?"lazy":"eager"),this.iframeElement.addEventListener("load",()=>{this.iframeElement.getAttribute("src")&&(this.log("debug","iframe loaded"),this.iframeLoaded=!0,this.dispatchEvent(new CustomEvent("iframe-load")),this.resize!=="yes"&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()))}),this.attachShadow({mode:"open"}).appendChild(t),new ResizeObserver(r=>{(this.width===void 0||Math.abs(this.width-r[0].contentRect.width)>2)&&(this.width=r[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new R,window.addEventListener("message",r=>this.onMessage(r))}get id(){return this.getAttribute("id")??this.randomId}set id(t){this.setAttribute("id",t)}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get lazy(){return this.hasAttribute("lazy")}set lazy(t){t?this.setAttribute("lazy",""):this.removeAttribute("lazy")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get aspectRatio(){const t=this.getAttribute("aspect-ratio");return t===""?"auto":t}set aspectRatio(t){t!==null?this.setAttribute("aspect-ratio",t):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(t){t?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get readyMessage(){return this.hasAttribute("ready-message")}set readyMessage(t){t?this.setAttribute("ready-message",""):this.removeAttribute("ready-message")}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var s;if(t.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=t.data;if(this.log("debug","received message from child",i),Array.isArray(t.data)){if(l(i)&&(this.postMessageToChild(["df-parent","init",{id:this.id,debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null,stateChangeEvents:this.stateChangeEvents}]),this.init()),d(i)&&(this.resizedHeight=i[2],this.resize==="yes"&&!this.ready&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready"))),this.updateStyle()),f(i)){if(this.parsedSyncParams||this.syncPath){const r=C(this.srcUrl,i[3],window.location.href,this.parsedSyncParams,this.syncPath);r.href!==window.location.href&&this.adapter.stateChange(i[2],r)}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}m(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),b(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),y(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle())}else P(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:z(i.uiNotification)}))}}init(){this.initialSrc=this.src}postMessageToChild(t){var s,i;this.log("debug","send message to child",t),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(t)}updateSrc(){if(!this.connected)return;this.srcUrl=new URL(this.src.startsWith("/")?window.location.origin+this.src:this.src);const t=S(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):(this.log("debug","set src attribute of iframe: "+t),this.iframeElement.setAttribute("src",t))}updateStyle(){if(!this.connected)return;let t;this.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),t=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t=this.aspectRatioHeight+"px"),t!==void 0?(this.log("debug","set height iframe wrapper: "+t),this.wrapperElement.setAttribute("style",`height:${t};min-height:0;`)):this.wrapperElement.setAttribute("style",""),this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.ready&&this.iframeElement.getAttribute("style")!==""&&(this.log("debug","toggle loading slot and iframe visibility"),this.iframeElement.setAttribute("style",""),this.slotElement.setAttribute("style","display:none;"))}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}`,...s),t==="info"&&console.info(`d-frame:${this.id}`,...s))}connectedCallback(){if(!this.debug){const t=window.localStorage.getItem("debug");if(t){const s=t.split(",");(s.includes("d-frame")||s.includes("d-frame:"+this.id))&&(this.debug=!0)}}if(this.debug&&console.time(`d-frame:${this.id}`),!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.syncParams!==null&&(this.parsedSyncParams=v(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}disconnectedCallback(){this.log("debug","disconnected"),this.debug&&console.timeEnd(`d-frame:${this.id}`)}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){t==="aspect-ratio"&&this.updateAspectRatioHeight(),this.connected&&(this.log("debug","attribute change",t,s,i),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc())}}customElements.get("d-frame")||customElements.define("d-frame",M)})();
 //# sourceMappingURL=d-frame.min.js.map

package/dist/v-iframe-compat/d-frame-content.min.js

@@ -1,2 +1,2 @@
-var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(h,s,d)=>s in h?g(h,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[s]=d;var r=(h,s,d)=>f(h,typeof s!="symbol"?s+"":s,d);function h(n){return n[0]==="df-parent"&&n[1]==="init"}function s(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const d=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class u{constructor(t){r(this,"initialized",!1);r(this,"options");r(this,"pendingCheckHeight",!1);r(this,"debug",!1);r(this,"id");r(this,"throttledCheckHeight");r(this,"lastHeight",0);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`${this.id}:d-frame-content`,...e),t==="info"&&console.info(`${this.id}:d-frame-content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;h(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`${this.id}:d-frame-content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),s(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...o)=>{const a=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),a};window.history.pushState=e;const i=(...o)=>{const a=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),a};window.history.replaceState=i}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of d)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const i of t){const o=i.getAttribute("data-iframe-height"),a=i.getBoundingClientRect().bottom+parseFloat(getComputedStyle(i).getPropertyValue("margin-bottom"))+(o?parseFloat(o):0);a>e&&(e=a)}e=Math.ceil(e),e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const c=new u({updateSrc:n=>{const t=window.vIframeOptions,e=t==null?void 0:t.reactiveParams;if(e){const i=new URL(n);if(i.origin===window.location.origin&&i.pathname===window.location.pathname){const o=Object.keys(e);i.searchParams.forEach((a,l)=>{e[l]=a,o.splice(o.indexOf(l),1)}),o.forEach(a=>{delete e[a]});return}}if(t!=null&&t.router){const i=window.location.origin+t.router.options.history.base;if(n.startsWith(i)){t.router.replace(n.replace(i,""));return}}window.location.href=n}});return window.dFrameContent=c,c}();
+var VIframeCompatDFrameContent=function(){"use strict";var w=Object.defineProperty;var p=(r,a,h)=>a in r?w(r,a,{enumerable:!0,configurable:!0,writable:!0,value:h}):r[a]=h;var s=(r,a,h)=>p(r,typeof a!="symbol"?a+"":a,h);function r(n){return n[0]==="df-parent"&&n[1]==="init"}function a(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const h=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class u{constructor(t){s(this,"initialized",!1);s(this,"options");s(this,"pendingCheckHeight",!1);s(this,"debug",!1);s(this,"id");s(this,"throttledCheckHeight");s(this,"lastHeight",0);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...e),t==="info"&&console.info(`d-frame:${this.id}:content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;r(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),a(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}ready(){this.postMessageToParent(["df-child","ready"])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...o)=>{const d=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const i=(...o)=>{const d=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=i}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of h)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0,i=0;for(const o of t){const d=o.getAttribute("data-iframe-height"),c=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),f=d?c+parseFloat(d):c;c>e&&(e=c),f>i&&(i=f)}i=Math.ceil(i),e>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}const g=(n,t)=>{const e=Object.keys(n);t.forEach((i,o)=>{n[o]=i,e.splice(e.indexOf(o),1)}),e.forEach(i=>{delete n[i]})},l=new u({updateSrc:n=>{const t=window.vIframeOptions,e=t==null?void 0:t.reactiveParams;if(e&&typeof e=="object"){const i=new URL(n);if(i.origin===window.location.origin&&i.pathname===window.location.pathname){g(e,i.searchParams);return}}if(t!=null&&t.router){const i=window.location.origin+t.router.options.history.base;if(n.startsWith(i)){t.router.replace(n.replace(i,""));return}}window.location.href=n}});return window.dFrameContent=l,l}();
 //# sourceMappingURL=d-frame-content.min.js.map

package/lib/DFrameContent.d.ts

@@ -16,6 +16,7 @@ export default class DFrameContent {
     private postMessageToParent;
     sendNotif(notif: Notif): void;
     sendMessage(msg: any): void;
+    ready(): void;
     private initResize;
     private initStateChangeWatcher;
     private createMutationObserver;

package/lib/DFrameContent.js

@@ -60,9 +60,9 @@ export default class DFrameContent {
         if (level === 'debug' && !this.debug)
             return;
         if (level === 'debug')
-            console.timeLog(`${this.id}:d-frame-content`, ...args);
+            console.timeLog(`d-frame:${this.id}:content`, ...args);
         if (level === 'info')
-            console.info(`${this.id}:d-frame-content`, ...args);
+            console.info(`d-frame:${this.id}:content`, ...args);
     }
     onMessage(e) {
         if (e.source === window.parent && Array.isArray(e.data)) {
@@ -71,7 +71,7 @@ export default class DFrameContent {
                 this.id = message[2].id;
                 this.debug = !!message[2].debug;
                 if (this.debug)
-                    console.time(`${this.id}:d-frame-content`);
+                    console.time(`d-frame:${this.id}:content`);
                 if (message[2].resize !== 'no')
                     this.initResize();
                 if (message[2].syncParams || message[2].syncPath || message[2].stateChangeEvents)
@@ -97,6 +97,9 @@ export default class DFrameContent {
     sendMessage(msg) {
         this.postMessageToParent(['df-child', 'custom', msg]);
     }
+    ready() {
+        this.postMessageToParent(['df-child', 'ready']);
+    }
     initResize() {
         this.log('debug', 'initResize');
         this.checkHeight();
@@ -143,17 +146,20 @@ export default class DFrameContent {
     }
     checkHeight() {
         const elements = document.querySelectorAll('[data-iframe-height]');
+        let maxWithoutOffset = 0;
         let max = 0;
         for (const element of elements) {
             const dataAttribute = element.getAttribute('data-iframe-height');
-            const bottom = element.getBoundingClientRect().bottom +
-                parseFloat(getComputedStyle(element).getPropertyValue('margin-bottom')) +
-                (dataAttribute ? parseFloat(dataAttribute) : 0);
+            const bottomWithoutOffset = element.getBoundingClientRect().bottom +
+                parseFloat(getComputedStyle(element).getPropertyValue('margin-bottom'));
+            const bottom = dataAttribute ? (bottomWithoutOffset + parseFloat(dataAttribute)) : bottomWithoutOffset;
+            if (bottomWithoutOffset > maxWithoutOffset)
+                maxWithoutOffset = bottomWithoutOffset;
             if (bottom > max)
                 max = bottom;
         }
         max = Math.ceil(max);
-        if (max !== this.lastHeight) {
+        if (maxWithoutOffset > 0 && max !== this.lastHeight) {
             this.postMessageToParent(['df-child', 'height', max]);
             this.lastHeight = max;
         }

package/lib/DFrameElement.d.ts

@@ -24,17 +24,22 @@ export default class DFrameElement extends HTMLElement {
     set syncPath(value: string | null);
     get stateChangeEvents(): boolean;
     set stateChangeEvents(value: boolean);
+    get readyMessage(): boolean;
+    set readyMessage(value: boolean);
     adapter: StateChangeAdapter;
     private connected;
     private initialSrc;
     private srcUrl;
     private parsedSyncParams;
-    private iframeElement;
+    private wrapperElement;
     private slotElement;
+    private iframeElement;
     private width;
     private aspectRatioHeight;
     private resizedHeight;
     private randomId;
+    private iframeLoaded;
+    private ready;
     get actualAspectRatio(): number;
     constructor();
     onMessage(e: MessageEvent): void;

package/lib/DFrameElement.js

@@ -1,5 +1,5 @@
 // this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
-import { isCustomMessage, isHeightMessage, isInitChildMessage, isNotifMessage, isStateChangeMessage } from './messages.js';
+import { isCustomMessage, isHeightMessage, isInitChildMessage, isNotifMessage, isReadyMessage, isStateChangeMessage } from './messages.js';
 import { parseSyncParams, getChildSrc, getParentUrl } from './utils/sync-params.js';
 import { isVIframeUiNotif, convertVIframeUiNotif } from './v-iframe-compat/ui-notif.js';
 class WindowStateChangeAdapter {
@@ -15,13 +15,16 @@ template.innerHTML = `<style>
   :host {
     display: block;
   }
+  .d-frame-wrapper {
+    height: 100%;
+  }
   iframe.d-frame-iframe {
     display: block;
     width: 100%;
     height: 100%;
     border: none;
   }
-</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;
+</style><div class="d-frame-wrapper"><slot name="loading"><div style="min-height:150px;"></div></slot><iframe class="d-frame-iframe" frameborder="0" style="visibility:hidden;position:absolute;height:0px;"></iframe></div>`;
 export default class DFrameElement extends HTMLElement {
     get id() { return this.getAttribute('id') ?? this.randomId; }
     set id(value) {
@@ -97,18 +100,28 @@ export default class DFrameElement extends HTMLElement {
         else
             this.removeAttribute('state-change-events');
     }
+    get readyMessage() { return this.hasAttribute('ready-message'); }
+    set readyMessage(value) {
+        if (value)
+            this.setAttribute('ready-message', '');
+        else
+            this.removeAttribute('ready-message');
+    }
     adapter;
     /* internal state */
     connected = false;
     initialSrc;
     srcUrl;
     parsedSyncParams;
-    iframeElement;
+    wrapperElement;
     slotElement;
+    iframeElement;
     width;
     aspectRatioHeight;
     resizedHeight;
     randomId;
+    iframeLoaded = false;
+    ready = false;
     get actualAspectRatio() {
         if (this.aspectRatio !== 'auto')
             return Number(this.aspectRatio);
@@ -124,12 +137,23 @@ export default class DFrameElement extends HTMLElement {
         super();
         this.randomId = Math.random().toString(36).slice(-6);
         const root = template.content.cloneNode(true);
-        this.slotElement = root.childNodes[1];
-        if (this.resize !== 'yes')
-            this.slotElement.style.display = 'none';
-        this.iframeElement = root.childNodes[2];
+        this.wrapperElement = root.childNodes[1];
+        this.slotElement = this.wrapperElement.childNodes[0];
+        this.iframeElement = this.wrapperElement.childNodes[1];
         this.iframeElement.setAttribute('scrolling', this.resize === 'yes' ? 'no' : 'auto');
         this.iframeElement.setAttribute('loading', this.lazy ? 'lazy' : 'eager');
+        this.iframeElement.addEventListener('load', () => {
+            if (this.iframeElement.getAttribute('src')) {
+                this.log('debug', 'iframe loaded');
+                this.iframeLoaded = true;
+                this.dispatchEvent(new CustomEvent('iframe-load'));
+                if (this.resize !== 'yes' && !this.readyMessage) {
+                    this.ready = true;
+                    this.dispatchEvent(new CustomEvent('ready'));
+                    this.updateStyle();
+                }
+            }
+        });
         const shadowRoot = this.attachShadow({ mode: 'open' });
         shadowRoot.appendChild(root);
         const resizeObserver = new ResizeObserver((entries) => {
@@ -162,6 +186,10 @@ export default class DFrameElement extends HTMLElement {
                 }
                 if (isHeightMessage(message)) {
                     this.resizedHeight = message[2];
+                    if (this.resize === 'yes' && !this.ready && !this.readyMessage) {
+                        this.ready = true;
+                        this.dispatchEvent(new CustomEvent('ready'));
+                    }
                     this.updateStyle();
                 }
                 if (isStateChangeMessage(message)) {
@@ -181,6 +209,11 @@ export default class DFrameElement extends HTMLElement {
                 if (isNotifMessage(message)) {
                     this.dispatchEvent(new CustomEvent('notif', { detail: message[2] }));
                 }
+                if (isReadyMessage(message)) {
+                    this.ready = true;
+                    this.dispatchEvent(new CustomEvent('ready'));
+                    this.updateStyle();
+                }
             }
             else if (isVIframeUiNotif(message)) {
                 // maintain compatibility with v-iframe notifications sent through postMessage
@@ -212,51 +245,48 @@ export default class DFrameElement extends HTMLElement {
     updateStyle() {
         if (!this.connected)
             return;
-        let style = '';
+        // manage height of iframe wrapper
+        let wrapperHeight;
+        if (this.resizedHeight) {
+            this.log('debug', 'height of iframe based on resize message: ' + this.resizedHeight);
+            wrapperHeight = this.resizedHeight + 'px';
+        }
+        else {
+            if (this.height) {
+                this.log('debug', 'height of iframe based on direct attribute: ' + this.height);
+                wrapperHeight = this.height;
+            }
+            else if (this.aspectRatio !== null) {
+                this.log('debug', 'height of iframe based on aspect ratio: ' + this.aspectRatioHeight);
+                wrapperHeight = this.aspectRatioHeight + 'px';
+            }
+        }
+        if (wrapperHeight !== undefined) {
+            this.log('debug', 'set height iframe wrapper: ' + wrapperHeight);
+            this.wrapperElement.setAttribute('style', `height:${wrapperHeight};min-height:0;`);
+        }
+        else {
+            this.wrapperElement.setAttribute('style', '');
+        }
+        // set scrolling attribute of iframe
         if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
             if (this.iframeElement.getAttribute('scrolling') !== 'no') {
                 this.log('debug', 'set scrolling attribute of iframe: no');
                 this.iframeElement.setAttribute('scrolling', 'no');
             }
-            if (this.resizedHeight) {
-                this.log('debug', 'height of iframe based on resize message: ' + this.resizedHeight);
-                this.slotElement.style.display = 'none';
-                style += `height:${this.resizedHeight}px;`;
-            }
-            else {
-                if (this.height) {
-                    this.log('debug', 'height of iframe based on direct attribute: ' + this.height);
-                    this.slotElement.style.display = 'none';
-                    style += `height:${this.height};`;
-                }
-                else if (this.aspectRatio !== 'auto' && this.aspectRatio !== null) {
-                    this.log('debug', 'height of iframe based on aspect ratio: ' + this.aspectRatioHeight);
-                    this.slotElement.style.display = 'none';
-                    style += `height:${this.aspectRatioHeight}px;`;
-                }
-                else {
-                    this.log('debug', 'use slot element while waiting for resize message');
-                    this.slotElement.style.display = 'block';
-                    style += 'height:0;';
-                }
-            }
         }
-        if (this.resize === 'no' || (this.resize === 'auto' && !this.resizedHeight)) {
+        else {
             if (this.iframeElement.getAttribute('scrolling') !== 'auto') {
                 this.log('debug', 'set scrolling attribute of iframe: auto');
                 this.iframeElement.setAttribute('scrolling', 'auto');
             }
-            if (this.height) {
-                this.log('debug', 'height of iframe based on direct attribute: ' + this.height);
-                style += `height:${this.height};`;
-            }
-            else if (this.aspectRatio !== null) {
-                this.log('debug', 'height of iframe based on aspect ratio: ' + this.aspectRatioHeight);
-                style += `height:${this.aspectRatioHeight}px;`;
-            }
         }
-        this.log('debug', 'set style attribute of iframe: ' + style);
-        this.iframeElement.setAttribute('style', style);
+        // toggle loading slot vs iframe visibility
+        if (this.ready && this.iframeElement.getAttribute('style') !== '') {
+            this.log('debug', 'toggle loading slot and iframe visibility');
+            this.iframeElement.setAttribute('style', '');
+            this.slotElement.setAttribute('style', 'display:none;');
+        }
     }
     updateAspectRatioHeight() {
         if (!this.width)
@@ -274,15 +304,22 @@ export default class DFrameElement extends HTMLElement {
         if (level === 'debug' && !this.debug)
             return;
         if (level === 'debug')
-            console.timeLog(`${this.id}:d-frame`, ...args);
-        // if (level === 'debug') console.debug(`${this.id}:d-frame`, ...args)
+            console.timeLog(`d-frame:${this.id}`, ...args);
         if (level === 'info')
-            console.info(`${this.id}:d-frame`, ...args);
+            console.info(`d-frame:${this.id}`, ...args);
     }
     /* standard custom element callbacks */
     connectedCallback() {
+        if (!this.debug) {
+            const globalDebug = window.localStorage.getItem('debug');
+            if (globalDebug) {
+                const debugParts = globalDebug.split(',');
+                if (debugParts.includes('d-frame') || debugParts.includes('d-frame:' + this.id))
+                    this.debug = true;
+            }
+        }
         if (this.debug)
-            console.time(`${this.id}:d-frame`);
+            console.time(`d-frame:${this.id}`);
         if (!this.hasAttribute('src'))
             throw new Error('src is a required attribute');
         this.log('debug', 'connected');
@@ -298,7 +335,7 @@ export default class DFrameElement extends HTMLElement {
     disconnectedCallback() {
         this.log('debug', 'disconnected');
         if (this.debug)
-            console.timeEnd(`[${this.id}:d-frame]`);
+            console.timeEnd(`d-frame:${this.id}`);
         // TODO: more cleanup (resize observer, etc)
     }
     /* reflected attributes */

package/lib/d-frame.js

@@ -1,2 +1,4 @@
 import DFrameElement from './DFrameElement.js';
-customElements.define('d-frame', DFrameElement);
+if (!customElements.get('d-frame')) {
+    customElements.define('d-frame', DFrameElement);
+}

package/lib/messages.d.ts

@@ -3,7 +3,8 @@ export type HeightMessage = ['df-child', 'height', number];
 export type StateChangeMessage = ['df-child', 'stateChange', 'replace' | 'push', string];
 export type CustomMessage = ['df-child', 'custom', any];
 export type NotifMessage = ['df-child', 'notif', Notif];
-export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage;
+export type ReadyMessage = ['df-child', 'ready'];
+export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage | ReadyMessage;
 export type Notif = {
     type: 'default' | 'info' | 'success' | 'warning' | 'error';
     title: string;
@@ -14,14 +15,19 @@ export declare function isHeightMessage(message: any): message is HeightMessage;
 export declare function isStateChangeMessage(message: any): message is StateChangeMessage;
 export declare function isCustomMessage(message: any): message is CustomMessage;
 export declare function isNotifMessage(message: any): message is NotifMessage;
-export type InitParentMessage = ['df-parent', 'init', {
-    id: string;
-    debug?: boolean;
-    resize: 'yes' | 'no' | 'auto';
-    syncParams: boolean;
-    syncPath: boolean;
-    stateChangeEvents: boolean;
-}];
+export declare function isReadyMessage(message: any): message is ReadyMessage;
+export type InitParentMessage = [
+    'df-parent',
+    'init',
+    {
+        id: string;
+        debug?: boolean;
+        resize: 'yes' | 'no' | 'auto';
+        syncParams: boolean;
+        syncPath: boolean;
+        stateChangeEvents: boolean;
+    }
+];
 export type UpdateSrcMessage = ['df-parent', 'updateSrc', string];
 export type ParentMessage = InitParentMessage | UpdateSrcMessage;
 export declare function isInitParentMessage(message: any[]): message is InitParentMessage;

package/lib/messages.js

@@ -13,6 +13,9 @@ export function isCustomMessage(message) {
 export function isNotifMessage(message) {
     return message[0] === 'df-child' && message[1] === 'notif';
 }
+export function isReadyMessage(message) {
+    return message[0] === 'df-child' && message[1] === 'ready';
+}
 export function isInitParentMessage(message) {
     return message[0] === 'df-parent' && message[1] === 'init';
 }

package/lib/v-iframe-compat/d-frame-content.d.ts

@@ -2,7 +2,7 @@ import DFrameContent from '../DFrameContent.js';
 import type { Router } from 'vue-router';
 export type VIframeOptions = {
     router?: Router;
-    reactiveParams?: Record<string, string>;
+    reactiveParams?: Record<string, string> | boolean;
 };
 declare const dFrameContent: DFrameContent;
 export default dFrameContent;

package/lib/v-iframe-compat/d-frame-content.js

@@ -1,19 +1,13 @@
 import DFrameContent from '../DFrameContent.js';
+import { applySearchParams } from '../vue-reactive/util.js';
 const dFrameContent = new DFrameContent({
     updateSrc: (src) => {
         const vIframeOptions = window.vIframeOptions;
         const reactiveParams = vIframeOptions?.reactiveParams;
-        if (reactiveParams) {
+        if (reactiveParams && typeof reactiveParams === 'object') {
             const srcUrl = new URL(src);
             if (srcUrl.origin === window.location.origin && srcUrl.pathname === window.location.pathname) {
-                const existingKeys = Object.keys(reactiveParams);
-                srcUrl.searchParams.forEach((value, key) => {
-                    reactiveParams[key] = value;
-                    existingKeys.splice(existingKeys.indexOf(key), 1);
-                });
-                existingKeys.forEach(key => {
-                    delete reactiveParams[key];
-                });
+                applySearchParams(reactiveParams, srcUrl.searchParams);
                 return;
             }
         }

package/lib/vue-reactive/d-frame-content.d.ts

@@ -0,0 +1,5 @@
+import DFrameContent, { type DFrameContentOptions } from '../DFrameContent.js';
+import type { Reactive } from 'vue';
+type VueReactiveDFrameContentOptions = Omit<DFrameContentOptions, 'updateSrc'>;
+export declare function VueReactiveDFrameContent(reactiveParams: Reactive<Record<string, string>>, options?: VueReactiveDFrameContentOptions): DFrameContent;
+export default VueReactiveDFrameContent;

package/lib/vue-reactive/d-frame-content.js

@@ -0,0 +1,17 @@
+import DFrameContent from '../DFrameContent.js';
+import { applySearchParams } from './util.js';
+export function VueReactiveDFrameContent(reactiveParams, options) {
+    return new DFrameContent({
+        ...options,
+        updateSrc: (src) => {
+            const srcUrl = new URL(src);
+            if (srcUrl.origin === window.location.origin && srcUrl.pathname === window.location.pathname) {
+                applySearchParams(reactiveParams, srcUrl.searchParams);
+            }
+            else {
+                window.location.href = src;
+            }
+        }
+    });
+}
+export default VueReactiveDFrameContent;

package/lib/vue-reactive/state-change-adapter.d.ts

@@ -0,0 +1,10 @@
+import { type StateChangeAdapter } from '../DFrameElement.js';
+import type { Reactive } from 'vue';
+declare class VueReactiveDFrameStateChangeAdapter implements StateChangeAdapter {
+    reactiveParams: Reactive<Record<string, string>>;
+    constructor(reactiveParams: Reactive<Record<string, string>>);
+    stateChange(action: 'push' | 'replace', newUrl: URL): void;
+    onStateChange(callback: () => void): void;
+}
+declare const _default: (reactiveParams: Reactive<Record<string, string>>) => VueReactiveDFrameStateChangeAdapter;
+export default _default;

package/lib/vue-reactive/state-change-adapter.js

@@ -0,0 +1,15 @@
+import { watch } from 'vue';
+import { applySearchParams } from './util.js';
+class VueReactiveDFrameStateChangeAdapter {
+    reactiveParams;
+    constructor(reactiveParams) {
+        this.reactiveParams = reactiveParams;
+    }
+    stateChange(action, newUrl) {
+        applySearchParams(this.reactiveParams, newUrl.searchParams);
+    }
+    onStateChange(callback) {
+        watch(this.reactiveParams, callback);
+    }
+}
+export default (reactiveParams) => new VueReactiveDFrameStateChangeAdapter(reactiveParams);

package/lib/vue-reactive/util.d.ts

@@ -0,0 +1 @@
+export declare const applySearchParams: (reactiveParams: Record<string, string>, searchParams: URLSearchParams) => void;

package/lib/vue-reactive/util.js

@@ -0,0 +1,10 @@
+export const applySearchParams = (reactiveParams, searchParams) => {
+    const existingKeys = Object.keys(reactiveParams);
+    searchParams.forEach((value, key) => {
+        reactiveParams[key] = value;
+        existingKeys.splice(existingKeys.indexOf(key), 1);
+    });
+    existingKeys.forEach(key => {
+        delete reactiveParams[key];
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/frame",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "An iframe wrapper for powerful web app integrations.",
   "main": "dist/frame.min.js",
   "directories": {
@@ -15,6 +15,7 @@
     "neostandard": "^0.11.9",
     "typescript": "^5.7.2",
     "vite": "^6.0.3",
+    "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "scripts": {