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)
2020-10-14 23:42:10 -07:00
parent a9c6148d67
commit 8144b602a7
6 changed files with 240 additions and 97 deletions
@@ -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}"
          >
          </wr-coll-replay>
        ` : ``}
@@ -640,6 +665,8 @@ class Coll extends LitElement

    const isReplay = !!this.tabData.url;

+    const showFavIcon = isReplay && this.favIconUrl;
+
    return html`
    <a class="skip-link" href="#skip-replay-target" @click="${this.skipMenu}">Skip replay navigation</a>
    <nav class="replay-bar" aria-label="replay">
@@ -677,9 +704,13 @@ class Coll extends LitElement
          </span>
        </a>
        <form @submit="${this.onSubmit}">
-          <div class="control is-expanded">
+          <div class="control is-expanded ${showFavIcon ? 'has-icons-left' : ''}">
            <input id="url" class="input" type="search" @keydown="${this.onKeyDown}" .value="${this.url}" placeholder="Enter text to search or a URL to replay"/>
            ${isReplay ? html`<p id="datetime" class="control is-hidden-mobile">${dateStr}</p>` : html``}
+            ${showFavIcon ? html`
+            <span class="favicon icon is-small is-left">
+              <img src="${this.favIconUrl}"/>
+            </span>` : html``}
          </div>
        </form>

@@ -803,6 +834,7 @@ class Coll extends LitElement
    .url="${this.tabData.url || ""}"
    .ts="${this.tabData.ts || ""}"
    @coll-tab-nav="${this.onCollTabNav}" id="pages"
+    @coll-update="${this.onCollUpdate}"
    class="${isPages ? '' : 'is-hidden'} ${isSidebar ? 'sidebar' : ''}"
    role="${isSidebar ? '' : 'main'}"
    >
@@ -878,6 +910,16 @@ class Coll extends LitElement
    this.showSidebar = false;
  }

+  onFavIcons(event) {
+    this.favIconUrl = "";
+    event.detail.icons.map(async (icon) => {
+      const res = await fetch(icon.href);
+      if (res.status === 200) {
+        this.favIconUrl = icon.href;
+      }
+    });
+  }
+
  onReAuthed(event) {
    this.reauthWait = (async () => {
      const headers = event.detail.headers;
@@ -4,7 +4,7 @@ import { LitElement, html, css, unsafeCSS } from 'lit-element';

 import "keyword-mark-element/lib/keyword-mark.js";

-import { getPageDateTS, getReplayLink } from './pageutils';
+import { getReplayLink } from './pageutils';

 import { wrapCss } from './misc';

@@ -24,9 +24,6 @@ class PageEntry extends LitElement
    this.index = 0;
    this.isCurrent = false;
    this.isSidebar = false;
-
-    this.timestamp = "";
-    this.date = null;
  }

  static get properties() {
@@ -42,8 +39,6 @@ class PageEntry extends LitElement
      index: { type: Number },
      isCurrent: { type: Boolean },
      isSidebar: { type: Boolean },
-      timestamp: { type: String },
-      date: { type: Object }
    }
  }

@@ -170,16 +165,12 @@ class PageEntry extends LitElement
      this.iconValid = !!this.page.favIconUrl;
      //this.updateFavIcon();
      this.deleting = false;
-
-      const res = getPageDateTS(this.page);
-      this.timestamp = res.timestamp;
-      this.date = res.date;
    }
  }

  render() {
    const p = this.page;
-    const date = this.date;
+    const date = this.page.date;

    const hasSize = typeof(p.size) === "number";

@@ -204,14 +195,13 @@ class PageEntry extends LitElement
          <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`
+              <img class="favicon" @error="${(e) => this.iconValid = false}" src="${this.replayPrefix}/${this.page.timestamp}id_/${p.favIconUrl}"/>` : html`
              <span class="favicon"></span>`}
            </p>
          </figure>
          <div class="media-content ${this.isCurrent ? 'current' : ''}">
            <div role="heading" aria-level="${this.isSidebar ? "4": "3"}">
-              <a @click="${this.onReplay}" href="${getReplayLink("pages", this.page.url, this.timestamp)}">
-            ${this.isCurrent ? html`<p class="curr-page is-pulled-right">Current Page</p>` : ``}
+              <a @click="${this.onReplay}" href="${getReplayLink("pages", this.page.url, this.page.timestamp)}">
              <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>
@@ -245,7 +235,7 @@ class PageEntry extends LitElement
      return;
    }

-    const resp = await fetch(`${this.replayPrefix}/${this.timestamp}id_/${this.page.favIconUrl}`);
+    const resp = await fetch(`${this.replayPrefix}/${this.page.timestamp}id_/${this.page.favIconUrl}`);

    if (resp.status != 200) {
      this.favIconData = null;
@@ -313,7 +303,7 @@ class PageEntry extends LitElement

    const data = {
      url: this.page.url,
-      ts: this.timestamp,
+      ts: this.page.timestamp,
    };
    this.sendChangeEvent(data);
    return false;
@@ -11,6 +11,8 @@ import { getTS, getPageDateTS } from './pageutils';
 import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.svg';
 import fasAngleDown from '@fortawesome/fontawesome-free/svgs/solid/angle-down.svg';

+import fasEdit from '@fortawesome/fontawesome-free/svgs/solid/edit.svg';
+

 // ===========================================================================
 class Pages extends LitElement
@@ -41,6 +43,8 @@ class Pages extends LitElement
    this.isSidebar = false;
    this.url = "";
    this.ts = "";
+
+    this.editing = false;
  }

  static get sortKeys() {
@@ -85,7 +89,9 @@ class Pages extends LitElement

      isSidebar: { type: Boolean },
      url: { type: String },
-      ts: { type: String }
+      ts: { type: String },
+
+      editing: { type: Boolean }
    }
  }

@@ -322,6 +328,7 @@ class Pages extends LitElement
        border-right: 3px solid rgb(237, 237, 237);
        background-color: whitesmoke;
        padding-right: 0px;
+        position: relative;
      }

      .index-bar-title {
@@ -331,6 +338,17 @@ class Pages extends LitElement
        word-break: break-word;
      }

+      .index-bar-title:hover + .editIcon {
+        display: block;
+      }
+
+      .editIcon {
+        display: none;
+        position: absolute;
+        right: 8px;
+        top: 8px;
+      }
+
      .index-bar-status {
        display: flex;
        flex-direction: row;
@@ -413,6 +431,11 @@ class Pages extends LitElement
        background-color: rgb(207, 243, 255);
      }

+      .is-disabled {
+        pointer-events: none;
+        opacity: .65;
+      }
+
      .page-header {
        display: flex;
        flex-direction: row;
@@ -509,7 +532,13 @@ class Pages extends LitElement
    </div>
    <div class="main columns">
      <div class="column index-bar is-one-fifth is-hidden-mobile">
-        <div class="index-bar-title">${this.collInfo.title}</div>
+
+        ${this.editable && this.editing ? html`
+        <form @submit="${this.onUpdateTitle}"><input id="titleEdit" class="input" value="${this.collInfo.title}" @blur="${this.onUpdateTitle}"></form>
+        ` : html`
+        <div class="index-bar-title" @dblclick="${(e) => this.editing = true}">${this.collInfo.title}</div>`}
+
+        ${this.editable ? html`<fa-icon class="editIcon" .svg="${fasEdit}"></fa-icon>` : html``}

        <span class="num-results" aria-live="polite" aria-atomic="true">${this.formatResults()}</span>

@@ -556,17 +585,29 @@ class Pages extends LitElement
        </div>
        <div class="dropdown-menu" id="dropdown-menu">
          <div class="dropdown-content">
-            <a role="button" href="#" @click="${(e) => this.onDownload(e, "wacz", true)}" @keyup="${clickOnSpacebarPress}" class="dropdown-item">
+            <a role="button" href="#"
+             @click="${(e) => this.onDownload(e, "wacz", true)}"
+             @keyup="${clickOnSpacebarPress}"
+             class="dropdown-item ${this.selectedPages.size === 0 ? 'is-disabled' : ''}">
              Download Selected as WACZ (Web Archive Collection)
            </a>
-            <a role="button" href="#" @click="${(e) => this.onDownload(e, "warc", true)}" @keyup="${clickOnSpacebarPress}" class="dropdown-item">
+            <a role="button" href="#"
+             @click="${(e) => this.onDownload(e, "warc", true)}"
+             @keyup="${clickOnSpacebarPress}"
+             class="dropdown-item ${this.selectedPages.size === 0 ? 'is-disabled' : ''}">
              Download Selected as WARC Only
            </a>
            <hr class="dropdown-divider">
-            <a role="button" href="#" @click="${(e) => this.onDownload(e, "wacz", false)}" @keyup="${clickOnSpacebarPress}" class="dropdown-item">
+            <a role="button" href="#"
+             @click="${(e) => this.onDownload(e, "wacz", false)}"
+             @keyup="${clickOnSpacebarPress}"
+             class="dropdown-item">
              Download All as WACZ (Web Archive Collection)
            </a>
-            <a role="button" href="#" @click="${(e) => this.onDownload(e, "warc", false)}" @keyup="${clickOnSpacebarPress}" class="dropdown-item">
+            <a role="button" href="#"
+             @click="${(e) => this.onDownload(e, "warc", false)}"
+             @keyup="${clickOnSpacebarPress}"
+             class="dropdown-item">
              Download All as WARC Only
            </a>
          </div>
@@ -576,7 +617,7 @@ class Pages extends LitElement

  renderPageHeader() {
    return html`
-    ${this.editable ? html`
+    ${this.editable && this.filteredPages.length ? html`
    <div class="check-select">
      <label class="checkbox">
      <input @change=${this.onSelectAll} type="checkbox" .checked="${this.allSelected}">
@@ -656,6 +697,30 @@ class Pages extends LitElement
    `;
  }

+  onUpdateTitle(event) {
+    event.preventDefault();
+
+    this.editing = false;
+
+    if (!this.editable) {
+      return;
+    }
+    const input = this.renderRoot.querySelector("#titleEdit");
+    if (!input || !input.value.trim()) {
+      return;
+    }
+
+    const title = input.value;
+
+    const body = JSON.stringify({title});
+
+    fetch(`${this.collInfo.apiPrefix}/metadata`, {method: 'POST', body}).then((res) => {
+      if (res.status === 200) {
+        this.dispatchEvent(new CustomEvent("coll-update", {detail: {title}}));
+      }
+    });
+  }
+
  onMenu(event) {
    event.stopPropagation();
    this.menuActive = !this.menuActive;