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

sidebar support + pageview sidebar work!

Browse Source 
- pages view now appears as sidebar in table/desktop sizes when clicking show pages button
- using <split-me> webcomponent to support adjustable splitter for sidebar
- pages view includes list filter if lists exist
- current page is highlighted when selected in sidebar
- date appears below url for each when in sidebar/mobile view mode
This commit is contained in:
Ilya Kreymer
2020-08-31 18:47:24 -07:00
parent 910e4795a5
commit 804529aeea
7 changed files with 517 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages.js
+359 -139
View File
@@ -14,6 +14,9 @@ import { getTS } from './pageutils';
import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.svg';
import fasAngleDown from '@fortawesome/fontawesome-free/svgs/solid/angle-down.svg';
import fasLeft from '@fortawesome/fontawesome-free/svgs/solid/angle-left.svg';
import fasRight from '@fortawesome/fontawesome-free/svgs/solid/angle-right.svg';
// ===========================================================================
class Pages extends LitElement
@@ -40,6 +43,10 @@ class Pages extends LitElement
this.sortKey = "ts";
this.sortDesc = true;
this.isSidebar = false;
this.url = "";
this.ts = "";
}
static get sortKeys() {
@@ -79,7 +86,11 @@ class Pages extends LitElement
menuActive: {type: Boolean },
sortKey: { type: String },
sortDesc: { type: Boolean }
sortDesc: { type: Boolean },
isSidebar: { type: Boolean },
url: { type: String },
ts: { type: String }
}
}
@@ -91,7 +102,7 @@ class Pages extends LitElement
}
}
updated(changedProperties) {
async updated(changedProperties) {
if (changedProperties.has("collInfo")) {
this.updateTextSearch();
} else if (changedProperties.has("query")) {
@@ -109,6 +120,16 @@ class Pages extends LitElement
this.filter();
}
}
if (changedProperties.has("sortedPages") && this.isSidebar) {
//if (await this.updateComplete) {
const selected = this.renderRoot.querySelector(".current");
if (selected) {
const opts = {behavior: "smooth", block: "nearest", inline: "nearest"};
setTimeout(() => selected.scrollIntoView(opts), 100);
}
//}
}
}
onChangeQuery(event) {
@@ -150,16 +171,18 @@ class Pages extends LitElement
const resp = await fetch(`${this.collInfo.apiPrefix}/curated/${this.currList}`);
const json = await resp.json();
this.sortedPages = [];
const curated = [];
for (const c of json.curated) {
for (const p of this.filteredPages) {
if (p.id === c.page) {
this.sortedPages.push(p);
curated.push(p);
break;
}
}
}
this.filteredPages = curated;
}
sendChangeEvent(data) {
@@ -239,14 +262,16 @@ class Pages extends LitElement
width: 100%;
height: 100%;
display: flex;
min-width: 0px;
flex-direction: column;
box-sizing: border-box !important;
}
.main.columns {
width: 100%;
justify-self: stretch;
margin: 1.0em 0 0 0;
min-height: 0px;
margin: 0px;
}
.header.columns {
@@ -270,7 +295,7 @@ class Pages extends LitElement
margin-left: 0.75em;
}
.sidebar {
.index-bar {
display: flex;
flex-direction: column;
border-right: 3px solid rgb(237, 237, 237);
@@ -278,21 +303,21 @@ class Pages extends LitElement
padding-right: 0px;
}
.sidebar-title {
.index-bar-title {
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 1.0rem;
word-break: break-word;
}
.sidebar-status {
.index-bar-status {
display: flex;
flex-direction: row;
margin-bottom: 0.5rem;
padding-right: 0.75em;
}
.sidebar-menu {
.index-bar-menu {
margin-top: 1.0rem;
}
@@ -303,6 +328,7 @@ class Pages extends LitElement
.num-results {
font-style: italic;
font-weight: normal;
line-height: 2.5;
}
.asc:after {
@@ -314,60 +340,51 @@ class Pages extends LitElement
font-size: 0.75em;
}
@media screen and (min-width: 768px) {
.main.columns {
@media screen and (min-width: 769px) {
.full .main.columns {
max-height: 100%;
height: 100%;
}
.sidebar-menu {
.full .index-bar-menu {
max-height: 100%;
overflow-y: auto;
}
}
@media screen and (max-width: 767px) {
.main.columns {
position: relative;
max-height: 100%;
height: 100%;
}
.sidebar-menu {
max-height: 75px;
overflow-y: auto;
margin-top: 0.75em;
}
.column.main-content {
position: relative;
overflow-y: auto;
border-top: 1px solid black;
width: 100%;
min-height: 0px;
height: 100%;
padding: 0px;
margin: 0px;
}
@media screen and (max-width: 768px) {
${Pages.sidebarStyles()}
}
.mobile-header {
margin: 0.5rem;
margin-left: 1.0rem;
display: flex;
justify-content: space-between;
flex-direction: row;
min-height: 24px;
width: 100%;
}
${Pages.sidebarStyles(css`.sidebar `)}
.menu {
font-size: 0.80rem;
}
.full, .sidebar {
min-height: 0px;
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
}
.mobile-lists {
display: block !important;
}
.sidebar .columns.is-hidden-mobile, .sidebar .is-hidden-mobile {
display: none !important;
}
.sidebar .mobile-header {
display: flex !important;
}
.sidebar .columns {
display: flex !important;
}
.scroller {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
flex: auto;
@@ -375,13 +392,14 @@ class Pages extends LitElement
padding-bottom: 1.0em;
min-height: 0px;
}
.selected {
background-color: ghostwhite;
.current {
/*background-color: rgb(207, 243, 255);*/
}
.page-header {
display: flex;
flex-direction: row;
flex-flow: row wrap;
width: 100%;
min-height: fit-content;
@@ -394,25 +412,95 @@ class Pages extends LitElement
}
.search-bar {
width: 100%;
width: auto;
display: flex;
flex-direction: row;
flex-direction: column;
}
.flex-auto {
flex: auto;
}
.sidebar-nav {
display: flex;
justify-content: space-between;
vertical-align: middle;
}
.sidebar-nav span {
vertical-align: baseline;
}
.sidebar-nav fa-icon {
vertical-align: middle;
}
`);
}
static sidebarStyles(prefix = css``) {
return css`
${prefix} .main.columns {
position: relative;
max-height: 100%;
height: 100%;
}
${prefix} .index-bar-menu {
max-height: 75px;
overflow-y: auto;
margin-top: 0.75em;
}
${prefix} .column.main-content {
position: relative;
overflow-y: auto;
width: 100%;
min-height: 0px;
height: 100%;
padding: 0px;
margin: 0px;
}
${prefix} .mobile-header {
margin: 0.5rem;
margin-left: 1.0rem;
align-items: center;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
min-height: 24px;
width: 100%;
}
${prefix} .menu {
font-size: 0.80rem;
}`;
}
onSelectList(event) {
event.preventDefault();
this.currList = Number(event.currentTarget.getAttribute("data-list"));
}
onSelectListDrop(event) {
event.preventDefault();
this.currList = Number(event.currentTarget.value);
}
render() {
const currList = this.currList;
return html`
${this.isSidebar ? html`
<div class="sidebar-nav">
<a @click="${this.onHideSidebar}" class="is-marginless is-size-6 is-paddingless">
<fa-icon .svg="${fasLeft}"></fa-icon><span>Hide</span>
</a>
<a @click="${this.onFullPageView}" class="is-marginless is-size-6 is-paddingless">
<span>Full Page View</span><fa-icon .svg="${fasRight}"></fa-icon>
</a>
</div>
` : ``}
<div class="search-bar notification is-marginless">
<div class="field flex-auto">
<div class="control has-icons-left ${this.loading ? 'is-loading' : ''}">
@@ -421,39 +509,55 @@ class Pages extends LitElement
<span class="icon is-left"><fa-icon .svg="${fasSearch}"/></span>
</div>
</div>
${this.isSidebar && this.collInfo.lists.length ? html`
<div class="is-hidden-tablet mobile-lists">
<span class="is-size-7">Filter By List:</span>
<div class="select is-small">
<select id="sort-select" @change=${this.onSelectListDrop}>
<option value="0" ?selected="${this.currList === 0}">All Pages</option>
${this.collInfo.lists.map(list => html`
<option value="${list.id}" ?selected="${this.currList === list.id}">${list.title}</option>
`)}
</select>
</div>
</div>` : ``}
</div>
<div class="main columns">
<div class="column sidebar is-one-fifth is-hidden-mobile">
<div class="sidebar-title">${this.collInfo.title}</div>
<div class="${this.isSidebar ? "sidebar" : "full"}">
<div class="main columns">
<div class="column index-bar is-one-fifth is-hidden-mobile">
<div class="index-bar-title">${this.collInfo.title}</div>
<span class="num-results">${this.formatResults()}</span>
<span class="num-results">${this.formatResults()}</span>
${this.editable ? html`
<div class="sidebar-actions">
${this.renderDownloadMenu()}
</div>` : ``}
${this.editable ? html`
<div class="index-bar-actions">
${this.renderDownloadMenu()}
</div>` : ``}
${this.collInfo.lists.length ? html`
<p id="filter-label" class="menu-label">Filter By List:</p>
<aside class="sidebar-menu menu">
<ul class="menu-list">
<li>
<a href="#list-0" data-list="0" class="${currList === 0 ? 'is-active' : ''}"
@click=${this.onSelectList}><i>All Pages</i></a>
</li>
${this.collInfo.lists.map(list => html`
${this.collInfo.lists.length ? html`
<p id="filter-label" class="menu-label">Filter By List:</p>
<aside class="index-bar-menu menu">
<ul class="menu-list">
<li>
<a @click=${this.onSelectList} href="#list-${list.id}"
data-list="${list.id}"
class="${currList === list.id ? 'is-active' : ''}">${list.title}</a>
</li>`)}
</ul>
</aside>
` : ``}
</div>
<div class="column main-content">
${this.renderPages()}
<a href="#list-0" data-list="0" class="${currList === 0 ? 'is-active' : ''}"
@click=${this.onSelectList}><i>All Pages</i></a>
</li>
${this.collInfo.lists.map(list => html`
<li>
<a @click=${this.onSelectList} href="#list-${list.id}"
data-list="${list.id}"
class="${currList === list.id ? 'is-active' : ''}">${list.title}</a>
</li>`)}
</ul>
</aside>
` : ``}
</div>
<div class="column main-content">
${this.renderPages()}
</div>
</div>
</div>`;
}
@@ -506,8 +610,13 @@ class Pages extends LitElement
<a @click="${this.onSort}" data-key="title" class="column is-6 pagetitle ${this.sortKey === "title" ? (this.sortDesc ? "desc" : "asc") : ''}">Page Title</a>
</div>
<div class="is-hidden-tablet mobile-header">
<span class="num-results">${this.formatResults()}</span>
<div class="num-results">${this.formatResults()}</div>
<wr-sorter id="pages"
.sortKey="${this.sortKey}"
.sortDesc="${this.sortDesc}"
@@ -520,6 +629,26 @@ class Pages extends LitElement
`;
}
isCurrPage(page) {
if (this.isSidebar) {
if (page.url === this.url) {
let ts = page.timestamp;
if (!ts && page.date) {
ts = getTS(page.date);
} else if (typeof(page.ts) === "string") {
ts = getTS(page.ts);
}
return ts === this.ts;
}
}
if (this.editable) {
return this.selectedPages.has(p.id);
}
return false;
}
renderPages() {
//const name = this.currList === 0 ? "All Pages" : this.collInfo.lists[this.currList - 1].title;
return html`
@@ -528,11 +657,24 @@ class Pages extends LitElement
</div>
<div class="scroller" @scroll="${this.onScroll}">
${this.sortedPages.length ? html`
${this.sortedPages.map((p, i) => html`
<div class="content ${this.selectedPages.has(p.id) ? 'selected' : ''}">
<wr-page-entry .index="${this.query ? (this.sortDesc ? this.sortedPages.length - i : i + 1) : 0}" .editable="${this.editable}" .selected="${this.selectedPages.has(p.id)}" @sel-page="${this.onSelectToggle}" @delete-page="${this.onDeletePage}" replayPrefix="${this.collInfo.replayPrefix}" query="${this.query}" .page="${p}">
${this.sortedPages.map((p, i) => {
const isCurrPage = this.isCurrPage(p);
return html`
<div class="content ${isCurrPage ? 'current' : ''}">
<wr-page-entry
.index="${this.query || this.isSidebar ? i + 1 : 0}"
.editable="${this.editable}"
.selected="${this.selectedPages.has(p.id)}"
.isSidebar="${this.isSidebar}"
.isCurrent="${isCurrPage}"
@sel-page="${this.onSelectToggle}"
@delete-page="${this.onDeletePage}"
replayPrefix="${this.collInfo.replayPrefix}"
query="${this.query}"
.page="${p}">
</wr-page-entry>
</div>`)}` : html`<p class="mobile-header">${this.getNoResultsMessage()}</p>`}
</div>` })}` : html`<p class="mobile-header">${this.getNoResultsMessage()}</p>`}
</div>
`;
}
@@ -591,6 +733,24 @@ class Pages extends LitElement
this.requestUpdate();
}
onFullPageView(event) {
event.preventDefault();
const data = {
view: "pages",
url: "",
ts: "",
};
this.sendChangeEvent(data);
}
onHideSidebar(event) {
event.preventDefault();
const data = {
showSidebar: false
};
this.sendChangeEvent(data);
}
async onDownload(event, format, selected) {
event.preventDefault();
@@ -677,6 +837,11 @@ class PageEntry extends LitElement
this.editable = false;
this.iconValid = false;
this.index = 0;
this.isSidebar = false;
this.isCurrent = false;
this.timestamp = "";
this.date = null;
}
static get properties() {
@@ -690,6 +855,10 @@ class PageEntry extends LitElement
editable: { type: Boolean },
iconValid: { type: Boolean },
index: { type: Number },
isSidebar: { type: Boolean },
isCurrent: { type: Boolean },
timestamp: { type: String },
date: { type: Object }
}
}
@@ -715,6 +884,19 @@ class PageEntry extends LitElement
width: 100%;
}
.full {
flex: auto;
min-height: 0px;
}
.sidebar .column {
width: unset !important;
}
.sidebar {
width: 100%;
}
.favicon {
width: 24px !important;
height: 24px !important;
@@ -739,33 +921,66 @@ class PageEntry extends LitElement
background-color: rgb(241, 70, 104);
}
@media screen and (max-width: 767px) {
.col-date {
margin-left: calc(24px + 1rem);
}
.col-date div {
display: inline;
}
.col-index {
position: absolute;
top: 0px;
left: 0px;
margin-top: -0.75em;
}
.columns {
display: flex;
flex-direction: column-reverse;
}
@media screen and (max-width: 768px) {
${PageEntry.sidebarStyles()}
}
${PageEntry.sidebarStyles(css`.sidebar `)}
.current a {
background-color: rgb(207, 243, 255);
font-style: italic;
display: block;
}
.current .curr-page {
font-style: italic;
font-size: 9px;
color: black;
}
.is-inline-date {
display: none;
}
`);
}
static sidebarStyles(prefix = css``) {
return css`
${prefix} .col-date {
margin-left: calc(24px + 1rem);
display: none;
}
${prefix} .col-date div {
display: inline;
}
${prefix} .col-index {
position: absolute;
top: 0px;
left: 0px;
margin-top: -0.75em;
}
${prefix} .columns {
display: flex;
flex-direction: column-reverse;
}
${prefix} .is-inline-date {
display: initial !important;
font-style: italic;
}
`;
}
updated(changedProperties) {
if (changedProperties.has("page") || changedProperties.has("query")) {
this.updateSnippet();
this.iconValid = !!this.page.favIconUrl;
//this.updateFavIcon();
this.deleting = false;
const res = this.getDateTS();
this.timestamp = res.timestamp;
this.date = res.date;
}
}
@@ -784,7 +999,7 @@ class PageEntry extends LitElement
render() {
const p = this.page;
const {date, timestamp} = this.getDateTS();
const date = this.date;
const hasSize = typeof(p.size) === "number";
@@ -796,38 +1011,44 @@ class PageEntry extends LitElement
</label>
</div>` : ``}
<div class="columns">
${this.index ? html`
<div class="column col-index is-1">${this.index}.</div>
` : ``}
<div class="column col-date is-2">
<div>${date ? date.toLocaleDateString() : ""}</div>
<div>${date ? date.toLocaleTimeString() : ""}</div>
</div>
<div class="column">
<article class="media">
<figure class="media-left">
<p class="">
${this.iconValid ? html`
<img class="favicon" @error="${(e) => this.iconValid = false}" src="${this.replayPrefix}/${timestamp}id_/${p.favIconUrl}"/>` : html`
<span class="favicon"></span>`}
</p>
</figure>
<div class="media-content">
<a @click="${this.onReplay}" data-url="${p.url}" data-ts="${timestamp}" href="#">
<p class="is-size-6 has-text-weight-bold has-text-link text">
<keyword-mark keywords="${this.query}">${p.title || p.url}</keyword-mark>
<div class="${this.isSidebar ? "sidebar" : "full"}" @click="${this.onReplay}">
<div class="columns">
${this.index ? html`
<div class="column col-index is-1 is-size-7">${this.index}.</div>
` : ``}
<div class="column col-date is-2">
<div>${date ? date.toLocaleDateString() : ""}</div>
<div>${date ? date.toLocaleTimeString() : ""}</div>
</div>
<div class="column">
<article class="media">
<figure class="media-left">
<p class="">
${this.iconValid ? html`
<img class="favicon" @error="${(e) => this.iconValid = false}" src="${this.replayPrefix}/${this.timestamp}id_/${p.favIconUrl}"/>` : html`
<span class="favicon"></span>`}
</p>
<p class="has-text-dark text"><keyword-mark keywords="${this.query}">${p.url}</keyword-mark></p>
</a>
${this.textSnippet ? html`
<div class="text"><keyword-mark keywords="${this.query}">${this.textSnippet}</keyword-mark></div>` : html``}
</div>
${hasSize ? html`
<div class="media-right" style="margin-right: 2em">
${prettyBytes(p.size)}
</div>` : ``}
</article>
</figure>
<div class="media-content ${this.isCurrent ? 'current' : ''}">
<a @click="${this.onReplay}" href="#">
${this.isCurrent ? html`<p class="curr-page is-pulled-right">Current Page</p>` : ``}
<p class="is-size-6 has-text-weight-bold has-text-link text">
<keyword-mark keywords="${this.query}">${p.title || p.url}</keyword-mark>
</p>
<p class="has-text-dark text"><keyword-mark keywords="${this.query}">${p.url}</keyword-mark></p>
<p class="has-text-grey-dark text is-inline-date">
${date ? date.toLocaleString(): ""}
</p>
</a>
${this.textSnippet ? html`
<div class="text"><keyword-mark keywords="${this.query}">${this.textSnippet}</keyword-mark></div>` : html``}
</div>
${hasSize ? html`
<div class="media-right" style="margin-right: 2em">
${prettyBytes(p.size)}
</div>` : ``}
</article>
</div>
</div>
</div>
@@ -845,9 +1066,7 @@ class PageEntry extends LitElement
return;
}
const {timestamp} = this.getDateTS();
const resp = await fetch(`${this.replayPrefix}/${timestamp}id_/${this.page.favIconUrl}`);
const resp = await fetch(`${this.replayPrefix}/${this.timestamp}id_/${this.page.favIconUrl}`);
if (resp.status != 200) {
this.favIconData = null;
@@ -911,9 +1130,10 @@ class PageEntry extends LitElement
onReplay(event) {
event.preventDefault();
const data = {
url: event.currentTarget.getAttribute("data-url"),
ts: event.currentTarget.getAttribute("data-ts"),
url: this.page.url,
ts: this.timestamp,
view: "replay"
};
this.sendChangeEvent(data);