[svelte] simple demo of a document layout component

dist/index.html

@@ -13,6 +13,7 @@
         <div id="portal"></div>
         <script src="js/jquery.js"></script>
         <script src="js/bootstrap@4.6.2/bootstrap.bundle.min.js"></script>
+	<script src="js/ggtx-svelte/DocumentLayout.min.js"></script>
         <script src="bundle.min.js"></script>
     </body>
 </html>

dist/js/ggtx-svelte/DocumentLayout.min.js

+(function(d){typeof define=="function"&&define.amd?define(d):d()})(function(){"use strict";var Qn=Object.defineProperty;var qe=d=>{throw TypeError(d)};var Xn=(d,w,p)=>w in d?Qn(d,w,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[w]=p;var C=(d,w,p)=>Xn(d,typeof w!="symbol"?w+"":w,p),Be=(d,w,p)=>w.has(d)||qe("Cannot "+p);var N=(d,w,p)=>(Be(d,w,"read from private field"),p?p.call(d):w.get(d)),Gt=(d,w,p)=>w.has(d)?qe("Cannot add the same private member more than once"):w instanceof WeakSet?w.add(d):w.set(d,p),Wt=(d,w,p,_t)=>(Be(d,w,"write to private field"),_t?_t.call(d,p):w.set(d,p),p);var je,Y,P;const d="5";typeof window<"u"&&((je=window.__svelte??(window.__svelte={})).v??(je.v=new Set)).add(d);const w=2,p="[",_t="]",ut={},O=Symbol(),zt=!1;function Ye(t){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}var Zt=Array.isArray,He=Array.prototype.indexOf,Ve=Array.from,vt=Object.keys,dt=Object.defineProperty,et=Object.getOwnPropertyDescriptor,Ue=Object.prototype,Je=Array.prototype,Ke=Object.getPrototypeOf,Qt=Object.isExtensible;function Xt(t){for(var e=0;e<t.length;e++)t[e]()}const F=2,te=4,ht=8,Dt=16,H=32,K=64,$t=128,A=256,wt=512,D=1024,B=2048,G=4096,yt=8192,gt=16384,Ge=32768,We=65536,ze=1<<19,ee=1<<20,It=1<<21,Pt=Symbol("$state"),Ze=Symbol("legacy props");function Qe(t){throw new Error("https://svelte.dev/e/effect_in_teardown")}function Xe(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function tn(t){throw new Error("https://svelte.dev/e/effect_orphan")}function en(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function nn(){throw new Error("https://svelte.dev/e/hydration_failed")}function rn(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function sn(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function ln(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function Ft(t){console.warn("https://svelte.dev/e/hydration_mismatch")}let M=!1;function mt(t){M=t}let E;function W(t){if(t===null)throw Ft(),ut;return E=t}function ne(){return W(ft(E))}function nt(t){if(M){if(ft(E)!==null)throw Ft(),ut;E=t}}let un=!1;function rt(t){if(typeof t!="object"||t===null||Pt in t)return t;const e=Ke(t);if(e!==Ue&&e!==Je)return t;var n=new Map,r=Zt(t),s=L(0),l=h,i=u=>{var f=h;U(l);var a=u();return U(f),a};return r&&n.set("length",L(t.length)),new Proxy(t,{defineProperty(u,f,a){(!("value"in a)||a.configurable===!1||a.enumerable===!1||a.writable===!1)&&rn();var _=n.get(f);return _===void 0?(_=i(()=>L(a.value)),n.set(f,_)):S(_,i(()=>rt(a.value))),!0},deleteProperty(u,f){var a=n.get(f);if(a===void 0)f in u&&(n.set(f,i(()=>L(O))),Lt(s));else{if(r&&typeof f=="string"){var _=n.get("length"),o=Number(f);Number.isInteger(o)&&o<_.v&&S(_,o)}S(a,O),Lt(s)}return!0},get(u,f,a){var v;if(f===Pt)return t;var _=n.get(f),o=f in u;if(_===void 0&&(!o||(v=et(u,f))!=null&&v.writable)&&(_=i(()=>L(rt(o?u[f]:O))),n.set(f,_)),_!==void 0){var c=k(_);return c===O?void 0:c}return Reflect.get(u,f,a)},getOwnPropertyDescriptor(u,f){var a=Reflect.getOwnPropertyDescriptor(u,f);if(a&&"value"in a){var _=n.get(f);_&&(a.value=k(_))}else if(a===void 0){var o=n.get(f),c=o==null?void 0:o.v;if(o!==void 0&&c!==O)return{enumerable:!0,configurable:!0,value:c,writable:!0}}return a},has(u,f){var c;if(f===Pt)return!0;var a=n.get(f),_=a!==void 0&&a.v!==O||Reflect.has(u,f);if(a!==void 0||$!==null&&(!_||(c=et(u,f))!=null&&c.writable)){a===void 0&&(a=i(()=>L(_?rt(u[f]):O)),n.set(f,a));var o=k(a);if(o===O)return!1}return _},set(u,f,a,_){var g;var o=n.get(f),c=f in u;if(r&&f==="length")for(var v=a;v<o.v;v+=1){var y=n.get(v+"");y!==void 0?S(y,O):v in u&&(y=i(()=>L(O)),n.set(v+"",y))}o===void 0?(!c||(g=et(u,f))!=null&&g.writable)&&(o=i(()=>L(void 0)),S(o,i(()=>rt(a))),n.set(f,o)):(c=o.v!==O,S(o,i(()=>rt(a))));var m=Reflect.getOwnPropertyDescriptor(u,f);if(m!=null&&m.set&&m.set.call(_,a),!c){if(r&&typeof f=="string"){var Q=n.get("length"),X=Number(f);Number.isInteger(X)&&X>=Q.v&&S(Q,X+1)}Lt(s)}return!0},ownKeys(u){k(s);var f=Reflect.ownKeys(u).filter(o=>{var c=n.get(o);return c===void 0||c.v!==O});for(var[a,_]of n)_.v!==O&&!(a in u)&&f.push(a);return f},setPrototypeOf(){sn()}})}function Lt(t,e=1){S(t,t.v+e)}var re,se,le,ie;function Mt(){if(re===void 0){re=window,se=/Firefox/.test(navigator.userAgent);var t=Element.prototype,e=Node.prototype,n=Text.prototype;le=et(e,"firstChild").get,ie=et(e,"nextSibling").get,Qt(t)&&(t.__click=void 0,t.__className=void 0,t.__attributes=null,t.__style=void 0,t.__e=void 0),Qt(n)&&(n.__t=void 0)}}function pt(t=""){return document.createTextNode(t)}function Et(t){return le.call(t)}function ft(t){return ie.call(t)}function st(t,e){if(!M)return Et(t);var n=Et(E);if(n===null)n=E.appendChild(pt());else if(e&&n.nodeType!==3){var r=pt();return n==null||n.before(r),W(r),r}return W(n),n}function jt(t,e=1,n=!1){let r=M?E:t;for(var s;e--;)s=r,r=ft(r);if(!M)return r;var l=r==null?void 0:r.nodeType;if(n&&l!==3){var i=pt();return r===null?s==null||s.after(i):r.before(i),W(i),i}return W(r),r}function fn(t){t.textContent=""}function ue(t){return t===this.v}function an(t,e){return t!=t?e==e:t!==e||t!==null&&typeof t=="object"||typeof t=="function"}function on(t){return!an(t,this.v)}function fe(t){var e=F|B,n=h!==null&&(h.f&F)!==0?h:null;return $===null||n!==null&&(n.f&A)!==0?e|=A:$.f|=ee,{ctx:T,deps:null,effects:null,equals:ue,f:e,fn:t,reactions:null,rv:0,v:null,wv:0,parent:n??$}}function ae(t){var e=t.effects;if(e!==null){t.effects=null;for(var n=0;n<e.length;n+=1)V(e[n])}}function cn(t){for(var e=t.parent;e!==null;){if((e.f&F)===0)return e;e=e.parent}return null}function oe(t){var e,n=$;lt(cn(t));try{ae(t),e=Ee(t)}finally{lt(n)}return e}function ce(t){var e=oe(t),n=(J||(t.f&A)!==0)&&t.deps!==null?G:D;q(t,n),t.equals(e)||(t.v=e,t.wv=ge())}function _n(t){$===null&&h===null&&tn(),h!==null&&(h.f&A)!==0&&$===null&&Xe(),at&&Qe()}function vn(t,e){var n=e.last;n===null?e.last=e.first=t:(n.next=t,t.prev=n,e.last=t)}function z(t,e,n,r=!0){var s=$,l={ctx:T,deps:null,nodes_start:null,nodes_end:null,f:t|B,first:null,fn:e,last:null,next:null,parent:s,prev:null,teardown:null,transitions:null,wv:0};if(n)try{Yt(l),l.f|=Ge}catch(f){throw V(l),f}else e!==null&&Ht(l);var i=n&&l.deps===null&&l.first===null&&l.nodes_start===null&&l.teardown===null&&(l.f&(ee|$t))===0;if(!i&&r&&(s!==null&&vn(l,s),h!==null&&(h.f&F)!==0)){var u=h;(u.effects??(u.effects=[])).push(l)}return l}function dn(t){const e=z(ht,null,!1);return q(e,D),e.teardown=t,e}function hn(t){_n();var e=$!==null&&($.f&H)!==0&&T!==null&&!T.m;if(e){var n=T;(n.e??(n.e=[])).push({fn:t,effect:$,reaction:h})}else{var r=_e(t);return r}}function $n(t){const e=z(K,t,!0);return()=>{V(e)}}function wn(t){const e=z(K,t,!0);return(n={})=>new Promise(r=>{n.outro?xn(e,()=>{V(e),r(void 0)}):(V(e),r(void 0))})}function _e(t){return z(te,t,!1)}function yn(t){return z(ht,t,!0)}function gn(t,e=[],n=fe){const r=e.map(n);return mn(()=>t(...r.map(k)))}function mn(t,e=0){return z(ht|Dt|e,t,!0)}function pn(t,e=!0){return z(ht|H,t,!0,e)}function ve(t){var e=t.teardown;if(e!==null){const n=at,r=h;we(!0),U(null);try{e.call(null)}finally{we(n),U(r)}}}function de(t,e=!1){var n=t.first;for(t.first=t.last=null;n!==null;){var r=n.next;(n.f&K)!==0?n.parent=null:V(n,e),n=r}}function En(t){for(var e=t.first;e!==null;){var n=e.next;(e.f&H)===0&&V(e),e=n}}function V(t,e=!0){var n=!1;(e||(t.f&ze)!==0)&&t.nodes_start!==null&&(bn(t.nodes_start,t.nodes_end),n=!0),de(t,e&&!n),At(t,0),q(t,gt);var r=t.transitions;if(r!==null)for(const l of r)l.stop();ve(t);var s=t.parent;s!==null&&s.first!==null&&he(t),t.next=t.prev=t.teardown=t.ctx=t.deps=t.fn=t.nodes_start=t.nodes_end=null}function bn(t,e){for(;t!==null;){var n=t===e?null:ft(t);t.remove(),t=n}}function he(t){var e=t.parent,n=t.prev,r=t.next;n!==null&&(n.next=r),r!==null&&(r.prev=n),e!==null&&(e.first===t&&(e.first=r),e.last===t&&(e.last=n))}function xn(t,e){var n=[];$e(t,n,!0),kn(n,()=>{V(t),e&&e()})}function kn(t,e){var n=t.length;if(n>0){var r=()=>--n||e();for(var s of t)s.out(r)}else e()}function $e(t,e,n){if((t.f&yt)===0){if(t.f^=yt,t.transitions!==null)for(const i of t.transitions)(i.is_global||n)&&e.push(i);for(var r=t.first;r!==null;){var s=r.next,l=(r.f&We)!==0||(r.f&H)!==0;$e(r,e,l?n:!1),r=s}}}let qt=[],Bt=[];function Tn(){var t=qt;qt=[],Xt(t)}function Nn(){var t=Bt;Bt=[],Xt(t)}function On(){qt.length>0&&Tn(),Bt.length>0&&Nn()}let bt=!1,xt=!1,kt=null,Z=!1,at=!1;function we(t){at=t}let ot=[],tr=[],h=null,j=!1;function U(t){h=t}let $=null;function lt(t){$=t}let b=null;function An(t){h!==null&&h.f&It&&(b===null?b=[t]:b.push(t))}let x=null,R=0,I=null;function Rn(t){I=t}let ye=1,Tt=0,J=!1;function ge(){return++ye}function Nt(t){var o;var e=t.f;if((e&B)!==0)return!0;if((e&G)!==0){var n=t.deps,r=(e&A)!==0;if(n!==null){var s,l,i=(e&wt)!==0,u=r&&$!==null&&!J,f=n.length;if(i||u){var a=t,_=a.parent;for(s=0;s<f;s++)l=n[s],(i||!((o=l==null?void 0:l.reactions)!=null&&o.includes(a)))&&(l.reactions??(l.reactions=[])).push(a);i&&(a.f^=wt),u&&_!==null&&(_.f&A)===0&&(a.f^=A)}for(s=0;s<f;s++)if(l=n[s],Nt(l)&&ce(l),l.wv>t.wv)return!0}(!r||$!==null&&!J)&&q(t,D)}return!1}function Sn(t,e){for(var n=e;n!==null;){if((n.f&$t)!==0)try{n.fn(t);return}catch{n.f^=$t}n=n.parent}throw bt=!1,t}function me(t){return(t.f&gt)===0&&(t.parent===null||(t.parent.f&$t)===0)}function Ot(t,e,n,r){if(bt){if(n===null&&(bt=!1),me(e))throw t;return}if(n!==null&&(bt=!0),Sn(t,e),me(e))throw t}function pe(t,e,n=!0){var r=t.reactions;if(r!==null)for(var s=0;s<r.length;s++){var l=r[s];b!=null&&b.includes(t)||((l.f&F)!==0?pe(l,e,!1):e===l&&(n?q(l,B):(l.f&D)!==0&&q(l,G),Ht(l)))}}function Ee(t){var v;var e=x,n=R,r=I,s=h,l=J,i=b,u=T,f=j,a=t.f;x=null,R=0,I=null,J=(a&A)!==0&&(j||!Z||h===null),h=(a&(H|K))===0?t:null,b=null,Oe(t.ctx),j=!1,Tt++,t.f|=It;try{var _=(0,t.fn)(),o=t.deps;if(x!==null){var c;if(At(t,R),o!==null&&R>0)for(o.length=R+x.length,c=0;c<x.length;c++)o[R+c]=x[c];else t.deps=o=x;if(!J)for(c=R;c<o.length;c++)((v=o[c]).reactions??(v.reactions=[])).push(t)}else o!==null&&R<o.length&&(At(t,R),o.length=R);if(Se()&&I!==null&&!j&&o!==null&&(t.f&(F|G|B))===0)for(c=0;c<I.length;c++)pe(I[c],t);return s!==null&&s!==t&&(Tt++,I!==null&&(r===null?r=I:r.push(...I))),_}finally{x=e,R=n,I=r,h=s,J=l,b=i,Oe(u),j=f,t.f^=It}}function Cn(t,e){let n=e.reactions;if(n!==null){var r=He.call(n,t);if(r!==-1){var s=n.length-1;s===0?n=e.reactions=null:(n[r]=n[s],n.pop())}}n===null&&(e.f&F)!==0&&(x===null||!x.includes(e))&&(q(e,G),(e.f&(A|wt))===0&&(e.f^=wt),ae(e),At(e,0))}function At(t,e){var n=t.deps;if(n!==null)for(var r=e;r<n.length;r++)Cn(t,n[r])}function Yt(t){var e=t.f;if((e&gt)===0){q(t,D);var n=$,r=T,s=Z;$=t,Z=!0;try{(e&Dt)!==0?En(t):de(t),ve(t);var l=Ee(t);t.teardown=typeof l=="function"?l:null,t.wv=ye;var i=t.deps,u;zt&&un&&t.f&B}catch(f){Ot(f,t,n,r||t.ctx)}finally{Z=s,$=n}}}function Dn(){try{en()}catch(t){if(kt!==null)Ot(t,kt,null);else throw t}}function be(){var t=Z;try{var e=0;for(Z=!0;ot.length>0;){e++>1e3&&Dn();var n=ot,r=n.length;ot=[];for(var s=0;s<r;s++){var l=Pn(n[s]);In(l)}ct.clear()}}finally{xt=!1,Z=t,kt=null}}function In(t){var e=t.length;if(e!==0)for(var n=0;n<e;n++){var r=t[n];if((r.f&(gt|yt))===0)try{Nt(r)&&(Yt(r),r.deps===null&&r.first===null&&r.nodes_start===null&&(r.teardown===null?he(r):r.fn=null))}catch(s){Ot(s,r,null,r.ctx)}}}function Ht(t){xt||(xt=!0,queueMicrotask(be));for(var e=kt=t;e.parent!==null;){e=e.parent;var n=e.f;if((n&(K|H))!==0){if((n&D)===0)return;e.f^=D}}ot.push(e)}function Pn(t){for(var e=[],n=t;n!==null;){var r=n.f,s=(r&(H|K))!==0,l=s&&(r&D)!==0;if(!l&&(r&yt)===0){if((r&te)!==0)e.push(n);else if(s)n.f^=D;else try{Nt(n)&&Yt(n)}catch(f){Ot(f,n,null,n.ctx)}var i=n.first;if(i!==null){n=i;continue}}var u=n.parent;for(n=n.next;n===null&&u!==null;)n=u.next,u=u.parent}return e}function Rt(t){for(var e;;){if(On(),ot.length===0)return e;xt=!0,be()}}function k(t){var e=t.f,n=(e&F)!==0;if(h!==null&&!j){if(!(b!=null&&b.includes(t))){var r=h.deps;t.rv<Tt&&(t.rv=Tt,x===null&&r!==null&&r[R]===t?R++:x===null?x=[t]:(!J||!x.includes(t))&&x.push(t))}}else if(n&&t.deps===null&&t.effects===null){var s=t,l=s.parent;l!==null&&(l.f&A)===0&&(s.f^=A)}return n&&(s=t,Nt(s)&&ce(s)),at&&ct.has(t)?ct.get(t):t.v}function xe(t){var e=j;try{return j=!0,t()}finally{j=e}}const Fn=-7169;function q(t,e){t.f=t.f&Fn|e}const ct=new Map;function ke(t,e){var n={f:0,v:t,reactions:null,equals:ue,rv:0,wv:0};return n}function L(t,e){const n=ke(t);return An(n),n}function Te(t,e=!1){const n=ke(t);return e||(n.equals=on),n}function S(t,e,n=!1){h!==null&&!j&&Se()&&(h.f&(F|Dt))!==0&&!(b!=null&&b.includes(t))&&ln();let r=n?rt(e):e;return Ln(t,r)}function Ln(t,e){if(!t.equals(e)){var n=t.v;at?ct.set(t,e):ct.set(t,n),t.v=e,(t.f&F)!==0&&((t.f&B)!==0&&oe(t),q(t,(t.f&A)===0?D:G)),t.wv=ge(),Ne(t,B),$!==null&&($.f&D)!==0&&($.f&(H|K))===0&&(I===null?Rn([t]):I.push(t))}return e}function Ne(t,e){var n=t.reactions;if(n!==null)for(var r=n.length,s=0;s<r;s++){var l=n[s],i=l.f;(i&B)===0&&(q(l,e),(i&(D|A))!==0&&((i&F)!==0?Ne(l,G):Ht(l)))}}let T=null;function Oe(t){T=t}function Ae(t,e=!1,n){var r=T={p:T,c:null,d:!1,e:null,m:!1,s:t,x:null,l:null};dn(()=>{r.d=!0})}function Re(t){const e=T;if(e!==null){t!==void 0&&(e.x=t);const i=e.e;if(i!==null){var n=$,r=h;e.e=null;try{for(var s=0;s<i.length;s++){var l=i[s];lt(l.effect),U(l.reaction),_e(l.fn)}}finally{lt(n),U(r)}}T=e.p,e.m=!0}return t||{}}function Se(){return!0}const Mn=["touchstart","touchmove"];function jn(t){return Mn.includes(t)}const qn=new Set,Ce=new Set;function St(t){var g;var e=this,n=e.ownerDocument,r=t.type,s=((g=t.composedPath)==null?void 0:g.call(t))||[],l=s[0]||t.target,i=0,u=t.__root;if(u){var f=s.indexOf(u);if(f!==-1&&(e===document||e===window)){t.__root=e;return}var a=s.indexOf(e);if(a===-1)return;f<=a&&(i=f)}if(l=s[i]||t.target,l!==e){dt(t,"currentTarget",{configurable:!0,get(){return l||n}});var _=h,o=$;U(null),lt(null);try{for(var c,v=[];l!==null;){var y=l.assignedSlot||l.parentNode||l.host||null;try{var m=l["__"+r];if(m!=null&&(!l.disabled||t.target===l))if(Zt(m)){var[Q,...X]=m;Q.apply(l,[t,...X])}else m.call(l,t)}catch(tt){c?v.push(tt):c=tt}if(t.cancelBubble||y===e||y===null)break;l=y}if(c){for(let tt of v)queueMicrotask(()=>{throw tt});throw c}}finally{t.__root=e,delete t.currentTarget,U(_),lt(o)}}}function Bn(t){var e=document.createElement("template");return e.innerHTML=t,e.content}function Vt(t,e){var n=$;n.nodes_start===null&&(n.nodes_start=t,n.nodes_end=e)}function Yn(t,e){var n=(e&w)!==0,r,s=!t.startsWith("<!>");return()=>{if(M)return Vt(E,null),E;r===void 0&&(r=Bn(s?t:"<!>"+t),r=Et(r));var l=n||se?document.importNode(r,!0):r.cloneNode(!0);return Vt(l,l),l}}function De(t,e){if(M){$.nodes_end=E,ne();return}t!==null&&t.before(e)}function Ut(t,e){var n=e==null?"":typeof e=="object"?e+"":e;n!==(t.__t??(t.__t=t.nodeValue))&&(t.__t=n,t.nodeValue=n+"")}function Ie(t,e){return Pe(t,e)}function Hn(t,e){Mt(),e.intro=e.intro??!1;const n=e.target,r=M,s=E;try{for(var l=Et(n);l&&(l.nodeType!==8||l.data!==p);)l=ft(l);if(!l)throw ut;mt(!0),W(l),ne();const i=Pe(t,{...e,anchor:l});if(E===null||E.nodeType!==8||E.data!==_t)throw Ft(),ut;return mt(!1),i}catch(i){if(i===ut)return e.recover===!1&&nn(),Mt(),fn(n),mt(!1),Ie(t,e);throw i}finally{mt(r),W(s)}}const it=new Map;function Pe(t,{target:e,anchor:n,props:r={},events:s,context:l,intro:i=!0}){Mt();var u=new Set,f=o=>{for(var c=0;c<o.length;c++){var v=o[c];if(!u.has(v)){u.add(v);var y=jn(v);e.addEventListener(v,St,{passive:y});var m=it.get(v);m===void 0?(document.addEventListener(v,St,{passive:y}),it.set(v,1)):it.set(v,m+1)}}};f(Ve(qn)),Ce.add(f);var a=void 0,_=wn(()=>{var o=n??e.appendChild(pt());return pn(()=>{if(l){Ae({});var c=T;c.c=l}s&&(r.$$events=s),M&&Vt(o,null),a=t(o,r)||{},M&&($.nodes_end=E),l&&Re()}),()=>{var y;for(var c of u){e.removeEventListener(c,St);var v=it.get(c);--v===0?(document.removeEventListener(c,St),it.delete(c)):it.set(c,v)}Ce.delete(f),o!==n&&((y=o.parentNode)==null||y.removeChild(o))}});return Jt.set(a,_),a}let Jt=new WeakMap;function Vn(t,e){const n=Jt.get(t);return n?(Jt.delete(t),n(e)):Promise.resolve()}function Un(t){T===null&&Ye(),hn(()=>{const e=xe(t);if(typeof e=="function")return e})}function Fe(t){var e;return((e=t.ctx)==null?void 0:e.d)??!1}function Kt(t,e,n,r){var s;s=t[e];var l=r,i=!0,u=!1,f=()=>(u=!0,i&&(i=!1,l=r),l),a;a=()=>{var v=t[e];return v===void 0?f():(i=!0,u=!1,v)};var _=!1,o=Te(s),c=fe(()=>{var v=a(),y=k(o);return _?(_=!1,y):o.v=v});return function(v,y){if(arguments.length>0){const m=y?k(c):v;if(!c.equals(m)){if(_=!0,S(o,m),u&&l!==void 0&&(l=m),Fe(c))return v;xe(()=>k(c))}return v}return Fe(c)?c.v:k(c)}}function Jn(t){return new Kn(t)}class Kn{constructor(e){Gt(this,Y);Gt(this,P);var l;var n=new Map,r=(i,u)=>{var f=Te(u);return n.set(i,f),f};const s=new Proxy({...e.props||{},$$events:{}},{get(i,u){return k(n.get(u)??r(u,Reflect.get(i,u)))},has(i,u){return u===Ze?!0:(k(n.get(u)??r(u,Reflect.get(i,u))),Reflect.has(i,u))},set(i,u,f){return S(n.get(u)??r(u,f),f),Reflect.set(i,u,f)}});Wt(this,P,(e.hydrate?Hn:Ie)(e.component,{target:e.target,anchor:e.anchor,props:s,context:e.context,intro:e.intro??!1,recover:e.recover})),(!((l=e==null?void 0:e.props)!=null&&l.$$host)||e.sync===!1)&&Rt(),Wt(this,Y,s.$$events);for(const i of Object.keys(N(this,P)))i==="$set"||i==="$destroy"||i==="$on"||dt(this,i,{get(){return N(this,P)[i]},set(u){N(this,P)[i]=u},enumerable:!0});N(this,P).$set=i=>{Object.assign(s,i)},N(this,P).$destroy=()=>{Vn(N(this,P))}}$set(e){N(this,P).$set(e)}$on(e,n){N(this,Y)[e]=N(this,Y)[e]||[];const r=(...s)=>n.call(this,...s);return N(this,Y)[e].push(r),()=>{N(this,Y)[e]=N(this,Y)[e].filter(s=>s!==r)}}$destroy(){N(this,P).$destroy()}}Y=new WeakMap,P=new WeakMap;let Le;typeof HTMLElement=="function"&&(Le=class extends HTMLElement{constructor(e,n,r){super();C(this,"$$ctor");C(this,"$$s");C(this,"$$c");C(this,"$$cn",!1);C(this,"$$d",{});C(this,"$$r",!1);C(this,"$$p_d",{});C(this,"$$l",{});C(this,"$$l_u",new Map);C(this,"$$me");this.$$ctor=e,this.$$s=n,r&&this.attachShadow({mode:"open"})}addEventListener(e,n,r){if(this.$$l[e]=this.$$l[e]||[],this.$$l[e].push(n),this.$$c){const s=this.$$c.$on(e,n);this.$$l_u.set(n,s)}super.addEventListener(e,n,r)}removeEventListener(e,n,r){if(super.removeEventListener(e,n,r),this.$$c){const s=this.$$l_u.get(n);s&&(s(),this.$$l_u.delete(n))}}async connectedCallback(){if(this.$$cn=!0,!this.$$c){let e=function(s){return l=>{const i=document.createElement("slot");s!=="default"&&(i.name=s),De(l,i)}};if(await Promise.resolve(),!this.$$cn||this.$$c)return;const n={},r=Gn(this);for(const s of this.$$s)s in r&&(s==="default"&&!this.$$d.children?(this.$$d.children=e(s),n.default=!0):n[s]=e(s));for(const s of this.attributes){const l=this.$$g_p(s.name);l in this.$$d||(this.$$d[l]=Ct(l,s.value,this.$$p_d,"toProp"))}for(const s in this.$$p_d)!(s in this.$$d)&&this[s]!==void 0&&(this.$$d[s]=this[s],delete this[s]);this.$$c=Jn({component:this.$$ctor,target:this.shadowRoot||this,props:{...this.$$d,$$slots:n,$$host:this}}),this.$$me=$n(()=>{yn(()=>{var s;this.$$r=!0;for(const l of vt(this.$$c)){if(!((s=this.$$p_d[l])!=null&&s.reflect))continue;this.$$d[l]=this.$$c[l];const i=Ct(l,this.$$d[l],this.$$p_d,"toAttribute");i==null?this.removeAttribute(this.$$p_d[l].attribute||l):this.setAttribute(this.$$p_d[l].attribute||l,i)}this.$$r=!1})});for(const s in this.$$l)for(const l of this.$$l[s]){const i=this.$$c.$on(s,l);this.$$l_u.set(l,i)}this.$$l={}}}attributeChangedCallback(e,n,r){var s;this.$$r||(e=this.$$g_p(e),this.$$d[e]=Ct(e,r,this.$$p_d,"toProp"),(s=this.$$c)==null||s.$set({[e]:this.$$d[e]}))}disconnectedCallback(){this.$$cn=!1,Promise.resolve().then(()=>{!this.$$cn&&this.$$c&&(this.$$c.$destroy(),this.$$me(),this.$$c=void 0)})}$$g_p(e){return vt(this.$$p_d).find(n=>this.$$p_d[n].attribute===e||!this.$$p_d[n].attribute&&n.toLowerCase()===e)||e}});function Ct(t,e,n,r){var l;const s=(l=n[t])==null?void 0:l.type;if(e=s==="Boolean"&&typeof e!="boolean"?e!=null:e,!r||!n[t])return e;if(r==="toAttribute")switch(s){case"Object":case"Array":return e==null?null:JSON.stringify(e);case"Boolean":return e?"":null;case"Number":return e??null;default:return e}else switch(s){case"Object":case"Array":return e&&JSON.parse(e);case"Boolean":return e;case"Number":return e!=null?+e:e;default:return e}}function Gn(t){const e={};return t.childNodes.forEach(n=>{e[n.slot||"default"]=!0}),e}function Wn(t,e,n,r,s,l){let i=class extends Le{constructor(){super(t,n,s),this.$$p_d=e}static get observedAttributes(){return vt(e).map(u=>(e[u].attribute||u).toLowerCase())}};return vt(e).forEach(u=>{dt(i.prototype,u,{get(){return this.$$c&&u in this.$$c?this.$$c[u]:this.$$d[u]},set(f){var o;f=Ct(u,f,e),this.$$d[u]=f;var a=this.$$c;if(a){var _=(o=et(a,u))==null?void 0:o.get;_?a[u]=f:a.$set({[u]:f})}}})}),r.forEach(u=>{dt(i.prototype,u,{get(){var f;return(f=this.$$c)==null?void 0:f[u]}})}),t.element=i,i}class zn{constructor(e,n){C(this,"host");C(this,"token");this.host=e,this.token=n}async getJSON(e){const n=`${this.host}/api/v1.0${e}`;return await fetch(n,{method:"GET",headers:{Authorization:`Bearer ${this.token}`}})}}var Zn=Yn('<div class="document-layout"> <div class="document-layout__header"></div> <div class="document-layout__body"><div class="document-layout__title d-flex"><div class="document-layout__title__content"> </div></div> <hr> <div class="document-layout__abstract"><div class="document-layout__separator-label">Abstract</div> <div class="document-layout__abstract__content"> </div></div></div></div>');function Me(t,e){Ae(e,!0);let n=Kt(e,"host"),r=Kt(e,"token"),s=Kt(e,"contextId"),l=new zn(n(),r()),i=L(null),u=L(!0),f=L(null);Un(async()=>{try{const g=await l.getJSON(`/context/${s()}`);if(!g.ok)throw new Error(g.statusText);S(i,await g.json(),!0)}catch(g){S(f,g,!0),console.log(k(f))}finally{S(u,!1)}});var a=Zn(),_=st(a),o=jt(_,3),c=st(o),v=st(c),y=st(v,!0);nt(v),nt(c);var m=jt(c,4),Q=jt(st(m),2),X=st(Q,!0);return nt(Q),nt(m),nt(o),nt(a),gn(()=>{var g,tt;Ut(_,`${k(u)?"Loading":""} `),Ut(y,(g=k(i))==null?void 0:g.hyperdata.title),Ut(X,(tt=k(i))==null?void 0:tt.hyperdata.abstract)}),De(t,a),Re({get host(){return n()},set host(g){n(g),Rt()},get token(){return r()},set token(g){r(g),Rt()},get contextId(){return s()},set contextId(g){s(g),Rt()}})}customElements.define("ggtx-document-layout",Wn(Me,{host:{},token:{},contextId:{}},[],[],!1)),customElements.define("ggtx-document-layout-embed",Me)});

src/Gargantext/Components/Document/Layout.purs

@@ -22,9 +22,10 @@ import Gargantext.Components.NgramsTable.AutoSync (useAutoSync)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Core.NgramsTable.Functions (addNewNgramA, applyNgramsPatches, coreDispatch, findNgramRoot, setTermListA, computeCache)
 import Gargantext.Core.NgramsTable.Types (CoreAction(..), NgramsTerm, Versioned(..), replace)
+import Gargantext.Ends (Backend(..))
 import Gargantext.Hooks.LinkHandler (useLinkHandler)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Sessions (Session)
+import Gargantext.Sessions (Session(..))
 import Gargantext.Utils as U
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -102,6 +103,7 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt
           , document: NodePoly { hyperdata: Document doc }
           }
     , path
+    , session
     , sideControlsSlot
     }
     _ = do
@@ -197,6 +199,8 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt
     --   let NgramsTable { ngrams_repo_elements: nre' } = ngrams'
     --   here.log2 "[layoutWithContextNgrams] ngrams (after apply patches)" $ A.fromFoldable $ Map.keys nre'
 
+    let Session { backend: Backend { baseUrl }, token } = session
+
     -- | Render
     -- |
     pure $
@@ -206,9 +210,15 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt
         --[ H.pre { rows: 30 } [
         --    H.text (stringifyWithIndent 2 (encodeJson (fst state)))
         --  ] ] <>
-        [
-          -- Header
-          H.div
+        [ R2.ggtxDocumentLayout
+            { contextId: path.nodeId
+            , host: baseUrl
+            , token
+            }
+            []
+
+        -- Header
+        , H.div
             { className: "document-layout__header" }
             [ H.div
                 { className: "document-layout__main-controls" }

src/Gargantext/Utils/Reactix.purs

@@ -289,6 +289,9 @@ frameset = createDOM "frameset"
 keyCode :: forall event. event -> Effect Int
 keyCode = runEffectFn1 _keyCode
 
+ggtxDocumentLayout :: ElemFactory
+ggtxDocumentLayout = createDOM "ggtx-document-layout"
+
 foreign import _keyCode
   :: forall e. EffectFn1 e Int