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`