@data-fair/frame 0.4.1 → 0.5.1
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 +3 -3
- package/dist/v-iframe-compat/d-frame-content.min.js +1 -1
- package/lib/DFrameContent.d.ts +1 -0
- package/lib/DFrameContent.js +7 -2
- package/lib/DFrameElement.d.ts +6 -2
- package/lib/DFrameElement.js +56 -14
- package/lib/messages.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var DFrameContent=function(){"use strict";var g=Object.defineProperty;var
|
|
1
|
+
var DFrameContent=function(){"use strict";var g=Object.defineProperty;var l=(a,i,s)=>i in a?g(a,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[i]=s;var n=(a,i,s)=>l(a,typeof i!="symbol"?i+"":i,s);function a(r){return r[0]==="df-parent"&&r[1]==="init"}function i(r){return r[0]==="df-parent"&&r[1]==="updateSrc"}const s=["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 c{constructor(e){n(this,"initialized",!1);n(this,"options");n(this,"pendingCheckHeight",!1);n(this,"debug",!1);n(this,"id");n(this,"throttledCheckHeight");n(this,"lastHeight",0);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",o=>this.onMessage(o)),this.postMessageToParent(["df-child","init"]))}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`${this.id}:d-frame-content`,...t),e==="info"&&console.info(`${this.id}:d-frame-content`,...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;a(t)&&(this.id=t[2].id,this.debug=!!t[2].debug,this.debug&&console.time(`${this.id}:d-frame-content`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),i(t)&&(this.options.updateSrc?this.options.updateSrc(t[2].startsWith("/")?window.location.origin+t[2]:t[2]):window.location.href=t[2])}}postMessageToParent(e){window.parent.postMessage(e)}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...h)=>{const d=e.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=t;const o=(...h)=>{const d=e.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=o}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 s)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0;for(const o of e){const h=o.getAttribute("data-iframe-height"),d=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom"))+(h?parseFloat(h):0);d>t&&(t=d)}t=Math.ceil(t),t!==this.lastHeight&&(this.postMessageToParent(["df-child","height",t]),this.lastHeight=t)}}return new c}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/dist/d-frame.min.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
var H=Object.defineProperty;var M=(
|
|
1
|
+
var H=Object.defineProperty;var M=(u,c,g)=>c in u?H(u,c,{enumerable:!0,configurable:!0,writable:!0,value:g}):u[c]=g;var o=(u,c,g)=>M(u,typeof c!="symbol"?c+"":c,g);(function(){"use strict";function u(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function g(e){return e[0]==="df-child"&&e[1]==="stateChange"}function m(e){return e[0]==="df-child"&&e[1]==="custom"}function b(e){return e[0]==="df-child"&&e[1]==="notif"}function y(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function w(e,a){if(a.origin!==e.origin)return a.href;if(a.pathname===e.pathname)return"";const t=y(e.pathname);return a.pathname.startsWith(t)?a.pathname.replace(t,"./"):a.pathname}const A=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function E(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 z(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,l)=>{for(const n of t){if(n.append&&!l.startsWith(n.append)||l===s)continue;const h=n.append?l.replace(n.append,""):l;if(h.match(n.regexp)){e.searchParams.set(h,r);break}}}),s!==null){const r=i.searchParams.get(s);r&&(e.pathname=new URL(r,e).pathname)}return e.href}function R(e,a,t,s,i){const r=new URL(t),l=new URL(a);if(s&&(r.searchParams.forEach((n,h)=>{for(const d of s){if(d.append&&!h.startsWith(d.append))continue;const f=d.append?h.replace(d.append,""):h;if(f.match(d.regexp)){l.searchParams.get(f)===null&&r.searchParams.delete(h);break}}}),l.searchParams.forEach((n,h)=>{for(const d of s){if(!h.match(d.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=d.append?d.append+h:h;r.searchParams.set(f,n);break}})),i!==null&&e){const n=w(e,l);n?r.searchParams.set(i,n):r.searchParams.delete(i)}return r}function S(e){return e.vIframe===!0&&e.uiNotification!==void 0}function v(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(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const p=document.createElement("template");p.innerHTML=`<style>
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
5
|
iframe.d-frame-iframe {
|
|
6
6
|
display: block;
|
|
7
7
|
width: 100%;
|
|
8
|
+
height: 100%;
|
|
8
9
|
border: none;
|
|
9
|
-
max-height: 100%;
|
|
10
10
|
}
|
|
11
|
-
</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class
|
|
11
|
+
</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class C extends HTMLElement{constructor(){super();o(this,"adapter");o(this,"connected",!1);o(this,"initialSrc");o(this,"srcUrl");o(this,"parsedSyncParams");o(this,"iframeElement");o(this,"slotElement");o(this,"width");o(this,"aspectRatioHeight");o(this,"resizedHeight");o(this,"randomId");this.randomId=Math.random().toString(36).slice(-6);const t=p.content.cloneNode(!0);this.slotElement=t.childNodes[1],this.resize!=="yes"&&(this.slotElement.style.display="none"),this.iframeElement=t.childNodes[2],this.iframeElement.setAttribute("scrolling",this.resize==="yes"?"no":"auto"),this.iframeElement.setAttribute("loading",this.lazy?"lazy":"eager"),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=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 lazy(){return this.hasAttribute("lazy")}set lazy(t){t?this.setAttribute("lazy",""):this.removeAttribute("lazy")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}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 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}]),this.init()),c(i)&&(this.resizedHeight=i[2],this.updateStyle()),g(i)){if(this.parsedSyncParams||this.syncPath){const r=R(this.srcUrl,i[3],window.location.href,this.parsedSyncParams,this.syncPath);r.href!==window.location.href&&this.adapter.stateChange(i[2],r)}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}m(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),b(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}else S(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:v(i.uiNotification)}))}}init(){this.initialSrc=this.src}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;this.srcUrl=new URL(this.src.startsWith("/")?window.location.origin+this.src:this.src);const t=z(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?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.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.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"&&this.aspectRatio!==null?(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.log("debug","use slot element while waiting for resize message"),this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t+=`height:${this.height};`):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t+=`height:${this.aspectRatioHeight}px;`)),this.log("debug","set style attribute of iframe: "+t),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`${this.id}:d-frame`,...s),t==="info"&&console.info(`${this.id}:d-frame`,...s))}connectedCallback(){if(this.debug&&console.time(`${this.id}:d-frame`),!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=E(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}disconnectedCallback(){this.log("debug","disconnected"),this.debug&&console.timeEnd(`[${this.id}:d-frame]`)}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){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())}}customElements.define("d-frame",C)})();
|
|
12
12
|
//# sourceMappingURL=d-frame.min.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(s,
|
|
1
|
+
var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(h,s,d)=>s in h?g(h,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[s]=d;var r=(h,s,d)=>f(h,typeof s!="symbol"?s+"":s,d);function h(n){return n[0]==="df-parent"&&n[1]==="init"}function s(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const d=["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 u{constructor(t){r(this,"initialized",!1);r(this,"options");r(this,"pendingCheckHeight",!1);r(this,"debug",!1);r(this,"id");r(this,"throttledCheckHeight");r(this,"lastHeight",0);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(`${this.id}:d-frame-content`,...e),t==="info"&&console.info(`${this.id}:d-frame-content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;h(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`${this.id}:d-frame-content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),s(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...o)=>{const a=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),a};window.history.pushState=e;const i=(...o)=>{const a=t.apply(window.history,o);return 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 d)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const i of t){const o=i.getAttribute("data-iframe-height"),a=i.getBoundingClientRect().bottom+parseFloat(getComputedStyle(i).getPropertyValue("margin-bottom"))+(o?parseFloat(o):0);a>e&&(e=a)}e=Math.ceil(e),e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const c=new u({updateSrc:n=>{const t=window.vIframeOptions,e=t==null?void 0:t.reactiveParams;if(e){const i=new URL(n);if(i.origin===window.location.origin&&i.pathname===window.location.pathname){const o=Object.keys(e);i.searchParams.forEach((a,l)=>{e[l]=a,o.splice(o.indexOf(l),1)}),o.forEach(a=>{delete e[a]});return}}if(t!=null&&t.router){const i=window.location.origin+t.router.options.history.base;if(n.startsWith(i)){t.router.replace(n.replace(i,""));return}}window.location.href=n}});return window.dFrameContent=c,c}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/lib/DFrameContent.d.ts
CHANGED
package/lib/DFrameContent.js
CHANGED
|
@@ -35,6 +35,7 @@ export default class DFrameContent {
|
|
|
35
35
|
options;
|
|
36
36
|
pendingCheckHeight = false;
|
|
37
37
|
debug = false;
|
|
38
|
+
id;
|
|
38
39
|
throttledCheckHeight;
|
|
39
40
|
lastHeight = 0;
|
|
40
41
|
constructor(options) {
|
|
@@ -59,15 +60,18 @@ export default class DFrameContent {
|
|
|
59
60
|
if (level === 'debug' && !this.debug)
|
|
60
61
|
return;
|
|
61
62
|
if (level === 'debug')
|
|
62
|
-
console.
|
|
63
|
+
console.timeLog(`${this.id}:d-frame-content`, ...args);
|
|
63
64
|
if (level === 'info')
|
|
64
|
-
console.info(
|
|
65
|
+
console.info(`${this.id}:d-frame-content`, ...args);
|
|
65
66
|
}
|
|
66
67
|
onMessage(e) {
|
|
67
68
|
if (e.source === window.parent && Array.isArray(e.data)) {
|
|
68
69
|
const message = e.data;
|
|
69
70
|
if (isInitParentMessage(message)) {
|
|
71
|
+
this.id = message[2].id;
|
|
70
72
|
this.debug = !!message[2].debug;
|
|
73
|
+
if (this.debug)
|
|
74
|
+
console.time(`${this.id}:d-frame-content`);
|
|
71
75
|
if (message[2].resize !== 'no')
|
|
72
76
|
this.initResize();
|
|
73
77
|
if (message[2].syncParams || message[2].syncPath || message[2].stateChangeEvents)
|
|
@@ -148,6 +152,7 @@ export default class DFrameContent {
|
|
|
148
152
|
if (bottom > max)
|
|
149
153
|
max = bottom;
|
|
150
154
|
}
|
|
155
|
+
max = Math.ceil(max);
|
|
151
156
|
if (max !== this.lastHeight) {
|
|
152
157
|
this.postMessageToParent(['df-child', 'height', max]);
|
|
153
158
|
this.lastHeight = max;
|
package/lib/DFrameElement.d.ts
CHANGED
|
@@ -4,14 +4,16 @@ export interface StateChangeAdapter {
|
|
|
4
4
|
onStateChange?(callback: () => void): void;
|
|
5
5
|
}
|
|
6
6
|
export default class DFrameElement extends HTMLElement {
|
|
7
|
+
get id(): string;
|
|
8
|
+
set id(value: string);
|
|
7
9
|
get debug(): boolean;
|
|
8
10
|
set debug(value: boolean);
|
|
9
11
|
get lazy(): boolean;
|
|
10
12
|
set lazy(value: boolean);
|
|
11
13
|
get src(): string;
|
|
12
14
|
set src(value: string);
|
|
13
|
-
get aspectRatio(): string;
|
|
14
|
-
set aspectRatio(value: string);
|
|
15
|
+
get aspectRatio(): string | null;
|
|
16
|
+
set aspectRatio(value: string | null);
|
|
15
17
|
get height(): string | null;
|
|
16
18
|
set height(value: string | null);
|
|
17
19
|
set resize(value: "auto" | "yes" | "no");
|
|
@@ -32,6 +34,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
32
34
|
private width;
|
|
33
35
|
private aspectRatioHeight;
|
|
34
36
|
private resizedHeight;
|
|
37
|
+
private randomId;
|
|
35
38
|
get actualAspectRatio(): number;
|
|
36
39
|
constructor();
|
|
37
40
|
onMessage(e: MessageEvent): void;
|
|
@@ -42,6 +45,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
42
45
|
updateAspectRatioHeight(): void;
|
|
43
46
|
log(level: 'debug' | 'info', ...args: any[]): void;
|
|
44
47
|
connectedCallback(): void;
|
|
48
|
+
disconnectedCallback(): void;
|
|
45
49
|
static get observedAttributes(): string[];
|
|
46
50
|
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
|
|
47
51
|
}
|
package/lib/DFrameElement.js
CHANGED
|
@@ -18,11 +18,15 @@ template.innerHTML = `<style>
|
|
|
18
18
|
iframe.d-frame-iframe {
|
|
19
19
|
display: block;
|
|
20
20
|
width: 100%;
|
|
21
|
+
height: 100%;
|
|
21
22
|
border: none;
|
|
22
|
-
max-height: 100%;
|
|
23
23
|
}
|
|
24
24
|
</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;
|
|
25
25
|
export default class DFrameElement extends HTMLElement {
|
|
26
|
+
get id() { return this.getAttribute('id') ?? this.randomId; }
|
|
27
|
+
set id(value) {
|
|
28
|
+
this.setAttribute('id', value);
|
|
29
|
+
}
|
|
26
30
|
get debug() { return this.hasAttribute('debug'); }
|
|
27
31
|
set debug(value) {
|
|
28
32
|
if (value)
|
|
@@ -39,8 +43,18 @@ export default class DFrameElement extends HTMLElement {
|
|
|
39
43
|
}
|
|
40
44
|
get src() { return this.getAttribute('src'); }
|
|
41
45
|
set src(value) { this.setAttribute('src', value); }
|
|
42
|
-
get aspectRatio() {
|
|
43
|
-
|
|
46
|
+
get aspectRatio() {
|
|
47
|
+
const value = this.getAttribute('aspect-ratio');
|
|
48
|
+
if (value === '')
|
|
49
|
+
return 'auto';
|
|
50
|
+
return value;
|
|
51
|
+
}
|
|
52
|
+
set aspectRatio(value) {
|
|
53
|
+
if (value !== null)
|
|
54
|
+
this.setAttribute('aspect-ratio', value);
|
|
55
|
+
else
|
|
56
|
+
this.removeAttribute('aspect-ratio');
|
|
57
|
+
}
|
|
44
58
|
get height() { return this.getAttribute('height'); }
|
|
45
59
|
set height(value) {
|
|
46
60
|
if (value)
|
|
@@ -94,6 +108,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
94
108
|
width;
|
|
95
109
|
aspectRatioHeight;
|
|
96
110
|
resizedHeight;
|
|
111
|
+
randomId;
|
|
97
112
|
get actualAspectRatio() {
|
|
98
113
|
if (this.aspectRatio !== 'auto')
|
|
99
114
|
return Number(this.aspectRatio);
|
|
@@ -107,6 +122,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
107
122
|
}
|
|
108
123
|
constructor() {
|
|
109
124
|
super();
|
|
125
|
+
this.randomId = Math.random().toString(36).slice(-6);
|
|
110
126
|
const root = template.content.cloneNode(true);
|
|
111
127
|
this.slotElement = root.childNodes[1];
|
|
112
128
|
if (this.resize !== 'yes')
|
|
@@ -123,7 +139,6 @@ export default class DFrameElement extends HTMLElement {
|
|
|
123
139
|
this.updateAspectRatioHeight();
|
|
124
140
|
}
|
|
125
141
|
});
|
|
126
|
-
// TODO: should we use unobserve or disconnect on cleanup ?
|
|
127
142
|
resizeObserver.observe(this);
|
|
128
143
|
this.adapter = new WindowStateChangeAdapter();
|
|
129
144
|
window.addEventListener('message', (e) => this.onMessage(e));
|
|
@@ -136,6 +151,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
136
151
|
if (isInitChildMessage(message)) {
|
|
137
152
|
// simple handshake for initialization
|
|
138
153
|
this.postMessageToChild(['df-parent', 'init', {
|
|
154
|
+
id: this.id,
|
|
139
155
|
debug: this.debug,
|
|
140
156
|
resize: this.resize,
|
|
141
157
|
syncParams: this.syncParams !== null,
|
|
@@ -167,7 +183,6 @@ export default class DFrameElement extends HTMLElement {
|
|
|
167
183
|
}
|
|
168
184
|
}
|
|
169
185
|
else if (isVIframeUiNotif(message)) {
|
|
170
|
-
console.log('v-iframe notification', message.uiNotification, convertVIframeUiNotif(message.uiNotification));
|
|
171
186
|
// maintain compatibility with v-iframe notifications sent through postMessage
|
|
172
187
|
this.dispatchEvent(new CustomEvent('notif', { detail: convertVIframeUiNotif(message.uiNotification) }));
|
|
173
188
|
}
|
|
@@ -190,46 +205,64 @@ export default class DFrameElement extends HTMLElement {
|
|
|
190
205
|
this.postMessageToChild(['df-parent', 'updateSrc', fullSrc]);
|
|
191
206
|
}
|
|
192
207
|
else {
|
|
208
|
+
this.log('debug', 'set src attribute of iframe: ' + fullSrc);
|
|
193
209
|
this.iframeElement.setAttribute('src', fullSrc);
|
|
194
210
|
}
|
|
195
211
|
}
|
|
196
212
|
updateStyle() {
|
|
213
|
+
if (!this.connected)
|
|
214
|
+
return;
|
|
197
215
|
let style = '';
|
|
198
216
|
if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
|
|
199
|
-
this.iframeElement.
|
|
217
|
+
if (this.iframeElement.getAttribute('scrolling') !== 'no') {
|
|
218
|
+
this.log('debug', 'set scrolling attribute of iframe: no');
|
|
219
|
+
this.iframeElement.setAttribute('scrolling', 'no');
|
|
220
|
+
}
|
|
200
221
|
if (this.resizedHeight) {
|
|
222
|
+
this.log('debug', 'height of iframe based on resize message: ' + this.resizedHeight);
|
|
201
223
|
this.slotElement.style.display = 'none';
|
|
202
224
|
style += `height:${this.resizedHeight}px;`;
|
|
203
225
|
}
|
|
204
226
|
else {
|
|
205
227
|
if (this.height) {
|
|
228
|
+
this.log('debug', 'height of iframe based on direct attribute: ' + this.height);
|
|
206
229
|
this.slotElement.style.display = 'none';
|
|
207
230
|
style += `height:${this.height};`;
|
|
208
231
|
}
|
|
209
|
-
else if (this.aspectRatio !== 'auto') {
|
|
232
|
+
else if (this.aspectRatio !== 'auto' && this.aspectRatio !== null) {
|
|
233
|
+
this.log('debug', 'height of iframe based on aspect ratio: ' + this.aspectRatioHeight);
|
|
210
234
|
this.slotElement.style.display = 'none';
|
|
211
235
|
style += `height:${this.aspectRatioHeight}px;`;
|
|
212
236
|
}
|
|
213
237
|
else {
|
|
238
|
+
this.log('debug', 'use slot element while waiting for resize message');
|
|
214
239
|
this.slotElement.style.display = 'block';
|
|
215
240
|
style += 'height:0;';
|
|
216
241
|
}
|
|
217
242
|
}
|
|
218
243
|
}
|
|
219
244
|
if (this.resize === 'no' || (this.resize === 'auto' && !this.resizedHeight)) {
|
|
220
|
-
this.iframeElement.
|
|
245
|
+
if (this.iframeElement.getAttribute('scrolling') !== 'auto') {
|
|
246
|
+
this.log('debug', 'set scrolling attribute of iframe: auto');
|
|
247
|
+
this.iframeElement.setAttribute('scrolling', 'auto');
|
|
248
|
+
}
|
|
221
249
|
if (this.height) {
|
|
250
|
+
this.log('debug', 'height of iframe based on direct attribute: ' + this.height);
|
|
222
251
|
style += `height:${this.height};`;
|
|
223
252
|
}
|
|
224
|
-
else {
|
|
253
|
+
else if (this.aspectRatio !== null) {
|
|
254
|
+
this.log('debug', 'height of iframe based on aspect ratio: ' + this.aspectRatioHeight);
|
|
225
255
|
style += `height:${this.aspectRatioHeight}px;`;
|
|
226
256
|
}
|
|
227
257
|
}
|
|
258
|
+
this.log('debug', 'set style attribute of iframe: ' + style);
|
|
228
259
|
this.iframeElement.setAttribute('style', style);
|
|
229
260
|
}
|
|
230
261
|
updateAspectRatioHeight() {
|
|
231
262
|
if (!this.width)
|
|
232
263
|
return;
|
|
264
|
+
if (this.aspectRatio === null)
|
|
265
|
+
return;
|
|
233
266
|
if (this.resizedHeight)
|
|
234
267
|
return;
|
|
235
268
|
if (this.height)
|
|
@@ -241,12 +274,15 @@ export default class DFrameElement extends HTMLElement {
|
|
|
241
274
|
if (level === 'debug' && !this.debug)
|
|
242
275
|
return;
|
|
243
276
|
if (level === 'debug')
|
|
244
|
-
console.
|
|
277
|
+
console.timeLog(`${this.id}:d-frame`, ...args);
|
|
278
|
+
// if (level === 'debug') console.debug(`${this.id}:d-frame`, ...args)
|
|
245
279
|
if (level === 'info')
|
|
246
|
-
console.info(
|
|
280
|
+
console.info(`${this.id}:d-frame`, ...args);
|
|
247
281
|
}
|
|
248
282
|
/* standard custom element callbacks */
|
|
249
283
|
connectedCallback() {
|
|
284
|
+
if (this.debug)
|
|
285
|
+
console.time(`${this.id}:d-frame`);
|
|
250
286
|
if (!this.hasAttribute('src'))
|
|
251
287
|
throw new Error('src is a required attribute');
|
|
252
288
|
this.log('debug', 'connected');
|
|
@@ -258,15 +294,21 @@ export default class DFrameElement extends HTMLElement {
|
|
|
258
294
|
this.parsedSyncParams = parseSyncParams(this.syncParams || '*');
|
|
259
295
|
this.updateStyle();
|
|
260
296
|
this.updateSrc();
|
|
261
|
-
|
|
262
|
-
|
|
297
|
+
}
|
|
298
|
+
disconnectedCallback() {
|
|
299
|
+
this.log('debug', 'disconnected');
|
|
300
|
+
if (this.debug)
|
|
301
|
+
console.timeEnd(`[${this.id}:d-frame]`);
|
|
302
|
+
// TODO: more cleanup (resize observer, etc)
|
|
263
303
|
}
|
|
264
304
|
/* reflected attributes */
|
|
265
305
|
static get observedAttributes() { return ['src', 'aspect-ratio', 'height', 'sync-params', 'sync-path']; }
|
|
266
306
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
267
|
-
this.log('debug', 'attribute change', name, oldValue, newValue);
|
|
268
307
|
if (name === 'aspect-ratio')
|
|
269
308
|
this.updateAspectRatioHeight();
|
|
309
|
+
if (!this.connected)
|
|
310
|
+
return;
|
|
311
|
+
this.log('debug', 'attribute change', name, oldValue, newValue);
|
|
270
312
|
if (name === 'src')
|
|
271
313
|
this.updateSrc();
|
|
272
314
|
if (name === 'height')
|
package/lib/messages.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export declare function isStateChangeMessage(message: any): message is StateChan
|
|
|
15
15
|
export declare function isCustomMessage(message: any): message is CustomMessage;
|
|
16
16
|
export declare function isNotifMessage(message: any): message is NotifMessage;
|
|
17
17
|
export type InitParentMessage = ['df-parent', 'init', {
|
|
18
|
+
id: string;
|
|
18
19
|
debug?: boolean;
|
|
19
20
|
resize: 'yes' | 'no' | 'auto';
|
|
20
21
|
syncParams: boolean;
|