@data-fair/frame 0.9.4 → 0.11.0

package/dist/d-frame.min.js

@@ -1,4 +1,4 @@
-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>
+var H=Object.defineProperty;var I=(l,u,f)=>u in l?H(l,u,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[u]=f;var o=(l,u,f)=>I(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 b(e){return e[0]==="df-child"&&e[1]==="stateChange"}function y(e){return e[0]==="df-child"&&e[1]==="custom"}function w(e){return e[0]==="df-child"&&e[1]==="notif"}function E(e){return e[0]==="df-child"&&e[1]==="ready"}function v(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function p(e,a){if(a.origin!==e.origin)return a.href;if(a.pathname===e.pathname)return"";const t=v(e.pathname);return a.pathname.startsWith(t)?a.pathname.replace(t,"./"):a.pathname}const A=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function S(e){const a=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),r="^"+A(s).replace(/\\\*/g,"(.*)")+"$";a.push({regexp:new RegExp(r),append:i})}return a}function C(e,a,t,s){if(!t&&!s)return e;const i=new URL(e),r=new URL(a);if(t&&r.searchParams.forEach((n,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,n);break}}}),s!==null){let n;s==="#"?n=r.hash.slice(1):s.startsWith("/")?r.pathname.startsWith(s)&&(n=p(new URL(s,a),r)):n=r.searchParams.get(s),n&&(i.pathname=new URL(n,e).pathname)}return i.href}function M(e,a,t,s,i){const r=new URL(e),n=new URL(t),c=new URL(a);if(s){for(const h of n.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&&n.searchParams.delete(h);break}}c.searchParams.forEach((h,d)=>{for(const g of s){if(!d.match(g.regexp)||(r==null?void 0:r.searchParams.get(d))===h)continue;const L=g.append?g.append+d:d;n.searchParams.set(L,h);break}})}if(i!==null&&r){const h=p(r,c);i==="#"?n.hash=h:i.startsWith("/")?n.pathname=new URL(h,new URL(i,t)).pathname:h?n.searchParams.set(i,h):n.searchParams.delete(i)}return n}function R(e){return e.vIframe===!0&&e.uiNotification!==void 0}function z(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const a=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:a}:{type:"error",title:a}}return e.type==="error"?{type:e.clientError?"warning":"error",title:e.msg,detail:e.errorMsg}:{type:e.type??"default",title:e.msg}}class P{stateChange(a,t){a==="replace"&&window.history.replaceState(window.history.state,"",t),a==="push"&&window.history.pushState(window.history.state,"",t)}onStateChange(a){window.addEventListener("popstate",a)}}const m=document.createElement("template");m.innerHTML=`<style>
   :host {
     display: block;
   }
@@ -11,5 +11,5 @@ var I=Object.defineProperty;var L=(l,u,f)=>u in l?I(l,u,{enumerable:!0,configura
     height: 100%;
     border: none;
   }
-</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)})();
+</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();o(this,"adapter");o(this,"windowAdapter");o(this,"connected",!1);o(this,"childInitialized",!1);o(this,"currentChildSrc",null);o(this,"parsedSyncParams");o(this,"wrapperElement");o(this,"slotElement");o(this,"iframeElement");o(this,"width");o(this,"aspectRatioHeight");o(this,"resizedHeight");o(this,"randomId");o(this,"iframeLoaded",!1);o(this,"ready",!1);o(this,"iframeExtraAttrs",{});o(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const t=m.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(r=>{(this.width===void 0||Math.abs(this.width-r[0].contentRect.width)>2)&&(this.width=r[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=this.windowAdapter=new P,window.addEventListener("message",r=>this.onMessage(r))}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}]),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()),b(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)}catch(n){this.log("error","failed to apply state change to parent using custom adapter",n),this.windowAdapter.stateChange(i[2],r)}}}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}y(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),w(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 R(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:z(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 n=i.slice(7);s[n]=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)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),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.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","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)})();
 //# sourceMappingURL=d-frame.min.js.map

package/lib/DFrameElement.d.ts

@@ -27,7 +27,10 @@ export default class DFrameElement extends HTMLElement {
     set readyMessage(value: boolean);
     get mouseEvents(): string[] | null;
     set mouseEvents(value: string[] | null);
+    get reload(): string;
+    set reload(value: string);
     adapter: StateChangeAdapter;
+    windowAdapter: StateChangeAdapter;
     private connected;
     private childInitialized;
     private currentChildSrc;
@@ -54,7 +57,7 @@ export default class DFrameElement extends HTMLElement {
     private initMouseEvents;
     private transmitSyncedMouseEvent;
     private applySyncedMouseEvent;
-    log(level: 'debug' | 'info', ...args: any[]): void;
+    log(level: 'debug' | 'info' | 'error', ...args: any[]): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     static get observedAttributes(): string[];

package/lib/DFrameElement.js

@@ -123,7 +123,10 @@ export default class DFrameElement extends HTMLElement {
         else
             this.setAttribute('mouse-events', value.join(','));
     }
+    get reload() { return this.getAttribute('reload'); }
+    set reload(value) { this.setAttribute('reload', value); }
     adapter;
+    windowAdapter;
     /* internal state */
     connected = false;
     childInitialized = false;
@@ -179,7 +182,7 @@ export default class DFrameElement extends HTMLElement {
             }
         });
         resizeObserver.observe(this);
-        this.adapter = new WindowStateChangeAdapter();
+        this.adapter = this.windowAdapter = new WindowStateChangeAdapter();
         window.addEventListener('message', (e) => this.onMessage(e));
     }
     onMessage(e) {
@@ -213,8 +216,14 @@ export default class DFrameElement extends HTMLElement {
                     if ((this.parsedSyncParams || this.syncPath)) {
                         const newParentHUrl = getParentUrl(this.fullSrc, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
                         if (newParentHUrl.href !== window.location.href) {
-                            this.log('debug', 'apply state change to parent', message[2], newParentHUrl);
-                            this.adapter.stateChange(message[2], newParentHUrl);
+                            this.log('debug', 'apply state change to parent', message[2], newParentHUrl.href);
+                            try {
+                                this.adapter.stateChange(message[2], newParentHUrl);
+                            }
+                            catch (err) {
+                                this.log('error', 'failed to apply state change to parent using custom adapter', err);
+                                this.windowAdapter.stateChange(message[2], newParentHUrl);
+                            }
                         }
                     }
                     if (this.stateChangeEvents) {
@@ -373,6 +382,8 @@ export default class DFrameElement extends HTMLElement {
             console.timeLog(`d-frame:${this.id}`, ...args);
         if (level === 'info')
             console.info(`d-frame:${this.id}`, ...args);
+        if (level === 'error')
+            console.error(`d-frame:${this.id}`, ...args);
     }
     /* standard custom element callbacks */
     connectedCallback() {
@@ -408,12 +419,11 @@ export default class DFrameElement extends HTMLElement {
         // TODO: more cleanup (resize observer, etc)
     }
     /* reflected attributes */
-    static get observedAttributes() { return ['src', 'aspect-ratio', 'height', 'sync-params', 'sync-path']; }
+    static get observedAttributes() { return ['src', 'aspect-ratio', 'height', 'sync-params', 'sync-path', 'reload']; }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'aspect-ratio')
             this.updateAspectRatioHeight();
-        if (name.startsWith('iframe-'))
-            this.updateIframeExtraAttrs();
+        // if (name.startsWith('iframe-')) this.updateIframeExtraAttrs()
         if (!this.connected)
             return;
         this.log('debug', 'attribute change', name, oldValue, newValue);
@@ -425,5 +435,19 @@ export default class DFrameElement extends HTMLElement {
             this.updateSrc();
         if (name === 'sync-path')
             this.updateSrc();
+        if (name === 'reload') {
+            if (!this.currentChildSrc) {
+                this.log('debug', 'reload attribute changed but no iframe previously src');
+                return;
+            }
+            if (!this.iframeElement.contentWindow?.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 = false;
+            this.iframeElement.setAttribute('src', this.currentChildSrc);
+            this.iframeElement.contentWindow.location.reload();
+        }
     }
 }

package/lib/utils/sync-params.js

@@ -33,7 +33,18 @@ export function getChildSrc(fullSrc, parentHref, syncParams, syncPath) {
         });
     }
     if (syncPath !== null) {
-        const path = parentUrl.searchParams.get(syncPath);
+        let path;
+        if (syncPath === '#') {
+            path = parentUrl.hash.slice(1);
+        }
+        else if (syncPath.startsWith('/')) {
+            if (parentUrl.pathname.startsWith(syncPath)) {
+                path = getUrlRelativePath(new URL(syncPath, parentHref), parentUrl);
+            }
+        }
+        else {
+            path = parentUrl.searchParams.get(syncPath);
+        }
         if (path) {
             childUrl.pathname = new URL(path, fullSrc).pathname;
         }
@@ -74,10 +85,18 @@ export function getParentUrl(fullSrc, childHref, currentParentHref, syncParams,
     }
     if (syncPath !== null && srcUrl) {
         const path = getUrlRelativePath(srcUrl, childUrl);
-        if (path)
-            parentUrl.searchParams.set(syncPath, path);
-        else
-            parentUrl.searchParams.delete(syncPath);
+        if (syncPath === '#') {
+            parentUrl.hash = path;
+        }
+        else if (syncPath.startsWith('/')) {
+            parentUrl.pathname = new URL(path, new URL(syncPath, currentParentHref)).pathname;
+        }
+        else {
+            if (path)
+                parentUrl.searchParams.set(syncPath, path);
+            else
+                parentUrl.searchParams.delete(syncPath);
+        }
     }
     return parentUrl;
 }

package/lib/vue-router/state-change-adapter.js

@@ -4,10 +4,22 @@ class VueRouterDFrameStateChangeAdapter {
         this.router = router;
     }
     stateChange(action, newUrl) {
+        // @ts-ignore vue-router v2
+        const base = this.router.options?.base ?? this.router.options.history?.base;
+        if (base === null || base === undefined) {
+            throw new Error('failed to access base path in router (no router.options.base nor router.options.history.base)');
+        }
+        const urlPrefix = window.location.origin + base;
+        if (!newUrl.href.startsWith(urlPrefix)) {
+            throw new Error('new URL does not start with base path');
+        }
+        let newRoute = newUrl.href.replace(urlPrefix, '');
+        if (!newRoute.startsWith('/'))
+            newRoute = '/' + newRoute;
         if (action === 'push')
-            this.router.push({ query: Object.fromEntries(newUrl.searchParams) });
+            this.router.push(newRoute);
         if (action === 'replace')
-            this.router.replace({ query: Object.fromEntries(newUrl.searchParams) });
+            this.router.replace(newRoute);
     }
     onStateChange(callback) {
         this.router.afterEach(callback);

package/package.json

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