@data-fair/frame 0.12.0 → 0.12.1

package/dist/d-frame.min.js

@@ -1,10 +1,13 @@
-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 h=(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 y(e){return e[0]==="df-child"&&e[1]==="stateChange"}function E(e){return e[0]==="df-child"&&e[1]==="custom"}function w(e){return e[0]==="df-child"&&e[1]==="notif"}function v(e){return e[0]==="df-child"&&e[1]==="ready"}function A(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function m(e){return e.endsWith("/")?e:e+"/"}function p(e,n){if(n.origin!==e.origin)return n.href;if(m(n.pathname)===m(e.pathname))return"";const t=A(e.pathname);return n.pathname.startsWith(t)?n.pathname.replace(t,""):n.pathname}const S=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function M(e){const n=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),r="^"+S(s).replace(/\\\*/g,"(.*)")+"$";n.push({regexp:new RegExp(r),append:i})}return n}function C(e,n,t,s){if(!t&&!s)return e;const i=new URL(e),r=new URL(n);if(t&&r.searchParams.forEach((a,c)=>{for(const o of t){if(o.append&&!c.startsWith(o.append)||c===s)continue;const d=o.append?c.replace(o.append,""):c;if(d.match(o.regexp)){i.searchParams.set(d,a);break}}}),s!==null){let a;s==="#"?a=r.hash.slice(1):s.startsWith("/")?r.pathname.startsWith(s)&&(a=p(new URL(s,n),r)):a=r.searchParams.get(s),a&&(i.pathname=new URL(a,e).pathname)}return i.href}function R(e,n,t,s,i){const r=new URL(e),a=new URL(t),c=new URL(n);if(s){for(const o of a.searchParams.keys().toArray())for(const d of s){if(d.append&&!o.startsWith(d.append))continue;const g=d.append?o.replace(d.append,""):o;if(g.match(d.regexp)){c.searchParams.get(g)===null&&a.searchParams.delete(o);break}}c.searchParams.forEach((o,d)=>{for(const g of s){if(!d.match(g.regexp)||(r==null?void 0:r.searchParams.get(d))===o)continue;const W=g.append?g.append+d:d;a.searchParams.set(W,o);break}})}if(i!==null&&r){const o=p(r,c);i==="#"?a.hash=o:i.startsWith("/")?o===""||o.startsWith("/")?a.pathname=i:a.pathname=new URL(o,new URL(i,t)).pathname:o?a.searchParams.set(i,o):a.searchParams.delete(i)}return a}function z(e){return e.vIframe===!0&&e.uiNotification!==void 0}function L(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const n=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:n}:{type:"error",title:n}}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(n,t,s){s.log("debug","apply state change on window.history",n,t.href),n==="replace"&&window.history.replaceState(window.history.state,"",t),n==="push"&&window.history.pushState(window.history.state,"",t)}onStateChange(n){window.addEventListener("popstate",n)}}const b=document.createElement("template");b.innerHTML=`<style>
+var K=Object.defineProperty;var k=(l,c,f)=>c in l?K(l,c,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[c]=f;var h=(l,c,f)=>k(l,typeof c!="symbol"?c+"":c,f);(function(){"use strict";var w,v;function l(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 A(t){return t[0]==="df-child"&&t[1]==="stateChange"}function S(t){return t[0]==="df-child"&&t[1]==="custom"}function C(t){return t[0]==="df-child"&&t[1]==="notif"}function M(t){return t[0]==="df-child"&&t[1]==="ready"}function R(t){return t.endsWith("/")?t:t===""?"/":t.slice(0,t.lastIndexOf("/")+1)}function p(t){return t.endsWith("/")?t:t+"/"}function b(t,n){if(n.origin!==t.origin)return n.href;if(p(n.pathname)===p(t.pathname))return"";const e=R(t.pathname);return n.pathname.startsWith(e)?n.pathname.replace(e,""):n.pathname}const z=t=>t.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function L(t){const n=[];for(const e of t.split(",")){const[s="*",i]=e.split(":"),r="^"+z(s).replace(/\\\*/g,"(.*)")+"$";n.push({regexp:new RegExp(r),append:i})}return n}function x(t,n,e,s){if(!e&&!s)return t;const i=new URL(t),r=new URL(n);if(e&&r.searchParams.forEach((a,u)=>{for(const o of e){if(o.append&&!u.startsWith(o.append)||u===s)continue;const d=o.append?u.replace(o.append,""):u;if(d.match(o.regexp)){i.searchParams.set(d,a);break}}}),s!==null){let a;s==="#"?a=r.hash.slice(1):s.startsWith("/")?r.pathname.startsWith(s)&&(a=b(new URL(s,n),r)):a=r.searchParams.get(s),a&&(i.pathname=new URL(a,t).pathname)}return i.href}function P(t,n,e,s,i){const r=new URL(t),a=new URL(e),u=new URL(n);if(s){for(const o of a.searchParams.keys().toArray())for(const d of s){if(d.append&&!o.startsWith(d.append))continue;const m=d.append?o.replace(d.append,""):o;if(m.match(d.regexp)){u.searchParams.get(m)===null&&a.searchParams.delete(o);break}}u.searchParams.forEach((o,d)=>{for(const m of s){if(!d.match(m.regexp)||(r==null?void 0:r.searchParams.get(d))===o)continue;const O=m.append?m.append+d:d;a.searchParams.set(O,o);break}})}if(i!==null&&r){const o=b(r,u);i==="#"?a.hash=o:i.startsWith("/")?o===""||o.startsWith("/")?a.pathname=i:a.pathname=new URL(o,new URL(i,e)).pathname:o?a.searchParams.set(i,o):a.searchParams.delete(i)}return a}function W(t){return t.vIframe===!0&&t.uiNotification!==void 0}function H(t){if(typeof t=="string")return{type:"default",title:t};if(t.error&&!t.errorMsg){const n=t.error.response&&(t.error.response.data||t.error.response.status)||t.error.message||t.error;return t.msg?{type:"error",title:t.msg,detail:n}:{type:"error",title:n}}return t.type==="error"?{type:t.clientError?"warning":"error",title:t.msg,detail:t.errorMsg}:{type:t.type??"default",title:t.msg}}class 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=((w=document.head)==null?void 0:w.querySelector("meta[property=csp-nonce]"))??((v=document.head)==null?void 0:v.querySelector("meta[name=csp-nonce]")),y=(g==null?void 0:g.nonce)??(g==null?void 0:g.content),E=document.createElement("template");E.innerHTML=`<style${y?` nonce="${y}"`:""}>
   :host {
     display: block;
   }
   .d-frame-wrapper {
     height: 100%;
   }
+  .d-frame-wrapper .loading-placeholder {
+    min-height:150px;
+  }
   iframe.d-frame-iframe {
     display: block;
     width: 100%;
@@ -12,5 +15,5 @@ var H=Object.defineProperty;var I=(l,u,f)=>u in l?H(l,u,{enumerable:!0,configura
     border: none;
     user-select: 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();h(this,"adapter");h(this,"windowAdapter");h(this,"connected",!1);h(this,"childInitialized",!1);h(this,"currentChildSrc",null);h(this,"parsedSyncParams");h(this,"wrapperElement");h(this,"slotElement");h(this,"iframeElement");h(this,"width");h(this,"aspectRatioHeight");h(this,"resizedHeight");h(this,"randomId");h(this,"iframeLoaded",!1);h(this,"ready",!1);h(this,"iframeExtraAttrs",{});h(this,"resizeObserver");h(this,"boundOnMessage",t=>this.onMessage(t));h(this,"mouseEventListeners",{});h(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const t=b.content.cloneNode(!0);this.wrapperElement=t.childNodes[1],this.slotElement=this.wrapperElement.childNodes[0],this.iframeElement=this.wrapperElement.childNodes[1],this.iframeElement.addEventListener("load",()=>{this.iframeElement.getAttribute("src")&&(this.log("debug","iframe loaded"),this.iframeLoaded=!0,this.dispatchEvent(new CustomEvent("iframe-load")),this.resize!=="yes"&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()))}),this.attachShadow({mode:"open"}).appendChild(t),this.resizeObserver=new ResizeObserver(i=>{(this.width===void 0||Math.abs(this.width-i[0].contentRect.width)>2)&&(this.width=i[0].contentRect.width,this.updateAspectRatioHeight())}),this.adapter=this.windowAdapter=new P}get id(){return this.getAttribute("id")??this.randomId}set id(t){this.setAttribute("id",t)}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get fullSrc(){return this.src.startsWith("/")?window.location.origin+this.src:this.src}get aspectRatio(){const t=this.getAttribute("aspect-ratio");return t===""?"auto":t}set aspectRatio(t){t!==null?this.setAttribute("aspect-ratio",t):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(t){t?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get readyMessage(){return this.hasAttribute("ready-message")}set readyMessage(t){t?this.setAttribute("ready-message",""):this.removeAttribute("ready-message")}get mouseEvents(){const t=this.getAttribute("mouse-events");return t===null?null:t===""?["click","dblclick","mousedown","mouseup"]:t.split(",")}set mouseEvents(t){t===null?this.removeAttribute("mouse-events"):this.setAttribute("mouse-events",t.join(","))}get reload(){return this.getAttribute("reload")}set reload(t){this.setAttribute("reload",t)}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var s;if(t.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=t.data;if(this.log("debug","received message from child",i),Array.isArray(t.data)){if(u(i)&&(this.postMessageToChild(["df-parent","init",{id:this.id,debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null,stateChangeEvents:this.stateChangeEvents,mouseEvents:this.mouseEvents,src:this.currentChildSrc}]),this.childInitialized=!0),f(i)&&(this.resizedHeight=i[2],this.resize==="yes"&&!this.ready&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready"))),this.updateStyle()),y(i)){if(this.currentChildSrc=i[3],this.parsedSyncParams||this.syncPath){const r=R(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);if(r.href!==window.location.href){this.log("debug","apply state change to parent",i[2],r.href);try{this.adapter.stateChange(i[2],r,this)}catch(a){this.log("error","failed to apply state change to parent using custom adapter",a),this.windowAdapter.stateChange(i[2],r,this)}}}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}E(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),w(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),v(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),l(i)&&this.applySyncedMouseEvent(i)}else z(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:L(i.uiNotification)}))}}postMessageToChild(t){var s,i;this.log("debug","send message to child",t),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(t)}updateSrc(){if(!this.connected)return;const t=C(this.fullSrc,window.location.href,this.parsedSyncParams,this.syncPath);t!==this.currentChildSrc&&(this.currentChildSrc=t,this.childInitialized?this.postMessageToChild(["df-parent","updateSrc",t]):(this.log("debug","set src attribute of iframe: "+t),this.iframeElement.setAttribute("src",t)))}updateStyle(){if(!this.connected)return;let t;this.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),t=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t=this.aspectRatioHeight+"px"),t!==void 0?(this.log("debug","set height iframe wrapper: "+t),this.wrapperElement.setAttribute("style",`height:${t};min-height:0;`)):this.wrapperElement.setAttribute("style",""),this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.ready&&this.iframeElement.getAttribute("style")!==""&&(this.log("debug","toggle loading slot and iframe visibility"),this.iframeElement.setAttribute("style",""),this.slotElement.setAttribute("style","display:none;"))}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}updateIframeExtraAttrs(){const t=this.iframeExtraAttrs,s={};for(const i of this.getAttributeNames())if(i.startsWith("iframe-")){const r=this.getAttribute(i);if(r!==null){const a=i.slice(7);s[a]=r}}this.log("debug","update iframe extra attributes",t,s);for(const i of Object.keys(t))i in s||this.iframeElement.removeAttribute(i);for(const i of Object.keys(s))s[i]!==t[i]&&this.iframeElement.setAttribute(i,s[i])}initMouseEvents(t){this.log("debug","initMouseEvents");for(const s of t)if(!this.mouseEventListeners[s]){const i=r=>{r instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",s,{altKey:r.altKey,ctrlKey:r.ctrlKey,shiftKey:r.shiftKey,metaKey:r.metaKey}])};this.mouseEventListeners[s]=i,document.addEventListener(s,i,!0)}}transmitSyncedMouseEvent(t){this.currentSyncedMouseEvents.has(t[2])?this.currentSyncedMouseEvents.delete(t[2]):this.postMessageToChild(t)}applySyncedMouseEvent(t){this.currentSyncedMouseEvents.add(t[2]);const s=new MouseEvent(t[2],{bubbles:!0,cancelable:!0,view:window,...t[3]});this.dispatchEvent(s)}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}`,...s),t==="info"&&console.info(`d-frame:${this.id}`,...s),t==="error"&&console.error(`d-frame:${this.id}`,...s))}connectedCallback(){if(!this.debug){const t=window.localStorage.getItem("debug");if(t){const s=t.split(",");(s.includes("d-frame")||s.includes("d-frame:"+this.id))&&(this.debug=!0)}}if(this.debug&&console.time(`d-frame:${this.id}`),!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.resizeObserver.observe(this),window.addEventListener("message",this.boundOnMessage),this.syncParams!==null&&(this.parsedSyncParams=M(this.syncParams||"*")),this.updateStyle(),this.updateIframeExtraAttrs(),this.updateSrc(),this.mouseEvents&&this.initMouseEvents(this.mouseEvents)}disconnectedCallback(){this.log("debug","disconnected"),this.resizeObserver.disconnect(),window.removeEventListener("message",this.boundOnMessage);for(const[t,s]of Object.entries(this.mouseEventListeners))document.removeEventListener(t,s,!0),delete this.mouseEventListeners[t]}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path","reload"]}attributeChangedCallback(t,s,i){var r;if(t==="aspect-ratio"&&this.updateAspectRatioHeight(),!!this.connected&&(this.log("debug","attribute change",t,s,i),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc(),t==="reload")){if(!this.currentChildSrc){this.log("debug","reload attribute changed but no iframe previously src");return}if(!((r=this.iframeElement.contentWindow)!=null&&r.location)){this.log("debug","reload attribute changed but no iframe contentWindow, is this a cross domain iframe ?");return}this.log("debug","reload iframe with current src",this.currentChildSrc),this.childInitialized=!1,this.iframeElement.setAttribute("src",this.currentChildSrc),this.iframeElement.contentWindow.location.reload()}}}customElements.get("d-frame")||customElements.define("d-frame",x)})();
+</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)})();
 //# sourceMappingURL=d-frame.min.js.map

package/lib/DFrameElement.js

@@ -19,14 +19,20 @@ class WindowStateChangeAdapter {
         window.addEventListener('popstate', callback);
     }
 }
+// we try to adapt to some of the conventions found out there
+const cspNonceMeta = document.head?.querySelector('meta[property=csp-nonce]') ?? document.head?.querySelector('meta[name=csp-nonce]');
+const cspNonce = cspNonceMeta?.nonce ?? cspNonceMeta?.content;
 const template = document.createElement('template');
-template.innerHTML = `<style>
+template.innerHTML = `<style${cspNonce ? ` nonce="${cspNonce}"` : ''}>
   :host {
     display: block;
   }
   .d-frame-wrapper {
     height: 100%;
   }
+  .d-frame-wrapper .loading-placeholder {
+    min-height:150px;
+  }
   iframe.d-frame-iframe {
     display: block;
     width: 100%;
@@ -34,7 +40,7 @@ template.innerHTML = `<style>
     border: none;
     user-select: 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>`;
+</style><div class="d-frame-wrapper"><slot name="loading"><div class="loading-placeholder"></div></slot><iframe class="d-frame-iframe"></iframe></div>`;
 export class DFrameElement extends HTMLElement {
     get id() { return this.getAttribute('id') ?? this.randomId; }
     set id(value) {
@@ -165,6 +171,7 @@ export class DFrameElement extends HTMLElement {
         this.wrapperElement = root.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', () => {
             if (this.iframeElement.getAttribute('src')) {
                 this.log('debug', 'iframe loaded');
@@ -294,10 +301,10 @@ export class DFrameElement extends HTMLElement {
         }
         if (wrapperHeight !== undefined) {
             this.log('debug', 'set height iframe wrapper: ' + wrapperHeight);
-            this.wrapperElement.setAttribute('style', `height:${wrapperHeight};min-height:0;`);
+            this.wrapperElement.style.cssText = `height:${wrapperHeight};min-height:0;`;
         }
         else {
-            this.wrapperElement.setAttribute('style', '');
+            this.wrapperElement.style.cssText = '';
         }
         // set scrolling attribute of iframe
         if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
@@ -315,8 +322,8 @@ export class DFrameElement extends HTMLElement {
         // toggle loading slot vs iframe visibility
         if (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;');
+            this.iframeElement.style.cssText = '';
+            this.slotElement.style.cssText = 'display:none;';
         }
     }
     updateAspectRatioHeight() {

package/package.json

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