@data-fair/frame 0.8.3 → 0.9.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 +1 -1
- package/lib/DFrameContent.d.ts +4 -0
- package/lib/DFrameContent.js +29 -1
- package/lib/DFrameElement.d.ts +6 -0
- package/lib/DFrameElement.js +45 -2
- package/lib/messages.d.ts +5 -2
- package/lib/messages.js +3 -0
- package/lib/v-iframe-compat/d-frame-content.js +4 -4
- package/lib/vue-router/d-frame-content.js +4 -4
- 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 H=Object.defineProperty;var L=(l,u,f)=>u in l?H(l,u,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[u]=f;var n=(l,u,f)=>L(l,typeof u!="symbol"?u+"":u,f);(function(){"use strict";function l(e){return e[0]==="df-global"&&e[1]==="mouse"}function u(e){return e[0]==="df-child"&&e[1]==="init"}function f(e){return e[0]==="df-child"&&e[1]==="height"}function m(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 E(e){return e[0]==="df-child"&&e[1]==="ready"}function v(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=v(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 M(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,d)=>{for(const h of t){if(h.append&&!d.startsWith(h.append)||d===s)continue;const o=h.append?d.replace(h.append,""):d;if(o.match(h.regexp)){e.searchParams.set(o,r);break}}}),s!==null){const r=i.searchParams.get(s);r&&(e.pathname=new URL(r,e).pathname)}return e.href}function C(e,a,t,s,i){const r=new URL(t),d=new URL(a);if(s&&(r.searchParams.forEach((h,o)=>{for(const c of s){if(c.append&&!o.startsWith(c.append))continue;const g=c.append?o.replace(c.append,""):o;if(g.match(c.regexp)){d.searchParams.get(g)===null&&r.searchParams.delete(o);break}}}),d.searchParams.forEach((h,o)=>{for(const c of s){if(!o.match(c.regexp)||(e==null?void 0:e.searchParams.get(o))===h)continue;const g=c.append?c.append+o:o;r.searchParams.set(g,h);break}})),i!==null&&e){const h=w(e,d);h?r.searchParams.set(i,h):r.searchParams.delete(i)}return r}function P(e){return e.vIframe===!0&&e.uiNotification!==void 0}function R(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 z{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
|
}
|
|
@@ -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 x extends HTMLElement{constructor(){super();n(this,"adapter");n(this,"connected",!1);n(this,"initialSrc");n(this,"srcUrl");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=p.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(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 z,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 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 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()),f(i)&&(this.resizedHeight=i[2],this.resize==="yes"&&!this.ready&&!this.readyMessage&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready"))),this.updateStyle()),m(i)){if(this.parsedSyncParams||this.syncPath){const r=C(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]})),E(i)&&(this.ready=!0,this.dispatchEvent(new CustomEvent("ready")),this.updateStyle()),l(i)&&this.applySyncedMouseEvent(i)}else P(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:R(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=M(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.resizedHeight?(this.log("debug","height of iframe based on resize message: "+this.resizedHeight),t=this.resizedHeight+"px"):this.height?(this.log("debug","height of iframe based on direct attribute: "+this.height),t=this.height):this.aspectRatio!==null&&(this.log("debug","height of iframe based on aspect ratio: "+this.aspectRatioHeight),t=this.aspectRatioHeight+"px"),t!==void 0?(this.log("debug","set height iframe wrapper: "+t),this.wrapperElement.setAttribute("style",`height:${t};min-height:0;`)):this.wrapperElement.setAttribute("style",""),this.resize==="yes"||this.resize==="auto"&&this.resizedHeight?this.iframeElement.getAttribute("scrolling")!=="no"&&(this.log("debug","set scrolling attribute of iframe: no"),this.iframeElement.setAttribute("scrolling","no")):this.iframeElement.getAttribute("scrolling")!=="auto"&&(this.log("debug","set scrolling attribute of iframe: auto"),this.iframeElement.setAttribute("scrolling","auto")),this.ready&&this.iframeElement.getAttribute("style")!==""&&(this.log("debug","toggle loading slot and iframe visibility"),this.iframeElement.setAttribute("style",""),this.slotElement.setAttribute("style","display:none;"))}updateAspectRatioHeight(){this.width&&this.aspectRatio!==null&&(this.resizedHeight||this.height||(this.aspectRatioHeight=Math.ceil(this.width/this.actualAspectRatio),this.updateStyle()))}updateIframeExtraAttrs(){const t=this.iframeExtraAttrs,s={};for(const i of this.getAttributeNames())if(i.startsWith("iframe-")){const r=this.getAttribute(i);if(r!==null){const d=i.slice(7);s[d]=r}}this.log("debug","update iframe extra attributes",t,s);for(const i of Object.keys(t))i in s||this.iframeElement.removeAttribute(i);for(const i of Object.keys(s))s[i]!==t[i]&&this.iframeElement.setAttribute(i,s[i])}initMouseEvents(t){this.log("debug","initMouseEvents");for(const s of t)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=S(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",x)})();
|
|
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
|
@@ -24,6 +24,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
24
24
|
set stateChangeEvents(value: boolean);
|
|
25
25
|
get readyMessage(): boolean;
|
|
26
26
|
set readyMessage(value: boolean);
|
|
27
|
+
get mouseEvents(): string[] | null;
|
|
28
|
+
set mouseEvents(value: string[] | null);
|
|
27
29
|
adapter: StateChangeAdapter;
|
|
28
30
|
private connected;
|
|
29
31
|
private initialSrc;
|
|
@@ -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 {
|
|
@@ -100,6 +100,20 @@ export default class DFrameElement extends HTMLElement {
|
|
|
100
100
|
else
|
|
101
101
|
this.removeAttribute('ready-message');
|
|
102
102
|
}
|
|
103
|
+
get mouseEvents() {
|
|
104
|
+
const attr = this.getAttribute('mouse-events');
|
|
105
|
+
if (attr === null)
|
|
106
|
+
return null;
|
|
107
|
+
if (attr === '')
|
|
108
|
+
return ['click', 'dblclick', 'mousedown', 'mouseup'];
|
|
109
|
+
return attr.split(',');
|
|
110
|
+
}
|
|
111
|
+
set mouseEvents(value) {
|
|
112
|
+
if (value === null)
|
|
113
|
+
this.removeAttribute('mouse-events');
|
|
114
|
+
else
|
|
115
|
+
this.setAttribute('mouse-events', value.join(','));
|
|
116
|
+
}
|
|
103
117
|
adapter;
|
|
104
118
|
/* internal state */
|
|
105
119
|
connected = false;
|
|
@@ -172,7 +186,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
172
186
|
resize: this.resize,
|
|
173
187
|
syncParams: this.syncParams !== null,
|
|
174
188
|
syncPath: this.syncPath !== null,
|
|
175
|
-
stateChangeEvents: this.stateChangeEvents
|
|
189
|
+
stateChangeEvents: this.stateChangeEvents,
|
|
190
|
+
mouseEvents: this.mouseEvents
|
|
176
191
|
}]);
|
|
177
192
|
this.init();
|
|
178
193
|
}
|
|
@@ -206,6 +221,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
206
221
|
this.dispatchEvent(new CustomEvent('ready'));
|
|
207
222
|
this.updateStyle();
|
|
208
223
|
}
|
|
224
|
+
if (isMouseEventMessage(message))
|
|
225
|
+
this.applySyncedMouseEvent(message);
|
|
209
226
|
}
|
|
210
227
|
else if (isVIframeUiNotif(message)) {
|
|
211
228
|
// maintain compatibility with v-iframe notifications sent through postMessage
|
|
@@ -316,6 +333,30 @@ export default class DFrameElement extends HTMLElement {
|
|
|
316
333
|
}
|
|
317
334
|
}
|
|
318
335
|
}
|
|
336
|
+
currentSyncedMouseEvents = new Set();
|
|
337
|
+
initMouseEvents(types) {
|
|
338
|
+
this.log('debug', 'initMouseEvents');
|
|
339
|
+
for (const eventType of types) {
|
|
340
|
+
document.addEventListener(eventType, (e) => {
|
|
341
|
+
if (!(e instanceof MouseEvent))
|
|
342
|
+
return;
|
|
343
|
+
this.transmitSyncedMouseEvent(['df-global', 'mouse', eventType, { altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, metaKey: e.metaKey }]);
|
|
344
|
+
}, true);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
transmitSyncedMouseEvent(message) {
|
|
348
|
+
if (this.currentSyncedMouseEvents.has(message[2])) {
|
|
349
|
+
this.currentSyncedMouseEvents.delete(message[2]);
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
this.postMessageToChild(message);
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
applySyncedMouseEvent(message) {
|
|
356
|
+
this.currentSyncedMouseEvents.add(message[2]);
|
|
357
|
+
const event = new MouseEvent(message[2], { bubbles: true, cancelable: true, view: window, ...message[3] });
|
|
358
|
+
this.dispatchEvent(event);
|
|
359
|
+
}
|
|
319
360
|
log(level, ...args) {
|
|
320
361
|
if (level === 'debug' && !this.debug)
|
|
321
362
|
return;
|
|
@@ -348,6 +389,8 @@ export default class DFrameElement extends HTMLElement {
|
|
|
348
389
|
this.updateStyle();
|
|
349
390
|
this.updateIframeExtraAttrs();
|
|
350
391
|
this.updateSrc();
|
|
392
|
+
if (this.mouseEvents)
|
|
393
|
+
this.initMouseEvents(this.mouseEvents);
|
|
351
394
|
}
|
|
352
395
|
disconnectedCallback() {
|
|
353
396
|
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
|
@@ -15,9 +15,7 @@ const dFrameContent = new DFrameContent({
|
|
|
15
15
|
const router = vIframeOptions?.router;
|
|
16
16
|
if (router) {
|
|
17
17
|
// @ts-ignore vue-router v2
|
|
18
|
-
|
|
19
|
-
if (!base && router.options?.history)
|
|
20
|
-
base = router.options.history.base;
|
|
18
|
+
const base = router.options?.base ?? router.options.history?.base;
|
|
21
19
|
if (base === null || base === undefined) {
|
|
22
20
|
instance.log('error', 'failed to access base path in router (no router.options.base nor router.options.history.base)', router);
|
|
23
21
|
}
|
|
@@ -27,7 +25,9 @@ const dFrameContent = new DFrameContent({
|
|
|
27
25
|
instance.log('info', 'src does not start with base path', src, urlPrefix);
|
|
28
26
|
}
|
|
29
27
|
else {
|
|
30
|
-
|
|
28
|
+
let newRoute = src.replace(urlPrefix, '');
|
|
29
|
+
if (!newRoute.startsWith('/'))
|
|
30
|
+
newRoute = '/' + newRoute;
|
|
31
31
|
instance.log('debug', 'applying router.replace', newRoute);
|
|
32
32
|
router.replace(newRoute);
|
|
33
33
|
return;
|
|
@@ -4,9 +4,7 @@ export function vueRouterDFrameContent(router, options) {
|
|
|
4
4
|
...options,
|
|
5
5
|
updateSrc: (src, instance) => {
|
|
6
6
|
// @ts-ignore vue-router v2
|
|
7
|
-
|
|
8
|
-
if (!base && router.options?.history)
|
|
9
|
-
base = router.options.history.base;
|
|
7
|
+
const base = router.options?.base ?? router.options.history?.base;
|
|
10
8
|
if (base === null || base === undefined) {
|
|
11
9
|
instance.log('error', 'failed to access base path in router (no router.options.base nor router.options.history.base)', router);
|
|
12
10
|
}
|
|
@@ -16,7 +14,9 @@ export function vueRouterDFrameContent(router, options) {
|
|
|
16
14
|
instance.log('info', 'src does not start with base path', src, urlPrefix);
|
|
17
15
|
}
|
|
18
16
|
else {
|
|
19
|
-
|
|
17
|
+
let newRoute = src.replace(urlPrefix, '');
|
|
18
|
+
if (!newRoute.startsWith('/'))
|
|
19
|
+
newRoute = '/' + newRoute;
|
|
20
20
|
instance.log('debug', 'applying router.replace', newRoute);
|
|
21
21
|
router.replace(newRoute);
|
|
22
22
|
return;
|