sidebar support + pageview sidebar work!
- 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
+128
-31
@@ -1,4 +1,4 @@
|
||||
import { LitElement, html, css } from 'lit-element';
|
||||
import { LitElement, html, css, query } from 'lit-element';
|
||||
import { wrapCss, rwpLogo, IS_APP } from './misc';
|
||||
|
||||
import { sourceToId, tsToDate } from './pageutils';
|
||||
@@ -17,6 +17,8 @@ import fasLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
|
||||
import fasRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg';
|
||||
import fasMenuV from '@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg';
|
||||
|
||||
import { defineCustomElements as defineSplitMe } from 'split-me/loader';
|
||||
|
||||
|
||||
const RWP_SCHEME = "search://";
|
||||
|
||||
@@ -55,6 +57,8 @@ class Coll extends LitElement
|
||||
this.hasStory = false;
|
||||
|
||||
this.editable = false;
|
||||
|
||||
this.showSidebar = localStorage.getItem(`pages:showSidebar`) === "1";
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
@@ -64,6 +68,8 @@ class Coll extends LitElement
|
||||
sourceUrl: { type: String },
|
||||
loadInfo: { type: Object, attribute: false },
|
||||
|
||||
showSidebar: { type: Boolean },
|
||||
|
||||
collInfo: { type: Object, attribute: false },
|
||||
coll: { type: String },
|
||||
|
||||
@@ -91,6 +97,8 @@ class Coll extends LitElement
|
||||
this.addEventListener("fullscreenchange", (event) => {
|
||||
this.isFullscreen = !!document.fullscreenElement;
|
||||
});
|
||||
|
||||
defineSplitMe(window);
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
@@ -202,6 +210,10 @@ class Coll extends LitElement
|
||||
if (!this.hasStory && this.tabData.view === "story") {
|
||||
this.tabData.view = "pages";
|
||||
}
|
||||
|
||||
if (this.tabData.view === "replay" && this.tabData.query) {
|
||||
this.showSidebar = true;
|
||||
}
|
||||
}
|
||||
|
||||
onTabClick(event) {
|
||||
@@ -214,12 +226,26 @@ class Coll extends LitElement
|
||||
|
||||
onCollTabNav(event) {
|
||||
if (event.target.id === this.tabData.view) {
|
||||
this.updateTabData(event.detail.data, event.detail.replaceLoc);
|
||||
this.updateTabData(event.detail.data, event.detail.replaceLoc, false);
|
||||
} else if (this.showSidebar && event.target.id === "pages" && this.tabData.view === "replay") {
|
||||
if (event.detail.data.showSidebar === false) {
|
||||
this.showSidebar = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateTabData(event.detail.data, event.detail.replaceLoc, true);
|
||||
}
|
||||
}
|
||||
|
||||
updateTabData(data, replaceLoc = false) {
|
||||
this.tabData = {view: this.tabData.view, ...data};
|
||||
updateTabData(data, replaceLoc = false, merge = false) {
|
||||
this.tabData = {...this.tabData, ...data};
|
||||
// {
|
||||
// view: this.tabData.view,
|
||||
// query: this.tabData.query,
|
||||
// currList: this.tabData.currList,
|
||||
// ...data,
|
||||
// };
|
||||
|
||||
if (this.tabData.url) {
|
||||
this.url = this.tabData.url || "";
|
||||
}
|
||||
@@ -232,6 +258,12 @@ class Coll extends LitElement
|
||||
|
||||
static get styles() {
|
||||
return wrapCss(css`
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
@@ -282,7 +314,9 @@ class Coll extends LitElement
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
min-height: 0px;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
${Coll.replayBarStyles}
|
||||
@@ -356,6 +390,25 @@ class Coll extends LitElement
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
transition: transform 0.5s;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
split-me {
|
||||
--phantom-divider-thickness: 4px;
|
||||
--divider-thickness: 0.1rem;
|
||||
--divider-color: rgb(151, 152, 154);
|
||||
--divider-shadow: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
wr-page-view, wr-coll-replay {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -368,9 +421,9 @@ class Coll extends LitElement
|
||||
.coll="${this.coll}" .sourceUrl="${this.sourceUrl}" @coll-loaded=${this.onCollLoaded}></wr-loader>`;
|
||||
} else if (this.collInfo) {
|
||||
return html`
|
||||
${this.renderLocationBar()}
|
||||
${this.renderTabHeader()}
|
||||
<nav id="contents" class="is-light">
|
||||
${this.renderLocationBar()}
|
||||
${this.renderTabHeader()}
|
||||
${this.renderCollTabs()}
|
||||
</nav>`;
|
||||
} else {
|
||||
@@ -445,7 +498,7 @@ class Coll extends LitElement
|
||||
` : ``}
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-borderless is-hidden-touch ${!isReplay ? 'grey-disabled' : ''}" @click="${this.onGoPages}">
|
||||
<button class="button is-borderless is-hidden-touch ${!isReplay ? 'grey-disabled' : ''}" @click="${this.onShowPages}">
|
||||
<span class="icon is-small">
|
||||
<fa-icon size="1.0em" class="has-text-grey" .svg="${farListAlt}"></fa-icon>
|
||||
</span>
|
||||
@@ -491,7 +544,7 @@ class Coll extends LitElement
|
||||
</span>
|
||||
<span>Reload</span>
|
||||
</a>
|
||||
<a class="dropdown-item is-hidden-desktop ${!isReplay ? 'grey-disabled' : 'has-text-grey'}" @click="${this.onGoPages}">
|
||||
<a class="dropdown-item is-hidden-desktop ${!isReplay ? 'grey-disabled' : ''}" @click="${this.onShowPages}">
|
||||
<span class="icon is-small">
|
||||
<fa-icon size="1.0em" class="" .svg="${farListAlt}"></fa-icon>
|
||||
</span>
|
||||
@@ -523,12 +576,30 @@ class Coll extends LitElement
|
||||
</div>`;
|
||||
}
|
||||
|
||||
dragStart(event) {
|
||||
const replay = this.renderRoot.querySelector("wr-coll-replay");
|
||||
if (replay) {
|
||||
replay.setDisablePointer(true);
|
||||
}
|
||||
|
||||
event.path[0].addEventListener("mouseup", (event) => this.dragEnd(), {once: true});
|
||||
}
|
||||
|
||||
dragEnd() {
|
||||
const replay = this.renderRoot.querySelector("wr-coll-replay");
|
||||
if (replay) {
|
||||
replay.setDisablePointer(false);
|
||||
}
|
||||
}
|
||||
|
||||
renderCollTabs() {
|
||||
const isStory = this.tabData.view === 'story';
|
||||
const isPages = this.tabData.view === 'pages';
|
||||
const isResources = this.tabData.view === 'resources';
|
||||
const isReplay = this.tabData.view === 'replay';
|
||||
|
||||
const isSidebar = isReplay && this.showSidebar;
|
||||
|
||||
return html`
|
||||
${this.hasStory ? html`
|
||||
<wr-coll-story .collInfo="${this.collInfo}"
|
||||
@@ -538,15 +609,6 @@ class Coll extends LitElement
|
||||
class="${isStory ? '' : 'is-hidden'}">
|
||||
</wr-coll-story>` : ''}
|
||||
|
||||
<wr-page-view .collInfo="${this.collInfo}"
|
||||
.active="${isPages}"
|
||||
.editable="${this.editable}"
|
||||
currList="${this.tabData.currList || 0}"
|
||||
query="${this.tabData.query || ""}"
|
||||
@coll-tab-nav="${this.onCollTabNav}" id="pages"
|
||||
class="${isPages ? '' : 'is-hidden'}">
|
||||
</wr-page-view>
|
||||
|
||||
<wr-coll-resources .collInfo="${this.collInfo}"
|
||||
.active="${isResources}"
|
||||
query="${this.tabData.query || ""}"
|
||||
@@ -556,16 +618,42 @@ class Coll extends LitElement
|
||||
class="is-paddingless ${isResources ? '' : 'is-hidden'}">
|
||||
</wr-coll-resources>
|
||||
|
||||
${isReplay ? html`
|
||||
<wr-coll-replay .collInfo="${this.collInfo}"
|
||||
sourceUrl="${this.sourceUrl}"
|
||||
url="${this.tabData.url || ""}"
|
||||
ts="${this.tabData.ts || ""}"
|
||||
@coll-tab-nav="${this.onCollTabNav}" id="replay"
|
||||
@replay-loading="${(e) => this.isLoading = e.detail.loading}"
|
||||
class="${isReplay ? '' : 'is-hidden'}">
|
||||
</wr-coll-replay>
|
||||
` : ``}
|
||||
<split-me n="${isSidebar ? 2 : 1}"
|
||||
d="horizontal"
|
||||
sizes="0.30, 0.70"
|
||||
.minSizes=${[0.10, 0.50]}
|
||||
@dragstart="${this.dragStart}"
|
||||
class="${isReplay || isPages ? '' : 'is-hidden'}"
|
||||
>
|
||||
<wr-page-view
|
||||
slot="0"
|
||||
.collInfo="${this.collInfo}"
|
||||
.active="${isPages}"
|
||||
.editable="${this.editable}"
|
||||
.isSidebar="${isSidebar}"
|
||||
currList="${this.tabData.currList || 0}"
|
||||
query="${this.tabData.query || ""}"
|
||||
.url="${this.tabData.url || ""}"
|
||||
.ts="${this.tabData.ts || ""}"
|
||||
@coll-tab-nav="${this.onCollTabNav}" id="pages"
|
||||
class="${isSidebar ? 'sidebar' : (isPages ? '' : 'is-hidden')}">
|
||||
</wr-page-view>
|
||||
|
||||
${isReplay ? html`
|
||||
<wr-coll-replay
|
||||
slot="${isSidebar ? 1 : 0}"
|
||||
.collInfo="${this.collInfo}"
|
||||
sourceUrl="${this.sourceUrl}"
|
||||
url="${this.tabData.url || ""}"
|
||||
ts="${this.tabData.ts || ""}"
|
||||
@coll-tab-nav="${this.onCollTabNav}" id="replay"
|
||||
@replay-loading="${(e) => this.isLoading = e.detail.loading}"
|
||||
class="${isReplay ? '' : 'is-hidden'}">
|
||||
</wr-coll-replay>
|
||||
` : ``}
|
||||
|
||||
</split-me>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -605,11 +693,20 @@ class Coll extends LitElement
|
||||
window.history.forward();
|
||||
}
|
||||
|
||||
onGoPages(event) {
|
||||
onShowPages(event) {
|
||||
event.preventDefault();
|
||||
if (this.tabData && this.tabData.view === "replay") {
|
||||
this.updateTabData({view: "pages"});
|
||||
// show sidebar if table or greater
|
||||
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"});
|
||||
}
|
||||
}
|
||||
localStorage.setItem(`pages:showSidebar`, this.showSidebar ? "1" : "0");
|
||||
}
|
||||
|
||||
onReAuthed(event) {
|
||||
|
||||
+359
-139
@@ -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);
|
||||
|
||||
+9
-1
@@ -86,6 +86,14 @@ class Replay extends LitElement
|
||||
}
|
||||
}
|
||||
|
||||
setDisablePointer(disable) {
|
||||
const iframe = this.renderRoot.querySelector("iframe");
|
||||
|
||||
if (iframe) {
|
||||
iframe.style.pointerEvents = disable ? "none" : "all";
|
||||
}
|
||||
}
|
||||
|
||||
onReplayMessage(event) {
|
||||
const iframe = this.renderRoot.querySelector("iframe");
|
||||
|
||||
@@ -154,7 +162,7 @@ class Replay extends LitElement
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
#height: calc(100vh - 150px);
|
||||
height: 100%;
|
||||
border: 0px;
|
||||
|
||||
@@ -113,6 +113,7 @@ class Sorter extends LitElement
|
||||
return wrapCss(css`
|
||||
:host {
|
||||
min-width: 100px;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
button.button.is-small {
|
||||
border-radius: 4px;
|
||||
|
||||
+1
-1
@@ -94,6 +94,7 @@ class Story extends LitElement
|
||||
|
||||
.columns {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-self: stretch;
|
||||
margin: 1.0em 0 0 0;
|
||||
min-height: 0;
|
||||
@@ -146,7 +147,6 @@ class Story extends LitElement
|
||||
overflow-y: auto;
|
||||
|
||||
border-top: 1px solid black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(100% - 150px - 0.75em);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user