@data-fair/frame - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/d-frame-content.min.js

@@ -1,2 +0,2 @@
-var DFrameContent=function(){"use strict";var u=Object.defineProperty;var l=(n,i,s)=>i in n?u(n,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[i]=s;var a=(n,i,s)=>l(n,typeof i!="symbol"?i+"":i,s);function n(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(t){a(this,"initialized",!1);a(this,"options");a(this,"pendingCheckHeight",!1);a(this,"debug",!1);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",o=>this.onMessage(o)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;n(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath)&&this.initSyncParams(),this.initialized=!0),i(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()}initSyncParams(){this.log("debug","initSyncParams");const t=window.history.replaceState,e=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const o=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=o}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 s)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const o of t){const h=o.getAttribute("data-iframe-height"),d=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom"))+(h?parseFloat(h):0);d>e&&(e=d)}e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}return new c}();
+var DFrameContent=function(){"use strict";var g=Object.defineProperty;var u=(n,i,s)=>i in n?g(n,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[i]=s;var o=(n,i,s)=>u(n,typeof i!="symbol"?i+"":i,s);function n(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(t){o(this,"initialized",!1);o(this,"options");o(this,"pendingCheckHeight",!1);o(this,"debug",!1);o(this,"throttledCheckHeight");o(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",a=>this.onMessage(a)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;n(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),i(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=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const a=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=a}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 s)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const a of t){const h=a.getAttribute("data-iframe-height"),d=a.getBoundingClientRect().bottom+parseFloat(getComputedStyle(a).getPropertyValue("margin-bottom"))+(h?parseFloat(h):0);d>e&&(e=d)}e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}return new c}();
 //# sourceMappingURL=d-frame-content.min.js.map

dist/d-frame.min.js

@@ -1,2 +0,2 @@
-var H=Object.defineProperty;var M=(d,c,p)=>c in d?H(d,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[c]=p;var o=(d,c,p)=>M(d,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function d(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(e){return e[0]==="df-child"&&e[1]==="stateChange"}function y(e){return e[0]==="df-child"&&e[1]==="custom"}function b(e){return e[0]==="df-child"&&e[1]==="notif"}function w(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function A(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 E=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function S(e){const a=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),r="^"+E(s).replace(/\\\*/g,"(.*)")+"$";a.push({regexp:new RegExp(r),append:i})}return a}function P(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,u)=>{for(const n of t){if(n.append&&!u.startsWith(n.append)||u===s)continue;const h=n.append?u.replace(n.append,""):u;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 z(e,a,t,s,i){const r=new URL(t),u=new URL(a);if(s&&(r.searchParams.forEach((n,h)=>{for(const l of s){if(l.append&&!h.startsWith(l.append))continue;const f=l.append?h.replace(l.append,""):h;if(f.match(l.regexp)){u.searchParams.get(f)===null&&r.searchParams.delete(h);break}}}),u.searchParams.forEach((n,h)=>{for(const l of s){if(!h.match(l.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=l.append?l.append+h:h;r.searchParams.set(f,n);break}})),i!==null&&e){const n=A(e,u);n?r.searchParams.set(i,n):r.searchParams.delete(i)}return r}function R(e){return e.vIframe===!0&&e.uiNotification!==void 0}function g(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 C{stateChange(a,t){a==="replace"&&window.history.replaceState(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const m=document.createElement("template");m.innerHTML=`<style>
+var H=Object.defineProperty;var M=(d,c,p)=>c in d?H(d,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[c]=p;var o=(d,c,p)=>M(d,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function d(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(e){return e[0]==="df-child"&&e[1]==="stateChange"}function b(e){return e[0]==="df-child"&&e[1]==="custom"}function y(e){return e[0]==="df-child"&&e[1]==="notif"}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 S(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 v(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,u)=>{for(const n of t){if(n.append&&!u.startsWith(n.append)||u===s)continue;const h=n.append?u.replace(n.append,""):u;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 P(e,a,t,s,i){const r=new URL(t),u=new URL(a);if(s&&(r.searchParams.forEach((n,h)=>{for(const l of s){if(l.append&&!h.startsWith(l.append))continue;const f=l.append?h.replace(l.append,""):h;if(f.match(l.regexp)){u.searchParams.get(f)===null&&r.searchParams.delete(h);break}}}),u.searchParams.forEach((n,h)=>{for(const l of s){if(!h.match(l.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=l.append?l.append+h:h;r.searchParams.set(f,n);break}})),i!==null&&e){const n=E(e,u);n?r.searchParams.set(i,n):r.searchParams.delete(i)}return r}function z(e){return e.vIframe===!0&&e.uiNotification!==void 0}function g(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 C{stateChange(a,t){a==="replace"&&window.history.replaceState(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const m=document.createElement("template");m.innerHTML=`<style>
   :host {
@@ -11,3 +11,3 @@ display: block;
   }
-</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class v 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");const t=m.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!==r[0].contentRect.width&&(this.width=r[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new C,window.addEventListener("message",r=>this.onMessage(r))}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(){return this.getAttribute("aspect-ratio")??"auto"}set aspectRatio(t){this.setAttribute("aspect-ratio",t)}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 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(d(i)&&(this.postMessageToChild(["df-parent","init",{debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null}]),this.init()),c(i)&&(this.resizedHeight=i[2],this.updateStyle()),p(i)&&(this.parsedSyncParams||this.syncPath)){const r=z(this.srcUrl,i[3],window.location.href,this.parsedSyncParams,this.syncPath);r.href!==window.location.href&&this.adapter.stateChange(i[2],r)}y(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),b(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}else R(i)&&(console.log("v-iframe notification",i.uiNotification,g(i.uiNotification)),this.dispatchEvent(new CustomEvent("notif",{detail:g(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=P(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):this.iframeElement.setAttribute("src",t)}updateStyle(){let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","no"),this.resizedHeight?(this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"?(this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","auto"),this.height?t+=`height:${this.height};`:t+=`height:${this.aspectRatioHeight}px;`),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&(this.resizedHeight||this.height||(this.aspectRatioHeight=this.width/this.actualAspectRatio,this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame",...s),t==="info"&&console.info("d-frame",...s))}connectedCallback(){if(!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=S(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){this.log("debug","attribute change",t,s,i),t==="aspect-ratio"&&this.updateAspectRatioHeight(),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc()}}customElements.define("d-frame",v)})();
+</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class R 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");const t=m.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!==r[0].contentRect.width&&(this.width=r[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new C,window.addEventListener("message",r=>this.onMessage(r))}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(){return this.getAttribute("aspect-ratio")??"auto"}set aspectRatio(t){this.setAttribute("aspect-ratio",t)}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(d(i)&&(this.postMessageToChild(["df-parent","init",{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()),p(i)){if(this.parsedSyncParams||this.syncPath){const r=P(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]]}))}b(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),y(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}else z(i)&&(console.log("v-iframe notification",i.uiNotification,g(i.uiNotification)),this.dispatchEvent(new CustomEvent("notif",{detail:g(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=v(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):this.iframeElement.setAttribute("src",t)}updateStyle(){let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","no"),this.resizedHeight?(this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"?(this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","auto"),this.height?t+=`height:${this.height};`:t+=`height:${this.aspectRatioHeight}px;`),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&(this.resizedHeight||this.height||(this.aspectRatioHeight=this.width/this.actualAspectRatio,this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame",...s),t==="info"&&console.info("d-frame",...s))}connectedCallback(){if(!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=S(this.syncParams||"*")),this.updateStyle(),this.updateSrc(),console.log(this),console.log(this.hasAttribute("onStateChange"))}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){this.log("debug","attribute change",t,s,i),t==="aspect-ratio"&&this.updateAspectRatioHeight(),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc()}}customElements.define("d-frame",R)})();
 //# sourceMappingURL=d-frame.min.js.map

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

@@ -1,2 +0,2 @@
-var VIframeCompatDFrameContent=function(){"use strict";var f=Object.defineProperty;var g=(r,s,d)=>s in r?f(r,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):r[s]=d;var c=(r,s,d)=>g(r,typeof s!="symbol"?s+"":s,d);function r(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){c(this,"initialized",!1);c(this,"options");c(this,"pendingCheckHeight",!1);c(this,"debug",!1);c(this,"throttledCheckHeight");c(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.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;r(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath)&&this.initSyncParams(),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()}initSyncParams(){this.log("debug","initSyncParams");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!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const h=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=h,h}();
+var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(s,r,c)=>r in s?g(s,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):s[r]=c;var h=(s,r,c)=>f(s,typeof r!="symbol"?r+"":r,c);function s(n){return n[0]==="df-parent"&&n[1]==="init"}function r(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const c=["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){h(this,"initialized",!1);h(this,"options");h(this,"pendingCheckHeight",!1);h(this,"debug",!1);h(this,"throttledCheckHeight");h(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.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;s(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),r(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 c)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!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const d=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=d,d}();
 //# sourceMappingURL=d-frame-content.min.js.map

lib/DFrameContent.d.ts

@@ -19,3 +19,3 @@ import { type Notif } from './messages.js';
     private initResize;
-    private initSyncParams;
+    private initStateChangeWatcher;
     private createMutationObserver;
@@ -22,0 +22,0 @@ private createWindowEventListeners;

lib/DFrameContent.js

@@ -73,4 +73,4 @@ import { isInitParentMessage, isUpdateSrcMessage } from './messages.js';
                     this.initResize();
-                if (message[2].syncParams || message[2].syncPath)
-                    this.initSyncParams();
+                if (message[2].syncParams || message[2].syncPath || message[2].stateChangeEvents)
+                    this.initStateChangeWatcher();
                 this.initialized = true;
@@ -103,4 +103,4 @@ }
     }
-    initSyncParams() {
-        this.log('debug', 'initSyncParams');
+    initStateChangeWatcher() {
+        this.log('debug', 'initStateChangeWatcher');
         // monkey patch pushState and replaceState to send all state change info to the parent window
@@ -107,0 +107,0 @@ // this is to compensate the lack of event emission by window.history

lib/DFrameElement.d.ts

@@ -23,2 +23,4 @@ import { type ParentMessage } from './messages.js';
     set syncPath(value: string | null);
+    get stateChangeEvents(): boolean;
+    set stateChangeEvents(value: boolean);
     adapter: StateChangeAdapter;
@@ -25,0 +27,0 @@ private connected;

lib/DFrameElement.js

@@ -79,2 +79,9 @@ // this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
     }
+    get stateChangeEvents() { return this.hasAttribute('state-change-events'); }
+    set stateChangeEvents(value) {
+        if (value)
+            this.setAttribute('state-change-events', '');
+        else
+            this.removeAttribute('state-change-events');
+    }
     adapter;
@@ -135,3 +142,4 @@ /* internal state */
                             syncParams: this.syncParams !== null,
-                            syncPath: this.syncPath !== null
+                            syncPath: this.syncPath !== null,
+                            stateChangeEvents: this.stateChangeEvents
                         }]);
@@ -144,7 +152,12 @@ this.init();
                 }
-                if (isStateChangeMessage(message) && (this.parsedSyncParams || this.syncPath)) {
-                    const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
-                    if (newParentHUrl.href !== window.location.href) {
-                        this.adapter.stateChange(message[2], newParentHUrl);
+                if (isStateChangeMessage(message)) {
+                    if ((this.parsedSyncParams || this.syncPath)) {
+                        const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
+                        if (newParentHUrl.href !== window.location.href) {
+                            this.adapter.stateChange(message[2], newParentHUrl);
+                        }
                     }
+                    if (this.stateChangeEvents) {
+                        this.dispatchEvent(new CustomEvent('state-change', { detail: [message[2], message[3]] }));
+                    }
                 }
@@ -250,2 +263,4 @@ if (isCustomMessage(message)) {
         this.updateSrc();
+        console.log(this);
+        console.log(this.hasAttribute('onStateChange'));
     }
@@ -252,0 +267,0 @@ /* reflected attributes */

lib/messages.d.ts

@@ -22,2 +22,3 @@ export type InitChildMessage = ['df-child', 'init'];
     syncPath: boolean;
+    stateChangeEvents: boolean;
 }];
@@ -24,0 +25,0 @@ export type UpdateSrcMessage = ['df-parent', 'updateSrc', string];

lib/v-iframe-compat/ui-notif.d.ts

@@ -1,2 +0,2 @@
-import type { Notif } from '../messages.ts';
+import type { Notif } from '../messages.js';
 type NotifType = 'default' | 'info' | 'success' | 'warning' | 'error';
@@ -3,0 +3,0 @@ export type PartialUiNotif = string | {

package.json

 {
   "name": "@data-fair/frame",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "An iframe wrapper for powerful web app integrations.",
@@ -5,0 +5,0 @@ "main": "dist/frame.min.js",

No alert changes

Improved metrics

Total package byte prevSize

49439

increased by2.78%

Lines of code

876

increased by2.22%

No dependency changes