@data-fair/frame 0.8.4 → 0.9.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 +4 -0
- package/lib/DFrameContent.js +29 -1
- package/lib/DFrameElement.d.ts +8 -2
- package/lib/DFrameElement.js +59 -9
- package/lib/messages.d.ts +5 -2
- package/lib/messages.js +3 -0
- package/lib/utils/sync-params.d.ts +2 -2
- package/lib/utils/sync-params.js +8 -6
- 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 p=(a,n,d)=>n in a?g(a,n,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[n]=d;var o=(a,n,d)=>p(a,typeof n!="symbol"?n+"":n,d);function a(s){return s[0]==="df-global"&&s[1]==="mouse"}function n(s){return s[0]==="df-parent"&&s[1]==="init"}function d(s){return s[0]==="df-parent"&&s[1]==="updateSrc"}const l=["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 f{constructor(t){o(this,"initialized",!1);o(this,"options");o(this,"pendingCheckHeight",!1);o(this,"debug",!1);o(this,"id");o(this,"throttledCheckHeight");o(this,"lastHeight",0);o(this,"currentSyncedMouseEvents",new Set);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(`d-frame:${this.id}:content`,...e),t==="info"&&console.info(`d-frame:${this.id}:content`,...e),t==="error"&&console.error(`d-frame:${this.id}:content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;n(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`d-frame:${this.id}:content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),e[2].mouseEvents&&this.initMouseEvents(e[2].mouseEvents),this.initialized=!0),d(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2],this):window.location.href=e[2]),a(e)&&this.applySyncedMouseEvent(e)}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}ready(){this.postMessageToParent(["df-child","ready"])}initMouseEvents(t){this.log("debug","initMouseEvents");for(const e of t)document.addEventListener(e,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",e,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(t){this.currentSyncedMouseEvents.has(t[2])?this.currentSyncedMouseEvents.delete(t[2]):this.postMessageToParent(t)}applySyncedMouseEvent(t){this.currentSyncedMouseEvents.add(t[2]);const e=new MouseEvent(t[2],{bubbles:!0,cancelable:!0,view:window,...t[3]});document.body.dispatchEvent(e)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...r)=>{const h=t.apply(window.history,r);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),h};window.history.pushState=e;const i=(...r)=>{const h=t.apply(window.history,r);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),h};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 l)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0,i=0;for(const r of t){const h=r.getAttribute("data-iframe-height"),c=r.getBoundingClientRect().bottom+parseFloat(getComputedStyle(r).getPropertyValue("margin-bottom")),u=h?c+parseFloat(h):c;c>e&&(e=c),u>i&&(i=u)}i=Math.ceil(i),e>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}return new f}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/dist/d-frame.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var L=Object.defineProperty;var I=(f,u,g)=>u in f?L(f,u,{enumerable:!0,configurable:!0,writable:!0,value:g}):f[u]=g;var n=(f,u,g)=>I(f,typeof u!="symbol"?u+"":u,g);(function(){"use strict";function f(e){return e[0]==="df-global"&&e[1]==="mouse"}function u(e){return e[0]==="df-child"&&e[1]==="init"}function g(e){return e[0]==="df-child"&&e[1]==="height"}function b(e){return e[0]==="df-child"&&e[1]==="stateChange"}function y(e){return e[0]==="df-child"&&e[1]==="custom"}function E(e){return e[0]==="df-child"&&e[1]==="notif"}function v(e){return e[0]==="df-child"&&e[1]==="ready"}function w(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function A(e,r){if(r.origin!==e.origin)return r.href;if(r.pathname===e.pathname)return"";const t=w(e.pathname);return r.pathname.startsWith(t)?r.pathname.replace(t,"./"):r.pathname}const S=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function M(e){const r=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),a="^"+S(s).replace(/\\\*/g,"(.*)")+"$";r.push({regexp:new RegExp(a),append:i})}return r}function C(e,r,t,s){if(!t&&!s)return e;const i=new URL(e),a=new URL(r);if(t&&a.searchParams.forEach((h,l)=>{for(const o of t){if(o.append&&!l.startsWith(o.append)||l===s)continue;const d=o.append?l.replace(o.append,""):l;if(d.match(o.regexp)){i.searchParams.set(d,h);break}}}),s!==null){const h=a.searchParams.get(s);h&&(i.pathname=new URL(h,e).pathname)}return i.href}function P(e,r,t,s,i){const a=new URL(e),h=new URL(t),l=new URL(r);if(s&&(h.searchParams.forEach((o,d)=>{for(const c of s){if(c.append&&!d.startsWith(c.append))continue;const p=c.append?d.replace(c.append,""):d;if(p.match(c.regexp)){l.searchParams.get(p)===null&&h.searchParams.delete(d);break}}}),l.searchParams.forEach((o,d)=>{for(const c of s){if(!d.match(c.regexp)||(a==null?void 0:a.searchParams.get(d))===o)continue;const p=c.append?c.append+d:d;h.searchParams.set(p,o);break}})),i!==null&&a){const o=A(a,l);o?h.searchParams.set(i,o):h.searchParams.delete(i)}return h}function R(e){return e.vIframe===!0&&e.uiNotification!==void 0}function z(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const r=e.error.response&&(e.error.response.data||e.error.response.status)||e.error.message||e.error;return e.msg?{type:"error",title:e.msg,detail:r}:{type:"error",title:r}}return e.type==="error"?{type:e.clientError?"warning":"error",title:e.msg,detail:e.errorMsg}:{type:e.type??"default",title:e.msg}}class x{stateChange(r,t){r==="replace"&&window.history.replaceState(null,"",t),r==="push"&&window.history.pushState(null,"",t)}onStateChange(r){window.addEventListener("popstate",r)}}const m=document.createElement("template");m.innerHTML=`<style>
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
@@ -11,5 +11,5 @@ var x=Object.defineProperty;var H=(l,c,f)=>c in l?x(l,c,{enumerable:!0,configura
|
|
|
11
11
|
height: 100%;
|
|
12
12
|
border: none;
|
|
13
13
|
}
|
|
14
|
-
</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
|
|
14
|
+
</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 H extends HTMLElement{constructor(){super();n(this,"adapter");n(this,"connected",!1);n(this,"initialSrc");n(this,"parsedSyncParams");n(this,"wrapperElement");n(this,"slotElement");n(this,"iframeElement");n(this,"width");n(this,"aspectRatioHeight");n(this,"resizedHeight");n(this,"randomId");n(this,"iframeLoaded",!1);n(this,"ready",!1);n(this,"iframeExtraAttrs",{});n(this,"currentSyncedMouseEvents",new Set);this.randomId=Math.random().toString(36).slice(-6);const t=m.content.cloneNode(!0);this.wrapperElement=t.childNodes[1],this.slotElement=this.wrapperElement.childNodes[0],this.iframeElement=this.wrapperElement.childNodes[1],this.iframeElement.addEventListener("load",()=>{this.iframeElement.getAttribute("src")&&(this.log("debug","iframe loaded"),this.iframeLoaded=!0,this.dispatchEvent(new CustomEvent("iframe-load")),this.resize!=="yes"&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()))}),this.attachShadow({mode:"open"}).appendChild(t),new ResizeObserver(a=>{(this.width===void 0||Math.abs(this.width-a[0].contentRect.width)>2)&&(this.width=a[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new x,window.addEventListener("message",a=>this.onMessage(a))}get id(){return this.getAttribute("id")??this.randomId}set id(t){this.setAttribute("id",t)}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get fullSrc(){return this.src.startsWith("/")?window.location.origin+this.src:this.src}get aspectRatio(){const t=this.getAttribute("aspect-ratio");return t===""?"auto":t}set aspectRatio(t){t!==null?this.setAttribute("aspect-ratio",t):this.removeAttribute("aspect-ratio")}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get stateChangeEvents(){return this.hasAttribute("state-change-events")}set stateChangeEvents(t){t?this.setAttribute("state-change-events",""):this.removeAttribute("state-change-events")}get readyMessage(){return this.hasAttribute("ready-message")}set readyMessage(t){t?this.setAttribute("ready-message",""):this.removeAttribute("ready-message")}get mouseEvents(){const t=this.getAttribute("mouse-events");return t===null?null:t===""?["click","dblclick","mousedown","mouseup"]:t.split(",")}set mouseEvents(t){t===null?this.removeAttribute("mouse-events"):this.setAttribute("mouse-events",t.join(","))}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var s;if(t.source===((s=this.iframeElement)==null?void 0:s.contentWindow)){const i=t.data;if(this.log("debug","received message from child",i),Array.isArray(t.data)){if(u(i)&&(this.postMessageToChild(["df-parent","init",{id:this.id,debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null,stateChangeEvents:this.stateChangeEvents,mouseEvents:this.mouseEvents}]),this.init()),g(i)&&(this.resizedHeight=i[2],this.resize==="yes"&&!this.ready&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready"))),this.updateStyle()),b(i)){if(this.parsedSyncParams||this.syncPath){const a=P(this.fullSrc,i[3],window.location.href,this.parsedSyncParams,this.syncPath);a.href!==window.location.href&&this.adapter.stateChange(i[2],a)}this.stateChangeEvents&&this.dispatchEvent(new CustomEvent("state-change",{detail:[i[2],i[3]]}))}y(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),E(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]})),v(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),f(i)&&this.applySyncedMouseEvent(i)}else R(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:z(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;const t=C(this.fullSrc,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.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),t=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t=this.aspectRatioHeight+"px"),t!==void 0?(this.log("debug","set height iframe wrapper: "+t),this.wrapperElement.setAttribute("style",`height:${t};min-height:0;`)):this.wrapperElement.setAttribute("style",""),this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.ready&&this.iframeElement.getAttribute("style")!==""&&(this.log("debug","toggle loading slot and iframe visibility"),this.iframeElement.setAttribute("style",""),this.slotElement.setAttribute("style","display:none;"))}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}updateIframeExtraAttrs(){const t=this.iframeExtraAttrs,s={};for(const i of this.getAttributeNames())if(i.startsWith("iframe-")){const a=this.getAttribute(i);if(a!==null){const h=i.slice(7);s[h]=a}}this.log("debug","update iframe extra attributes",t,s);for(const i of Object.keys(t))i in s||this.iframeElement.removeAttribute(i);for(const i of Object.keys(s))s[i]!==t[i]&&this.iframeElement.setAttribute(i,s[i])}initMouseEvents(t){this.log("debug","initMouseEvents");for(const s of t)document.addEventListener(s,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",s,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(t){this.currentSyncedMouseEvents.has(t[2])?this.currentSyncedMouseEvents.delete(t[2]):this.postMessageToChild(t)}applySyncedMouseEvent(t){this.currentSyncedMouseEvents.add(t[2]);const s=new MouseEvent(t[2],{bubbles:!0,cancelable:!0,view:window,...t[3]});this.dispatchEvent(s)}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`d-frame:${this.id}`,...s),t==="info"&&console.info(`d-frame:${this.id}`,...s))}connectedCallback(){if(!this.debug){const t=window.localStorage.getItem("debug");if(t){const s=t.split(",");(s.includes("d-frame")||s.includes("d-frame:"+this.id))&&(this.debug=!0)}}if(this.debug&&console.time(`d-frame:${this.id}`),!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.syncParams!==null&&(this.parsedSyncParams=M(this.syncParams||"*")),this.updateStyle(),this.updateIframeExtraAttrs(),this.updateSrc(),this.mouseEvents&&this.initMouseEvents(this.mouseEvents)}disconnectedCallback(){this.log("debug","disconnected"),this.debug&&console.timeEnd(`d-frame:${this.id}`)}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){t==="aspect-ratio"&&this.updateAspectRatioHeight(),t.startsWith("iframe-")&&this.updateIframeExtraAttrs(),this.connected&&(this.log("debug","attribute change",t,s,i),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc())}}customElements.get("d-frame")||customElements.define("d-frame",H)})();
|
|
15
15
|
//# sourceMappingURL=d-frame.min.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var VIframeCompatDFrameContent=function(){"use strict";var
|
|
1
|
+
var VIframeCompatDFrameContent=function(){"use strict";var y=Object.defineProperty;var m=(h,a,u)=>a in h?y(h,a,{enumerable:!0,configurable:!0,writable:!0,value:u}):h[a]=u;var d=(h,a,u)=>m(h,typeof a!="symbol"?a+"":a,u);function h(n){return n[0]==="df-global"&&n[1]==="mouse"}function a(n){return n[0]==="df-parent"&&n[1]==="init"}function u(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const p=["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 w{constructor(e){d(this,"initialized",!1);d(this,"options");d(this,"pendingCheckHeight",!1);d(this,"debug",!1);d(this,"id");d(this,"throttledCheckHeight");d(this,"lastHeight",0);d(this,"currentSyncedMouseEvents",new Set);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",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.timeLog(`d-frame:${this.id}:content`,...t),e==="info"&&console.info(`d-frame:${this.id}:content`,...t),e==="error"&&console.error(`d-frame:${this.id}: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(`d-frame:${this.id}:content`),t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath||t[2].stateChangeEvents)&&this.initStateChangeWatcher(),t[2].mouseEvents&&this.initMouseEvents(t[2].mouseEvents),this.initialized=!0),u(t)&&(this.options.updateSrc?this.options.updateSrc(t[2].startsWith("/")?window.location.origin+t[2]:t[2],this):window.location.href=t[2]),h(t)&&this.applySyncedMouseEvent(t)}}postMessageToParent(e){window.parent.postMessage(e)}sendNotif(e){this.postMessageToParent(["df-child","notif",e])}sendMessage(e){this.postMessageToParent(["df-child","custom",e])}ready(){this.postMessageToParent(["df-child","ready"])}initMouseEvents(e){this.log("debug","initMouseEvents");for(const t of e)document.addEventListener(t,i=>{i instanceof MouseEvent&&this.transmitSyncedMouseEvent(["df-global","mouse",t,{altKey:i.altKey,ctrlKey:i.ctrlKey,shiftKey:i.shiftKey,metaKey:i.metaKey}])},!0)}transmitSyncedMouseEvent(e){this.currentSyncedMouseEvents.has(e[2])?this.currentSyncedMouseEvents.delete(e[2]):this.postMessageToParent(e)}applySyncedMouseEvent(e){this.currentSyncedMouseEvents.add(e[2]);const t=new MouseEvent(e[2],{bubbles:!0,cancelable:!0,view:window,...e[3]});document.body.dispatchEvent(t)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const e=window.history.replaceState,t=(...o)=>{const r=e.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),r};window.history.pushState=t;const i=(...o)=>{const r=e.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),r};window.history.replaceState=i}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 p)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0,i=0;for(const o of e){const r=o.getAttribute("data-iframe-height"),c=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom")),s=r?c+parseFloat(r):c;c>t&&(t=c),s>i&&(i=s)}i=Math.ceil(i),t>0&&i!==this.lastHeight&&(this.postMessageToParent(["df-child","height",i]),this.lastHeight=i)}}const b=(n,e)=>{const t=Object.keys(n);e.forEach((i,o)=>{n[o]=i,t.splice(t.indexOf(o),1)}),t.forEach(i=>{delete n[i]})},g=new w({updateSrc(n,e){var r,c;const t=window.vIframeOptions,i=t==null?void 0:t.reactiveParams;if(i&&typeof i=="object"){const s=new URL(n);if(s.origin===window.location.origin&&s.pathname===window.location.pathname){e.log("debug","applying reactive params",s.searchParams),b(i,s.searchParams);return}}const o=t==null?void 0:t.router;if(o){const s=((r=o.options)==null?void 0:r.base)??((c=o.options.history)==null?void 0:c.base);if(s==null)e.log("error","failed to access base path in router (no router.options.base nor router.options.history.base)",o);else{const f=window.location.origin+s;if(!n.startsWith(f))e.log("info","src does not start with base path",n,f);else{let l=n.replace(f,"");l.startsWith("/")||(l="/"+l),e.log("debug","applying router.replace",l),o.replace(l);return}}}e.log("info","falling back to updating window.location.href",n),window.location.href=n}});return window.dFrameContent=g,g}();
|
|
2
2
|
//# sourceMappingURL=d-frame-content.min.js.map
|
package/lib/DFrameContent.d.ts
CHANGED
|
@@ -17,6 +17,10 @@ export default class DFrameContent {
|
|
|
17
17
|
sendNotif(notif: Notif): void;
|
|
18
18
|
sendMessage(msg: any): void;
|
|
19
19
|
ready(): void;
|
|
20
|
+
private currentSyncedMouseEvents;
|
|
21
|
+
private initMouseEvents;
|
|
22
|
+
private transmitSyncedMouseEvent;
|
|
23
|
+
private applySyncedMouseEvent;
|
|
20
24
|
private initResize;
|
|
21
25
|
private initStateChangeWatcher;
|
|
22
26
|
private createMutationObserver;
|
package/lib/DFrameContent.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { isInitParentMessage, isUpdateSrcMessage } from './messages.js';
|
|
1
|
+
import { isInitParentMessage, isMouseEventMessage, isUpdateSrcMessage } from './messages.js';
|
|
2
2
|
const windowEventTypes = [
|
|
3
3
|
'animationstart',
|
|
4
4
|
'webkitAnimationStart',
|
|
@@ -78,6 +78,8 @@ export default class DFrameContent {
|
|
|
78
78
|
this.initResize();
|
|
79
79
|
if (message[2].syncParams || message[2].syncPath || message[2].stateChangeEvents)
|
|
80
80
|
this.initStateChangeWatcher();
|
|
81
|
+
if (message[2].mouseEvents)
|
|
82
|
+
this.initMouseEvents(message[2].mouseEvents);
|
|
81
83
|
this.initialized = true;
|
|
82
84
|
}
|
|
83
85
|
if (isUpdateSrcMessage(message)) {
|
|
@@ -88,6 +90,8 @@ export default class DFrameContent {
|
|
|
88
90
|
window.location.href = message[2];
|
|
89
91
|
}
|
|
90
92
|
}
|
|
93
|
+
if (isMouseEventMessage(message))
|
|
94
|
+
this.applySyncedMouseEvent(message);
|
|
91
95
|
}
|
|
92
96
|
}
|
|
93
97
|
postMessageToParent(message) {
|
|
@@ -102,6 +106,30 @@ export default class DFrameContent {
|
|
|
102
106
|
ready() {
|
|
103
107
|
this.postMessageToParent(['df-child', 'ready']);
|
|
104
108
|
}
|
|
109
|
+
currentSyncedMouseEvents = new Set();
|
|
110
|
+
initMouseEvents(types) {
|
|
111
|
+
this.log('debug', 'initMouseEvents');
|
|
112
|
+
for (const eventType of types) {
|
|
113
|
+
document.addEventListener(eventType, (e) => {
|
|
114
|
+
if (!(e instanceof MouseEvent))
|
|
115
|
+
return;
|
|
116
|
+
this.transmitSyncedMouseEvent(['df-global', 'mouse', eventType, { altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, metaKey: e.metaKey }]);
|
|
117
|
+
}, true);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
transmitSyncedMouseEvent(message) {
|
|
121
|
+
if (this.currentSyncedMouseEvents.has(message[2])) {
|
|
122
|
+
this.currentSyncedMouseEvents.delete(message[2]);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
this.postMessageToParent(message);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
applySyncedMouseEvent(message) {
|
|
129
|
+
this.currentSyncedMouseEvents.add(message[2]);
|
|
130
|
+
const event = new MouseEvent(message[2], { bubbles: true, cancelable: true, view: window, ...message[3] });
|
|
131
|
+
document.body.dispatchEvent(event);
|
|
132
|
+
}
|
|
105
133
|
initResize() {
|
|
106
134
|
this.log('debug', 'initResize');
|
|
107
135
|
this.checkHeight();
|
package/lib/DFrameElement.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ParentMessage } from './messages.js';
|
|
2
2
|
export interface StateChangeAdapter {
|
|
3
3
|
stateChange(action: 'push' | 'replace', newUrl: URL): void;
|
|
4
|
-
onStateChange
|
|
4
|
+
onStateChange(callback: () => void): void;
|
|
5
5
|
}
|
|
6
6
|
export default class DFrameElement extends HTMLElement {
|
|
7
7
|
get id(): string;
|
|
@@ -10,6 +10,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
10
10
|
set debug(value: boolean);
|
|
11
11
|
get src(): string;
|
|
12
12
|
set src(value: string);
|
|
13
|
+
get fullSrc(): string;
|
|
13
14
|
get aspectRatio(): string | null;
|
|
14
15
|
set aspectRatio(value: string | null);
|
|
15
16
|
get height(): string | null;
|
|
@@ -24,10 +25,11 @@ export default class DFrameElement extends HTMLElement {
|
|
|
24
25
|
set stateChangeEvents(value: boolean);
|
|
25
26
|
get readyMessage(): boolean;
|
|
26
27
|
set readyMessage(value: boolean);
|
|
28
|
+
get mouseEvents(): string[] | null;
|
|
29
|
+
set mouseEvents(value: string[] | null);
|
|
27
30
|
adapter: StateChangeAdapter;
|
|
28
31
|
private connected;
|
|
29
32
|
private initialSrc;
|
|
30
|
-
private srcUrl;
|
|
31
33
|
private parsedSyncParams;
|
|
32
34
|
private wrapperElement;
|
|
33
35
|
private slotElement;
|
|
@@ -48,6 +50,10 @@ export default class DFrameElement extends HTMLElement {
|
|
|
48
50
|
updateStyle(): void;
|
|
49
51
|
updateAspectRatioHeight(): void;
|
|
50
52
|
updateIframeExtraAttrs(): void;
|
|
53
|
+
private currentSyncedMouseEvents;
|
|
54
|
+
private initMouseEvents;
|
|
55
|
+
private transmitSyncedMouseEvent;
|
|
56
|
+
private applySyncedMouseEvent;
|
|
51
57
|
log(level: 'debug' | 'info', ...args: any[]): void;
|
|
52
58
|
connectedCallback(): void;
|
|
53
59
|
disconnectedCallback(): void;
|
package/lib/DFrameElement.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
|
|
2
|
-
import { isCustomMessage, isHeightMessage, isInitChildMessage, isNotifMessage, isReadyMessage, isStateChangeMessage } from './messages.js';
|
|
2
|
+
import { isCustomMessage, isHeightMessage, isInitChildMessage, isMouseEventMessage, isNotifMessage, isReadyMessage, isStateChangeMessage } from './messages.js';
|
|
3
3
|
import { parseSyncParams, getChildSrc, getParentUrl } from './utils/sync-params.js';
|
|
4
4
|
import { isVIframeUiNotif, convertVIframeUiNotif } from './v-iframe-compat/ui-notif.js';
|
|
5
5
|
class WindowStateChangeAdapter {
|
|
@@ -9,6 +9,14 @@ class WindowStateChangeAdapter {
|
|
|
9
9
|
if (action === 'push')
|
|
10
10
|
window.history.pushState(null, '', newUrl);
|
|
11
11
|
}
|
|
12
|
+
onStateChange(callback) {
|
|
13
|
+
// this is only partial, for a full implementation we would have to monkeypatch window.history
|
|
14
|
+
// I chose to do it in the child but not here
|
|
15
|
+
// therefore support of dynamic changes performed through the history api requires an adapter
|
|
16
|
+
// the idea being that the child makes itself wholly compatible with d-frame and changes its navigation logic to fit it
|
|
17
|
+
// but the parent should be left as untouched as possible and uses d-frame as a black box (custom element)
|
|
18
|
+
window.addEventListener('popstate', callback);
|
|
19
|
+
}
|
|
12
20
|
}
|
|
13
21
|
const template = document.createElement('template');
|
|
14
22
|
template.innerHTML = `<style>
|
|
@@ -39,6 +47,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
39
47
|
}
|
|
40
48
|
get src() { return this.getAttribute('src'); }
|
|
41
49
|
set src(value) { this.setAttribute('src', value); }
|
|
50
|
+
get fullSrc() { return this.src.startsWith('/') ? (window.location.origin + this.src) : this.src; }
|
|
42
51
|
get aspectRatio() {
|
|
43
52
|
const value = this.getAttribute('aspect-ratio');
|
|
44
53
|
if (value === '')
|
|
@@ -100,11 +109,24 @@ export default class DFrameElement extends HTMLElement {
|
|
|
100
109
|
else
|
|
101
110
|
this.removeAttribute('ready-message');
|
|
102
111
|
}
|
|
112
|
+
get mouseEvents() {
|
|
113
|
+
const attr = this.getAttribute('mouse-events');
|
|
114
|
+
if (attr === null)
|
|
115
|
+
return null;
|
|
116
|
+
if (attr === '')
|
|
117
|
+
return ['click', 'dblclick', 'mousedown', 'mouseup'];
|
|
118
|
+
return attr.split(',');
|
|
119
|
+
}
|
|
120
|
+
set mouseEvents(value) {
|
|
121
|
+
if (value === null)
|
|
122
|
+
this.removeAttribute('mouse-events');
|
|
123
|
+
else
|
|
124
|
+
this.setAttribute('mouse-events', value.join(','));
|
|
125
|
+
}
|
|
103
126
|
adapter;
|
|
104
127
|
/* internal state */
|
|
105
128
|
connected = false;
|
|
106
129
|
initialSrc;
|
|
107
|
-
srcUrl;
|
|
108
130
|
parsedSyncParams;
|
|
109
131
|
wrapperElement;
|
|
110
132
|
slotElement;
|
|
@@ -172,7 +194,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
172
194
|
resize: this.resize,
|
|
173
195
|
syncParams: this.syncParams !== null,
|
|
174
196
|
syncPath: this.syncPath !== null,
|
|
175
|
-
stateChangeEvents: this.stateChangeEvents
|
|
197
|
+
stateChangeEvents: this.stateChangeEvents,
|
|
198
|
+
mouseEvents: this.mouseEvents
|
|
176
199
|
}]);
|
|
177
200
|
this.init();
|
|
178
201
|
}
|
|
@@ -186,7 +209,7 @@ export default class DFrameElement extends HTMLElement {
|
|
|
186
209
|
}
|
|
187
210
|
if (isStateChangeMessage(message)) {
|
|
188
211
|
if ((this.parsedSyncParams || this.syncPath)) {
|
|
189
|
-
const newParentHUrl = getParentUrl(this.
|
|
212
|
+
const newParentHUrl = getParentUrl(this.fullSrc, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
|
|
190
213
|
if (newParentHUrl.href !== window.location.href) {
|
|
191
214
|
this.adapter.stateChange(message[2], newParentHUrl);
|
|
192
215
|
}
|
|
@@ -206,6 +229,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
206
229
|
this.dispatchEvent(new CustomEvent('ready'));
|
|
207
230
|
this.updateStyle();
|
|
208
231
|
}
|
|
232
|
+
if (isMouseEventMessage(message))
|
|
233
|
+
this.applySyncedMouseEvent(message);
|
|
209
234
|
}
|
|
210
235
|
else if (isVIframeUiNotif(message)) {
|
|
211
236
|
// maintain compatibility with v-iframe notifications sent through postMessage
|
|
@@ -224,14 +249,13 @@ export default class DFrameElement extends HTMLElement {
|
|
|
224
249
|
updateSrc() {
|
|
225
250
|
if (!this.connected)
|
|
226
251
|
return;
|
|
227
|
-
|
|
228
|
-
const fullSrc = getChildSrc(this.srcUrl, window.location.href, this.parsedSyncParams, this.syncPath);
|
|
252
|
+
const iframeSrc = getChildSrc(this.fullSrc, window.location.href, this.parsedSyncParams, this.syncPath);
|
|
229
253
|
if (this.initialSrc) {
|
|
230
|
-
this.postMessageToChild(['df-parent', 'updateSrc',
|
|
254
|
+
this.postMessageToChild(['df-parent', 'updateSrc', iframeSrc]);
|
|
231
255
|
}
|
|
232
256
|
else {
|
|
233
|
-
this.log('debug', 'set src attribute of iframe: ' +
|
|
234
|
-
this.iframeElement.setAttribute('src',
|
|
257
|
+
this.log('debug', 'set src attribute of iframe: ' + iframeSrc);
|
|
258
|
+
this.iframeElement.setAttribute('src', iframeSrc);
|
|
235
259
|
}
|
|
236
260
|
}
|
|
237
261
|
updateStyle() {
|
|
@@ -316,6 +340,30 @@ export default class DFrameElement extends HTMLElement {
|
|
|
316
340
|
}
|
|
317
341
|
}
|
|
318
342
|
}
|
|
343
|
+
currentSyncedMouseEvents = new Set();
|
|
344
|
+
initMouseEvents(types) {
|
|
345
|
+
this.log('debug', 'initMouseEvents');
|
|
346
|
+
for (const eventType of types) {
|
|
347
|
+
document.addEventListener(eventType, (e) => {
|
|
348
|
+
if (!(e instanceof MouseEvent))
|
|
349
|
+
return;
|
|
350
|
+
this.transmitSyncedMouseEvent(['df-global', 'mouse', eventType, { altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, metaKey: e.metaKey }]);
|
|
351
|
+
}, true);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
transmitSyncedMouseEvent(message) {
|
|
355
|
+
if (this.currentSyncedMouseEvents.has(message[2])) {
|
|
356
|
+
this.currentSyncedMouseEvents.delete(message[2]);
|
|
357
|
+
}
|
|
358
|
+
else {
|
|
359
|
+
this.postMessageToChild(message);
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
applySyncedMouseEvent(message) {
|
|
363
|
+
this.currentSyncedMouseEvents.add(message[2]);
|
|
364
|
+
const event = new MouseEvent(message[2], { bubbles: true, cancelable: true, view: window, ...message[3] });
|
|
365
|
+
this.dispatchEvent(event);
|
|
366
|
+
}
|
|
319
367
|
log(level, ...args) {
|
|
320
368
|
if (level === 'debug' && !this.debug)
|
|
321
369
|
return;
|
|
@@ -348,6 +396,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
348
396
|
this.updateStyle();
|
|
349
397
|
this.updateIframeExtraAttrs();
|
|
350
398
|
this.updateSrc();
|
|
399
|
+
if (this.mouseEvents)
|
|
400
|
+
this.initMouseEvents(this.mouseEvents);
|
|
351
401
|
}
|
|
352
402
|
disconnectedCallback() {
|
|
353
403
|
this.log('debug', 'disconnected');
|
package/lib/messages.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
export type MouseEventMessage = ['df-global', 'mouse', MouseEvent['type'], Pick<MouseEvent, 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey'>];
|
|
2
|
+
export declare function isMouseEventMessage(message: any): message is MouseEventMessage;
|
|
1
3
|
export type InitChildMessage = ['df-child', 'init'];
|
|
2
4
|
export type HeightMessage = ['df-child', 'height', number];
|
|
3
5
|
export type StateChangeMessage = ['df-child', 'stateChange', 'replace' | 'push', string];
|
|
4
6
|
export type CustomMessage = ['df-child', 'custom', any];
|
|
5
7
|
export type NotifMessage = ['df-child', 'notif', Notif];
|
|
6
8
|
export type ReadyMessage = ['df-child', 'ready'];
|
|
7
|
-
export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage | ReadyMessage;
|
|
9
|
+
export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage | MouseEventMessage | ReadyMessage;
|
|
8
10
|
export type Notif = {
|
|
9
11
|
type: 'default' | 'info' | 'success' | 'warning' | 'error';
|
|
10
12
|
title: string;
|
|
@@ -26,9 +28,10 @@ export type InitParentMessage = [
|
|
|
26
28
|
syncParams: boolean;
|
|
27
29
|
syncPath: boolean;
|
|
28
30
|
stateChangeEvents: boolean;
|
|
31
|
+
mouseEvents: null | string[];
|
|
29
32
|
}
|
|
30
33
|
];
|
|
31
34
|
export type UpdateSrcMessage = ['df-parent', 'updateSrc', string];
|
|
32
|
-
export type ParentMessage = InitParentMessage | UpdateSrcMessage;
|
|
35
|
+
export type ParentMessage = InitParentMessage | UpdateSrcMessage | MouseEventMessage;
|
|
33
36
|
export declare function isInitParentMessage(message: any[]): message is InitParentMessage;
|
|
34
37
|
export declare function isUpdateSrcMessage(message: any[]): message is UpdateSrcMessage;
|
package/lib/messages.js
CHANGED
|
@@ -3,5 +3,5 @@ export type ParsedSyncParams = {
|
|
|
3
3
|
append?: string;
|
|
4
4
|
}[];
|
|
5
5
|
export declare function parseSyncParams(syncParamsStr: string): ParsedSyncParams;
|
|
6
|
-
export declare function getChildSrc(
|
|
7
|
-
export declare function getParentUrl(
|
|
6
|
+
export declare function getChildSrc(fullSrc: string, parentHref: string, syncParams: ParsedSyncParams | undefined, syncPath: null | string): string;
|
|
7
|
+
export declare function getParentUrl(fullSrc: string, childHref: string, currentParentHref: string, syncParams: ParsedSyncParams | undefined, syncPath: null | string): URL;
|
package/lib/utils/sync-params.js
CHANGED
|
@@ -12,9 +12,10 @@ export function parseSyncParams(syncParamsStr) {
|
|
|
12
12
|
}
|
|
13
13
|
return syncParams;
|
|
14
14
|
}
|
|
15
|
-
export function getChildSrc(
|
|
15
|
+
export function getChildSrc(fullSrc, parentHref, syncParams, syncPath) {
|
|
16
16
|
if (!syncParams && !syncPath)
|
|
17
|
-
return
|
|
17
|
+
return fullSrc;
|
|
18
|
+
const childUrl = new URL(fullSrc);
|
|
18
19
|
const parentUrl = new URL(parentHref);
|
|
19
20
|
if (syncParams) {
|
|
20
21
|
parentUrl.searchParams.forEach((value, key) => {
|
|
@@ -26,7 +27,7 @@ export function getChildSrc(srcUrl, parentHref, syncParams, syncPath) {
|
|
|
26
27
|
const childKey = syncParam.append ? key.replace(syncParam.append, '') : key;
|
|
27
28
|
if (!childKey.match(syncParam.regexp))
|
|
28
29
|
continue;
|
|
29
|
-
|
|
30
|
+
childUrl.searchParams.set(childKey, value);
|
|
30
31
|
break;
|
|
31
32
|
}
|
|
32
33
|
});
|
|
@@ -34,12 +35,13 @@ export function getChildSrc(srcUrl, parentHref, syncParams, syncPath) {
|
|
|
34
35
|
if (syncPath !== null) {
|
|
35
36
|
const path = parentUrl.searchParams.get(syncPath);
|
|
36
37
|
if (path) {
|
|
37
|
-
|
|
38
|
+
childUrl.pathname = new URL(path, fullSrc).pathname;
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
|
-
return
|
|
41
|
+
return childUrl.href;
|
|
41
42
|
}
|
|
42
|
-
export function getParentUrl(
|
|
43
|
+
export function getParentUrl(fullSrc, childHref, currentParentHref, syncParams, syncPath) {
|
|
44
|
+
const srcUrl = new URL(fullSrc);
|
|
43
45
|
const parentUrl = new URL(currentParentHref);
|
|
44
46
|
const childUrl = new URL(childHref);
|
|
45
47
|
if (syncParams) {
|