@data-fair/frame 0.12.1 → 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 +2 -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 +29 -8
- 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,4 +1,4 @@
|
|
|
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
|
}
|
|
@@ -15,5 +15,5 @@ var K=Object.defineProperty;var k=(l,c,f)=>c in l?K(l,c,{enumerable:!0,configura
|
|
|
15
15
|
border: none;
|
|
16
16
|
user-select: none;
|
|
17
17
|
}
|
|
18
|
-
</style><div class="d-frame-wrapper"><slot name="loading"><div class="loading-placeholder"></div></slot><iframe class="d-frame-iframe"></iframe></div>`;class T 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",e=>this.onMessage(e));h(this,"mouseEventListeners",{});h(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()),A(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.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]]}))}S(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),C(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),M(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),l(i)&&this.applySyncedMouseEvent(i)}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;const e=x(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 a=i.slice(7);s[a]=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=L(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 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",T)})();
|
|
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)})();
|
|
19
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 {
|
|
@@ -153,6 +153,7 @@ export class DFrameElement extends HTMLElement {
|
|
|
153
153
|
resizeObserver;
|
|
154
154
|
boundOnMessage = (e) => this.onMessage(e);
|
|
155
155
|
mouseEventListeners = {};
|
|
156
|
+
parentUrlListeners = {};
|
|
156
157
|
get actualAspectRatio() {
|
|
157
158
|
if (this.aspectRatio !== 'auto')
|
|
158
159
|
return Number(this.aspectRatio);
|
|
@@ -225,15 +226,15 @@ export class DFrameElement extends HTMLElement {
|
|
|
225
226
|
if (isStateChangeMessage(message)) {
|
|
226
227
|
this.currentChildSrc = message[3];
|
|
227
228
|
if ((this.parsedSyncParams || this.syncPath)) {
|
|
228
|
-
const
|
|
229
|
-
if (
|
|
230
|
-
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);
|
|
231
232
|
try {
|
|
232
|
-
this.adapter.stateChange(message[2],
|
|
233
|
+
this.adapter.stateChange(message[2], newParentUrl, this);
|
|
233
234
|
}
|
|
234
235
|
catch (err) {
|
|
235
236
|
this.log('error', 'failed to apply state change to parent using custom adapter', err);
|
|
236
|
-
this.windowAdapter.stateChange(message[2],
|
|
237
|
+
this.windowAdapter.stateChange(message[2], newParentUrl, this);
|
|
237
238
|
}
|
|
238
239
|
}
|
|
239
240
|
}
|
|
@@ -252,8 +253,17 @@ export class DFrameElement extends HTMLElement {
|
|
|
252
253
|
this.dispatchEvent(new CustomEvent('ready'));
|
|
253
254
|
this.updateStyle();
|
|
254
255
|
}
|
|
255
|
-
if (isMouseEventMessage(message))
|
|
256
|
+
if (isMouseEventMessage(message)) {
|
|
256
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
|
+
}
|
|
257
267
|
}
|
|
258
268
|
else if (isVIframeUiNotif(message)) {
|
|
259
269
|
// maintain compatibility with v-iframe notifications sent through postMessage
|
|
@@ -268,6 +278,13 @@ export class DFrameElement extends HTMLElement {
|
|
|
268
278
|
updateSrc() {
|
|
269
279
|
if (!this.connected)
|
|
270
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
|
+
}
|
|
271
288
|
const iframeSrc = getChildSrc(this.fullSrc, window.location.href, this.parsedSyncParams, this.syncPath);
|
|
272
289
|
if (iframeSrc === this.currentChildSrc)
|
|
273
290
|
return;
|
|
@@ -457,13 +474,17 @@ export class DFrameElement extends HTMLElement {
|
|
|
457
474
|
this.updateSrc();
|
|
458
475
|
if (name === 'reload') {
|
|
459
476
|
if (!this.currentChildSrc) {
|
|
460
|
-
this.log('debug', 'reload attribute changed but
|
|
477
|
+
this.log('debug', 'reload attribute changed but the iframe has no current src');
|
|
461
478
|
return;
|
|
462
479
|
}
|
|
463
480
|
if (!this.iframeElement.contentWindow?.location) {
|
|
464
481
|
this.log('debug', 'reload attribute changed but no iframe contentWindow, is this a cross domain iframe ?');
|
|
465
482
|
return;
|
|
466
483
|
}
|
|
484
|
+
if (!this.iframeLoaded) {
|
|
485
|
+
this.log('debug', 'reload attribute changed before initial loading was complete, ignore it');
|
|
486
|
+
return;
|
|
487
|
+
}
|
|
467
488
|
this.log('debug', 'reload iframe with current src', this.currentChildSrc);
|
|
468
489
|
this.childInitialized = false;
|
|
469
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;
|