@data-fair/frame 0.14.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- var DFrameContent=function(){"use strict";var p=Object.defineProperty;var b=(h,s,d)=>s in h?p(h,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[s]=d;var r=(h,s,d)=>b(h,typeof s!="symbol"?s+"":s,d);function h(n){return n[0]==="df-global"&&n[1]==="mouse"}function s(n){return n[0]==="df-parent"&&n[1]==="init"}function d(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}function f(n){return n[0]==="df-parent"&&n[1]==="parentUrl"}const u=(()=>{try{return window.top!==window.self}catch{return!0}})(),w=["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 g{constructor(e){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);r(this,"parentUrlListeners",{});r(this,"parentUrlResults",{});r(this,"currentSyncedMouseEvents",new Set);if(this.options=e??{},typeof window>"u")return;if(window.__d_frame__content)throw new Error("DFrameContent was already initialized");window.__d_frame__content=this;const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"])}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...t),e==="info"&&console.info(`d-frame:${this.id}:content`,...t),e==="error"&&console.error(`d-frame:${this.id}:content`,...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;if(s(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),this.log("debug","init handshake is ok",t,this.options),t[2].src&&t[2].src!==window.location.href&&this.log("error",`src mismatch at init, maybe the frame navigated before the initialization handshake: ${window.location.href} !== ${t[2].src}`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),t[2].mouseEvents&&this.initMouseEvents(t[2].mouseEvents),this.initialized=!0),d(t)){const i=t[2].startsWith("/")?window.location.origin+t[2]:t[2];if(i===window.location.href)return;this.log("debug",`update src ${window.location.href} -> ${i}`),this.options.updateSrc?this.options.updateSrc(i,this):(this.log("debug","no updateSrc method available, falling back to updating window.location.href",i),window.location.href=i)}if(h(t)&&this.applySyncedMouseEvent(t),f(t))if(!this.parentUrlListeners[t[2]])this.log("error",`received getParentUrlResponse message but no matching callback is registered: ${t[2]}`);else for(const i of this.parentUrlListeners[t[2]])i(t[3])}}postMessageToParent(e){window.parent.postMessage(e,"*")}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}ready(){this.postMessageToParent(["df-child","ready"])}addParentUrlListener(e,t){const i=new URL(e,window.location.href).href;if(!u){t(i);return}this.parentUrlResults[i]&&t(this.parentUrlResults[i]),this.parentUrlListeners[i]=this.parentUrlListeners[i]??[],this.parentUrlListeners[i].push(t),this.postMessageToParent(["df-child","addParentUrlListener",i])}removeParentUrlListener(e,t){const i=new URL(e,window.location.href).href;this.parentUrlListeners[i]&&(this.parentUrlListeners[i]=this.parentUrlListeners[i].filter(o=>o!==t),this.parentUrlListeners[i].length||(delete this.parentUrlListeners[i],this.postMessageToParent(["df-child","removeParentUrlListener",i])))}initMouseEvents(e){this.log("debug","initMouseEvents");for(const t of e)document.addEventListener(t,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",t,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToParent(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const t=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});document.body.dispatchEvent(t)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...o)=>{const c=window.location.href,a=e.apply(window.history,o);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","push",window.location.href]),a};window.history.pushState=t;const i=(...o)=>{const c=window.location.href,a=e.apply(window.history,o);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),a};window.history.replaceState=i}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");for(const e of w)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0,i=0;for(const o of e){const c=o.getAttribute("data-iframe-height"),a=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),l=c?a+parseFloat(c):a;a>t&&(t=a),l>i&&(i=l)}i=Math.ceil(i),t>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}return new g}();
1
+ var DFrameContent=function(){"use strict";var p=Object.defineProperty;var b=(h,s,d)=>s in h?p(h,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[s]=d;var r=(h,s,d)=>b(h,typeof s!="symbol"?s+"":s,d);function h(n){return n[0]==="df-global"&&n[1]==="mouse"}function s(n){return n[0]==="df-parent"&&n[1]==="init"}function d(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}function f(n){return n[0]==="df-parent"&&n[1]==="parentUrl"}const u=(()=>{try{return window.top!==window.self}catch{return!0}})(),w=["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 g{constructor(e){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);r(this,"parentUrlListeners",{});r(this,"parentUrlResults",{});r(this,"currentSyncedMouseEvents",new Set);if(this.options=e??{},typeof window>"u")return;if(window.__d_frame__content)throw new Error("DFrameContent was already initialized");window.__d_frame__content=this;const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"])}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...t),e==="info"&&console.info(`d-frame:${this.id}:content`,...t),e==="error"&&console.error(`d-frame:${this.id}:content`,...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;if(s(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),this.log("debug","init handshake is ok",t,this.options),t[2].src&&t[2].src!==window.location.href&&this.log("error",`src mismatch at init, maybe the frame navigated before the initialization handshake: ${window.location.href} !== ${t[2].src}`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),t[2].mouseEvents&&this.initMouseEvents(t[2].mouseEvents),this.initialized=!0),d(t)){const i=t[2].startsWith("/")?window.location.origin+t[2]:t[2];if(i===window.location.href)return;this.log("debug",`update src ${window.location.href} -> ${i}`),this.options.updateSrc?this.options.updateSrc(i,this):(this.log("debug","no updateSrc method available, falling back to updating window.location.href",i),window.location.href=i)}if(h(t)&&this.applySyncedMouseEvent(t),f(t))if(!this.parentUrlListeners[t[2]])this.log("error",`received getParentUrlResponse message but no matching callback is registered: ${t[2]}`);else for(const i of this.parentUrlListeners[t[2]])i(t[3])}}postMessageToParent(e){window.parent.postMessage(e,"*")}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}ready(){this.postMessageToParent(["df-child","ready"])}reinitHeight(){this.postMessageToParent(["df-child","reinit-height"])}addParentUrlListener(e,t){const i=new URL(e,window.location.href).href;if(!u){t(i);return}this.parentUrlResults[i]&&t(this.parentUrlResults[i]),this.parentUrlListeners[i]=this.parentUrlListeners[i]??[],this.parentUrlListeners[i].push(t),this.postMessageToParent(["df-child","addParentUrlListener",i])}removeParentUrlListener(e,t){const i=new URL(e,window.location.href).href;this.parentUrlListeners[i]&&(this.parentUrlListeners[i]=this.parentUrlListeners[i].filter(o=>o!==t),this.parentUrlListeners[i].length||(delete this.parentUrlListeners[i],this.postMessageToParent(["df-child","removeParentUrlListener",i])))}initMouseEvents(e){this.log("debug","initMouseEvents");for(const t of e)document.addEventListener(t,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",t,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToParent(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const t=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});document.body.dispatchEvent(t)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...o)=>{const c=window.location.href,a=e.apply(window.history,o);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","push",window.location.href]),a};window.history.pushState=t;const i=(...o)=>{const c=window.location.href,a=e.apply(window.history,o);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),a};window.history.replaceState=i}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");for(const e of w)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0,i=0;for(const o of e){const c=o.getAttribute("data-iframe-height"),a=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),l=c?a+parseFloat(c):a;a>t&&(t=a),l>i&&(i=l)}i=Math.ceil(i),t>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}return new g}();
2
2
  //# sourceMappingURL=d-frame-content.min.js.map
@@ -1,4 +1,4 @@
1
- var k=Object.defineProperty;var N=(u,l,f)=>l in u?k(u,l,{enumerable:!0,configurable:!0,writable:!0,value:f}):u[l]=f;var a=(u,l,f)=>N(u,typeof l!="symbol"?l+"":l,f);(function(){"use strict";var v,A;function u(t){return t[0]==="df-global"&&t[1]==="mouse"}function l(t){return t[0]==="df-child"&&t[1]==="init"}function f(t){return t[0]==="df-child"&&t[1]==="height"}function S(t){return t[0]==="df-child"&&t[1]==="stateChange"}function M(t){return t[0]==="df-child"&&t[1]==="custom"}function C(t){return t[0]==="df-child"&&t[1]==="notif"}function L(t){return t[0]==="df-child"&&t[1]==="addParentUrlListener"}function R(t){return t[0]==="df-child"&&t[1]==="removeParentUrlListener"}function P(t){return t[0]==="df-child"&&t[1]==="ready"}function z(t){return t.endsWith("/")?t:t===""?"/":t.slice(0,t.lastIndexOf("/")+1)}function b(t){return t.endsWith("/")?t:t+"/"}function y(t,n){if(n.origin!==t.origin)return n.href;if(b(n.pathname)===b(t.pathname))return"";const e=z(t.pathname);return n.pathname.startsWith(e)?n.pathname.replace(e,""):n.pathname}const x=t=>t.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function U(t){const n=[];for(const e of t.split(",")){const[s="*",i]=e.split(":"),r="^"+x(s).replace(/\\\*/g,"(.*)")+"$";n.push({regexp:new RegExp(r),append:i})}return n}function I(t,n,e,s){if(!e&&!s)return t;const i=new URL(t),r=new URL(n);if(e&&r.searchParams.forEach((h,c)=>{for(const o of e){if(o.append&&!c.startsWith(o.append)||c===s)continue;const d=o.append?c.replace(o.append,""):c;if(d.match(o.regexp)){i.searchParams.set(d,h);break}}}),s!==null){let h;if(s==="#")h=r.hash.slice(1);else if(s.startsWith("/"))if(r.pathname.startsWith(s)||r.pathname+"/"===s)h=y(new URL(s,n),r);else return null;else h=r.searchParams.get(s);h&&(i.pathname=new URL(h,t).pathname)}return i.href}function p(t,n,e,s,i){const r=new URL(t),h=new URL(e),c=new URL(n);if(s){for(const o of h.searchParams.keys().toArray())for(const d of s){if(d.append&&!o.startsWith(d.append))continue;const m=d.append?o.replace(d.append,""):o;if(m.match(d.regexp)){c.searchParams.get(m)===null&&h.searchParams.delete(o);break}}c.searchParams.forEach((o,d)=>{for(const m of s){if(!d.match(m.regexp)||(r==null?void 0:r.searchParams.get(d))===o)continue;const K=m.append?m.append+d:d;h.searchParams.set(K,o);break}})}if(i!==null&&r){const o=y(r,c);if(i==="#")h.hash=o;else if(i.startsWith("/")){if(o.startsWith("/"))return null;o===""?h.pathname=i:h.pathname=new URL(o,new URL(i,e)).pathname}else o?h.searchParams.set(i,o):h.searchParams.delete(i)}return h}function W(t){return t.vIframe===!0&&t.uiNotification!==void 0}function H(t){if(typeof t=="string")return{type:"default",title:t};if(t.error&&!t.errorMsg){const n=t.error.response&&(t.error.response.data||t.error.response.status)||t.error.message||t.error;return t.msg?{type:"error",title:t.msg,detail:n}:{type:"error",title:n}}return t.type==="error"?{type:t.clientError?"warning":"error",title:t.msg,detail:t.errorMsg}:{type:t.type??"default",title:t.msg}}class T{stateChange(n,e,s){s.log("debug","apply state change on window.history",n,e.href),n==="replace"&&window.history.replaceState(window.history.state,"",e),n==="push"&&window.history.pushState(window.history.state,"",e)}onStateChange(n){window.addEventListener("popstate",n)}}const g=((v=document.head)==null?void 0:v.querySelector("meta[property=csp-nonce]"))??((A=document.head)==null?void 0:A.querySelector("meta[name=csp-nonce]")),w=(g==null?void 0:g.nonce)??(g==null?void 0:g.content),E=document.createElement("template");E.innerHTML=`<style${w?` nonce="${w}"`:""}>
1
+ var N=Object.defineProperty;var $=(u,l,f)=>l in u?N(u,l,{enumerable:!0,configurable:!0,writable:!0,value:f}):u[l]=f;var a=(u,l,f)=>$(u,typeof l!="symbol"?l+"":l,f);(function(){"use strict";var v,A;function u(t){return t[0]==="df-global"&&t[1]==="mouse"}function l(t){return t[0]==="df-child"&&t[1]==="init"}function f(t){return t[0]==="df-child"&&t[1]==="height"}function S(t){return t[0]==="df-child"&&t[1]==="reinit-height"}function M(t){return t[0]==="df-child"&&t[1]==="stateChange"}function C(t){return t[0]==="df-child"&&t[1]==="custom"}function L(t){return t[0]==="df-child"&&t[1]==="notif"}function R(t){return t[0]==="df-child"&&t[1]==="addParentUrlListener"}function P(t){return t[0]==="df-child"&&t[1]==="removeParentUrlListener"}function z(t){return t[0]==="df-child"&&t[1]==="ready"}function x(t){return t.endsWith("/")?t:t===""?"/":t.slice(0,t.lastIndexOf("/")+1)}function b(t){return t.endsWith("/")?t:t+"/"}function y(t,n){if(n.origin!==t.origin)return n.href;if(b(n.pathname)===b(t.pathname))return"";const e=x(t.pathname);return n.pathname.startsWith(e)?n.pathname.replace(e,""):n.pathname}const U=t=>t.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function H(t){const n=[];for(const e of t.split(",")){const[s="*",i]=e.split(":"),r="^"+U(s).replace(/\\\*/g,"(.*)")+"$";n.push({regexp:new RegExp(r),append:i})}return n}function I(t,n,e,s){if(!e&&!s)return t;const i=new URL(t),r=new URL(n);if(e&&r.searchParams.forEach((h,c)=>{for(const o of e){if(o.append&&!c.startsWith(o.append)||c===s)continue;const d=o.append?c.replace(o.append,""):c;if(d.match(o.regexp)){i.searchParams.set(d,h);break}}}),s!==null){let h;if(s==="#")h=r.hash.slice(1);else if(s.startsWith("/"))if(r.pathname.startsWith(s)||r.pathname+"/"===s)h=y(new URL(s,n),r);else return null;else h=r.searchParams.get(s);h&&(i.pathname=new URL(h,t).pathname)}return i.href}function p(t,n,e,s,i){const r=new URL(t),h=new URL(e),c=new URL(n);if(s){for(const o of h.searchParams.keys().toArray())for(const d of s){if(d.append&&!o.startsWith(d.append))continue;const m=d.append?o.replace(d.append,""):o;if(m.match(d.regexp)){c.searchParams.get(m)===null&&h.searchParams.delete(o);break}}c.searchParams.forEach((o,d)=>{for(const m of s){if(!d.match(m.regexp)||(r==null?void 0:r.searchParams.get(d))===o)continue;const k=m.append?m.append+d:d;h.searchParams.set(k,o);break}})}if(i!==null&&r){const o=y(r,c);if(i==="#")h.hash=o;else if(i.startsWith("/")){if(o.startsWith("/"))return null;o===""?h.pathname=i:h.pathname=new URL(o,new URL(i,e)).pathname}else o?h.searchParams.set(i,o):h.searchParams.delete(i)}return h}function W(t){return t.vIframe===!0&&t.uiNotification!==void 0}function T(t){if(typeof t=="string")return{type:"default",title:t};if(t.error&&!t.errorMsg){const n=t.error.response&&(t.error.response.data||t.error.response.status)||t.error.message||t.error;return t.msg?{type:"error",title:t.msg,detail:n}:{type:"error",title:n}}return t.type==="error"?{type:t.clientError?"warning":"error",title:t.msg,detail:t.errorMsg}:{type:t.type??"default",title:t.msg}}class O{stateChange(n,e,s){s.log("debug","apply state change on window.history",n,e.href),n==="replace"&&window.history.replaceState(window.history.state,"",e),n==="push"&&window.history.pushState(window.history.state,"",e)}onStateChange(n){window.addEventListener("popstate",n)}}const g=((v=document.head)==null?void 0:v.querySelector("meta[property=csp-nonce]"))??((A=document.head)==null?void 0:A.querySelector("meta[name=csp-nonce]")),w=(g==null?void 0:g.nonce)??(g==null?void 0:g.content),E=document.createElement("template");E.innerHTML=`<style${w?` nonce="${w}"`:""}>
2
2
  :host {
3
3
  display: block;
4
4
  }
@@ -15,5 +15,5 @@ var k=Object.defineProperty;var N=(u,l,f)=>l in u?k(u,l,{enumerable:!0,configura
15
15
  border: none;
16
16
  user-select: none;
17
17
  }
18
- </style><div class="d-frame-wrapper"><slot name="loading"><div class="loading-placeholder"></div></slot><iframe class="d-frame-iframe"></iframe></div>`;class O extends HTMLElement{constructor(){super();a(this,"adapter");a(this,"windowAdapter");a(this,"connected",!1);a(this,"childInitialized",!1);a(this,"currentChildSrc",null);a(this,"parsedSyncParams");a(this,"wrapperElement");a(this,"slotElement");a(this,"iframeElement");a(this,"width");a(this,"aspectRatioHeight");a(this,"resizedHeight");a(this,"randomId");a(this,"iframeLoaded",!1);a(this,"ready",!1);a(this,"iframeExtraAttrs",{});a(this,"resizeObserver");a(this,"boundOnMessage",e=>this.onMessage(e));a(this,"mouseEventListeners",{});a(this,"parentUrlListeners",{});a(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const e=E.content.cloneNode(!0);this.wrapperElement=e.childNodes[1],this.slotElement=this.wrapperElement.childNodes[0],this.iframeElement=this.wrapperElement.childNodes[1],this.iframeElement.style.cssText="visibility:hidden;position:absolute;height:0px;",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(e),this.resizeObserver=new ResizeObserver(i=>{(this.width===void 0||Math.abs(this.width-i[0].contentRect.width)>2)&&(this.width=i[0].contentRect.width,this.updateAspectRatioHeight())}),this.adapter=this.windowAdapter=new T}get id(){return this.getAttribute("id")??this.randomId}set id(e){this.setAttribute("id",e)}get debug(){return this.hasAttribute("debug")}set debug(e){e?this.setAttribute("debug",""):this.removeAttribute("debug")}get src(){return this.getAttribute("src")}set src(e){this.setAttribute("src",e)}get fullSrc(){return this.src.startsWith("/")?window.location.origin+this.src:this.src}get scrolling(){return this.getAttribute("scrolling")}set scrolling(e){this.setAttribute("scrolling",e)}get aspectRatio(){const e=this.getAttribute("aspect-ratio");return e===""?"auto":e}set aspectRatio(e){e!==null?this.setAttribute("aspect-ratio",e):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(e){e?this.setAttribute("height",e):this.removeAttribute("height")}set resize(e){this.setAttribute("resize",e)}get resize(){const e=this.getAttribute("resize");return e===null?"auto":e===""?"yes":e}get syncParams(){return this.getAttribute("sync-params")}set syncParams(e){e!==null?this.setAttribute("sync-params",e):this.removeAttribute("sync-params")}get syncPath(){const e=this.getAttribute("sync-path");return e===null?null:e||"p"}set syncPath(e){e!==null?this.setAttribute("sync-params",e):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(e){e?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get readyMessage(){return this.hasAttribute("ready-message")}set readyMessage(e){e?this.setAttribute("ready-message",""):this.removeAttribute("ready-message")}get mouseEvents(){const e=this.getAttribute("mouse-events");return e===null?null:e===""?["click","dblclick","mousedown","mouseup"]:e.split(",")}set mouseEvents(e){e===null?this.removeAttribute("mouse-events"):this.setAttribute("mouse-events",e.join(","))}get reload(){return this.getAttribute("reload")}set reload(e){this.setAttribute("reload",e)}get emitIFrameMessages(){return this.hasAttribute("emit-iframe-messages")}set emitIFrameMessages(e){e?this.setAttribute("emit-iframe-messages",""):this.removeAttribute("emit-iframe-messages")}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(e){var s;if(this.emitIFrameMessages&&this.dispatchEvent(new CustomEvent("iframe-message",{detail:e.data})),e.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=e.data;if(this.log("debug","received message from child",i),Array.isArray(e.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,mouseEvents:this.mouseEvents,src:this.currentChildSrc}]),this.childInitialized=!0),f(i)&&(this.resizedHeight=i[2],this.resize==="yes"&&!this.ready&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready"))),this.updateStyle()),S(i)){if(this.currentChildSrc=i[3],this.parsedSyncParams||this.syncPath){const r=p(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);if(r===null)this.log("debug","failed to process newParentUrl, ignore state change");else if(r.href!==window.location.href){this.log("debug","apply state change to parent",i[2],r.href);try{this.adapter.stateChange(i[2],r,this)}catch(h){this.log("error","failed to apply state change to parent using custom adapter",h),this.windowAdapter.stateChange(i[2],r,this)}}}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}if(M(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),C(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),P(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),u(i)&&this.applySyncedMouseEvent(i),L(i)){const r=p(this.fullSrc,i[2],window.location.href,this.parsedSyncParams,this.syncPath);r&&(this.parentUrlListeners[i[2]]=r.href,this.postMessageToChild(["df-parent","parentUrl",i[2],r.href]))}R(i)&&delete this.parentUrlListeners[i[2]]}else W(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:H(i.uiNotification)}))}}postMessageToChild(e){var s,i;this.log("debug","send message to child",e),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(e,"*")}updateSrc(){if(!this.connected)return;for(const[s,i]of Object.entries(this.parentUrlListeners)){const r=p(this.fullSrc,s,window.location.href,this.parsedSyncParams,this.syncPath);r&&r.href!==i&&(this.parentUrlListeners[s]=r.href,this.postMessageToChild(["df-parent","parentUrl",s,r.href]))}const e=I(this.fullSrc,window.location.href,this.parsedSyncParams,this.syncPath);e&&e!==this.currentChildSrc&&(this.currentChildSrc=e,this.childInitialized?this.postMessageToChild(["df-parent","updateSrc",e]):(this.log("debug","set src attribute of iframe: "+e),this.iframeElement.setAttribute("src",e)))}updateStyle(){if(!this.connected)return;let e;this.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),e=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),e=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),e=this.aspectRatioHeight+"px"),e!==void 0?(this.log("debug","set height iframe wrapper: "+e),this.wrapperElement.style.cssText=`height:${e};min-height:0;`):this.wrapperElement.style.cssText="",this.scrolling?(this.log("debug","explicitly set of scrolling attribute of iframe: "+this.scrolling),this.iframeElement.setAttribute("scrolling",this.scrolling)):this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","implicitly set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","implicitly 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.style.cssText="",this.slotElement.style.cssText="display:none;")}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}updateIframeExtraAttrs(){const e=this.iframeExtraAttrs,s={};for(const i of this.getAttributeNames())if(i.startsWith("iframe-")){const r=this.getAttribute(i);if(r!==null){const h=i.slice(7);s[h]=r}}this.log("debug","update iframe extra attributes",e,s);for(const i of Object.keys(e))i in s||this.iframeElement.removeAttribute(i);for(const i of Object.keys(s))s[i]!==e[i]&&this.iframeElement.setAttribute(i,s[i])}initMouseEvents(e){this.log("debug","initMouseEvents");for(const s of e)if(!this.mouseEventListeners[s]){const i=r=>{r instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",s,{altKey:r.altKey,ctrlKey:r.ctrlKey,shiftKey:r.shiftKey,metaKey:r.metaKey}])};this.mouseEventListeners[s]=i,document.addEventListener(s,i,!0)}}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToChild(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const s=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});this.dispatchEvent(s)}log(e,...s){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}`,...s),e==="info"&&console.info(`d-frame:${this.id}`,...s),e==="error"&&console.error(`d-frame:${this.id}`,...s))}connectedCallback(){if(!this.debug){const e=window.localStorage.getItem("debug");if(e){const s=e.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.resizeObserver.observe(this),window.addEventListener("message",this.boundOnMessage),this.syncParams!==null&&(this.parsedSyncParams=U(this.syncParams||"*")),this.updateStyle(),this.updateIframeExtraAttrs(),this.updateSrc(),this.mouseEvents&&this.initMouseEvents(this.mouseEvents)}disconnectedCallback(){this.log("debug","disconnected"),this.resizeObserver.disconnect(),window.removeEventListener("message",this.boundOnMessage);for(const[e,s]of Object.entries(this.mouseEventListeners))document.removeEventListener(e,s,!0),delete this.mouseEventListeners[e]}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path","reload"]}attributeChangedCallback(e,s,i){var r;if(e==="aspect-ratio"&&this.updateAspectRatioHeight(),!!this.connected&&(this.log("debug","attribute change",e,s,i),e==="src"&&this.updateSrc(),e==="height"&&this.updateStyle(),e==="sync-params"&&this.updateSrc(),e==="sync-path"&&this.updateSrc(),e==="reload")){if(!this.currentChildSrc){this.log("error","reload attribute changed but the iframe has no current src");return}if(!((r=this.iframeElement.contentWindow)!=null&&r.location)){this.log("debug","reload attribute changed but no iframe contentWindow, is this a cross domain iframe ?");return}if(!this.iframeLoaded){this.log("debug","reload attribute changed before initial loading was complete, ignore it");return}this.log("debug","reload iframe with current src",this.currentChildSrc),this.childInitialized=!1,this.iframeElement.setAttribute("src",this.currentChildSrc),this.iframeElement.contentWindow.location.reload()}}}customElements.get("d-frame")||customElements.define("d-frame",O)})();
18
+ </style><div class="d-frame-wrapper"><slot name="loading"><div class="loading-placeholder"></div></slot><iframe class="d-frame-iframe"></iframe></div>`;class K extends HTMLElement{constructor(){super();a(this,"adapter");a(this,"windowAdapter");a(this,"connected",!1);a(this,"childInitialized",!1);a(this,"currentChildSrc",null);a(this,"parsedSyncParams");a(this,"wrapperElement");a(this,"slotElement");a(this,"iframeElement");a(this,"width");a(this,"aspectRatioHeight");a(this,"resizedHeight");a(this,"randomId");a(this,"iframeLoaded",!1);a(this,"ready",!1);a(this,"iframeExtraAttrs",{});a(this,"resizeObserver");a(this,"boundOnMessage",e=>this.onMessage(e));a(this,"mouseEventListeners",{});a(this,"parentUrlListeners",{});a(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const e=E.content.cloneNode(!0);this.wrapperElement=e.childNodes[1],this.slotElement=this.wrapperElement.childNodes[0],this.iframeElement=this.wrapperElement.childNodes[1],this.iframeElement.style.cssText="visibility:hidden;position:absolute;height:0px;",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(e),this.resizeObserver=new ResizeObserver(i=>{(this.width===void 0||Math.abs(this.width-i[0].contentRect.width)>2)&&(this.width=i[0].contentRect.width,this.updateAspectRatioHeight())}),this.adapter=this.windowAdapter=new O}get id(){return this.getAttribute("id")??this.randomId}set id(e){this.setAttribute("id",e)}get debug(){return this.hasAttribute("debug")}set debug(e){e?this.setAttribute("debug",""):this.removeAttribute("debug")}get src(){return this.getAttribute("src")}set src(e){this.setAttribute("src",e)}get fullSrc(){return this.src.startsWith("/")?window.location.origin+this.src:this.src}get scrolling(){return this.getAttribute("scrolling")}set scrolling(e){this.setAttribute("scrolling",e)}get aspectRatio(){const e=this.getAttribute("aspect-ratio");return e===""?"auto":e}set aspectRatio(e){e!==null?this.setAttribute("aspect-ratio",e):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(e){e?this.setAttribute("height",e):this.removeAttribute("height")}set resize(e){this.setAttribute("resize",e)}get resize(){const e=this.getAttribute("resize");return e===null?"auto":e===""?"yes":e}set reinitHeight(e){this.setAttribute("reinit-height",e)}get reinitHeight(){const e=this.getAttribute("reinit-height");return e===null||e===""?"on-message":e}get syncParams(){return this.getAttribute("sync-params")}set syncParams(e){e!==null?this.setAttribute("sync-params",e):this.removeAttribute("sync-params")}get syncPath(){const e=this.getAttribute("sync-path");return e===null?null:e||"p"}set syncPath(e){e!==null?this.setAttribute("sync-params",e):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(e){e?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get readyMessage(){return this.hasAttribute("ready-message")}set readyMessage(e){e?this.setAttribute("ready-message",""):this.removeAttribute("ready-message")}get mouseEvents(){const e=this.getAttribute("mouse-events");return e===null?null:e===""?["click","dblclick","mousedown","mouseup"]:e.split(",")}set mouseEvents(e){e===null?this.removeAttribute("mouse-events"):this.setAttribute("mouse-events",e.join(","))}get reload(){return this.getAttribute("reload")}set reload(e){this.setAttribute("reload",e)}get emitIFrameMessages(){return this.hasAttribute("emit-iframe-messages")}set emitIFrameMessages(e){e?this.setAttribute("emit-iframe-messages",""):this.removeAttribute("emit-iframe-messages")}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(e){var s;if(this.emitIFrameMessages&&this.dispatchEvent(new CustomEvent("iframe-message",{detail:e.data})),e.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=e.data;if(this.log("debug","received message from child",i),Array.isArray(e.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,mouseEvents:this.mouseEvents,src:this.currentChildSrc}]),this.childInitialized=!0),f(i)&&(this.resizedHeight=i[2],this.resize==="yes"&&!this.ready&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready"))),this.updateStyle()),S(i)&&this.reinitHeight==="on-message"&&(this.resizedHeight=void 0,this.updateStyle()),M(i)){if(this.currentChildSrc=i[3],this.parsedSyncParams||this.syncPath){const r=p(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);if(r===null)this.log("debug","failed to process newParentUrl, ignore state change");else if(r.href!==window.location.href){this.log("debug","apply state change to parent",i[2],r.href);try{this.adapter.stateChange(i[2],r,this)}catch(h){this.log("error","failed to apply state change to parent using custom adapter",h),this.windowAdapter.stateChange(i[2],r,this)}}}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}if(C(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),L(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),z(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),u(i)&&this.applySyncedMouseEvent(i),R(i)){const r=p(this.fullSrc,i[2],window.location.href,this.parsedSyncParams,this.syncPath);r&&(this.parentUrlListeners[i[2]]=r.href,this.postMessageToChild(["df-parent","parentUrl",i[2],r.href]))}P(i)&&delete this.parentUrlListeners[i[2]]}else W(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:T(i.uiNotification)}))}}postMessageToChild(e){var s,i;this.log("debug","send message to child",e),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(e,"*")}updateSrc(){if(!this.connected)return;for(const[s,i]of Object.entries(this.parentUrlListeners)){const r=p(this.fullSrc,s,window.location.href,this.parsedSyncParams,this.syncPath);r&&r.href!==i&&(this.parentUrlListeners[s]=r.href,this.postMessageToChild(["df-parent","parentUrl",s,r.href]))}const e=I(this.fullSrc,window.location.href,this.parsedSyncParams,this.syncPath);e&&e!==this.currentChildSrc&&(this.currentChildSrc=e,this.childInitialized?this.postMessageToChild(["df-parent","updateSrc",e]):(this.log("debug","set src attribute of iframe: "+e),this.iframeElement.setAttribute("src",e)))}updateStyle(){if(!this.connected)return;let e;this.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),e=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),e=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),e=this.aspectRatioHeight+"px"),e!==void 0?(this.log("debug","set height iframe wrapper: "+e),this.wrapperElement.style.cssText=`height:${e};min-height:0;`):this.wrapperElement.style.cssText="",this.scrolling?(this.log("debug","explicitly set of scrolling attribute of iframe: "+this.scrolling),this.iframeElement.setAttribute("scrolling",this.scrolling)):this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","implicitly set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","implicitly 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.style.cssText="",this.slotElement.style.cssText="display:none;")}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}updateIframeExtraAttrs(){const e=this.iframeExtraAttrs,s={};for(const i of this.getAttributeNames())if(i.startsWith("iframe-")){const r=this.getAttribute(i);if(r!==null){const h=i.slice(7);s[h]=r}}this.log("debug","update iframe extra attributes",e,s);for(const i of Object.keys(e))i in s||this.iframeElement.removeAttribute(i);for(const i of Object.keys(s))s[i]!==e[i]&&this.iframeElement.setAttribute(i,s[i])}initMouseEvents(e){this.log("debug","initMouseEvents");for(const s of e)if(!this.mouseEventListeners[s]){const i=r=>{r instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",s,{altKey:r.altKey,ctrlKey:r.ctrlKey,shiftKey:r.shiftKey,metaKey:r.metaKey}])};this.mouseEventListeners[s]=i,document.addEventListener(s,i,!0)}}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToChild(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const s=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});this.dispatchEvent(s)}log(e,...s){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}`,...s),e==="info"&&console.info(`d-frame:${this.id}`,...s),e==="error"&&console.error(`d-frame:${this.id}`,...s))}connectedCallback(){if(!this.debug){const e=window.localStorage.getItem("debug");if(e){const s=e.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.resizeObserver.observe(this),window.addEventListener("message",this.boundOnMessage),this.syncParams!==null&&(this.parsedSyncParams=H(this.syncParams||"*")),this.updateStyle(),this.updateIframeExtraAttrs(),this.updateSrc(),this.mouseEvents&&this.initMouseEvents(this.mouseEvents)}disconnectedCallback(){this.log("debug","disconnected"),this.resizeObserver.disconnect(),window.removeEventListener("message",this.boundOnMessage);for(const[e,s]of Object.entries(this.mouseEventListeners))document.removeEventListener(e,s,!0),delete this.mouseEventListeners[e]}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path","reload"]}attributeChangedCallback(e,s,i){var r;if(e==="aspect-ratio"&&this.updateAspectRatioHeight(),!!this.connected&&(this.log("debug","attribute change",e,s,i),e==="src"&&this.updateSrc(),e==="height"&&this.updateStyle(),e==="sync-params"&&this.updateSrc(),e==="sync-path"&&this.updateSrc(),e==="reload")){if(!this.currentChildSrc){this.log("error","reload attribute changed but the iframe has no current src");return}if(!((r=this.iframeElement.contentWindow)!=null&&r.location)){this.log("debug","reload attribute changed but no iframe contentWindow, is this a cross domain iframe ?");return}if(!this.iframeLoaded){this.log("debug","reload attribute changed before initial loading was complete, ignore it");return}this.log("debug","reload iframe with current src",this.currentChildSrc),this.childInitialized=!1,this.iframeElement.setAttribute("src",this.currentChildSrc),this.iframeElement.contentWindow.location.reload()}}}customElements.get("d-frame")||customElements.define("d-frame",K)})();
19
19
  //# sourceMappingURL=d-frame.min.js.map
@@ -1,2 +1,2 @@
1
- var VIframeCompatDFrameContent=function(){"use strict";var M=Object.defineProperty;var v=(c,h,l)=>h in c?M(c,h,{enumerable:!0,configurable:!0,writable:!0,value:l}):c[h]=l;var a=(c,h,l)=>v(c,typeof h!="symbol"?h+"":h,l);function c(n){return n[0]==="df-global"&&n[1]==="mouse"}function h(n){return n[0]==="df-parent"&&n[1]==="init"}function l(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}function p(n){return n[0]==="df-parent"&&n[1]==="parentUrl"}const g=(()=>{try{return window.top!==window.self}catch{return!0}})(),b=["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 m{constructor(e){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);a(this,"parentUrlListeners",{});a(this,"parentUrlResults",{});a(this,"currentSyncedMouseEvents",new Set);if(this.options=e??{},typeof window>"u")return;if(window.__d_frame__content)throw new Error("DFrameContent was already initialized");window.__d_frame__content=this;const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"])}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...t),e==="info"&&console.info(`d-frame:${this.id}:content`,...t),e==="error"&&console.error(`d-frame:${this.id}:content`,...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;if(h(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),this.log("debug","init handshake is ok",t,this.options),t[2].src&&t[2].src!==window.location.href&&this.log("error",`src mismatch at init, maybe the frame navigated before the initialization handshake: ${window.location.href} !== ${t[2].src}`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),t[2].mouseEvents&&this.initMouseEvents(t[2].mouseEvents),this.initialized=!0),l(t)){const i=t[2].startsWith("/")?window.location.origin+t[2]:t[2];if(i===window.location.href)return;this.log("debug",`update src ${window.location.href} -> ${i}`),this.options.updateSrc?this.options.updateSrc(i,this):(this.log("debug","no updateSrc method available, falling back to updating window.location.href",i),window.location.href=i)}if(c(t)&&this.applySyncedMouseEvent(t),p(t))if(!this.parentUrlListeners[t[2]])this.log("error",`received getParentUrlResponse message but no matching callback is registered: ${t[2]}`);else for(const i of this.parentUrlListeners[t[2]])i(t[3])}}postMessageToParent(e){window.parent.postMessage(e,"*")}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}ready(){this.postMessageToParent(["df-child","ready"])}addParentUrlListener(e,t){const i=new URL(e,window.location.href).href;if(!g){t(i);return}this.parentUrlResults[i]&&t(this.parentUrlResults[i]),this.parentUrlListeners[i]=this.parentUrlListeners[i]??[],this.parentUrlListeners[i].push(t),this.postMessageToParent(["df-child","addParentUrlListener",i])}removeParentUrlListener(e,t){const i=new URL(e,window.location.href).href;this.parentUrlListeners[i]&&(this.parentUrlListeners[i]=this.parentUrlListeners[i].filter(o=>o!==t),this.parentUrlListeners[i].length||(delete this.parentUrlListeners[i],this.postMessageToParent(["df-child","removeParentUrlListener",i])))}initMouseEvents(e){this.log("debug","initMouseEvents");for(const t of e)document.addEventListener(t,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",t,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToParent(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const t=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});document.body.dispatchEvent(t)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...o)=>{const d=window.location.href,r=e.apply(window.history,o);return window.location.href!==d&&this.postMessageToParent(["df-child","stateChange","push",window.location.href]),r};window.history.pushState=t;const i=(...o)=>{const d=window.location.href,r=e.apply(window.history,o);return window.location.href!==d&&this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),r};window.history.replaceState=i}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");for(const e of b)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0,i=0;for(const o of e){const d=o.getAttribute("data-iframe-height"),r=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),s=d?r+parseFloat(d):r;r>t&&(t=r),s>i&&(i=s)}i=Math.ceil(i),t>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}const y=(n,e)=>{const t=Object.keys(n);e.forEach((i,o)=>{n[o]=i,t.splice(t.indexOf(o),1)}),t.forEach(i=>{delete n[i]})},w=new m({updateSrc(n,e){var d,r;const t=window.vIframeOptions,i=t==null?void 0:t.reactiveParams;if(i&&typeof i=="object"){const s=new URL(n);if(s.origin===window.location.origin&&s.pathname===window.location.pathname){e.log("debug","applying reactive params",s.searchParams),y(i,s.searchParams);return}}const o=t==null?void 0:t.router;if(o){const s=((d=o.options)==null?void 0:d.base)??((r=o.options.history)==null?void 0:r.base);if(s==null)e.log("error","failed to access base path in router (no router.options.base nor router.options.history.base)",o);else{const u=window.location.origin+s;if(!n.startsWith(u))e.log("info","src does not start with base path",n,u);else{let f=n.replace(u,"");f.startsWith("/")||(f="/"+f),e.log("debug","applying router.replace",f),o.replace(f);return}}}e.log("info","falling back to updating window.location.href",n),window.location.href=n}});return window.dFrameContent=w,w}();
1
+ var VIframeCompatDFrameContent=function(){"use strict";var M=Object.defineProperty;var v=(c,h,l)=>h in c?M(c,h,{enumerable:!0,configurable:!0,writable:!0,value:l}):c[h]=l;var a=(c,h,l)=>v(c,typeof h!="symbol"?h+"":h,l);function c(n){return n[0]==="df-global"&&n[1]==="mouse"}function h(n){return n[0]==="df-parent"&&n[1]==="init"}function l(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}function g(n){return n[0]==="df-parent"&&n[1]==="parentUrl"}const p=(()=>{try{return window.top!==window.self}catch{return!0}})(),b=["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 m{constructor(e){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);a(this,"parentUrlListeners",{});a(this,"parentUrlResults",{});a(this,"currentSyncedMouseEvents",new Set);if(this.options=e??{},typeof window>"u")return;if(window.__d_frame__content)throw new Error("DFrameContent was already initialized");window.__d_frame__content=this;const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"])}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...t),e==="info"&&console.info(`d-frame:${this.id}:content`,...t),e==="error"&&console.error(`d-frame:${this.id}:content`,...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;if(h(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),this.log("debug","init handshake is ok",t,this.options),t[2].src&&t[2].src!==window.location.href&&this.log("error",`src mismatch at init, maybe the frame navigated before the initialization handshake: ${window.location.href} !== ${t[2].src}`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),t[2].mouseEvents&&this.initMouseEvents(t[2].mouseEvents),this.initialized=!0),l(t)){const i=t[2].startsWith("/")?window.location.origin+t[2]:t[2];if(i===window.location.href)return;this.log("debug",`update src ${window.location.href} -> ${i}`),this.options.updateSrc?this.options.updateSrc(i,this):(this.log("debug","no updateSrc method available, falling back to updating window.location.href",i),window.location.href=i)}if(c(t)&&this.applySyncedMouseEvent(t),g(t))if(!this.parentUrlListeners[t[2]])this.log("error",`received getParentUrlResponse message but no matching callback is registered: ${t[2]}`);else for(const i of this.parentUrlListeners[t[2]])i(t[3])}}postMessageToParent(e){window.parent.postMessage(e,"*")}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}ready(){this.postMessageToParent(["df-child","ready"])}reinitHeight(){this.postMessageToParent(["df-child","reinit-height"])}addParentUrlListener(e,t){const i=new URL(e,window.location.href).href;if(!p){t(i);return}this.parentUrlResults[i]&&t(this.parentUrlResults[i]),this.parentUrlListeners[i]=this.parentUrlListeners[i]??[],this.parentUrlListeners[i].push(t),this.postMessageToParent(["df-child","addParentUrlListener",i])}removeParentUrlListener(e,t){const i=new URL(e,window.location.href).href;this.parentUrlListeners[i]&&(this.parentUrlListeners[i]=this.parentUrlListeners[i].filter(o=>o!==t),this.parentUrlListeners[i].length||(delete this.parentUrlListeners[i],this.postMessageToParent(["df-child","removeParentUrlListener",i])))}initMouseEvents(e){this.log("debug","initMouseEvents");for(const t of e)document.addEventListener(t,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",t,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToParent(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const t=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});document.body.dispatchEvent(t)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...o)=>{const d=window.location.href,r=e.apply(window.history,o);return window.location.href!==d&&this.postMessageToParent(["df-child","stateChange","push",window.location.href]),r};window.history.pushState=t;const i=(...o)=>{const d=window.location.href,r=e.apply(window.history,o);return window.location.href!==d&&this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),r};window.history.replaceState=i}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){if(!this.throttledCheckHeight)throw new Error("throttledCheckHeight is not defined");for(const e of b)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0,i=0;for(const o of e){const d=o.getAttribute("data-iframe-height"),r=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),s=d?r+parseFloat(d):r;r>t&&(t=r),s>i&&(i=s)}i=Math.ceil(i),t>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}const y=(n,e)=>{const t=Object.keys(n);e.forEach((i,o)=>{n[o]=i,t.splice(t.indexOf(o),1)}),t.forEach(i=>{delete n[i]})},w=new m({updateSrc(n,e){var d,r;const t=window.vIframeOptions,i=t==null?void 0:t.reactiveParams;if(i&&typeof i=="object"){const s=new URL(n);if(s.origin===window.location.origin&&s.pathname===window.location.pathname){e.log("debug","applying reactive params",s.searchParams),y(i,s.searchParams);return}}const o=t==null?void 0:t.router;if(o){const s=((d=o.options)==null?void 0:d.base)??((r=o.options.history)==null?void 0:r.base);if(s==null)e.log("error","failed to access base path in router (no router.options.base nor router.options.history.base)",o);else{const u=window.location.origin+s;if(!n.startsWith(u))e.log("info","src does not start with base path",n,u);else{let f=n.replace(u,"");f.startsWith("/")||(f="/"+f),e.log("debug","applying router.replace",f),o.replace(f);return}}}e.log("info","falling back to updating window.location.href",n),window.location.href=n}});return window.dFrameContent=w,w}();
2
2
  //# sourceMappingURL=d-frame-content.min.js.map
@@ -24,6 +24,7 @@ export default class DFrameContent {
24
24
  sendNotif(notif: Notif): void;
25
25
  sendMessage(msg: any): void;
26
26
  ready(): void;
27
+ reinitHeight(): void;
27
28
  addParentUrlListener(partialChildHref: string, listener: (result: string) => any): void;
28
29
  removeParentUrlListener(partialChildHref: string, listener: (result: string) => any): void;
29
30
  private currentSyncedMouseEvents;
@@ -133,6 +133,9 @@ export default class DFrameContent {
133
133
  ready() {
134
134
  this.postMessageToParent(['df-child', 'ready']);
135
135
  }
136
+ reinitHeight() {
137
+ this.postMessageToParent(['df-child', 'reinit-height']);
138
+ }
136
139
  // this is not a single-time callback, it can be called multiple times when parent url changes
137
140
  addParentUrlListener(partialChildHref, listener) {
138
141
  const childHref = new URL(partialChildHref, window.location.href).href;
@@ -19,6 +19,8 @@ export declare class DFrameElement extends HTMLElement {
19
19
  set height(value: string | null);
20
20
  set resize(value: "auto" | "yes" | "no");
21
21
  get resize(): 'auto' | 'yes' | 'no';
22
+ set reinitHeight(value: "on-message" | "no");
23
+ get reinitHeight(): 'on-message' | 'no';
22
24
  get syncParams(): string | null;
23
25
  set syncParams(value: string | null);
24
26
  get syncPath(): string | null;
@@ -1,5 +1,5 @@
1
1
  // this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
2
- import { isCustomMessage, isAddParentUrlListenerMessage, isRemoveParentUrlListenerMessage, isHeightMessage, isInitChildMessage, isMouseEventMessage, isNotifMessage, isReadyMessage, isStateChangeMessage } from './messages.js';
2
+ import { isCustomMessage, isAddParentUrlListenerMessage, isRemoveParentUrlListenerMessage, isHeightMessage, isInitChildMessage, isMouseEventMessage, isNotifMessage, isReadyMessage, isStateChangeMessage, isReinitHeightMessage } from './messages.js';
3
3
  import { parseSyncParams, getChildSrc, getParentUrl } from './utils/sync-params.js';
4
4
  import { isVIframeUiNotif, convertVIframeUiNotif } from './v-iframe-compat/ui-notif.js';
5
5
  class WindowStateChangeAdapter {
@@ -86,6 +86,13 @@ export class DFrameElement extends HTMLElement {
86
86
  return 'yes';
87
87
  return value;
88
88
  }
89
+ set reinitHeight(value) { this.setAttribute('reinit-height', value); }
90
+ get reinitHeight() {
91
+ const value = this.getAttribute('reinit-height');
92
+ if (value === null || value === '')
93
+ return 'on-message';
94
+ return value;
95
+ }
89
96
  get syncParams() { return this.getAttribute('sync-params'); }
90
97
  set syncParams(value) {
91
98
  if (value !== null)
@@ -235,6 +242,10 @@ export class DFrameElement extends HTMLElement {
235
242
  }
236
243
  this.updateStyle();
237
244
  }
245
+ if (isReinitHeightMessage(message) && this.reinitHeight === 'on-message') {
246
+ this.resizedHeight = undefined;
247
+ this.updateStyle();
248
+ }
238
249
  if (isStateChangeMessage(message)) {
239
250
  this.currentChildSrc = message[3];
240
251
  if ((this.parsedSyncParams || this.syncPath)) {
package/lib/messages.d.ts CHANGED
@@ -2,13 +2,14 @@ export type MouseEventMessage = ['df-global', 'mouse', MouseEvent['type'], Pick<
2
2
  export declare function isMouseEventMessage(message: any): message is MouseEventMessage;
3
3
  export type InitChildMessage = ['df-child', 'init'];
4
4
  export type HeightMessage = ['df-child', 'height', number];
5
+ export type ReinitHeightMessage = ['df-child', 'reinit-height'];
5
6
  export type StateChangeMessage = ['df-child', 'stateChange', 'replace' | 'push', string];
6
7
  export type CustomMessage = ['df-child', 'custom', any];
7
8
  export type NotifMessage = ['df-child', 'notif', Notif];
8
9
  export type AddParentUrlListenerMessage = ['df-child', 'addParentUrlListener', string];
9
10
  export type RemoveParentUrlListenerMessage = ['df-child', 'removeParentUrlListener', string];
10
11
  export type ReadyMessage = ['df-child', 'ready'];
11
- export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage | MouseEventMessage | AddParentUrlListenerMessage | RemoveParentUrlListenerMessage | ReadyMessage;
12
+ export type ChildMessage = InitChildMessage | HeightMessage | ReinitHeightMessage | StateChangeMessage | CustomMessage | NotifMessage | MouseEventMessage | AddParentUrlListenerMessage | RemoveParentUrlListenerMessage | ReadyMessage;
12
13
  export type Notif = {
13
14
  type: 'default' | 'info' | 'success' | 'warning' | 'error';
14
15
  title: string;
@@ -16,6 +17,7 @@ export type Notif = {
16
17
  };
17
18
  export declare function isInitChildMessage(message: any): message is InitChildMessage;
18
19
  export declare function isHeightMessage(message: any): message is HeightMessage;
20
+ export declare function isReinitHeightMessage(message: any): message is ReinitHeightMessage;
19
21
  export declare function isStateChangeMessage(message: any): message is StateChangeMessage;
20
22
  export declare function isCustomMessage(message: any): message is CustomMessage;
21
23
  export declare function isNotifMessage(message: any): message is NotifMessage;
package/lib/messages.js CHANGED
@@ -7,6 +7,9 @@ export function isInitChildMessage(message) {
7
7
  export function isHeightMessage(message) {
8
8
  return message[0] === 'df-child' && message[1] === 'height';
9
9
  }
10
+ export function isReinitHeightMessage(message) {
11
+ return message[0] === 'df-child' && message[1] === 'reinit-height';
12
+ }
10
13
  export function isStateChangeMessage(message) {
11
14
  return message[0] === 'df-child' && message[1] === 'stateChange';
12
15
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@data-fair/frame",
3
- "version": "0.14.1",
3
+ "version": "0.15.0",
4
4
  "description": "An iframe wrapper for powerful web app integrations.",
5
5
  "main": "dist/frame.min.js",
6
6
  "directories": {
@@ -19,6 +19,7 @@
19
19
  "vue-router": "^4.5.0"
20
20
  },
21
21
  "scripts": {
22
+ "check-types": "tsc",
22
23
  "lint": "eslint .",
23
24
  "lint:fix": "eslint . --fix",
24
25
  "dev-zellij": "zellij --layout .zellij.kdl",