@data-fair/frame 0.12.0 → 0.13.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.
- package/dist/d-frame-content.min.js +1 -1
- package/dist/d-frame.min.js +5 -2
- package/dist/v-iframe-compat/d-frame-content.min.js +1 -1
- package/lib/DFrameContent.d.ts +4 -0
- package/lib/DFrameContent.js +40 -2
- package/lib/DFrameElement.d.ts +1 -0
- package/lib/DFrameElement.js +42 -14
- package/lib/messages.d.ts +8 -2
- package/lib/messages.js +9 -0
- package/lib/utils/in-iframe.d.ts +2 -0
- package/lib/utils/in-iframe.js +9 -0
- package/lib/vue/use-parent-urls.d.ts +7 -0
- package/lib/vue/use-parent-urls.js +26 -0
- package/lib/vue-router/state-change-adapter.js +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var DFrameContent=function(){"use strict";var
|
|
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}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/dist/d-frame.min.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
var
|
|
1
|
+
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 C(t){return t[0]==="df-child"&&t[1]==="custom"}function M(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 W(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;s==="#"?h=r.hash.slice(1):s.startsWith("/")?r.pathname.startsWith(s)&&(h=y(new URL(s,n),r)):h=r.searchParams.get(s),h&&(i.pathname=new URL(h,t).pathname)}return i.href}function m(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 p=d.append?o.replace(d.append,""):o;if(p.match(d.regexp)){l.searchParams.get(p)===null&&h.searchParams.delete(o);break}}l.searchParams.forEach((o,d)=>{for(const p of s){if(!d.match(p.regexp)||(r==null?void 0:r.searchParams.get(d))===o)continue;const K=p.append?p.append+d:d;h.searchParams.set(K,o);break}})}if(i!==null&&r){const o=y(r,l);i==="#"?h.hash=o:i.startsWith("/")?o===""||o.startsWith("/")?h.pathname=i:h.pathname=new URL(o,new URL(i,e)).pathname:o?h.searchParams.set(i,o):h.searchParams.delete(i)}return h}function H(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 I{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
|
}
|
|
5
5
|
.d-frame-wrapper {
|
|
6
6
|
height: 100%;
|
|
7
7
|
}
|
|
8
|
+
.d-frame-wrapper .loading-placeholder {
|
|
9
|
+
min-height:150px;
|
|
10
|
+
}
|
|
8
11
|
iframe.d-frame-iframe {
|
|
9
12
|
display: block;
|
|
10
13
|
width: 100%;
|
|
@@ -12,5 +15,5 @@ var H=Object.defineProperty;var I=(l,u,f)=>u in l?H(l,u,{enumerable:!0,configura
|
|
|
12
15
|
border: none;
|
|
13
16
|
user-select: none;
|
|
14
17
|
}
|
|
15
|
-
</style><div class="d-frame-wrapper"><slot name="loading"><div style="min-height:150px;"></div></slot><iframe class="d-frame-iframe" style="visibility:hidden;position:absolute;height:0px;"></iframe></div>`;class x extends HTMLElement{constructor(){super();h(this,"adapter");h(this,"windowAdapter");h(this,"connected",!1);h(this,"childInitialized",!1);h(this,"currentChildSrc",null);h(this,"parsedSyncParams");h(this,"wrapperElement");h(this,"slotElement");h(this,"iframeElement");h(this,"width");h(this,"aspectRatioHeight");h(this,"resizedHeight");h(this,"randomId");h(this,"iframeLoaded",!1);h(this,"ready",!1);h(this,"iframeExtraAttrs",{});h(this,"resizeObserver");h(this,"boundOnMessage",t=>this.onMessage(t));h(this,"mouseEventListeners",{});h(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const t=b.content.cloneNode(!0);this.wrapperElement=t.childNodes[1],this.slotElement=this.wrapperElement.childNodes[0],this.iframeElement=this.wrapperElement.childNodes[1],this.iframeElement.addEventListener("load",()=>{this.iframeElement.getAttribute("src")&&(this.log("debug","iframe loaded"),this.iframeLoaded=!0,this.dispatchEvent(new CustomEvent("iframe-load")),this.resize!=="yes"&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()))}),this.attachShadow({mode:"open"}).appendChild(t),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 P}get id(){return this.getAttribute("id")??this.randomId}set id(t){this.setAttribute("id",t)}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get fullSrc(){return this.src.startsWith("/")?window.location.origin+this.src:this.src}get aspectRatio(){const t=this.getAttribute("aspect-ratio");return t===""?"auto":t}set aspectRatio(t){t!==null?this.setAttribute("aspect-ratio",t):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(t){t?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get readyMessage(){return this.hasAttribute("ready-message")}set readyMessage(t){t?this.setAttribute("ready-message",""):this.removeAttribute("ready-message")}get mouseEvents(){const t=this.getAttribute("mouse-events");return t===null?null:t===""?["click","dblclick","mousedown","mouseup"]:t.split(",")}set mouseEvents(t){t===null?this.removeAttribute("mouse-events"):this.setAttribute("mouse-events",t.join(","))}get reload(){return this.getAttribute("reload")}set reload(t){this.setAttribute("reload",t)}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var s;if(t.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=t.data;if(this.log("debug","received message from child",i),Array.isArray(t.data)){if(u(i)&&(this.postMessageToChild(["df-parent","init",{id:this.id,debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null,stateChangeEvents:this.stateChangeEvents,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()),y(i)){if(this.currentChildSrc=i[3],this.parsedSyncParams||this.syncPath){const r=R(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);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(a){this.log("error","failed to apply state change to parent using custom adapter",a),this.windowAdapter.stateChange(i[2],r,this)}}}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}E(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),w(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),v(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),l(i)&&this.applySyncedMouseEvent(i)}else z(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:L(i.uiNotification)}))}}postMessageToChild(t){var s,i;this.log("debug","send message to child",t),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(t)}updateSrc(){if(!this.connected)return;const t=C(this.fullSrc,window.location.href,this.parsedSyncParams,this.syncPath);t!==this.currentChildSrc&&(this.currentChildSrc=t,this.childInitialized?this.postMessageToChild(["df-parent","updateSrc",t]):(this.log("debug","set src attribute of iframe: "+t),this.iframeElement.setAttribute("src",t)))}updateStyle(){if(!this.connected)return;let t;this.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),t=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t=this.aspectRatioHeight+"px"),t!==void 0?(this.log("debug","set height iframe wrapper: "+t),this.wrapperElement.setAttribute("style",`height:${t};min-height:0;`)):this.wrapperElement.setAttribute("style",""),this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.ready&&this.iframeElement.getAttribute("style")!==""&&(this.log("debug","toggle loading slot and iframe visibility"),this.iframeElement.setAttribute("style",""),this.slotElement.setAttribute("style","display:none;"))}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}updateIframeExtraAttrs(){const t=this.iframeExtraAttrs,s={};for(const i of this.getAttributeNames())if(i.startsWith("iframe-")){const r=this.getAttribute(i);if(r!==null){const a=i.slice(7);s[a]=r}}this.log("debug","update iframe extra attributes",t,s);for(const i of Object.keys(t))i in s||this.iframeElement.removeAttribute(i);for(const i of Object.keys(s))s[i]!==t[i]&&this.iframeElement.setAttribute(i,s[i])}initMouseEvents(t){this.log("debug","initMouseEvents");for(const s of t)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(t){this.currentSyncedMouseEvents.has(t[2])?this.currentSyncedMouseEvents.delete(t[2]):this.postMessageToChild(t)}applySyncedMouseEvent(t){this.currentSyncedMouseEvents.add(t[2]);const s=new MouseEvent(t[2],{bubbles:!0,cancelable:!0,view:window,...t[3]});this.dispatchEvent(s)}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}`,...s),t==="info"&&console.info(`d-frame:${this.id}`,...s),t==="error"&&console.error(`d-frame:${this.id}`,...s))}connectedCallback(){if(!this.debug){const t=window.localStorage.getItem("debug");if(t){const s=t.split(",");(s.includes("d-frame")||s.includes("d-frame:"+this.id))&&(this.debug=!0)}}if(this.debug&&console.time(`d-frame:${this.id}`),!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.resizeObserver.observe(this),window.addEventListener("message",this.boundOnMessage),this.syncParams!==null&&(this.parsedSyncParams=M(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[t,s]of Object.entries(this.mouseEventListeners))document.removeEventListener(t,s,!0),delete this.mouseEventListeners[t]}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path","reload"]}attributeChangedCallback(t,s,i){var r;if(t==="aspect-ratio"&&this.updateAspectRatioHeight(),!!this.connected&&(this.log("debug","attribute change",t,s,i),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc(),t==="reload")){if(!this.currentChildSrc){this.log("debug","reload attribute changed but no iframe previously 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}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",x)})();
|
|
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 I}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 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(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=m(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);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]})),M(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=m(this.fullSrc,i[2],window.location.href,this.parsedSyncParams,this.syncPath).href;this.parentUrlListeners[i[2]]=r,this.postMessageToChild(["df-parent","parentUrl",i[2],r])}R(i)&&delete this.parentUrlListeners[i[2]]}else H(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=m(this.fullSrc,s,window.location.href,this.parsedSyncParams,this.syncPath).href;r!==i&&(this.parentUrlListeners[s]=r,this.postMessageToChild(["df-parent","parentUrl",s,r]))}const e=W(this.fullSrc,window.location.href,this.parsedSyncParams,this.syncPath);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)})();
|
|
16
19
|
//# sourceMappingURL=d-frame.min.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var VIframeCompatDFrameContent=function(){"use strict";var
|
|
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}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/lib/DFrameContent.d.ts
CHANGED
|
@@ -15,6 +15,8 @@ export default class DFrameContent {
|
|
|
15
15
|
id?: string;
|
|
16
16
|
private throttledCheckHeight?;
|
|
17
17
|
private lastHeight;
|
|
18
|
+
private parentUrlListeners;
|
|
19
|
+
private parentUrlResults;
|
|
18
20
|
constructor(options?: DFrameContentOptions);
|
|
19
21
|
log(level: 'debug' | 'info' | 'error', ...args: any[]): void;
|
|
20
22
|
private onMessage;
|
|
@@ -22,6 +24,8 @@ export default class DFrameContent {
|
|
|
22
24
|
sendNotif(notif: Notif): void;
|
|
23
25
|
sendMessage(msg: any): void;
|
|
24
26
|
ready(): void;
|
|
27
|
+
addParentUrlListener(partialChildHref: string, listener: (result: string) => any): void;
|
|
28
|
+
removeParentUrlListener(partialChildHref: string, listener: (result: string) => any): void;
|
|
25
29
|
private currentSyncedMouseEvents;
|
|
26
30
|
private initMouseEvents;
|
|
27
31
|
private transmitSyncedMouseEvent;
|
package/lib/DFrameContent.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { isInitParentMessage, isMouseEventMessage, isUpdateSrcMessage } from './messages.js';
|
|
1
|
+
import { isInitParentMessage, isMouseEventMessage, isUpdateSrcMessage, isParentUrlMessage } from './messages.js';
|
|
2
|
+
import inIframe from './utils/in-iframe.js';
|
|
2
3
|
const windowEventTypes = [
|
|
3
4
|
'animationstart',
|
|
4
5
|
'webkitAnimationStart',
|
|
@@ -38,6 +39,8 @@ export default class DFrameContent {
|
|
|
38
39
|
id;
|
|
39
40
|
throttledCheckHeight;
|
|
40
41
|
lastHeight = 0;
|
|
42
|
+
parentUrlListeners = {};
|
|
43
|
+
parentUrlResults = {};
|
|
41
44
|
constructor(options) {
|
|
42
45
|
this.options = options ?? {};
|
|
43
46
|
if (typeof window === 'undefined')
|
|
@@ -103,8 +106,19 @@ export default class DFrameContent {
|
|
|
103
106
|
window.location.href = newSrc;
|
|
104
107
|
}
|
|
105
108
|
}
|
|
106
|
-
if (isMouseEventMessage(message))
|
|
109
|
+
if (isMouseEventMessage(message)) {
|
|
107
110
|
this.applySyncedMouseEvent(message);
|
|
111
|
+
}
|
|
112
|
+
if (isParentUrlMessage(message)) {
|
|
113
|
+
if (!this.parentUrlListeners[message[2]]) {
|
|
114
|
+
this.log('error', `received getParentUrlResponse message but no matching callback is registered: ${message[2]}`);
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
for (const listener of this.parentUrlListeners[message[2]]) {
|
|
118
|
+
listener(message[3]);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
108
122
|
}
|
|
109
123
|
}
|
|
110
124
|
postMessageToParent(message) {
|
|
@@ -119,6 +133,30 @@ export default class DFrameContent {
|
|
|
119
133
|
ready() {
|
|
120
134
|
this.postMessageToParent(['df-child', 'ready']);
|
|
121
135
|
}
|
|
136
|
+
// this is not a single-time callback, it can be called multiple times when parent url changes
|
|
137
|
+
addParentUrlListener(partialChildHref, listener) {
|
|
138
|
+
const childHref = new URL(partialChildHref, window.location.href).href;
|
|
139
|
+
if (!inIframe) {
|
|
140
|
+
listener(childHref);
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
if (this.parentUrlResults[childHref]) {
|
|
144
|
+
listener(this.parentUrlResults[childHref]);
|
|
145
|
+
}
|
|
146
|
+
this.parentUrlListeners[childHref] = this.parentUrlListeners[childHref] ?? [];
|
|
147
|
+
this.parentUrlListeners[childHref].push(listener);
|
|
148
|
+
this.postMessageToParent(['df-child', 'addParentUrlListener', childHref]);
|
|
149
|
+
}
|
|
150
|
+
removeParentUrlListener(partialChildHref, listener) {
|
|
151
|
+
const childHref = new URL(partialChildHref, window.location.href).href;
|
|
152
|
+
if (this.parentUrlListeners[childHref]) {
|
|
153
|
+
this.parentUrlListeners[childHref] = this.parentUrlListeners[childHref].filter(cb => cb !== listener);
|
|
154
|
+
if (!this.parentUrlListeners[childHref].length) {
|
|
155
|
+
delete this.parentUrlListeners[childHref];
|
|
156
|
+
this.postMessageToParent(['df-child', 'removeParentUrlListener', childHref]);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
122
160
|
currentSyncedMouseEvents = new Set();
|
|
123
161
|
initMouseEvents(types) {
|
|
124
162
|
this.log('debug', 'initMouseEvents');
|
package/lib/DFrameElement.d.ts
CHANGED
|
@@ -48,6 +48,7 @@ export declare class DFrameElement extends HTMLElement {
|
|
|
48
48
|
private resizeObserver;
|
|
49
49
|
private boundOnMessage;
|
|
50
50
|
private mouseEventListeners;
|
|
51
|
+
private parentUrlListeners;
|
|
51
52
|
get actualAspectRatio(): number;
|
|
52
53
|
constructor();
|
|
53
54
|
onMessage(e: MessageEvent): void;
|
package/lib/DFrameElement.js
CHANGED
|
@@ -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, isHeightMessage, isInitChildMessage, isMouseEventMessage, isNotifMessage, isReadyMessage, isStateChangeMessage } from './messages.js';
|
|
2
|
+
import { isCustomMessage, isAddParentUrlListenerMessage, isRemoveParentUrlListenerMessage, isHeightMessage, isInitChildMessage, isMouseEventMessage, isNotifMessage, isReadyMessage, isStateChangeMessage } 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 {
|
|
@@ -19,14 +19,20 @@ class WindowStateChangeAdapter {
|
|
|
19
19
|
window.addEventListener('popstate', callback);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
+
// we try to adapt to some of the conventions found out there
|
|
23
|
+
const cspNonceMeta = document.head?.querySelector('meta[property=csp-nonce]') ?? document.head?.querySelector('meta[name=csp-nonce]');
|
|
24
|
+
const cspNonce = cspNonceMeta?.nonce ?? cspNonceMeta?.content;
|
|
22
25
|
const template = document.createElement('template');
|
|
23
|
-
template.innerHTML = `<style>
|
|
26
|
+
template.innerHTML = `<style${cspNonce ? ` nonce="${cspNonce}"` : ''}>
|
|
24
27
|
:host {
|
|
25
28
|
display: block;
|
|
26
29
|
}
|
|
27
30
|
.d-frame-wrapper {
|
|
28
31
|
height: 100%;
|
|
29
32
|
}
|
|
33
|
+
.d-frame-wrapper .loading-placeholder {
|
|
34
|
+
min-height:150px;
|
|
35
|
+
}
|
|
30
36
|
iframe.d-frame-iframe {
|
|
31
37
|
display: block;
|
|
32
38
|
width: 100%;
|
|
@@ -34,7 +40,7 @@ template.innerHTML = `<style>
|
|
|
34
40
|
border: none;
|
|
35
41
|
user-select: none;
|
|
36
42
|
}
|
|
37
|
-
</style><div class="d-frame-wrapper"><slot name="loading"><div
|
|
43
|
+
</style><div class="d-frame-wrapper"><slot name="loading"><div class="loading-placeholder"></div></slot><iframe class="d-frame-iframe"></iframe></div>`;
|
|
38
44
|
export class DFrameElement extends HTMLElement {
|
|
39
45
|
get id() { return this.getAttribute('id') ?? this.randomId; }
|
|
40
46
|
set id(value) {
|
|
@@ -147,6 +153,7 @@ export class DFrameElement extends HTMLElement {
|
|
|
147
153
|
resizeObserver;
|
|
148
154
|
boundOnMessage = (e) => this.onMessage(e);
|
|
149
155
|
mouseEventListeners = {};
|
|
156
|
+
parentUrlListeners = {};
|
|
150
157
|
get actualAspectRatio() {
|
|
151
158
|
if (this.aspectRatio !== 'auto')
|
|
152
159
|
return Number(this.aspectRatio);
|
|
@@ -165,6 +172,7 @@ export class DFrameElement extends HTMLElement {
|
|
|
165
172
|
this.wrapperElement = root.childNodes[1];
|
|
166
173
|
this.slotElement = this.wrapperElement.childNodes[0];
|
|
167
174
|
this.iframeElement = this.wrapperElement.childNodes[1];
|
|
175
|
+
this.iframeElement.style.cssText = 'visibility:hidden;position:absolute;height:0px;';
|
|
168
176
|
this.iframeElement.addEventListener('load', () => {
|
|
169
177
|
if (this.iframeElement.getAttribute('src')) {
|
|
170
178
|
this.log('debug', 'iframe loaded');
|
|
@@ -218,15 +226,15 @@ export class DFrameElement extends HTMLElement {
|
|
|
218
226
|
if (isStateChangeMessage(message)) {
|
|
219
227
|
this.currentChildSrc = message[3];
|
|
220
228
|
if ((this.parsedSyncParams || this.syncPath)) {
|
|
221
|
-
const
|
|
222
|
-
if (
|
|
223
|
-
this.log('debug', 'apply state change to parent', message[2],
|
|
229
|
+
const newParentUrl = getParentUrl(this.fullSrc, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
|
|
230
|
+
if (newParentUrl.href !== window.location.href) {
|
|
231
|
+
this.log('debug', 'apply state change to parent', message[2], newParentUrl.href);
|
|
224
232
|
try {
|
|
225
|
-
this.adapter.stateChange(message[2],
|
|
233
|
+
this.adapter.stateChange(message[2], newParentUrl, this);
|
|
226
234
|
}
|
|
227
235
|
catch (err) {
|
|
228
236
|
this.log('error', 'failed to apply state change to parent using custom adapter', err);
|
|
229
|
-
this.windowAdapter.stateChange(message[2],
|
|
237
|
+
this.windowAdapter.stateChange(message[2], newParentUrl, this);
|
|
230
238
|
}
|
|
231
239
|
}
|
|
232
240
|
}
|
|
@@ -245,8 +253,17 @@ export class DFrameElement extends HTMLElement {
|
|
|
245
253
|
this.dispatchEvent(new CustomEvent('ready'));
|
|
246
254
|
this.updateStyle();
|
|
247
255
|
}
|
|
248
|
-
if (isMouseEventMessage(message))
|
|
256
|
+
if (isMouseEventMessage(message)) {
|
|
249
257
|
this.applySyncedMouseEvent(message);
|
|
258
|
+
}
|
|
259
|
+
if (isAddParentUrlListenerMessage(message)) {
|
|
260
|
+
const parentUrl = getParentUrl(this.fullSrc, message[2], window.location.href, this.parsedSyncParams, this.syncPath).href;
|
|
261
|
+
this.parentUrlListeners[message[2]] = parentUrl;
|
|
262
|
+
this.postMessageToChild(['df-parent', 'parentUrl', message[2], parentUrl]);
|
|
263
|
+
}
|
|
264
|
+
if (isRemoveParentUrlListenerMessage(message)) {
|
|
265
|
+
delete this.parentUrlListeners[message[2]];
|
|
266
|
+
}
|
|
250
267
|
}
|
|
251
268
|
else if (isVIframeUiNotif(message)) {
|
|
252
269
|
// maintain compatibility with v-iframe notifications sent through postMessage
|
|
@@ -261,6 +278,13 @@ export class DFrameElement extends HTMLElement {
|
|
|
261
278
|
updateSrc() {
|
|
262
279
|
if (!this.connected)
|
|
263
280
|
return;
|
|
281
|
+
for (const [childHref, existingParentUrl] of Object.entries(this.parentUrlListeners)) {
|
|
282
|
+
const parentUrl = getParentUrl(this.fullSrc, childHref, window.location.href, this.parsedSyncParams, this.syncPath).href;
|
|
283
|
+
if (parentUrl !== existingParentUrl) {
|
|
284
|
+
this.parentUrlListeners[childHref] = parentUrl;
|
|
285
|
+
this.postMessageToChild(['df-parent', 'parentUrl', childHref, parentUrl]);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
264
288
|
const iframeSrc = getChildSrc(this.fullSrc, window.location.href, this.parsedSyncParams, this.syncPath);
|
|
265
289
|
if (iframeSrc === this.currentChildSrc)
|
|
266
290
|
return;
|
|
@@ -294,10 +318,10 @@ export class DFrameElement extends HTMLElement {
|
|
|
294
318
|
}
|
|
295
319
|
if (wrapperHeight !== undefined) {
|
|
296
320
|
this.log('debug', 'set height iframe wrapper: ' + wrapperHeight);
|
|
297
|
-
this.wrapperElement.
|
|
321
|
+
this.wrapperElement.style.cssText = `height:${wrapperHeight};min-height:0;`;
|
|
298
322
|
}
|
|
299
323
|
else {
|
|
300
|
-
this.wrapperElement.
|
|
324
|
+
this.wrapperElement.style.cssText = '';
|
|
301
325
|
}
|
|
302
326
|
// set scrolling attribute of iframe
|
|
303
327
|
if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
|
|
@@ -315,8 +339,8 @@ export class DFrameElement extends HTMLElement {
|
|
|
315
339
|
// toggle loading slot vs iframe visibility
|
|
316
340
|
if (this.ready && this.iframeElement.getAttribute('style') !== '') {
|
|
317
341
|
this.log('debug', 'toggle loading slot and iframe visibility');
|
|
318
|
-
this.iframeElement.
|
|
319
|
-
this.slotElement.
|
|
342
|
+
this.iframeElement.style.cssText = '';
|
|
343
|
+
this.slotElement.style.cssText = 'display:none;';
|
|
320
344
|
}
|
|
321
345
|
}
|
|
322
346
|
updateAspectRatioHeight() {
|
|
@@ -450,13 +474,17 @@ export class DFrameElement extends HTMLElement {
|
|
|
450
474
|
this.updateSrc();
|
|
451
475
|
if (name === 'reload') {
|
|
452
476
|
if (!this.currentChildSrc) {
|
|
453
|
-
this.log('debug', 'reload attribute changed but
|
|
477
|
+
this.log('debug', 'reload attribute changed but the iframe has no current src');
|
|
454
478
|
return;
|
|
455
479
|
}
|
|
456
480
|
if (!this.iframeElement.contentWindow?.location) {
|
|
457
481
|
this.log('debug', 'reload attribute changed but no iframe contentWindow, is this a cross domain iframe ?');
|
|
458
482
|
return;
|
|
459
483
|
}
|
|
484
|
+
if (!this.iframeLoaded) {
|
|
485
|
+
this.log('debug', 'reload attribute changed before initial loading was complete, ignore it');
|
|
486
|
+
return;
|
|
487
|
+
}
|
|
460
488
|
this.log('debug', 'reload iframe with current src', this.currentChildSrc);
|
|
461
489
|
this.childInitialized = false;
|
|
462
490
|
this.iframeElement.setAttribute('src', this.currentChildSrc);
|
package/lib/messages.d.ts
CHANGED
|
@@ -5,8 +5,10 @@ export type HeightMessage = ['df-child', 'height', number];
|
|
|
5
5
|
export type StateChangeMessage = ['df-child', 'stateChange', 'replace' | 'push', string];
|
|
6
6
|
export type CustomMessage = ['df-child', 'custom', any];
|
|
7
7
|
export type NotifMessage = ['df-child', 'notif', Notif];
|
|
8
|
+
export type AddParentUrlListenerMessage = ['df-child', 'addParentUrlListener', string];
|
|
9
|
+
export type RemoveParentUrlListenerMessage = ['df-child', 'removeParentUrlListener', string];
|
|
8
10
|
export type ReadyMessage = ['df-child', 'ready'];
|
|
9
|
-
export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage | MouseEventMessage | ReadyMessage;
|
|
11
|
+
export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage | MouseEventMessage | AddParentUrlListenerMessage | RemoveParentUrlListenerMessage | ReadyMessage;
|
|
10
12
|
export type Notif = {
|
|
11
13
|
type: 'default' | 'info' | 'success' | 'warning' | 'error';
|
|
12
14
|
title: string;
|
|
@@ -17,6 +19,8 @@ export declare function isHeightMessage(message: any): message is HeightMessage;
|
|
|
17
19
|
export declare function isStateChangeMessage(message: any): message is StateChangeMessage;
|
|
18
20
|
export declare function isCustomMessage(message: any): message is CustomMessage;
|
|
19
21
|
export declare function isNotifMessage(message: any): message is NotifMessage;
|
|
22
|
+
export declare function isAddParentUrlListenerMessage(message: any): message is AddParentUrlListenerMessage;
|
|
23
|
+
export declare function isRemoveParentUrlListenerMessage(message: any): message is RemoveParentUrlListenerMessage;
|
|
20
24
|
export declare function isReadyMessage(message: any): message is ReadyMessage;
|
|
21
25
|
export type InitParentMessage = [
|
|
22
26
|
'df-parent',
|
|
@@ -33,6 +37,8 @@ export type InitParentMessage = [
|
|
|
33
37
|
}
|
|
34
38
|
];
|
|
35
39
|
export type UpdateSrcMessage = ['df-parent', 'updateSrc', string];
|
|
36
|
-
export type
|
|
40
|
+
export type ParentUrlMessage = ['df-parent', 'parentUrl', string, string];
|
|
41
|
+
export type ParentMessage = InitParentMessage | UpdateSrcMessage | MouseEventMessage | ParentUrlMessage;
|
|
37
42
|
export declare function isInitParentMessage(message: any[]): message is InitParentMessage;
|
|
38
43
|
export declare function isUpdateSrcMessage(message: any[]): message is UpdateSrcMessage;
|
|
44
|
+
export declare function isParentUrlMessage(message: any[]): message is ParentUrlMessage;
|
package/lib/messages.js
CHANGED
|
@@ -16,6 +16,12 @@ export function isCustomMessage(message) {
|
|
|
16
16
|
export function isNotifMessage(message) {
|
|
17
17
|
return message[0] === 'df-child' && message[1] === 'notif';
|
|
18
18
|
}
|
|
19
|
+
export function isAddParentUrlListenerMessage(message) {
|
|
20
|
+
return message[0] === 'df-child' && message[1] === 'addParentUrlListener';
|
|
21
|
+
}
|
|
22
|
+
export function isRemoveParentUrlListenerMessage(message) {
|
|
23
|
+
return message[0] === 'df-child' && message[1] === 'removeParentUrlListener';
|
|
24
|
+
}
|
|
19
25
|
export function isReadyMessage(message) {
|
|
20
26
|
return message[0] === 'df-child' && message[1] === 'ready';
|
|
21
27
|
}
|
|
@@ -25,3 +31,6 @@ export function isInitParentMessage(message) {
|
|
|
25
31
|
export function isUpdateSrcMessage(message) {
|
|
26
32
|
return message[0] === 'df-parent' && message[1] === 'updateSrc';
|
|
27
33
|
}
|
|
34
|
+
export function isParentUrlMessage(message) {
|
|
35
|
+
return message[0] === 'df-parent' && message[1] === 'parentUrl';
|
|
36
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
import type DFrameContent from '../DFrameContent.js';
|
|
3
|
+
export declare const useDFrameParentUrls: (dFrameContent: DFrameContent) => {
|
|
4
|
+
get: (childHref: string) => Ref<string | undefined>;
|
|
5
|
+
clear: () => void;
|
|
6
|
+
};
|
|
7
|
+
export default useDFrameParentUrls;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { onScopeDispose, ref } from 'vue';
|
|
2
|
+
export const useDFrameParentUrls = (dFrameContent) => {
|
|
3
|
+
let computedParentUrls = {};
|
|
4
|
+
let listeners = {};
|
|
5
|
+
const get = (childHref) => {
|
|
6
|
+
if (computedParentUrls[childHref])
|
|
7
|
+
return computedParentUrls[childHref];
|
|
8
|
+
const parentUrl = computedParentUrls[childHref] = ref();
|
|
9
|
+
const listener = (result) => {
|
|
10
|
+
parentUrl.value = result;
|
|
11
|
+
};
|
|
12
|
+
listeners[childHref] = listener;
|
|
13
|
+
dFrameContent.addParentUrlListener(childHref, listener);
|
|
14
|
+
return parentUrl;
|
|
15
|
+
};
|
|
16
|
+
const clear = () => {
|
|
17
|
+
for (const [childHref, listener] of Object.entries(listeners)) {
|
|
18
|
+
dFrameContent.removeParentUrlListener(childHref, listener);
|
|
19
|
+
}
|
|
20
|
+
computedParentUrls = {};
|
|
21
|
+
listeners = {};
|
|
22
|
+
};
|
|
23
|
+
onScopeDispose(clear);
|
|
24
|
+
return { get, clear };
|
|
25
|
+
};
|
|
26
|
+
export default useDFrameParentUrls;
|