@data-fair/frame 0.3.1 → 0.4.0
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 +2 -0
- package/lib/DFrameContent.d.ts +1 -1
- package/lib/DFrameContent.js +4 -4
- package/lib/DFrameElement.d.ts +2 -0
- package/lib/DFrameElement.js +20 -5
- package/lib/messages.d.ts +1 -0
- package/lib/v-iframe-compat/ui-notif.d.ts +1 -1
- package/package.json +2 -2
|
@@ -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!==r[0].contentRect.width&&(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=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
|
|
@@ -0,0 +1,2 @@
|
|
|
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
|
+
//# 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;
|
|
@@ -131,7 +138,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
131
138
|
debug: this.debug,
|
|
132
139
|
resize: this.resize,
|
|
133
140
|
syncParams: this.syncParams !== null,
|
|
134
|
-
syncPath: this.syncPath !== null
|
|
141
|
+
syncPath: this.syncPath !== null,
|
|
142
|
+
stateChangeEvents: this.stateChangeEvents
|
|
135
143
|
}]);
|
|
136
144
|
this.init();
|
|
137
145
|
}
|
|
@@ -139,10 +147,15 @@ export default class DFrameElement extends HTMLElement {
|
|
|
139
147
|
this.resizedHeight = message[2];
|
|
140
148
|
this.updateStyle();
|
|
141
149
|
}
|
|
142
|
-
if (isStateChangeMessage(message)
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
150
|
+
if (isStateChangeMessage(message)) {
|
|
151
|
+
if ((this.parsedSyncParams || this.syncPath)) {
|
|
152
|
+
const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
|
|
153
|
+
if (newParentHUrl.href !== window.location.href) {
|
|
154
|
+
this.adapter.stateChange(message[2], newParentHUrl);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
if (this.stateChangeEvents) {
|
|
158
|
+
this.dispatchEvent(new CustomEvent('state-change', { detail: [message[2], message[3]] }));
|
|
146
159
|
}
|
|
147
160
|
}
|
|
148
161
|
if (isCustomMessage(message)) {
|
|
@@ -244,6 +257,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
244
257
|
this.parsedSyncParams = parseSyncParams(this.syncParams || '*');
|
|
245
258
|
this.updateStyle();
|
|
246
259
|
this.updateSrc();
|
|
260
|
+
console.log(this);
|
|
261
|
+
console.log(this.hasAttribute('onStateChange'));
|
|
247
262
|
}
|
|
248
263
|
/* reflected attributes */
|
|
249
264
|
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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-fair/frame",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "An iframe wrapper for powerful web app integrations.",
|
|
5
5
|
"main": "dist/frame.min.js",
|
|
6
6
|
"directories": {
|
|
@@ -39,6 +39,6 @@
|
|
|
39
39
|
"files": [
|
|
40
40
|
"lib/**/*.js",
|
|
41
41
|
"lib/**/*.d.ts",
|
|
42
|
-
"dist
|
|
42
|
+
"dist/**/*.js"
|
|
43
43
|
]
|
|
44
44
|
}
|