vue ui:

- combine cdxquery classes into vue build, expose single entrypoint VueUI.main

pywb/static/js/cdxquery.js

@@ -1,128 +0,0 @@
-
-
-// ===========================================================================
-class CDXLoader {
-  constructor(staticPrefix, url, prefix, timestamp) {
-    this.opts = {};
-    this.prefix = prefix;
-    this.staticPrefix = staticPrefix;
-
-    this.isReplay = (timestamp !== undefined);
-
-    if (this.isReplay) {
-      window.WBBanner = new VueBannerWrapper(this);
-    }
-
-    let queryURL;
-
-    // query form *?=url...
-    if (window.location.href.indexOf("*?") > 0) {
-      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");
-      queryURL = prefix + "cdx?" + params.toString();
-
-    // otherwise, an error since no URL
-    } else {
-      throw new Error("No query URL specified");
-    }
-
-    this.opts.initialView = {url, timestamp};
-
-    // TODO: make configurable
-    this.opts.logoImg = staticPrefix + "/pywb-logo-sm.png";
-
-    this.loadCDX(queryURL).then((cdxList) => {
-      PywbVue.init(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
-    });
-  }
-
-  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 (!this.isReplay) {
-      window.location.href = this.prefix + snapshot.id + "/" + snapshot.url;
-    } else if (cframe) {
-      cframe.load_url(snapshot.url, snapshot.id + "");
-    }
-  }
-}
-
-
-// ===========================================================================
-class VueBannerWrapper
-{
-  constructor(loader) {
-    this.loading = true;
-    this.lastUrl = null;
-    this.loader = loader;
-  }
-
-  init() {}
-
-  stillIndicatesLoading() {
-    return this.loading;
-  }
-
-  updateCaptureInfo(url, ts, is_live) {
-    this.loading = false;
-  }
-
-  onMessage(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

@@ -30,9 +30,8 @@ window.banner_info = {
 {% else %}
 
 <script src="{{ static_prefix }}/vue/vueui.js"></script>
-<script src="{{ static_prefix }}/js/cdxquery.js"></script>
 <script>
-  var loader = new CDXLoader("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}");
+  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}");
 </script>
 
 {% if not old_banner %}

pywb/templates/query.html

@@ -14,7 +14,6 @@
 {% else %}
 
 <script src="{{ static_prefix }}/vue/vueui.js"></script>
-<script src="{{ static_prefix }}/js/cdxquery.js"></script>
 
 {% endif %}
 
@@ -53,7 +52,7 @@
   renderCal.init();
 
 {% else %}
-  var loader = new CDXLoader("{{ static_prefix }}", "{{ url }}", "{{ prefix }}");
+  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}");
 
 {% endif %}
 

pywb/vueui/rollup.config.js

@@ -8,7 +8,7 @@ export default [
     output: {
       file: "../static/vue/vueui.js",
       sourcemap: "inline",
-      name: "PywbVue",
+      name: "VueUI",
       format: "iife",
     },
     plugins: [

pywb/vueui/src/App.vue

@@ -65,7 +65,7 @@ export default {
     this.init();
   },
   methods: {
-    gotoPeriod: function(newPeriod, initiator) {
+    gotoPeriod: function(newPeriod/*, initiator*/) {
       if (this.timelineHighlight) {
         setTimeout((() => {
           this.timelineHighlight=false;

pywb/vueui/src/index.js

@@ -4,30 +4,160 @@ import { PywbData } from "./model.js";
 
 import Vue from "vue/dist/vue.esm.browser";
 
-var app = null;
 
-export function init(data, config = {}, loadCallback = null) {
-  app = new Vue(appData);
+// ===========================================================================
+export function main(staticPrefix, url, prefix, timestamp) {
+  new CDXLoader(staticPrefix, url, prefix, timestamp);
+}
 
-  const pywbData = new PywbData(data);
+// ===========================================================================
+class CDXLoader {
+  constructor(staticPrefix, url, prefix, timestamp) {
+    this.opts = {};
+    this.prefix = prefix;
+    this.staticPrefix = staticPrefix;
 
-  app.$set(app, "snapshots", pywbData.snapshots);
-  app.$set(app, "currentPeriod", pywbData.timeline);
+    this.isReplay = (timestamp !== undefined);
 
-  app.$set(app, "config", {...app.config, ...config});
+    if (this.isReplay) {
+      window.WBBanner = new VueBannerWrapper(this);
+    }
 
-  app.$mount("#app");
+    let queryURL;
 
-  if (loadCallback) {
-    app.$on("show-snapshot", loadCallback);
+    // query form *?=url...
+    if (window.location.href.indexOf("*?") > 0) {
+      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");
+      queryURL = prefix + "cdx?" + params.toString();
+
+    // otherwise, an error since no URL
+    } else {
+      throw new Error("No query URL specified");
+    }
+
+    this.opts.initialView = {url, timestamp};
+
+    // TODO: make configurable
+    this.opts.logoImg = staticPrefix + "/pywb-logo-sm.png";
+
+    this.loadCDX(queryURL).then((cdxList) => {
+      this.app = this.initApp(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
+    });
+  }
+
+  initApp(data, config = {}, loadCallback = null) {
+    const app = new Vue(appData);
+
+    const pywbData = new PywbData(data);
+
+    app.$set(app, "snapshots", pywbData.snapshots);
+    app.$set(app, "currentPeriod", pywbData.timeline);
+
+    app.$set(app, "config", {...app.config, ...config});
+
+    app.$mount("#app");
+
+    if (loadCallback) {
+      app.$on("show-snapshot", loadCallback);
+    }
+
+    return app;
+  }
+
+  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);
+
+    const pywbData = new PywbData(cdxList);
+
+    const app = this.app;
+    app.$set(app, "snapshots", pywbData.snapshots);
+    app.$set(app, "currentPeriod", pywbData.timeline);
+
+    app.setSnapshot({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 (!this.isReplay) {
+      window.location.href = this.prefix + snapshot.id + "/" + snapshot.url;
+    } else if (window.cframe) {
+      window.cframe.load_url(snapshot.url, snapshot.id + "");
+    }
   }
 }
 
-export function update(data, snapshotData) {
-  const pywbData = new PywbData(data);
 
-  app.$set(app, "snapshots", pywbData.snapshots);
-  app.$set(app, "currentPeriod", pywbData.timeline);
+// ===========================================================================
+class VueBannerWrapper
+{
+  constructor(loader) {
+    this.loading = true;
+    this.lastUrl = null;
+    this.loader = loader;
+  }
 
-  app.setSnapshot(snapshotData);
+  init() {}
+
+  stillIndicatesLoading() {
+    return this.loading;
+  }
+
+  updateCaptureInfo(/*url, ts, is_live*/) {
+    this.loading = false;
+  }
+
+  onMessage(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/vueui/src/model.js

@@ -222,11 +222,12 @@ PywbPeriod.prototype.getChildrenRange = function() {
   case PywbPeriod.Type.year:
     // month is simple: 1 to 12
     return [1,12];
-  case PywbPeriod.Type.month:
+  case PywbPeriod.Type.month: {
     // days in month: 1 to last day in month
     const y = this.parent.id; const m = this.id;
     const lastDateInMonth = (new Date((new Date(y, m, 1)).getTime() - 1000)).getDate(); // 1 sec earlier
     return [1, lastDateInMonth];
+  }
   case PywbPeriod.Type.day:
     // hours: 0 to 23
     // return [1,4];
@@ -341,7 +342,7 @@ PywbPeriod.prototype.getReadableId = function(hasDayCardinalSuffix) {
     return this.id;
   case PywbPeriod.Type.month:
     return PywbMonthLabels[this.id];
-  case PywbPeriod.Type.day:
+  case PywbPeriod.Type.day: {
     let suffix = "";
     if (hasDayCardinalSuffix) {
       const singleDigit = this.id % 10;
@@ -350,6 +351,7 @@ PywbPeriod.prototype.getReadableId = function(hasDayCardinalSuffix) {
       suffix = (isTens || !suffixes[singleDigit]) ? "th" : suffixes[singleDigit];
     }
     return this.id + suffix;
+  }
   case PywbPeriod.Type.hour:
     return ({1:"12 am", 2: "3 am", 3: "6 am", 4: "9 am", 5: "noon", 6: "3 pm", 7: "6 pm", 8: "9 pm"})[this.id];
     //return ({1:'midnight', 2: '6 am', 3: 'noon', 4: '6 pm'})[this.id];