@data-fair/frame 0.9.2 → 0.9.4
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.js +12 -3
- package/lib/DFrameElement.d.ts +2 -3
- package/lib/DFrameElement.js +10 -12
- package/lib/utils/sync-params.js +3 -2
- package/lib/vue-reactive/d-frame-content.js +5 -1
- package/lib/vue-router/d-frame-content.js +5 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var DFrameContent=function(){"use strict";var
|
|
1
|
+
var DFrameContent=function(){"use strict";var w=Object.defineProperty;var g=(r,n,h)=>n in r?w(r,n,{enumerable:!0,configurable:!0,writable:!0,value:h}):r[n]=h;var s=(r,n,h)=>g(r,typeof n!="symbol"?n+"":n,h);function r(o){return o[0]==="df-global"&&o[1]==="mouse"}function n(o){return o[0]==="df-parent"&&o[1]==="init"}function h(o){return o[0]==="df-parent"&&o[1]==="updateSrc"}const f=["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 l{constructor(t){s(this,"initialized",!1);s(this,"options");s(this,"pendingCheckHeight",!1);s(this,"debug",!1);s(this,"id");s(this,"throttledCheckHeight");s(this,"lastHeight",0);s(this,"currentSyncedMouseEvents",new Set);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...e),t==="info"&&console.info(`d-frame:${this.id}:content`,...e),t==="error"&&console.error(`d-frame:${this.id}:content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;if(n(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),e[2].mouseEvents&&this.initMouseEvents(e[2].mouseEvents),this.initialized=!0),h(e)){const i=e[2].startsWith("/")?window.location.origin+e[2]:e[2];if(i===window.location.href)return;this.options.updateSrc?this.options.updateSrc(i,this):window.location.href=e[2]}r(e)&&this.applySyncedMouseEvent(e)}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}ready(){this.postMessageToParent(["df-child","ready"])}initMouseEvents(t){this.log("debug","initMouseEvents");for(const e of t)document.addEventListener(e,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",e,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(t){this.currentSyncedMouseEvents.has(t[2])?this.currentSyncedMouseEvents.delete(t[2]):this.postMessageToParent(t)}applySyncedMouseEvent(t){this.currentSyncedMouseEvents.add(t[2]);const e=new MouseEvent(t[2],{bubbles:!0,cancelable:!0,view:window,...t[3]});document.body.dispatchEvent(e)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...d)=>{const c=window.location.href,a=t.apply(window.history,d);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","push",window.location.href]),a};window.history.pushState=e;const i=(...d)=>{const c=window.location.href,a=t.apply(window.history,d);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),a};window.history.replaceState=i}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of f)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0,i=0;for(const d of t){const c=d.getAttribute("data-iframe-height"),a=d.getBoundingClientRect().bottom+parseFloat(getComputedStyle(d).getPropertyValue("margin-bottom")),u=c?a+parseFloat(c):a;a>e&&(e=a),u>i&&(i=u)}i=Math.ceil(i),e>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}return new l}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/dist/d-frame.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var I=Object.defineProperty;var L=(l,u,f)=>u in l?I(l,u,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[u]=f;var n=(l,u,f)=>L(l,typeof u!="symbol"?u+"":u,f);(function(){"use strict";function l(e){return e[0]==="df-global"&&e[1]==="mouse"}function u(e){return e[0]==="df-child"&&e[1]==="init"}function f(e){return e[0]==="df-child"&&e[1]==="height"}function m(e){return e[0]==="df-child"&&e[1]==="stateChange"}function b(e){return e[0]==="df-child"&&e[1]==="custom"}function y(e){return e[0]==="df-child"&&e[1]==="notif"}function E(e){return e[0]==="df-child"&&e[1]==="ready"}function w(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function v(e,r){if(r.origin!==e.origin)return r.href;if(r.pathname===e.pathname)return"";const t=w(e.pathname);return r.pathname.startsWith(t)?r.pathname.replace(t,"./"):r.pathname}const A=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function S(e){const r=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),a="^"+A(s).replace(/\\\*/g,"(.*)")+"$";r.push({regexp:new RegExp(a),append:i})}return r}function M(e,r,t,s){if(!t&&!s)return e;const i=new URL(e),a=new URL(r);if(t&&a.searchParams.forEach((o,c)=>{for(const h of t){if(h.append&&!c.startsWith(h.append)||c===s)continue;const d=h.append?c.replace(h.append,""):c;if(d.match(h.regexp)){i.searchParams.set(d,o);break}}}),s!==null){const o=a.searchParams.get(s);o&&(i.pathname=new URL(o,e).pathname)}return i.href}function C(e,r,t,s,i){const a=new URL(e),o=new URL(t),c=new URL(r);if(s){for(const h of o.searchParams.keys().toArray())for(const d of s){if(d.append&&!h.startsWith(d.append))continue;const g=d.append?h.replace(d.append,""):h;if(g.match(d.regexp)){c.searchParams.get(g)===null&&o.searchParams.delete(h);break}}c.searchParams.forEach((h,d)=>{for(const g of s){if(!d.match(g.regexp)||(a==null?void 0:a.searchParams.get(d))===h)continue;const H=g.append?g.append+d:d;o.searchParams.set(H,h);break}})}if(i!==null&&a){const h=v(a,c);h?o.searchParams.set(i,h):o.searchParams.delete(i)}return o}function P(e){return e.vIframe===!0&&e.uiNotification!==void 0}function R(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const r=e.error.response&&(e.error.response.data||e.error.response.status)||e.error.message||e.error;return e.msg?{type:"error",title:e.msg,detail:r}:{type:"error",title:r}}return e.type==="error"?{type:e.clientError?"warning":"error",title:e.msg,detail:e.errorMsg}:{type:e.type??"default",title:e.msg}}class z{stateChange(r,t){r==="replace"&&window.history.replaceState(window.history.state,"",t),r==="push"&&window.history.pushState(window.history.state,"",t)}onStateChange(r){window.addEventListener("popstate",r)}}const p=document.createElement("template");p.innerHTML=`<style>
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
@@ -11,5 +11,5 @@ var L=Object.defineProperty;var I=(f,u,g)=>u in f?L(f,u,{enumerable:!0,configura
|
|
|
11
11
|
height: 100%;
|
|
12
12
|
border: none;
|
|
13
13
|
}
|
|
14
|
-
</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
|
|
14
|
+
</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();n(this,"adapter");n(this,"connected",!1);n(this,"childInitialized",!1);n(this,"currentChildSrc",null);n(this,"parsedSyncParams");n(this,"wrapperElement");n(this,"slotElement");n(this,"iframeElement");n(this,"width");n(this,"aspectRatioHeight");n(this,"resizedHeight");n(this,"randomId");n(this,"iframeLoaded",!1);n(this,"ready",!1);n(this,"iframeExtraAttrs",{});n(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const t=p.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),new ResizeObserver(a=>{(this.width===void 0||Math.abs(this.width-a[0].contentRect.width)>2)&&(this.width=a[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new z,window.addEventListener("message",a=>this.onMessage(a))}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 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}]),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()),m(i)){if(this.currentChildSrc=i[3],this.parsedSyncParams||this.syncPath){const a=C(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);a.href!==window.location.href&&(this.log("debug","apply state change to parent",i[2],a),this.adapter.stateChange(i[2],a))}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}b(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),y(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),E(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),l(i)&&this.applySyncedMouseEvent(i)}else P(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:R(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=M(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 a=this.getAttribute(i);if(a!==null){const o=i.slice(7);s[o]=a}}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)document.addEventListener(s,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",s,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!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))}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.syncParams!==null&&(this.parsedSyncParams=S(this.syncParams||"*")),this.updateStyle(),this.updateIframeExtraAttrs(),this.updateSrc(),this.mouseEvents&&this.initMouseEvents(this.mouseEvents)}disconnectedCallback(){this.log("debug","disconnected"),this.debug&&console.timeEnd(`d-frame:${this.id}`)}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){t==="aspect-ratio"&&this.updateAspectRatioHeight(),t.startsWith("iframe-")&&this.updateIframeExtraAttrs(),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())}}customElements.get("d-frame")||customElements.define("d-frame",x)})();
|
|
15
15
|
//# sourceMappingURL=d-frame.min.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var VIframeCompatDFrameContent=function(){"use strict";var y=Object.defineProperty;var m=(h,
|
|
1
|
+
var VIframeCompatDFrameContent=function(){"use strict";var y=Object.defineProperty;var m=(h,r,u)=>r in h?y(h,r,{enumerable:!0,configurable:!0,writable:!0,value:u}):h[r]=u;var d=(h,r,u)=>m(h,typeof r!="symbol"?r+"":r,u);function h(n){return n[0]==="df-global"&&n[1]==="mouse"}function r(n){return n[0]==="df-parent"&&n[1]==="init"}function u(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const g=["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 p{constructor(e){d(this,"initialized",!1);d(this,"options");d(this,"pendingCheckHeight",!1);d(this,"debug",!1);d(this,"id");d(this,"throttledCheckHeight");d(this,"lastHeight",0);d(this,"currentSyncedMouseEvents",new Set);this.options=e??{};const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},!(typeof window>"u")&&(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(r(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),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),u(t)){const i=t[2].startsWith("/")?window.location.origin+t[2]:t[2];if(i===window.location.href)return;this.options.updateSrc?this.options.updateSrc(i,this):window.location.href=t[2]}h(t)&&this.applySyncedMouseEvent(t)}}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"])}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,s=e.apply(window.history,o);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","push",window.location.href]),s};window.history.pushState=t;const i=(...o)=>{const c=window.location.href,s=e.apply(window.history,o);return window.location.href!==c&&this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),s};window.history.replaceState=i}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const e of g)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"),s=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),a=c?s+parseFloat(c):s;s>t&&(t=s),a>i&&(i=a)}i=Math.ceil(i),t>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}const b=(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 p({updateSrc(n,e){var c,s;const t=window.vIframeOptions,i=t==null?void 0:t.reactiveParams;if(i&&typeof i=="object"){const a=new URL(n);if(a.origin===window.location.origin&&a.pathname===window.location.pathname){e.log("debug","applying reactive params",a.searchParams),b(i,a.searchParams);return}}const o=t==null?void 0:t.router;if(o){const a=((c=o.options)==null?void 0:c.base)??((s=o.options.history)==null?void 0:s.base);if(a==null)e.log("error","failed to access base path in router (no router.options.base nor router.options.history.base)",o);else{const f=window.location.origin+a;if(!n.startsWith(f))e.log("info","src does not start with base path",n,f);else{let l=n.replace(f,"");l.startsWith("/")||(l="/"+l),e.log("debug","applying router.replace",l),o.replace(l);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.js
CHANGED
|
@@ -83,8 +83,11 @@ export default class DFrameContent {
|
|
|
83
83
|
this.initialized = true;
|
|
84
84
|
}
|
|
85
85
|
if (isUpdateSrcMessage(message)) {
|
|
86
|
+
const newSrc = message[2].startsWith('/') ? window.location.origin + message[2] : message[2];
|
|
87
|
+
if (newSrc === window.location.href)
|
|
88
|
+
return;
|
|
86
89
|
if (this.options.updateSrc) {
|
|
87
|
-
this.options.updateSrc(
|
|
90
|
+
this.options.updateSrc(newSrc, this);
|
|
88
91
|
}
|
|
89
92
|
else {
|
|
90
93
|
window.location.href = message[2];
|
|
@@ -142,15 +145,21 @@ export default class DFrameContent {
|
|
|
142
145
|
// this is to compensate the lack of event emission by window.history
|
|
143
146
|
const oldReplaceState = window.history.replaceState;
|
|
144
147
|
const newPushState = (...args) => {
|
|
148
|
+
const before = window.location.href;
|
|
145
149
|
// do a replace instead of a push, the push will be done in the parent window if sync-state is activated
|
|
146
150
|
const ret = oldReplaceState.apply(window.history, args);
|
|
147
|
-
|
|
151
|
+
if (window.location.href !== before) {
|
|
152
|
+
this.postMessageToParent(['df-child', 'stateChange', 'push', window.location.href]);
|
|
153
|
+
}
|
|
148
154
|
return ret;
|
|
149
155
|
};
|
|
150
156
|
window.history.pushState = newPushState;
|
|
151
157
|
const newReplaceState = (...args) => {
|
|
158
|
+
const before = window.location.href;
|
|
152
159
|
const ret = oldReplaceState.apply(window.history, args);
|
|
153
|
-
|
|
160
|
+
if (window.location.href !== before) {
|
|
161
|
+
this.postMessageToParent(['df-child', 'stateChange', 'replace', window.location.href]);
|
|
162
|
+
}
|
|
154
163
|
return ret;
|
|
155
164
|
};
|
|
156
165
|
window.history.replaceState = newReplaceState;
|
package/lib/DFrameElement.d.ts
CHANGED
|
@@ -29,7 +29,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
29
29
|
set mouseEvents(value: string[] | null);
|
|
30
30
|
adapter: StateChangeAdapter;
|
|
31
31
|
private connected;
|
|
32
|
-
private
|
|
32
|
+
private childInitialized;
|
|
33
|
+
private currentChildSrc;
|
|
33
34
|
private parsedSyncParams;
|
|
34
35
|
private wrapperElement;
|
|
35
36
|
private slotElement;
|
|
@@ -44,9 +45,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
44
45
|
get actualAspectRatio(): number;
|
|
45
46
|
constructor();
|
|
46
47
|
onMessage(e: MessageEvent): void;
|
|
47
|
-
init(): void;
|
|
48
48
|
postMessageToChild(message: ParentMessage): void;
|
|
49
|
-
private lastUpdateSrc;
|
|
50
49
|
updateSrc(): void;
|
|
51
50
|
updateStyle(): void;
|
|
52
51
|
updateAspectRatioHeight(): void;
|
package/lib/DFrameElement.js
CHANGED
|
@@ -5,9 +5,9 @@ import { isVIframeUiNotif, convertVIframeUiNotif } from './v-iframe-compat/ui-no
|
|
|
5
5
|
class WindowStateChangeAdapter {
|
|
6
6
|
stateChange(action, newUrl) {
|
|
7
7
|
if (action === 'replace')
|
|
8
|
-
window.history.replaceState(
|
|
8
|
+
window.history.replaceState(window.history.state, '', newUrl);
|
|
9
9
|
if (action === 'push')
|
|
10
|
-
window.history.pushState(
|
|
10
|
+
window.history.pushState(window.history.state, '', newUrl);
|
|
11
11
|
}
|
|
12
12
|
onStateChange(callback) {
|
|
13
13
|
// this is only partial, for a full implementation we would have to monkeypatch window.history
|
|
@@ -126,7 +126,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
126
126
|
adapter;
|
|
127
127
|
/* internal state */
|
|
128
128
|
connected = false;
|
|
129
|
-
|
|
129
|
+
childInitialized = false;
|
|
130
|
+
currentChildSrc = null;
|
|
130
131
|
parsedSyncParams;
|
|
131
132
|
wrapperElement;
|
|
132
133
|
slotElement;
|
|
@@ -197,7 +198,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
197
198
|
stateChangeEvents: this.stateChangeEvents,
|
|
198
199
|
mouseEvents: this.mouseEvents
|
|
199
200
|
}]);
|
|
200
|
-
this.
|
|
201
|
+
this.childInitialized = true;
|
|
201
202
|
}
|
|
202
203
|
if (isHeightMessage(message)) {
|
|
203
204
|
this.resizedHeight = message[2];
|
|
@@ -208,9 +209,11 @@ export default class DFrameElement extends HTMLElement {
|
|
|
208
209
|
this.updateStyle();
|
|
209
210
|
}
|
|
210
211
|
if (isStateChangeMessage(message)) {
|
|
212
|
+
this.currentChildSrc = message[3];
|
|
211
213
|
if ((this.parsedSyncParams || this.syncPath)) {
|
|
212
214
|
const newParentHUrl = getParentUrl(this.fullSrc, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
|
|
213
215
|
if (newParentHUrl.href !== window.location.href) {
|
|
216
|
+
this.log('debug', 'apply state change to parent', message[2], newParentHUrl);
|
|
214
217
|
this.adapter.stateChange(message[2], newParentHUrl);
|
|
215
218
|
}
|
|
216
219
|
}
|
|
@@ -238,23 +241,18 @@ export default class DFrameElement extends HTMLElement {
|
|
|
238
241
|
}
|
|
239
242
|
}
|
|
240
243
|
}
|
|
241
|
-
init() {
|
|
242
|
-
// called after initial handshake with child
|
|
243
|
-
this.initialSrc = this.src;
|
|
244
|
-
}
|
|
245
244
|
postMessageToChild(message) {
|
|
246
245
|
this.log('debug', 'send message to child', message);
|
|
247
246
|
this.iframeElement?.contentWindow?.postMessage(message);
|
|
248
247
|
}
|
|
249
|
-
lastUpdateSrc = null;
|
|
250
248
|
updateSrc() {
|
|
251
249
|
if (!this.connected)
|
|
252
250
|
return;
|
|
253
251
|
const iframeSrc = getChildSrc(this.fullSrc, window.location.href, this.parsedSyncParams, this.syncPath);
|
|
254
|
-
if (iframeSrc === this.
|
|
252
|
+
if (iframeSrc === this.currentChildSrc)
|
|
255
253
|
return;
|
|
256
|
-
this.
|
|
257
|
-
if (this.
|
|
254
|
+
this.currentChildSrc = iframeSrc;
|
|
255
|
+
if (this.childInitialized) {
|
|
258
256
|
this.postMessageToChild(['df-parent', 'updateSrc', iframeSrc]);
|
|
259
257
|
}
|
|
260
258
|
else {
|
package/lib/utils/sync-params.js
CHANGED
|
@@ -46,7 +46,8 @@ export function getParentUrl(fullSrc, childHref, currentParentHref, syncParams,
|
|
|
46
46
|
const childUrl = new URL(childHref);
|
|
47
47
|
if (syncParams) {
|
|
48
48
|
// remove existing keys that were deleted from the child
|
|
49
|
-
parentUrl
|
|
49
|
+
// use toArray instead of iterator as we mutate parentUrl in the loop
|
|
50
|
+
for (const key of parentUrl.searchParams.keys().toArray()) {
|
|
50
51
|
for (const syncParam of syncParams) {
|
|
51
52
|
if (syncParam.append && !key.startsWith(syncParam.append))
|
|
52
53
|
continue;
|
|
@@ -57,7 +58,7 @@ export function getParentUrl(fullSrc, childHref, currentParentHref, syncParams,
|
|
|
57
58
|
parentUrl.searchParams.delete(key);
|
|
58
59
|
break;
|
|
59
60
|
}
|
|
60
|
-
}
|
|
61
|
+
}
|
|
61
62
|
// apply params from child to parent
|
|
62
63
|
childUrl.searchParams.forEach((value, key) => {
|
|
63
64
|
for (const syncParam of syncParams) {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import DFrameContent from '../DFrameContent.js';
|
|
2
2
|
import { applySearchParams } from './util.js';
|
|
3
|
+
let dFrameContent = null;
|
|
3
4
|
export function VueReactiveDFrameContent(reactiveParams, options) {
|
|
4
|
-
|
|
5
|
+
if (dFrameContent)
|
|
6
|
+
return dFrameContent;
|
|
7
|
+
dFrameContent = new DFrameContent({
|
|
5
8
|
...options,
|
|
6
9
|
updateSrc: (src) => {
|
|
7
10
|
const srcUrl = new URL(src);
|
|
@@ -13,5 +16,6 @@ export function VueReactiveDFrameContent(reactiveParams, options) {
|
|
|
13
16
|
}
|
|
14
17
|
}
|
|
15
18
|
});
|
|
19
|
+
return dFrameContent;
|
|
16
20
|
}
|
|
17
21
|
export default VueReactiveDFrameContent;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import DFrameContent from '../DFrameContent.js';
|
|
2
|
+
let dFrameContent = null;
|
|
2
3
|
export function vueRouterDFrameContent(router, options) {
|
|
3
|
-
|
|
4
|
+
if (dFrameContent)
|
|
5
|
+
return dFrameContent;
|
|
6
|
+
dFrameContent = new DFrameContent({
|
|
4
7
|
...options,
|
|
5
8
|
updateSrc: (src, instance) => {
|
|
6
9
|
// @ts-ignore vue-router v2
|
|
@@ -26,5 +29,6 @@ export function vueRouterDFrameContent(router, options) {
|
|
|
26
29
|
window.location.href = src;
|
|
27
30
|
}
|
|
28
31
|
});
|
|
32
|
+
return dFrameContent;
|
|
29
33
|
}
|
|
30
34
|
export default vueRouterDFrameContent;
|