diff --git a/src/coll.js b/src/coll.js index 0084771..6201865 100644 --- a/src/coll.js +++ b/src/coll.js @@ -18,7 +18,6 @@ import fasRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg'; import fasMenuV from '@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg'; import Split from 'split.js' -//import { defineCustomElements as defineSplitMe } from 'split-me/loader'; const RWP_SCHEME = "search://"; @@ -178,8 +177,10 @@ class Coll extends LitElement this.splitter = Split([pages, replay], opts); } - } else { - this.splitter.destroy(); + } else if (this.splitter) { + try { + this.splitter.destroy(); + } catch (e) {} this.splitter = null; } } @@ -445,9 +446,13 @@ class Coll extends LitElement cursor: col-resize; } - wr-page-view, wr-coll-replay { + wr-coll-replay { width: 100%; } + + wr-page-view.full-pages { + width: 100% !important; + } `; } @@ -668,7 +673,7 @@ class Coll extends LitElement .url="${this.tabData.url || ""}" .ts="${this.tabData.ts || ""}" @coll-tab-nav="${this.onCollTabNav}" id="pages" - class="${isSidebar ? 'sidebar' : (isPages ? '' : 'is-hidden')}"> + class="${isSidebar ? 'sidebar' : (isPages ? 'full-pages' : 'is-hidden')}"> ${isReplay ? html` diff --git a/ui.js b/ui.js index 8dccc24..2aa9a6b 100644 --- a/ui.js +++ b/ui.js @@ -635,7 +635,7 @@ const re=new WeakMap,oe=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG `} - `}onCopy(e,t){return e.preventDefault(),e.stopPropagation(),navigator.clipboard.writeText(t),!1}}customElements.define("wr-coll-index",Ve);var Ke=i(97),Ze=i.n(Ke),Ye=i(58),Je=i.n(Ye),Qe=i(98),Xe=i.n(Qe),et=i(99),tt=i.n(et),it=i(59),at=i.n(it),rt=i(60),ot=i.n(rt),nt=i(61),st=i.n(nt),lt=i(100),ct=i.n(lt),dt="undefined"!=typeof window?window:null,ht=null===dt,ft=ht?void 0:dt.document,bt=function(){return!1},ut=ht?"calc":["","-webkit-","-moz-","-o-"].filter((function(e){var t=ft.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length})).shift()+"calc",mt=function(e){return"string"==typeof e||e instanceof String},pt=function(e){if(mt(e)){var t=ft.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},gt=function(e,t,i){var a=e[t];return void 0!==a?a:i},vt=function(e,t,i,a){if(t){if("end"===a)return 0;if("center"===a)return e/2}else if(i){if("start"===a)return 0;if("center"===a)return e/2}return e},wt=function(e,t){var i=ft.createElement("div");return i.className="gutter gutter-"+t,i},xt=function(e,t,i){var a={};return mt(t)?a[e]=t:a[e]=ut+"("+t+"% - "+i+"px)",a},kt=function(e,t){var i;return(i={})[e]=t+"px",i},yt=function(e,t){if(void 0===t&&(t={}),ht)return{};var i,a,r,o,n,s,l=e;Array.from&&(l=Array.from(l));var c=pt(l[0]).parentNode,d=getComputedStyle?getComputedStyle(c):null,h=d?d.flexDirection:null,f=gt(t,"sizes")||l.map((function(){return 100/l.length})),b=gt(t,"minSize",100),u=Array.isArray(b)?b:l.map((function(){return b})),m=gt(t,"expandToMin",!1),p=gt(t,"gutterSize",10),g=gt(t,"gutterAlign","center"),v=gt(t,"snapOffset",30),w=gt(t,"dragInterval",1),x=gt(t,"direction","horizontal"),k=gt(t,"cursor","horizontal"===x?"col-resize":"row-resize"),y=gt(t,"gutter",wt),S=gt(t,"elementStyle",xt),z=gt(t,"gutterStyle",kt);function $(e,t,a,r){var o=S(i,t,a,r);Object.keys(o).forEach((function(t){e.style[t]=o[t]}))}function _(){return s.map((function(e){return e.size}))}function C(e){return"touches"in e?e.touches[0][a]:e[a]}function P(e){var t=s[this.a],i=s[this.b],a=t.size+i.size;t.size=e/this.size*a,i.size=a-e/this.size*a,$(t.element,t.size,this._b,t.i),$(i.element,i.size,this._c,i.i)}function L(e){var i,a=s[this.a],r=s[this.b];this.dragging&&(i=C(e)-this.start+(this._b-this.dragOffset),w>1&&(i=Math.round(i/w)*w),i<=a.minSize+v+this._b?i=a.minSize+this._b:i>=this.size-(r.minSize+v+this._c)&&(i=this.size-(r.minSize+this._c)),P.call(this,i),gt(t,"onDrag",bt)(_()))}function T(){var e=s[this.a].element,t=s[this.b].element,a=e.getBoundingClientRect(),n=t.getBoundingClientRect();this.size=a[i]+n[i]+this._b+this._c,this.start=a[r],this.end=a[o]}function D(e){var t=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e);if(!t)return null;var i=e[n];return 0===i?null:i-="horizontal"===x?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===t)return e;if(u.reduce((function(e,t){return e+t}),0)>t)return e;var i=0,a=[],r=e.map((function(r,o){var n=t*r/100,s=vt(p,0===o,o===e.length-1,g),l=u[o]+s;return n0&&a[r]-i>0){var n=Math.min(i,a[r]-i);i-=n,o=e-n}return o/t*100}))}function E(){var e=s[this.a].element,i=s[this.b].element;this.dragging&>(t,"onDragEnd",bt)(_()),this.dragging=!1,dt.removeEventListener("mouseup",this.stop),dt.removeEventListener("touchend",this.stop),dt.removeEventListener("touchcancel",this.stop),dt.removeEventListener("mousemove",this.move),dt.removeEventListener("touchmove",this.move),this.stop=null,this.move=null,e.removeEventListener("selectstart",bt),e.removeEventListener("dragstart",bt),i.removeEventListener("selectstart",bt),i.removeEventListener("dragstart",bt),e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",i.style.userSelect="",i.style.webkitUserSelect="",i.style.MozUserSelect="",i.style.pointerEvents="",this.gutter.style.cursor="",this.parent.style.cursor="",ft.body.style.cursor=""}function A(e){if(!("button"in e)||0===e.button){var i=s[this.a].element,a=s[this.b].element;this.dragging||gt(t,"onDragStart",bt)(_()),e.preventDefault(),this.dragging=!0,this.move=L.bind(this),this.stop=E.bind(this),dt.addEventListener("mouseup",this.stop),dt.addEventListener("touchend",this.stop),dt.addEventListener("touchcancel",this.stop),dt.addEventListener("mousemove",this.move),dt.addEventListener("touchmove",this.move),i.addEventListener("selectstart",bt),i.addEventListener("dragstart",bt),a.addEventListener("selectstart",bt),a.addEventListener("dragstart",bt),i.style.userSelect="none",i.style.webkitUserSelect="none",i.style.MozUserSelect="none",i.style.pointerEvents="none",a.style.userSelect="none",a.style.webkitUserSelect="none",a.style.MozUserSelect="none",a.style.pointerEvents="none",this.gutter.style.cursor=k,this.parent.style.cursor=k,ft.body.style.cursor=k,T.call(this),this.dragOffset=C(e)-this.end}}"horizontal"===x?(i="width",a="clientX",r="left",o="right",n="clientWidth"):"vertical"===x&&(i="height",a="clientY",r="top",o="bottom",n="clientHeight"),f=D(f);var I=[];function U(e){var t=e.i===I.length,i=t?I[e.i-1]:I[e.i];T.call(i);var a=t?i.size-e.minSize-i._c:e.minSize+i._b;P.call(i,a)}return(s=l.map((function(e,t){var a,r={element:pt(e),size:f[t],minSize:u[t],i:t};if(t>0&&((a={a:t-1,b:t,dragging:!1,direction:x,parent:c})._b=vt(p,t-1==0,!1,g),a._c=vt(p,!1,t===l.length-1,g),"row-reverse"===h||"column-reverse"===h)){var o=a.a;a.a=a.b,a.b=o}if(t>0){var n=y(t,x,r.element);!function(e,t,a){var r=z(i,t,a);Object.keys(r).forEach((function(t){e.style[t]=r[t]}))}(n,p,t),a._a=A.bind(a),n.addEventListener("mousedown",a._a),n.addEventListener("touchstart",a._a),c.insertBefore(n,r.element),a.gutter=n}return $(r.element,r.size,vt(p,0===t,t===l.length-1,g),t),t>0&&I.push(a),r}))).forEach((function(e){var t=e.element.getBoundingClientRect()[i];t0){var a=I[i-1],r=s[a.a],o=s[a.b];r.size=t[i-1],o.size=e,$(r.element,r.size,a._b,r.i),$(o.element,o.size,a._c,o.i)}}))},getSizes:_,collapse:function(e){U(s[e])},destroy:function(e,t){I.forEach((function(a){if(!0!==t?a.parent.removeChild(a.gutter):(a.gutter.removeEventListener("mousedown",a._a),a.gutter.removeEventListener("touchstart",a._a)),!0!==e){var r=S(i,a.a.size,a._b);Object.keys(r).forEach((function(e){s[a.a].element.style[e]="",s[a.b].element.style[e]=""}))}}))},parent:c,pairs:I}};class St extends ae{constructor(){super(),this.sourceUrl=null,this.inited=!1,this.isLoading=!1,this.baseApiPrefix="./wabac/api",this.baseReplayPrefix="./wabac",this.apiPrefix="",this.replayPrefix="",this.coll="",this.collInfo=null,this._replaceLoc=!1,this._locUpdateNeeded=!1,this._locationHash="",this.tabData={},this.url="",this.ts="",this.tabNames=["pages","story","resources","replay"],this.menuActive=!1,this.hasStory=!1,this.editable=!1,this.showSidebar="1"===localStorage.getItem("pages:showSidebar"),this.splitter=null}static get properties(){return{inited:{type:Boolean},sourceUrl:{type:String},loadInfo:{type:Object,attribute:!1},showSidebar:{type:Boolean},collInfo:{type:Object,attribute:!1},coll:{type:String},hasStory:{type:Boolean},isLoading:{type:Boolean},tabData:{type:Object,attribute:!1},url:{type:String},ts:{type:String},isFullscreen:{type:Boolean},menuActive:{type:Boolean},embed:{type:String},editable:{type:Boolean}}}firstUpdated(){this.inited=!0,window.addEventListener("hashchange",e=>this.onHashChange(e)),this.addEventListener("fullscreenchange",e=>{this.isFullscreen=!!document.fullscreenElement})}updated(e){if(e.has("sourceUrl")&&this.doUpdateInfo(),e.has("tabData")){if(!this.collInfo||!this.collInfo.coll)return;Object.keys(this.tabData).forEach(e=>!this.tabData[e]&&delete this.tabData[e]);const t="#"+new URLSearchParams(this.tabData).toString();if("replay"!==this.tabData.view&&(this.url="search://"+decodeURIComponent(this._paramsToString(this.tabData))),t!==this._locationHash){if(this._locationHash=t,this._replaceLoc||0===Object.keys(e.get("tabData")).length){const e=new URL(window.location.href);e.hash=this._locationHash,window.history.replaceState({},"",e.href),this._replaceLoc=!1}else window.location.hash=this._locationHash;this.embed&&window.parent!==window&&window.parent.postMessage(this.tabData,"*")}this._locUpdateNeeded=!1}e.has("showSidebar")&&localStorage.setItem("pages:showSidebar",this.showSidebar?"1":"0"),(e.has("tabData")||e.has("showSidebar"))&&this.configureSplitter()}configureSplitter(){if("replay"===this.tabData.view&&this.showSidebar){const e=this.renderRoot.querySelector("wr-page-view"),t=this.renderRoot.querySelector("wr-coll-replay");if(e&&t&&!this.splitter){const i={sizes:[30,70],minSize:[300,300],gutterSize:4,onDragStart(){t.setDisablePointer(!0)},onDragEnd(){t.setDisablePointer(!1)}};this.splitter=yt([e,t],i)}}else this.splitter.destroy(),this.splitter=null}async doUpdateInfo(){let e=this.loadInfo&&this.loadInfo.customColl;if(!e){e=(await _e(this.sourceUrl)).coll}this.coll=e;const t=this.baseApiPrefix+"/"+e,i=this.baseReplayPrefix+"/"+e,a=await fetch(t+"?all=1");if(200!=a.status)return void(this.collInfo={});const r=await a.json();this.collInfo={apiPrefix:t,replayPrefix:i,coll:e,...r},this.collInfo.title||(this.collInfo.title=this.collInfo.filename),this.hasStory=this.collInfo.desc||this.collInfo.lists.length,this.dispatchEvent(new CustomEvent("coll-loaded",{detail:{collInfo:this.collInfo,alreadyLoaded:!0}})),this.onHashChange()}onCollLoaded(e){this.doUpdateInfo(),this.loadInfo=null,this.dispatchEvent(new CustomEvent("coll-loaded",{detail:{sourceUrl:this.sourceUrl,collInfo:this.collInfo}}))}onHashChange(e){const t=window.location.hash;if(t&&t!==this._locationHash&&(this.tabData=Object.fromEntries(new URLSearchParams(t.slice(1)).entries()),this._locationHash=t),this.collInfo.coll&&!this.tabNames.includes(this.tabData.view)){const e=this.hasStory?"story":this.collInfo.pages.length?"pages":"resources";this.tabData={...this.tabData,view:e}}this.hasStory||"story"!==this.tabData.view||(this.tabData.view="pages"),"replay"===this.tabData.view&&this.tabData.query&&(this.showSidebar=!0)}onTabClick(e){e.preventDefault();const t=e.currentTarget.getAttribute("href");return this.tabData={...this.tabData,view:t.slice(1)},!1}onCollTabNav(e){if(e.target.id===this.tabData.view)this.updateTabData(e.detail.data,e.detail.replaceLoc,!1);else if(this.showSidebar&&"pages"===e.target.id&&"replay"===this.tabData.view){if(!1===e.detail.data.showSidebar)return void(this.showSidebar=!1);this.updateTabData(e.detail.data,e.detail.replaceLoc,!0)}}updateTabData(e,t=!1,i=!1){this.tabData={...this.tabData,...e},this.tabData.url&&(this.url=this.tabData.url||""),this.tabData.ts&&(this.ts=this.tabData.ts||""),this._replaceLoc=!this._locUpdateNeeded&&t,this._locUpdateNeeded=!0}static get styles(){return ue(te` + `}onCopy(e,t){return e.preventDefault(),e.stopPropagation(),navigator.clipboard.writeText(t),!1}}customElements.define("wr-coll-index",Ve);var Ke=i(97),Ze=i.n(Ke),Ye=i(58),Je=i.n(Ye),Qe=i(98),Xe=i.n(Qe),et=i(99),tt=i.n(et),it=i(59),at=i.n(it),rt=i(60),ot=i.n(rt),nt=i(61),st=i.n(nt),lt=i(100),ct=i.n(lt),dt="undefined"!=typeof window?window:null,ht=null===dt,ft=ht?void 0:dt.document,bt=function(){return!1},ut=ht?"calc":["","-webkit-","-moz-","-o-"].filter((function(e){var t=ft.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length})).shift()+"calc",mt=function(e){return"string"==typeof e||e instanceof String},pt=function(e){if(mt(e)){var t=ft.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},gt=function(e,t,i){var a=e[t];return void 0!==a?a:i},vt=function(e,t,i,a){if(t){if("end"===a)return 0;if("center"===a)return e/2}else if(i){if("start"===a)return 0;if("center"===a)return e/2}return e},wt=function(e,t){var i=ft.createElement("div");return i.className="gutter gutter-"+t,i},xt=function(e,t,i){var a={};return mt(t)?a[e]=t:a[e]=ut+"("+t+"% - "+i+"px)",a},kt=function(e,t){var i;return(i={})[e]=t+"px",i},yt=function(e,t){if(void 0===t&&(t={}),ht)return{};var i,a,r,o,n,s,l=e;Array.from&&(l=Array.from(l));var c=pt(l[0]).parentNode,d=getComputedStyle?getComputedStyle(c):null,h=d?d.flexDirection:null,f=gt(t,"sizes")||l.map((function(){return 100/l.length})),b=gt(t,"minSize",100),u=Array.isArray(b)?b:l.map((function(){return b})),m=gt(t,"expandToMin",!1),p=gt(t,"gutterSize",10),g=gt(t,"gutterAlign","center"),v=gt(t,"snapOffset",30),w=gt(t,"dragInterval",1),x=gt(t,"direction","horizontal"),k=gt(t,"cursor","horizontal"===x?"col-resize":"row-resize"),y=gt(t,"gutter",wt),S=gt(t,"elementStyle",xt),z=gt(t,"gutterStyle",kt);function $(e,t,a,r){var o=S(i,t,a,r);Object.keys(o).forEach((function(t){e.style[t]=o[t]}))}function _(){return s.map((function(e){return e.size}))}function C(e){return"touches"in e?e.touches[0][a]:e[a]}function P(e){var t=s[this.a],i=s[this.b],a=t.size+i.size;t.size=e/this.size*a,i.size=a-e/this.size*a,$(t.element,t.size,this._b,t.i),$(i.element,i.size,this._c,i.i)}function L(e){var i,a=s[this.a],r=s[this.b];this.dragging&&(i=C(e)-this.start+(this._b-this.dragOffset),w>1&&(i=Math.round(i/w)*w),i<=a.minSize+v+this._b?i=a.minSize+this._b:i>=this.size-(r.minSize+v+this._c)&&(i=this.size-(r.minSize+this._c)),P.call(this,i),gt(t,"onDrag",bt)(_()))}function T(){var e=s[this.a].element,t=s[this.b].element,a=e.getBoundingClientRect(),n=t.getBoundingClientRect();this.size=a[i]+n[i]+this._b+this._c,this.start=a[r],this.end=a[o]}function D(e){var t=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e);if(!t)return null;var i=e[n];return 0===i?null:i-="horizontal"===x?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===t)return e;if(u.reduce((function(e,t){return e+t}),0)>t)return e;var i=0,a=[],r=e.map((function(r,o){var n=t*r/100,s=vt(p,0===o,o===e.length-1,g),l=u[o]+s;return n0&&a[r]-i>0){var n=Math.min(i,a[r]-i);i-=n,o=e-n}return o/t*100}))}function E(){var e=s[this.a].element,i=s[this.b].element;this.dragging&>(t,"onDragEnd",bt)(_()),this.dragging=!1,dt.removeEventListener("mouseup",this.stop),dt.removeEventListener("touchend",this.stop),dt.removeEventListener("touchcancel",this.stop),dt.removeEventListener("mousemove",this.move),dt.removeEventListener("touchmove",this.move),this.stop=null,this.move=null,e.removeEventListener("selectstart",bt),e.removeEventListener("dragstart",bt),i.removeEventListener("selectstart",bt),i.removeEventListener("dragstart",bt),e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",i.style.userSelect="",i.style.webkitUserSelect="",i.style.MozUserSelect="",i.style.pointerEvents="",this.gutter.style.cursor="",this.parent.style.cursor="",ft.body.style.cursor=""}function A(e){if(!("button"in e)||0===e.button){var i=s[this.a].element,a=s[this.b].element;this.dragging||gt(t,"onDragStart",bt)(_()),e.preventDefault(),this.dragging=!0,this.move=L.bind(this),this.stop=E.bind(this),dt.addEventListener("mouseup",this.stop),dt.addEventListener("touchend",this.stop),dt.addEventListener("touchcancel",this.stop),dt.addEventListener("mousemove",this.move),dt.addEventListener("touchmove",this.move),i.addEventListener("selectstart",bt),i.addEventListener("dragstart",bt),a.addEventListener("selectstart",bt),a.addEventListener("dragstart",bt),i.style.userSelect="none",i.style.webkitUserSelect="none",i.style.MozUserSelect="none",i.style.pointerEvents="none",a.style.userSelect="none",a.style.webkitUserSelect="none",a.style.MozUserSelect="none",a.style.pointerEvents="none",this.gutter.style.cursor=k,this.parent.style.cursor=k,ft.body.style.cursor=k,T.call(this),this.dragOffset=C(e)-this.end}}"horizontal"===x?(i="width",a="clientX",r="left",o="right",n="clientWidth"):"vertical"===x&&(i="height",a="clientY",r="top",o="bottom",n="clientHeight"),f=D(f);var I=[];function U(e){var t=e.i===I.length,i=t?I[e.i-1]:I[e.i];T.call(i);var a=t?i.size-e.minSize-i._c:e.minSize+i._b;P.call(i,a)}return(s=l.map((function(e,t){var a,r={element:pt(e),size:f[t],minSize:u[t],i:t};if(t>0&&((a={a:t-1,b:t,dragging:!1,direction:x,parent:c})._b=vt(p,t-1==0,!1,g),a._c=vt(p,!1,t===l.length-1,g),"row-reverse"===h||"column-reverse"===h)){var o=a.a;a.a=a.b,a.b=o}if(t>0){var n=y(t,x,r.element);!function(e,t,a){var r=z(i,t,a);Object.keys(r).forEach((function(t){e.style[t]=r[t]}))}(n,p,t),a._a=A.bind(a),n.addEventListener("mousedown",a._a),n.addEventListener("touchstart",a._a),c.insertBefore(n,r.element),a.gutter=n}return $(r.element,r.size,vt(p,0===t,t===l.length-1,g),t),t>0&&I.push(a),r}))).forEach((function(e){var t=e.element.getBoundingClientRect()[i];t0){var a=I[i-1],r=s[a.a],o=s[a.b];r.size=t[i-1],o.size=e,$(r.element,r.size,a._b,r.i),$(o.element,o.size,a._c,o.i)}}))},getSizes:_,collapse:function(e){U(s[e])},destroy:function(e,t){I.forEach((function(a){if(!0!==t?a.parent.removeChild(a.gutter):(a.gutter.removeEventListener("mousedown",a._a),a.gutter.removeEventListener("touchstart",a._a)),!0!==e){var r=S(i,a.a.size,a._b);Object.keys(r).forEach((function(e){s[a.a].element.style[e]="",s[a.b].element.style[e]=""}))}}))},parent:c,pairs:I}};class St extends ae{constructor(){super(),this.sourceUrl=null,this.inited=!1,this.isLoading=!1,this.baseApiPrefix="./wabac/api",this.baseReplayPrefix="./wabac",this.apiPrefix="",this.replayPrefix="",this.coll="",this.collInfo=null,this._replaceLoc=!1,this._locUpdateNeeded=!1,this._locationHash="",this.tabData={},this.url="",this.ts="",this.tabNames=["pages","story","resources","replay"],this.menuActive=!1,this.hasStory=!1,this.editable=!1,this.showSidebar="1"===localStorage.getItem("pages:showSidebar"),this.splitter=null}static get properties(){return{inited:{type:Boolean},sourceUrl:{type:String},loadInfo:{type:Object,attribute:!1},showSidebar:{type:Boolean},collInfo:{type:Object,attribute:!1},coll:{type:String},hasStory:{type:Boolean},isLoading:{type:Boolean},tabData:{type:Object,attribute:!1},url:{type:String},ts:{type:String},isFullscreen:{type:Boolean},menuActive:{type:Boolean},embed:{type:String},editable:{type:Boolean}}}firstUpdated(){this.inited=!0,window.addEventListener("hashchange",e=>this.onHashChange(e)),this.addEventListener("fullscreenchange",e=>{this.isFullscreen=!!document.fullscreenElement})}updated(e){if(e.has("sourceUrl")&&this.doUpdateInfo(),e.has("tabData")){if(!this.collInfo||!this.collInfo.coll)return;Object.keys(this.tabData).forEach(e=>!this.tabData[e]&&delete this.tabData[e]);const t="#"+new URLSearchParams(this.tabData).toString();if("replay"!==this.tabData.view&&(this.url="search://"+decodeURIComponent(this._paramsToString(this.tabData))),t!==this._locationHash){if(this._locationHash=t,this._replaceLoc||0===Object.keys(e.get("tabData")).length){const e=new URL(window.location.href);e.hash=this._locationHash,window.history.replaceState({},"",e.href),this._replaceLoc=!1}else window.location.hash=this._locationHash;this.embed&&window.parent!==window&&window.parent.postMessage(this.tabData,"*")}this._locUpdateNeeded=!1}e.has("showSidebar")&&localStorage.setItem("pages:showSidebar",this.showSidebar?"1":"0"),(e.has("tabData")||e.has("showSidebar"))&&this.configureSplitter()}configureSplitter(){if("replay"===this.tabData.view&&this.showSidebar){const e=this.renderRoot.querySelector("wr-page-view"),t=this.renderRoot.querySelector("wr-coll-replay");if(e&&t&&!this.splitter){const i={sizes:[30,70],minSize:[300,300],gutterSize:4,onDragStart(){t.setDisablePointer(!0)},onDragEnd(){t.setDisablePointer(!1)}};this.splitter=yt([e,t],i)}}else if(this.splitter){try{this.splitter.destroy()}catch(e){}this.splitter=null}}async doUpdateInfo(){let e=this.loadInfo&&this.loadInfo.customColl;if(!e){e=(await _e(this.sourceUrl)).coll}this.coll=e;const t=this.baseApiPrefix+"/"+e,i=this.baseReplayPrefix+"/"+e,a=await fetch(t+"?all=1");if(200!=a.status)return void(this.collInfo={});const r=await a.json();this.collInfo={apiPrefix:t,replayPrefix:i,coll:e,...r},this.collInfo.title||(this.collInfo.title=this.collInfo.filename),this.hasStory=this.collInfo.desc||this.collInfo.lists.length,this.dispatchEvent(new CustomEvent("coll-loaded",{detail:{collInfo:this.collInfo,alreadyLoaded:!0}})),this.onHashChange()}onCollLoaded(e){this.doUpdateInfo(),this.loadInfo=null,this.dispatchEvent(new CustomEvent("coll-loaded",{detail:{sourceUrl:this.sourceUrl,collInfo:this.collInfo}}))}onHashChange(e){const t=window.location.hash;if(t&&t!==this._locationHash&&(this.tabData=Object.fromEntries(new URLSearchParams(t.slice(1)).entries()),this._locationHash=t),this.collInfo.coll&&!this.tabNames.includes(this.tabData.view)){const e=this.hasStory?"story":this.collInfo.pages.length?"pages":"resources";this.tabData={...this.tabData,view:e}}this.hasStory||"story"!==this.tabData.view||(this.tabData.view="pages"),"replay"===this.tabData.view&&this.tabData.query&&(this.showSidebar=!0)}onTabClick(e){e.preventDefault();const t=e.currentTarget.getAttribute("href");return this.tabData={...this.tabData,view:t.slice(1)},!1}onCollTabNav(e){if(e.target.id===this.tabData.view)this.updateTabData(e.detail.data,e.detail.replaceLoc,!1);else if(this.showSidebar&&"pages"===e.target.id&&"replay"===this.tabData.view){if(!1===e.detail.data.showSidebar)return void(this.showSidebar=!1);this.updateTabData(e.detail.data,e.detail.replaceLoc,!0)}}updateTabData(e,t=!1,i=!1){this.tabData={...this.tabData,...e},this.tabData.url&&(this.url=this.tabData.url||""),this.tabData.ts&&(this.ts=this.tabData.ts||""),this._replaceLoc=!this._locUpdateNeeded&&t,this._locUpdateNeeded=!0}static get styles(){return ue(te` :host { display: flex; flex-direction: column; @@ -780,9 +780,13 @@ const re=new WeakMap,oe=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG cursor: col-resize; } - wr-page-view, wr-coll-replay { + wr-coll-replay { width: 100%; } + + wr-page-view.full-pages { + width: 100% !important; + } `}render(){return this.inited?this.collInfo&&!this.collInfo.coll?O` `:this.collInfo?O` @@ -944,7 +948,7 @@ const re=new WeakMap,oe=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG .url="${this.tabData.url||""}" .ts="${this.tabData.ts||""}" @coll-tab-nav="${this.onCollTabNav}" id="pages" - class="${r?"sidebar":t?"":"is-hidden"}"> + class="${r?"sidebar":t?"full-pages":"is-hidden"}"> ${a?O`