ui awp support:

- move <wr-modal> from awp here
- support page deletion confirmation dialog (in editing mode)
- support deleting multiple pages, deleting current selection (after confirmation)
- bump to wabac.js 2.5.1
- bump to 1.3.8

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@webrecorder/wabac": "^2.5.0",
+    "@webrecorder/wabac": "github:webrecorder/wabac.js",
     "bulma": "^0.9.0",
     "electron-log": "^4.3.0",
     "electron-updater": "^4.3.5",

src/misc.js

@@ -125,8 +125,58 @@ class AnimLogo extends FaIcon
   }
 }
 
+class WrModal extends LitElement
+{
+  constructor() {
+    super();
+    this.title = "";
+    this.bgClass = "";
+  }
+
+  static get properties() {
+    return {
+      title: { type: String },
+      bgClass: { type: String }
+    }
+  }
+
+  static get styles() {
+    return wrapCss(css`
+    .modal-background {
+      background-color: rgba(10, 10, 10, 0.50);
+    }
+
+    .modal-card-head {
+      background-color: var(--background, #97a1ff);
+    }
+    `);
+  }
+
+  render() {
+    return html`
+    <div class="modal is-active">
+      <div class="modal-background" @click="${this.onClose}"></div>
+      <div class="modal-card">
+        <header class="modal-card-head ${this.bgClass}">
+          <p class="modal-card-title is-3">${this.title}</p>
+          <button class="delete" aria-label="close" @click="${this.onClose}"></button>
+        </header>
+        <section class="modal-card-body">
+          <slot></slot>
+        </section>
+      </div>
+    </div>`;
+  }
+
+  onClose() {
+    this.dispatchEvent(new CustomEvent("modal-closed"));
+  }
+}
+
 customElements.define("fa-icon",  FaIcon);
 customElements.define("wr-anim-logo", AnimLogo);
 
-export { wrapCss, IS_APP, clickOnSpacebarPress, rwpLogo, FaIcon, AnimLogo,
+customElements.define("wr-modal",  WrModal);
+
+export { wrapCss, IS_APP, clickOnSpacebarPress, rwpLogo, FaIcon, AnimLogo, WrModal,
          LitElement, html, css, unsafeCSS, unsafeSVG };

src/pageentry.js

@@ -314,8 +314,7 @@ class PageEntry extends LitElement
   }
 
   onSendDeletePage(event) {
-    const page = this.page.id;
+    const page = this.page;
-    this.deleting = true;
     this.dispatchEvent(new CustomEvent("delete-page", {detail: {page}}));
   }
 

src/pages.js

@@ -5,6 +5,7 @@ import { wrapCss, clickOnSpacebarPress } from './misc';
 import ndjson from 'fetch-ndjson';
 
 import FlexSearch from 'flexsearch';
+import prettyBytes from 'pretty-bytes';
 
 import { getTS, getPageDateTS } from './pageutils';
 
@@ -45,6 +46,9 @@ class Pages extends LitElement
     this.ts = "";
 
     this.editing = false;
+
+    this.toDeletePages = null;
+    this.toDeletePage = null;
   }
 
   static get sortKeys() {
@@ -91,7 +95,10 @@ class Pages extends LitElement
       url: { type: String },
       ts: { type: String },
 
-      editing: { type: Boolean }
+      editing: { type: Boolean },
+
+      toDeletePages: { type: Object },
+      toDeletePage: { type: Object }
     }
   }
 
@@ -557,7 +564,9 @@ class Pages extends LitElement
         <div class="is-sr-only" role="heading" aria-level="${this.isSidebar ? "3": "2"}">Page List</div>
         ${this.renderPages()}
       </div>
-    </div>`;
+    </div>
+    ${this.renderDeleteModal()}
+    `;
   }
 
   renderDownloadMenu() {
@@ -620,8 +629,6 @@ class Pages extends LitElement
       <a role="button" href="#" @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" 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">
       <div class="num-results" aria-live="polite" aria-atomic="true">${this.formatResults()}</div>
       <wr-sorter id="pages"
@@ -637,6 +644,25 @@ class Pages extends LitElement
     `;
   }
 
+  renderDeleteModal() {
+    if (!this.toDeletePages) {
+      return html``;
+    }
+
+    return html`
+    <wr-modal bgClass="has-background-grey-lighter" @modal-closed="${(e) => this.toDeletePages = this.toDeletePage = null}" title="Confirm Delete">
+      ${this.toDeletePage ? html`
+      <p>Are you sure you want to delete the page <b>${this.toDeletePage.title}</b>?
+      (Size: <b>${prettyBytes(this.toDeletePage.size)}</b>)</p>` : html`
+      <p>Are you sure you want to delete the <b>${this.toDeletePages.size}</b> selected pages?
+      `}
+      <p>This operation can not be undone.</p>
+
+      <button @click="${this.onDeletePages}"class="button is-danger">Delete</button>
+      <button @click="${(e) => this.toDeletePages = this.toDeletePage = null}" class="button">Cancel</button>
+    </wr-modal>`;
+  }
+
   isCurrPage(page) {
     if (this.isSidebar) {
       if (page.url === this.url) {
@@ -673,8 +699,9 @@ class Pages extends LitElement
             .isCurrent="${this.isCurrPage(p)}"
             .isSidebar="${this.isSidebar}"
             .page="${p}"
+            pid="${p.id}"
             @sel-page="${this.onSelectToggle}"
-            @delete-page="${this.onDeletePage}"
+            @delete-page="${this.onDeleteConfirm}"
             replayPrefix="${this.collInfo.replayPrefix}"
             query="${this.query}"
             class="${this.isSidebar ? 'sidebar' : ''}"
@@ -776,21 +803,50 @@ class Pages extends LitElement
     window.location.href = `${this.collInfo.apiPrefix}/dl?` + params.toString();
   }
 
-  async onDeletePage(event) {
+  onDeleteConfirm(event) {
     const page = event.currentTarget.page;
-    const resp = await fetch(`${this.collInfo.apiPrefix}/page/${page.id}`, {method: 'DELETE'});
+    // if page is one of the selected, delete entire selection
-    const json = await resp.json();
+    if (this.selectedPages.has(page.id)) {
+      this.toDeletePages = this.selectedPages;
+      this.toDeletePage = null;
+    } else {
+    // else, delete just the page
+      this.toDeletePages = [page.id];
+      this.toDeletePage = page;
+    }
+  }
 
-    const inx = this.collInfo.pages.indexOf(page);
+  async onDeletePages() {
-    if (inx < 0) {
+    const pageMap = {};
-      return;
+
+    for (const id of this.toDeletePages) {
+      const p = this.renderRoot.querySelector(`wr-page-entry[pid="${id}"]`);
+      if (p) {
+        p.deleting = true;
+        pageMap[id] = p;
+      }
     }
 
-    //todo: full update?
+    for (const id of this.toDeletePages) {
-    this.collInfo.pages.splice(inx, 1);
+      const resp = await fetch(`${this.collInfo.apiPrefix}/page/${id}`, {method: 'DELETE'});
-    //if (!this.query){
+      const json = await resp.json();
-    //  this.filteredPages = [...this.collInfo.pages];
+
-    //}
+      const page = pageMap[id];
+
+      if (!page) {
+        continue;
+      }
+
+      const inx = this.collInfo.pages.indexOf(page);
+      if (inx < 0) {
+        continue;
+      }
+  
+      this.collInfo.pages.splice(inx, 1);
+    }
+
+    this.toDeletePages = null;
+    this.toDeletePage = null;
 
     this.updateTextSearch();
     this.requestUpdate();

yarn.lock

@@ -737,6 +737,28 @@
     warcio "^1.3.3"
     wbn "^0.0.3"
 
+"@webrecorder/wabac@github:webrecorder/wabac.js":
+  version "2.5.1"
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/272f0c1aae8c5fb5586482732a34cf221516c5a6"
+  dependencies:
+    "@webrecorder/wombat" "^3.0.3"
+    brotli "github:foliojs/brotli.js"
+    fast-xml-parser "^3.15.1"
+    format-link-header "^3.1.1"
+    http-status-codes "^2.1.4"
+    idb "^5.0.1"
+    js-levenshtein "^1.1.6"
+    js-yaml "^3.13.1"
+    json-2-csv "^3.7.1"
+    pako "^1.0.10"
+    parse-link-header "^1.0.1"
+    parse5-html-rewriting-stream "^6.0.1"
+    parse5-sax-parser "^6.0.1"
+    path-parser "^6.1.0"
+    unescape-js "^1.1.4"
+    warcio "^1.3.3"
+    wbn "^0.0.3"
+
 "@webrecorder/wombat@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@webrecorder/wombat/-/wombat-3.0.3.tgz#122f6f33839112ea4c82eb7da8871a73067f058b"