From 8144b602a7f4d0e02a603b9434c024eeb9bb94f0 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Wed, 14 Oct 2020 23:26:23 -0700 Subject: [PATCH] ui work: - show favicon in location bar, if available - editable mode: experimental allow editing collection title from pages view, update using new api - editable mode: disable selected only downloads if nothing is selected - pageentry: simplify, use passed in date wabac.js: update to latest dev wabac.js 2.1.0-beta.2, including improved fuzzy matching system, new rules for fb and twitter (beta) --- src/coll.js | 48 ++++++++++++++- src/pageentry.js | 22 ++----- src/pages.js | 79 +++++++++++++++++++++--- sw.js | 30 ++++----- ui.js | 154 ++++++++++++++++++++++++++++++----------------- yarn.lock | 4 +- 6 files changed, 240 insertions(+), 97 deletions(-) diff --git a/src/coll.js b/src/coll.js index 3d555bd..ef9728c 100644 --- a/src/coll.js +++ b/src/coll.js @@ -65,6 +65,8 @@ class Coll extends LitElement this.splitter = null; this.isVisible = true; + + this.favIconUrl = ""; } static get properties() { @@ -93,12 +95,13 @@ class Coll extends LitElement embed: { type: String }, editable: { type: Boolean }, - isVisible: { type: Boolean } + isVisible: { type: Boolean }, + + favIconUrl: {type: String } } } firstUpdated() { - //this.doUpdateInfo(); this.inited = true; window.addEventListener("hashchange", (event) => this.onHashChange(event)); @@ -127,6 +130,13 @@ class Coll extends LitElement if (changedProperties.has("sourceUrl")) { this.doUpdateInfo(); } + if (changedProperties.has("editable")) { + if (this.editable) { + this._pollColl = setInterval(() => this.doUpdateInfo(), 10000); + } else if (this._pollColl) { + clearInterval(this._pollColl); + } + } if (changedProperties.has("tabData")) { if (!this.collInfo || !this.collInfo.coll) { return; @@ -257,6 +267,14 @@ class Coll extends LitElement }})); } + onCollUpdate(event) { + if (!this.editable) { + return; + } + + this.collInfo = {...this.collInfo, ...event.detail}; + } + onHashChange(event) { const hash = window.location.hash; if (hash && hash !== this._locationHash) { @@ -418,6 +436,12 @@ class Coll extends LitElement border-radius: 4px; } + .favicon img { + width: 20px; + height: 20px; + filter: drop-shadow(1px 1px 2px grey); + } + #datetime { position: absolute; right: 1em; @@ -570,6 +594,7 @@ class Coll extends LitElement ts="${this.tabData.ts || ""}" @coll-tab-nav="${this.onCollTabNav}" id="replay" @replay-loading="${(e) => this.isLoading = e.detail.loading}" + @replay-favicons="${this.onFavIcons}" > ` : ``} @@ -640,6 +665,8 @@ class Coll extends LitElement const isReplay = !!this.tabData.url; + const showFavIcon = isReplay && this.favIconUrl; + return html`