@data-fair/frame 0.3.2 → 0.4.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 +2 -2
- package/dist/v-iframe-compat/d-frame-content.min.js +1 -1
- package/lib/DFrameContent.d.ts +1 -1
- package/lib/DFrameContent.js +4 -4
- package/lib/DFrameElement.d.ts +2 -0
- package/lib/DFrameElement.js +23 -7
- package/lib/messages.d.ts +1 -0
- package/lib/v-iframe-compat/ui-notif.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var DFrameContent=function(){"use strict";var
|
|
1
|
+
var DFrameContent=function(){"use strict";var g=Object.defineProperty;var u=(n,i,s)=>i in n?g(n,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[i]=s;var o=(n,i,s)=>u(n,typeof i!="symbol"?i+"":i,s);function n(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(t){o(this,"initialized",!1);o(this,"options");o(this,"pendingCheckHeight",!1);o(this,"debug",!1);o(this,"throttledCheckHeight");o(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",a=>this.onMessage(a)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;n(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),i(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=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const a=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=a}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 s)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const a of t){const h=a.getAttribute("data-iframe-height"),d=a.getBoundingClientRect().bottom+parseFloat(getComputedStyle(a).getPropertyValue("margin-bottom"))+(h?parseFloat(h):0);d>e&&(e=d)}e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}return new c}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/dist/d-frame.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var H=Object.defineProperty;var M=(d,c,p)=>c in d?H(d,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[c]=p;var o=(d,c,p)=>M(d,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function d(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(e){return e[0]==="df-child"&&e[1]==="stateChange"}function
|
|
1
|
+
var H=Object.defineProperty;var M=(d,c,p)=>c in d?H(d,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[c]=p;var o=(d,c,p)=>M(d,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function d(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(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 w(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function E(e,a){if(a.origin!==e.origin)return a.href;if(a.pathname===e.pathname)return"";const t=w(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 v(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,u)=>{for(const n of t){if(n.append&&!u.startsWith(n.append)||u===s)continue;const h=n.append?u.replace(n.append,""):u;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 P(e,a,t,s,i){const r=new URL(t),u=new URL(a);if(s&&(r.searchParams.forEach((n,h)=>{for(const l of s){if(l.append&&!h.startsWith(l.append))continue;const f=l.append?h.replace(l.append,""):h;if(f.match(l.regexp)){u.searchParams.get(f)===null&&r.searchParams.delete(h);break}}}),u.searchParams.forEach((n,h)=>{for(const l of s){if(!h.match(l.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=l.append?l.append+h:h;r.searchParams.set(f,n);break}})),i!==null&&e){const n=E(e,u);n?r.searchParams.set(i,n):r.searchParams.delete(i)}return r}function z(e){return e.vIframe===!0&&e.uiNotification!==void 0}function g(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 C{stateChange(a,t){a==="replace"&&window.history.replaceState(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const m=document.createElement("template");m.innerHTML=`<style>
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
@@ -8,5 +8,5 @@ var H=Object.defineProperty;var M=(d,c,p)=>c in d?H(d,c,{enumerable:!0,configura
|
|
|
8
8
|
border: none;
|
|
9
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 R 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");const t=m.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 C,window.addEventListener("message",r=>this.onMessage(r))}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(){return this.getAttribute("aspect-ratio")??"auto"}set aspectRatio(t){this.setAttribute("aspect-ratio",t)}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(d(i)&&(this.postMessageToChild(["df-parent","init",{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()),p(i)){if(this.parsedSyncParams||this.syncPath){const r=P(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]]}))}b(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),y(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}else z(i)&&(console.log("v-iframe notification",i.uiNotification,g(i.uiNotification)),this.dispatchEvent(new CustomEvent("notif",{detail:g(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=v(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):this.iframeElement.setAttribute("src",t)}updateStyle(){let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","no"),this.resizedHeight?(this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"?(this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","auto"),this.height?t+=`height:${this.height};`:t+=`height:${this.aspectRatioHeight}px;`),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame",...s),t==="info"&&console.info("d-frame",...s))}connectedCallback(){if(!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.updateSrc(),console.log(this),console.log(this.hasAttribute("onStateChange"))}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){this.log("debug","attribute change",t,s,i),t==="aspect-ratio"&&this.updateAspectRatioHeight(),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc()}}customElements.define("d-frame",R)})();
|
|
12
12
|
//# sourceMappingURL=d-frame.min.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var VIframeCompatDFrameContent=function(){"use strict";var
|
|
1
|
+
var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(s,r,c)=>r in s?g(s,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):s[r]=c;var h=(s,r,c)=>f(s,typeof r!="symbol"?r+"":r,c);function s(n){return n[0]==="df-parent"&&n[1]==="init"}function r(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const c=["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){h(this,"initialized",!1);h(this,"options");h(this,"pendingCheckHeight",!1);h(this,"debug",!1);h(this,"throttledCheckHeight");h(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.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;s(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),r(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 c)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!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const d=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=d,d}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/lib/DFrameContent.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export default class DFrameContent {
|
|
|
16
16
|
sendNotif(notif: Notif): void;
|
|
17
17
|
sendMessage(msg: any): void;
|
|
18
18
|
private initResize;
|
|
19
|
-
private
|
|
19
|
+
private initStateChangeWatcher;
|
|
20
20
|
private createMutationObserver;
|
|
21
21
|
private createWindowEventListeners;
|
|
22
22
|
private checkHeight;
|
package/lib/DFrameContent.js
CHANGED
|
@@ -70,8 +70,8 @@ export default class DFrameContent {
|
|
|
70
70
|
this.debug = !!message[2].debug;
|
|
71
71
|
if (message[2].resize !== 'no')
|
|
72
72
|
this.initResize();
|
|
73
|
-
if (message[2].syncParams || message[2].syncPath)
|
|
74
|
-
this.
|
|
73
|
+
if (message[2].syncParams || message[2].syncPath || message[2].stateChangeEvents)
|
|
74
|
+
this.initStateChangeWatcher();
|
|
75
75
|
this.initialized = true;
|
|
76
76
|
}
|
|
77
77
|
if (isUpdateSrcMessage(message)) {
|
|
@@ -99,8 +99,8 @@ export default class DFrameContent {
|
|
|
99
99
|
this.createMutationObserver();
|
|
100
100
|
this.createWindowEventListeners();
|
|
101
101
|
}
|
|
102
|
-
|
|
103
|
-
this.log('debug', '
|
|
102
|
+
initStateChangeWatcher() {
|
|
103
|
+
this.log('debug', 'initStateChangeWatcher');
|
|
104
104
|
// monkey patch pushState and replaceState to send all state change info to the parent window
|
|
105
105
|
// this is to compensate the lack of event emission by window.history
|
|
106
106
|
const oldReplaceState = window.history.replaceState;
|
package/lib/DFrameElement.d.ts
CHANGED
|
@@ -20,6 +20,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
20
20
|
set syncParams(value: string | null);
|
|
21
21
|
get syncPath(): string | null;
|
|
22
22
|
set syncPath(value: string | null);
|
|
23
|
+
get stateChangeEvents(): boolean;
|
|
24
|
+
set stateChangeEvents(value: boolean);
|
|
23
25
|
adapter: StateChangeAdapter;
|
|
24
26
|
private connected;
|
|
25
27
|
private initialSrc;
|
package/lib/DFrameElement.js
CHANGED
|
@@ -76,6 +76,13 @@ export default class DFrameElement extends HTMLElement {
|
|
|
76
76
|
else
|
|
77
77
|
this.removeAttribute('sync-params');
|
|
78
78
|
}
|
|
79
|
+
get stateChangeEvents() { return this.hasAttribute('state-change-events'); }
|
|
80
|
+
set stateChangeEvents(value) {
|
|
81
|
+
if (value)
|
|
82
|
+
this.setAttribute('state-change-events', '');
|
|
83
|
+
else
|
|
84
|
+
this.removeAttribute('state-change-events');
|
|
85
|
+
}
|
|
79
86
|
adapter;
|
|
80
87
|
/* internal state */
|
|
81
88
|
connected = false;
|
|
@@ -110,7 +117,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
110
117
|
const shadowRoot = this.attachShadow({ mode: 'open' });
|
|
111
118
|
shadowRoot.appendChild(root);
|
|
112
119
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
113
|
-
|
|
120
|
+
// make this callback insensitive to micro changes
|
|
121
|
+
if (this.width === undefined || Math.abs(this.width - entries[0].contentRect.width) > 2) {
|
|
114
122
|
this.width = entries[0].contentRect.width;
|
|
115
123
|
this.updateAspectRatioHeight();
|
|
116
124
|
}
|
|
@@ -131,7 +139,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
131
139
|
debug: this.debug,
|
|
132
140
|
resize: this.resize,
|
|
133
141
|
syncParams: this.syncParams !== null,
|
|
134
|
-
syncPath: this.syncPath !== null
|
|
142
|
+
syncPath: this.syncPath !== null,
|
|
143
|
+
stateChangeEvents: this.stateChangeEvents
|
|
135
144
|
}]);
|
|
136
145
|
this.init();
|
|
137
146
|
}
|
|
@@ -139,10 +148,15 @@ export default class DFrameElement extends HTMLElement {
|
|
|
139
148
|
this.resizedHeight = message[2];
|
|
140
149
|
this.updateStyle();
|
|
141
150
|
}
|
|
142
|
-
if (isStateChangeMessage(message)
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
151
|
+
if (isStateChangeMessage(message)) {
|
|
152
|
+
if ((this.parsedSyncParams || this.syncPath)) {
|
|
153
|
+
const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
|
|
154
|
+
if (newParentHUrl.href !== window.location.href) {
|
|
155
|
+
this.adapter.stateChange(message[2], newParentHUrl);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
if (this.stateChangeEvents) {
|
|
159
|
+
this.dispatchEvent(new CustomEvent('state-change', { detail: [message[2], message[3]] }));
|
|
146
160
|
}
|
|
147
161
|
}
|
|
148
162
|
if (isCustomMessage(message)) {
|
|
@@ -220,7 +234,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
220
234
|
return;
|
|
221
235
|
if (this.height)
|
|
222
236
|
return;
|
|
223
|
-
this.aspectRatioHeight = this.width / this.actualAspectRatio;
|
|
237
|
+
this.aspectRatioHeight = Math.ceil(this.width / this.actualAspectRatio);
|
|
224
238
|
this.updateStyle();
|
|
225
239
|
}
|
|
226
240
|
log(level, ...args) {
|
|
@@ -244,6 +258,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
244
258
|
this.parsedSyncParams = parseSyncParams(this.syncParams || '*');
|
|
245
259
|
this.updateStyle();
|
|
246
260
|
this.updateSrc();
|
|
261
|
+
console.log(this);
|
|
262
|
+
console.log(this.hasAttribute('onStateChange'));
|
|
247
263
|
}
|
|
248
264
|
/* reflected attributes */
|
|
249
265
|
static get observedAttributes() { return ['src', 'aspect-ratio', 'height', 'sync-params', 'sync-path']; }
|
package/lib/messages.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export type InitParentMessage = ['df-parent', 'init', {
|
|
|
19
19
|
resize: 'yes' | 'no' | 'auto';
|
|
20
20
|
syncParams: boolean;
|
|
21
21
|
syncPath: boolean;
|
|
22
|
+
stateChangeEvents: boolean;
|
|
22
23
|
}];
|
|
23
24
|
export type UpdateSrcMessage = ['df-parent', 'updateSrc', string];
|
|
24
25
|
export type ParentMessage = InitParentMessage | UpdateSrcMessage;
|