banner dynamic update:

- ensure banner updated in response to inner frame events

pywb/static/js/cdxquery.js

@@ -5,6 +5,7 @@ class CDXLoader {
   constructor(staticPrefix, url, prefix, timestamp) {
     this.opts = {};
     this.prefix = prefix;
+    this.staticPrefix = staticPrefix;
 
     this.isReplay = (timestamp !== undefined);
 
@@ -12,19 +13,19 @@ class CDXLoader {
       window.WBBanner = new VueBannerWrapper(this);
     }
 
-    this.queryWorker = new Worker(staticPrefix + '/queryWorker.js');
+    let queryURL;
 
     // query form *?=url...
     if (window.location.href.indexOf("*?") > 0) {
-      this.queryURL = window.location.href.replace("*?", "cdx?") + "&output=json";
-      url = new URL(this.queryURL).searchParams.get("url");
+      queryURL = window.location.href.replace("*?", "cdx?") + "&output=json";
+      url = new URL(queryURL).searchParams.get("url");
 
     // otherwise, traditional calendar form /*/<url>
     } else if (url) {
       const params = new URLSearchParams();
       params.set("url", url);
       params.set("output", "json");
-      this.queryURL = prefix + "cdx?" + params.toString();
+      queryURL = prefix + "cdx?" + params.toString();
 
     // otherwise, an error since no URL
     } else {
@@ -36,32 +37,60 @@ class CDXLoader {
     // TODO: make configurable
     this.opts.logoImg = staticPrefix + "/pywb-logo-sm.png";
 
-    const cdxList = [];
-
-    this.queryWorker.addEventListener("message", (event) => {
-      const data = event.data;
-      switch (data.type) {
-        case "cdxRecord":
-          cdxList.push(data.record);
-          break;
-
-        case "finished":
-          PywbVue.init(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
-          break;
-      }
+    this.loadCDX(queryURL).then((cdxList) => {
+      PywbVue.init(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
     });
   }
 
-  init() {
-    this.queryWorker.postMessage({
-      type: 'query',
-      queryURL: this.queryURL
+  async updateSnapshot(url, timestamp) {
+    const params = new URLSearchParams();
+    params.set("url", url);
+    params.set("output", "json");
+    const queryURL = this.prefix + "cdx?" + params.toString();
+
+    const cdxList = await this.loadCDX(queryURL);
+
+    PywbVue.update(cdxList, {url, timestamp});
+  }
+
+  async loadCDX(queryURL) {
+    const queryWorker = new Worker(this.staticPrefix + '/queryWorker.js');
+
+    const p = new Promise((resolve) => {
+      const cdxList = [];
+
+      queryWorker.addEventListener("message", (event) => {
+        const data = event.data;
+        switch (data.type) {
+          case "cdxRecord":
+            cdxList.push(data.record);
+            break;
+
+          case "finished":
+            resolve(cdxList);
+            break;
+        }
+      });
     });
+
+    queryWorker.postMessage({
+      type: 'query',
+      queryURL
+    });
+
+    const results = await p;
+
+    queryWorker.terminate();
+    //delete queryWorker;
+
+    return results;
   }
 
   loadSnapshot(snapshot) {
-    if (!isReplay) {
+    if (!this.isReplay) {
       window.location.href = this.prefix + snapshot.id + "/" + snapshot.url;
+    } else if (cframe) {
+      cframe.load_url(snapshot.url, snapshot.id + "");
     }
   }
 }
@@ -70,9 +99,10 @@ class CDXLoader {
 // ===========================================================================
 class VueBannerWrapper
 {
-  constructor() {
+  constructor(loader) {
     this.loading = true;
     this.lastUrl = null;
+    this.loader = loader;
   }
 
   init() {}
@@ -86,6 +116,13 @@ class VueBannerWrapper
   }
 
   onMessage(event) {
-    console.log(event);
+    const type = event.data.wb_type;
+
+    if (type === 'load' || type === 'replace-url') {
+      if (event.data.url !== this.lastUrl) {
+        this.loader.updateSnapshot(event.data.url, event.data.ts);
+        this.lastUrl = event.data.url;
+      }
+    }
   }
 }

pywb/templates/banner.html

@@ -33,7 +33,6 @@ window.banner_info = {
 <script src="{{ static_prefix }}/js/cdxquery.js"></script>
 <script>
   var loader = new CDXLoader("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}");
-  loader.init();
 </script>
 
 {% if not old_banner %}

pywb/templates/query.html

@@ -54,7 +54,6 @@
 
 {% else %}
   var loader = new CDXLoader("{{ static_prefix }}", "{{ url }}", "{{ prefix }}");
-  loader.init();
 
 {% endif %}
 

pywb/vueui/src/App.vue

@@ -87,15 +87,18 @@ export default {
       if (!this.config.title) {
         this.config.title = this.config.initialView.url;
       }
-      if (this.config.initialView.timestamp === "undefined") {
+      if (this.config.initialView.timestamp === undefined) {
         this.showFullView = true;
       } else {
         this.showFullView = false;
-
-        // convert to snapshot objec to support proper rendering of time/date
-        const snapshot = new PywbSnapshot(this.config.initialView, 0);
-        this.gotoSnapshot(snapshot);
+        this.setSnapshot(this.config.initialView);
       }
+    },
+    setSnapshot(view) {
+      // convert to snapshot objec to support proper rendering of time/date
+      const snapshot = new PywbSnapshot(view, 0);
+      this.config.title = view.url;
+      this.gotoSnapshot(snapshot);
     }
   }
 };

pywb/vueui/src/index.js

@@ -4,15 +4,16 @@ import { PywbData } from "./model.js";
 
 import Vue from "vue/dist/vue.esm.browser";
 
+var app = null;
+
 export function init(data, config = {}, loadCallback = null) {
-  const app = new Vue(appData);
+  app = new Vue(appData);
 
   const pywbData = new PywbData(data);
 
   app.$set(app, "snapshots", pywbData.snapshots);
   app.$set(app, "currentPeriod", pywbData.timeline);
 
-  //console.log({...app.config, ...config}.logoImg);
   app.$set(app, "config", {...app.config, ...config});
 
   app.$mount("#app");
@@ -21,3 +22,12 @@ export function init(data, config = {}, loadCallback = null) {
     app.$on("show-snapshot", loadCallback);
   }
 }
+
+export function update(data, snapshotData) {
+  const pywbData = new PywbData(data);
+
+  app.$set(app, "snapshots", pywbData.snapshots);
+  app.$set(app, "currentPeriod", pywbData.timeline);
+
+  app.setSnapshot(snapshotData);
+}