archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui tweaks for mobile:

Browse Source 
- fix url chooser cut-off in mobile (#14)
- sidebar toggle goes directly to full view (no sidebar) in mobile mode
This commit is contained in:
Ilya Kreymer
2020-09-09 09:41:47 -07:00
parent 851ce9bf90
commit d0cc1acb71
4 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/chooser.js
+7 -1
View File
@@ -62,6 +62,9 @@ class Chooser extends LitElement
static get styles() {
return wrapCss(css`
:host {
min-width: 0;
}
.extra-padding {
padding: 2em;
}
@@ -79,13 +82,16 @@ class Chooser extends LitElement
flex-grow: 1;
flex-shrink: 0;
}
p.control.is-expanded {
width: min-content;
}
input.input.file-name:invalid {
border: 1px dashed red;
}
input.input.file-name {
max-width: 100%;
border-width: 1px;
margin-left: -1px;
max-width: 100%;
}
@media screen and (max-width: 1023px) {
.file-icon {
src/coll-index.js
+1
View File
@@ -136,6 +136,7 @@ class CollIndex extends LitElement
return wrapCss(css`
:host {
overflow-y: auto;
min-width: 0;
}
.size {
margin-right: 20px;
src/coll.js
+4 -7
View File
@@ -803,16 +803,13 @@ class Coll extends LitElement
onShowPages(event) {
event.preventDefault();
// show sidebar if table or greater
// show sidebar for tablet or wider, or hide sidebar
if (this.showSidebar || (document.documentElement.clientWidth >= 769)) {
this.showSidebar = !this.showSidebar;
//this.updateTabData({showSidebar: !this.showSidebar});
} else {
// otherwise, just go to full pages view
//this.showSidebar = false;
// if (this.tabData && this.tabData.view === "replay") {
// this.updateTabData({view: "pages"});
// }
// otherwise, just go to full pages view
this.showSidebar = false;
this.updateTabData({url: "", ts: ""});
}
}
ui.js
+9 -2
View File
@@ -388,6 +388,9 @@ const oe=new WeakMap,ne=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG
</div>
</div>
`:""} `:O``}firstUpdated(){this.initRoute(),window.addEventListener("popstate",e=>{this.initRoute()})}updated(e){e.has("sourceUrl")&&(this.collInfo=null)}onFavIcons(e){const t=document.querySelector("head"),i=document.querySelectorAll("link[rel*='icon']");for(const e of i)t.removeChild(e);for(const i of e.detail.icons){const e=document.createElement("link");e.rel=i.rel,e.href=i.href,t.appendChild(e)}}onNavMenu(e){e.stopPropagation(),this.navMenuShown=!this.navMenuShown,this.navMenuShown&&document.addEventListener("click",()=>{this.navMenuShown=!1},{once:!0})}initRoute(){this.inited=!0,this.pageParams=new URLSearchParams(window.location.search);let e=this.pageParams.get("state");if(e)try{if(e=JSON.parse(e),e.ids instanceof Array&&e.userId&&"open"===e.action)return this.pageParams.set("source","googledrive://"+e.ids[0]),this.pageParams.delete("state"),void(window.location.search=this.pageParams.toString())}catch(e){console.log(e)}if(this.sourceUrl=this.pageParams.get("source")||"",this.embed=this.pageParams.get("embed")||"",this.pageParams.has("terms")&&(this.showTerms=!0),this.pageParams.get("config")){this.loadInfo||(this.loadInfo={});try{this.loadInfo.extraConfig=JSON.parse(this.pageParams.get("config"))}catch(e){console.log("invalid config: "+e)}}this.pageParams.get("basePageUrl")&&(this.loadInfo||(this.loadInfo={extraConfig:{}}),this.loadInfo.extraConfig||(this.loadInfo.extraConfig={}),this.loadInfo.extraConfig.baseUrl=this.pageParams.get("basePageUrl")),this.pageParams.get("customColl")&&(this.loadInfo||(this.loadInfo={}),this.loadInfo.customColl=this.pageParams.get("customColl"))}onStartLoad(e){if(this.pageParams.set("source",e.detail.sourceUrl),e.detail.isFile){{const e=new URL(window.location.href);e.search=this.pageParams.toString(),window.history.pushState({},"",e.toString())}this.sourceUrl=e.detail.sourceUrl,this.loadInfo=e.detail}else window.location.search=this.pageParams.toString()}onCollLoaded(e){this.loadInfo=null,e.detail.collInfo&&(this.collInfo=e.detail.collInfo),e.detail.alreadyLoaded||e.detail.sourceUrl!==this.sourceUrl&&(this.pageParams.set("source",e.detail.sourceUrl),window.location.search=this.pageParams.toString())}});var qe=i(93),Me=i.n(qe);customElements.define("wr-chooser",class extends re{constructor(){super(),this.fileDisplayName="",this.file=null}onChooseFile(e){0!==e.currentTarget.files.length&&(this.file=e.currentTarget.files[0],this.fileDisplayName="file://"+(this.file.path||this.file.name),this.requestUpdate())}onStartLoad(e){e.preventDefault();const t={sourceUrl:this.fileDisplayName};if(this.file){if(t.isFile=!0,this.file.path){const e=new URL("http://files.replayweb.page/");e.searchParams.set("filename",this.file.path),t.loadUrl=e.href}else t.loadUrl=URL.createObjectURL(this.file),t.blob=this.file;t.size=this.file.size,t.noCache=void 0!==this.file.path,t.name=this.fileDisplayName}return this.dispatchEvent(new CustomEvent("load-start",{detail:t})),!1}onInput(e){this.fileDisplayName=e.currentTarget.value,this.file&&this.fileDisplayName&&this.fileDisplayName.startsWith("file://")&&(this.file=null,this.fileDisplayName="")}static get styles(){return ue(ie`
:host {
min-width: 0;
}
.extra-padding {
padding: 2em;
}
@@ -405,13 +408,16 @@ const oe=new WeakMap,ne=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG
flex-grow: 1;
flex-shrink: 0;
}
p.control.is-expanded {
width: min-content;
}
input.input.file-name:invalid {
border: 1px dashed red;
}
input.input.file-name {
max-width: 100%;
border-width: 1px;
margin-left: -1px;
max-width: 100%;
}
@media screen and (max-width: 1023px) {
.file-icon {
@@ -466,6 +472,7 @@ const oe=new WeakMap,ne=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG
</section>`}});var Ne=i(94),Oe=i.n(Ne),Be=i(95),Ge=i.n(Be),He=i(96),Fe=i.n(He),We=i(18),Ve=i.n(We);class Ke extends re{constructor(){super(),this.colls=[],this.filteredColls=[],this.sortedColls=[],this.query="",this.hideHeader="1"===localStorage.getItem("index:hideHeader"),this._deleting={}}static get sortKeys(){return[{key:"title",name:"Title"},{key:"sourceUrl",name:"Source"},{key:"ctime",name:"Date Loaded"},{key:"size",name:"Total Size"}]}static get properties(){return{colls:{type:Array},query:{type:String},filteredColls:{type:Array},sortedColls:{type:Array},hideHeader:{type:Boolean},_deleting:{type:Object}}}firstUpdated(){this.loadColls()}updated(e){e.has("hideHeader")&&localStorage.setItem("index:hideHeader",this.hideHeader?"1":"0"),(e.has("colls")||e.has("query"))&&this.filter()}filter(){if(this.query){this.filteredColls=[];for(const e of this.colls)(e.sourceUrl.indexOf(this.query)>=0||e.filename.indexOf(this.query)>=0||e.title&&e.title.indexOf(this.query)>=0)&&this.filteredColls.push(e)}else this.filteredColls=this.colls}async loadColls(){const e=await fetch("./wabac/api/index");try{const t=await e.json();this.colls=t.colls.map(e=>(e.title=e.title||e.filename,e))}catch(e){}this._deleting={}}async onDeleteColl(e){if(e.preventDefault(),e.stopPropagation(),!this.sortedColls)return;const t=Number(e.currentTarget.getAttribute("data-coll-index")),i=this.sortedColls[t];if(!i||this._deleting[i.sourceUrl])return;this._deleting[i.sourceUrl]=!0,this.requestUpdate();const a=await fetch("./wabac/api/"+i.id,{method:"DELETE"});if(200===a.status){const e=await a.json();this.colls=e.colls}return!1}static get styles(){return ue(ie`
:host {
overflow-y: auto;
min-width: 0;
}
.size {
margin-right: 20px;
@@ -1035,7 +1042,7 @@ const oe=new WeakMap,ne=w(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG
@coll-tab-nav="${this.onCollTabNav}" id="pages"
class="${i?"":"is-hidden"} ${e?"sidebar":""}">
</wr-page-view>
`}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)}onFullPageView(e){e.preventDefault(),this.updateTabData({url:"",ts:""})}onHideSidebar(e){e.preventDefault(),this.showSidebar=!1}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}: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,this.tabData.url){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.refresh()}else window.location.reload()}}customElements.define("wr-coll",Pt);
`}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.showSidebar=!1,this.updateTabData({url:"",ts:""}))}onFullPageView(e){e.preventDefault(),this.updateTabData({url:"",ts:""})}onHideSidebar(e){e.preventDefault(),this.showSidebar=!1}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}: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,this.tabData.url){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.refresh()}else window.location.reload()}}customElements.define("wr-coll",Pt);
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.