@data-fair/frame 0.13.3 → 0.14.1

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

@@ -1,2 +1,2 @@
-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}();
+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}();
 //# sourceMappingURL=d-frame-content.min.js.map

package/dist/d-frame.min.js

@@ -1,4 +1,4 @@
-var k=Object.defineProperty;var N=(u,c,f)=>c in u?k(u,c,{enumerable:!0,configurable:!0,writable:!0,value:f}):u[c]=f;var a=(u,c,f)=>N(u,typeof c!="symbol"?c+"":c,f);(function(){"use strict";var v,A;function u(t){return t[0]==="df-global"&&t[1]==="mouse"}function c(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,l)=>{for(const o of e){if(o.append&&!l.startsWith(o.append)||l===s)continue;const d=o.append?l.replace(o.append,""):l;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),l=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)){l.searchParams.get(m)===null&&h.searchParams.delete(o);break}}l.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,l);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}"`:""}>
+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}"`:""}>
   :host {
     display: block;
   }
@@ -15,5 +15,5 @@ var k=Object.defineProperty;var N=(u,c,f)=>c in u?k(u,c,{enumerable:!0,configura
     border: none;
     user-select: none;
   }
-</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 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(c(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.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.ready&&this.iframeElement.getAttribute("style")!==""&&(this.log("debug","toggle loading slot and iframe visibility"),this.iframeElement.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("debug","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)})();
+</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)})();
 //# sourceMappingURL=d-frame.min.js.map

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

@@ -1,2 +1,2 @@
-var VIframeCompatDFrameContent=function(){"use strict";var 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}();
+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}();
 //# sourceMappingURL=d-frame-content.min.js.map

package/lib/DFrameContent.js

@@ -122,7 +122,7 @@ export default class DFrameContent {
         }
     }
     postMessageToParent(message) {
-        window.parent.postMessage(message);
+        window.parent.postMessage(message, '*');
     }
     sendNotif(notif) {
         this.postMessageToParent(['df-child', 'notif', notif]);

package/lib/DFrameElement.d.ts

@@ -11,6 +11,8 @@ export declare class DFrameElement extends HTMLElement {
     get src(): string;
     set src(value: string);
     get fullSrc(): string;
+    get scrolling(): string;
+    set scrolling(value: string);
     get aspectRatio(): string | null;
     set aspectRatio(value: string | null);
     get height(): string | null;

package/lib/DFrameElement.js

@@ -56,6 +56,8 @@ export class DFrameElement extends HTMLElement {
     get src() { return this.getAttribute('src'); }
     set src(value) { this.setAttribute('src', value); }
     get fullSrc() { return this.src.startsWith('/') ? (window.location.origin + this.src) : this.src; }
+    get scrolling() { return this.getAttribute('scrolling'); }
+    set scrolling(value) { this.setAttribute('scrolling', value); }
     get aspectRatio() {
         const value = this.getAttribute('aspect-ratio');
         if (value === '')
@@ -290,7 +292,7 @@ export class DFrameElement extends HTMLElement {
     }
     postMessageToChild(message) {
         this.log('debug', 'send message to child', message);
-        this.iframeElement?.contentWindow?.postMessage(message);
+        this.iframeElement?.contentWindow?.postMessage(message, '*');
     }
     updateSrc() {
         if (!this.connected)
@@ -345,16 +347,22 @@ export class DFrameElement extends HTMLElement {
             this.wrapperElement.style.cssText = '';
         }
         // set scrolling attribute of iframe
-        if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
-            if (this.iframeElement.getAttribute('scrolling') !== 'no') {
-                this.log('debug', 'set scrolling attribute of iframe: no');
-                this.iframeElement.setAttribute('scrolling', 'no');
-            }
+        if (this.scrolling) {
+            this.log('debug', 'explicitly set of scrolling attribute of iframe: ' + this.scrolling);
+            this.iframeElement.setAttribute('scrolling', this.scrolling);
         }
         else {
-            if (this.iframeElement.getAttribute('scrolling') !== 'auto') {
-                this.log('debug', 'set scrolling attribute of iframe: auto');
-                this.iframeElement.setAttribute('scrolling', 'auto');
+            if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
+                if (this.iframeElement.getAttribute('scrolling') !== 'no') {
+                    this.log('debug', 'implicitly set scrolling attribute of iframe: no');
+                    this.iframeElement.setAttribute('scrolling', 'no');
+                }
+            }
+            else {
+                if (this.iframeElement.getAttribute('scrolling') !== 'auto') {
+                    this.log('debug', 'implicitly set scrolling attribute of iframe: auto');
+                    this.iframeElement.setAttribute('scrolling', 'auto');
+                }
             }
         }
         // toggle loading slot vs iframe visibility
@@ -495,7 +503,7 @@ export class DFrameElement extends HTMLElement {
             this.updateSrc();
         if (name === 'reload') {
             if (!this.currentChildSrc) {
-                this.log('debug', 'reload attribute changed but the iframe has no current src');
+                this.log('error', 'reload attribute changed but the iframe has no current src');
                 return;
             }
             if (!this.iframeElement.contentWindow?.location) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/frame",
-  "version": "0.13.3",
+  "version": "0.14.1",
   "description": "An iframe wrapper for powerful web app integrations.",
   "main": "dist/frame.min.js",
   "directories": {