From 457b980af1b5b1970ab0f299ecefa621e110d678 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Tue, 1 Sep 2020 12:51:02 -0700 Subject: [PATCH] sidebar: ensure hiding sidebar is correctly saved in localStorage --- src/coll.js | 4 +++- ui.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/coll.js b/src/coll.js index 39b7907..a1d57e1 100644 --- a/src/coll.js +++ b/src/coll.js @@ -143,6 +143,9 @@ class Coll extends LitElement } this._locUpdateNeeded = false; } + if (changedProperties.has("showSidebar")) { + localStorage.setItem(`pages:showSidebar`, this.showSidebar ? "1" : "0"); + } } async doUpdateInfo() { @@ -706,7 +709,6 @@ class Coll extends LitElement this.updateTabData({view: "pages"}); } } - localStorage.setItem(`pages:showSidebar`, this.showSidebar ? "1" : "0"); } onReAuthed(event) { diff --git a/ui.js b/ui.js index 6f3ad6f..6ce29f2 100644 --- a/ui.js +++ b/ui.js @@ -667,7 +667,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(99),Ye=i.n(Ke),Ze=i(59),Je=i.n(Ze),Xe=i(100),Qe=i.n(Xe),et=i(101),tt=i.n(et),it=i(60),nt=i.n(it),rt=i(61),ot=i.n(rt),at=i(62),st=i.n(at),lt=i(102),ct=i.n(lt),dt=(i(64),i(4));!function(){if(void 0!==window.Reflect&&void 0!==window.customElements){var e=HTMLElement;window.HTMLElement=function(){return Reflect.construct(e,[],this.constructor)},HTMLElement.prototype=e.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,e)}}();class ft extends ne{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")}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(){var e;this.inited=!0,window.addEventListener("hashchange",e=>this.onHashChange(e)),this.addEventListener("fullscreenchange",e=>{this.isFullscreen=!!document.fullscreenElement}),window,Object(dt.a)().then((function(){Object(dt.b)([["split-me",[[1,"split-me",{n:[2],d:[1],fixed:[4],sizes:[1],minSizes:[1,"min-sizes"],maxSizes:[1,"max-sizes"],throttle:[2],slotEnd:[32]}]]]],e)}))}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}}async doUpdateInfo(){let e=this.loadInfo&&this.loadInfo.customColl;if(!e){e=(await Ee(this.sourceUrl)).coll}this.coll=e;const t=this.baseApiPrefix+"/"+e,i=this.baseReplayPrefix+"/"+e,n=await fetch(t+"?all=1");if(200!=n.status)return void(this.collInfo={});const r=await n.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 pe(te` + `}onCopy(e,t){return e.preventDefault(),e.stopPropagation(),navigator.clipboard.writeText(t),!1}}customElements.define("wr-coll-index",Ve);var Ke=i(99),Ye=i.n(Ke),Ze=i(59),Je=i.n(Ze),Xe=i(100),Qe=i.n(Xe),et=i(101),tt=i.n(et),it=i(60),nt=i.n(it),rt=i(61),ot=i.n(rt),at=i(62),st=i.n(at),lt=i(102),ct=i.n(lt),dt=(i(64),i(4));!function(){if(void 0!==window.Reflect&&void 0!==window.customElements){var e=HTMLElement;window.HTMLElement=function(){return Reflect.construct(e,[],this.constructor)},HTMLElement.prototype=e.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,e)}}();class ft extends ne{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")}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(){var e;this.inited=!0,window.addEventListener("hashchange",e=>this.onHashChange(e)),this.addEventListener("fullscreenchange",e=>{this.isFullscreen=!!document.fullscreenElement}),window,Object(dt.a)().then((function(){Object(dt.b)([["split-me",[[1,"split-me",{n:[2],d:[1],fixed:[4],sizes:[1],minSizes:[1,"min-sizes"],maxSizes:[1,"max-sizes"],throttle:[2],slotEnd:[32]}]]]],e)}))}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")}async doUpdateInfo(){let e=this.loadInfo&&this.loadInfo.customColl;if(!e){e=(await Ee(this.sourceUrl)).coll}this.coll=e;const t=this.baseApiPrefix+"/"+e,i=this.baseReplayPrefix+"/"+e,n=await fetch(t+"?all=1");if(200!=n.status)return void(this.collInfo={});const r=await n.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 pe(te` :host { display: flex; flex-direction: column; @@ -1001,7 +1001,7 @@ const re=new WeakMap,oe=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG - `}onKeyDown(e){"Esc"!==e.key&&"Escape"!==e.key||(e.target.value=this.url)}onMenu(e){e.stopPropagation(),this.menuActive=!this.menuActive,this.menuActive&&document.addEventListener("click",()=>{this.menuActive=!1},{once:!0})}onFullscreenToggle(){this.menuActive=!1,this.isFullscreen?document.exitFullscreen():this.requestFullscreen()}onGoBack(){this.menuActive=!1,window.history.back()}onGoForward(){this.menuActive=!1,window.history.forward()}onShowPages(e){e.preventDefault(),this.showSidebar||document.documentElement.clientWidth>=769?this.showSidebar=!this.showSidebar:this.tabData&&"replay"===this.tabData.view&&this.updateTabData({view:"pages"}),localStorage.setItem("pages:showSidebar",this.showSidebar?"1":"0")}onReAuthed(e){this.reauthWait=(async()=>{const t=e.detail.headers;await fetch(this.collInfo.apiPrefix+"/updateAuth",{method:"POST",body:JSON.stringify({headers:t})});this.showAuth&&(this.onRefresh(null,!0),this.showAuth=!1)})()}async onPurgeCache(e){e.preventDefault();const t=await fetch(""+this.collInfo.apiPrefix,{method:"DELETE"});200===t.status&&window.parent?window.parent.location.reload():console.warn("purge failed: "+t.status)}onSubmit(e){e.preventDefault();const t=this.renderRoot.querySelector("input").value;return this.navigateTo(t),!1}navigateTo(e){let t;t=e.startsWith("http://")||e.startsWith("https://")?{url:e,view:"replay"}:e.startsWith("search://")?this._stringToParams(e):{query:e,view:"pages"},this.updateTabData(t)}_stringToParams(e){const t=new URLSearchParams(e.slice("search://".length)),i={};for(const e of["query","view","currList","currMime","urlSearchType"])t.has(e)&&(i[e]=t.get(e));return i}_paramsToString(e){const t=new URLSearchParams;for(const i of["query","view","currList","currMime","urlSearchType"])i in e&&t.set(i,e[i]);return t.toString()}onRefresh(e,t){if(e&&e.preventDefault(),this.menuActive=!1,"replay"===this.tabData.view){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.refresh()}else window.location.reload()}}customElements.define("wr-coll",ft); + `}onKeyDown(e){"Esc"!==e.key&&"Escape"!==e.key||(e.target.value=this.url)}onMenu(e){e.stopPropagation(),this.menuActive=!this.menuActive,this.menuActive&&document.addEventListener("click",()=>{this.menuActive=!1},{once:!0})}onFullscreenToggle(){this.menuActive=!1,this.isFullscreen?document.exitFullscreen():this.requestFullscreen()}onGoBack(){this.menuActive=!1,window.history.back()}onGoForward(){this.menuActive=!1,window.history.forward()}onShowPages(e){e.preventDefault(),this.showSidebar||document.documentElement.clientWidth>=769?this.showSidebar=!this.showSidebar:this.tabData&&"replay"===this.tabData.view&&this.updateTabData({view:"pages"})}onReAuthed(e){this.reauthWait=(async()=>{const t=e.detail.headers;await fetch(this.collInfo.apiPrefix+"/updateAuth",{method:"POST",body:JSON.stringify({headers:t})});this.showAuth&&(this.onRefresh(null,!0),this.showAuth=!1)})()}async onPurgeCache(e){e.preventDefault();const t=await fetch(""+this.collInfo.apiPrefix,{method:"DELETE"});200===t.status&&window.parent?window.parent.location.reload():console.warn("purge failed: "+t.status)}onSubmit(e){e.preventDefault();const t=this.renderRoot.querySelector("input").value;return this.navigateTo(t),!1}navigateTo(e){let t;t=e.startsWith("http://")||e.startsWith("https://")?{url:e,view:"replay"}:e.startsWith("search://")?this._stringToParams(e):{query:e,view:"pages"},this.updateTabData(t)}_stringToParams(e){const t=new URLSearchParams(e.slice("search://".length)),i={};for(const e of["query","view","currList","currMime","urlSearchType"])t.has(e)&&(i[e]=t.get(e));return i}_paramsToString(e){const t=new URLSearchParams;for(const i of["query","view","currList","currMime","urlSearchType"])i in e&&t.set(i,e[i]);return t.toString()}onRefresh(e,t){if(e&&e.preventDefault(),this.menuActive=!1,"replay"===this.tabData.view){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.refresh()}else window.location.reload()}}customElements.define("wr-coll",ft); /** * @license * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.