vueui: save the current period, UI is zoomed to by the current URL, so the next page load/reload can load that same view

pywb/vueui/src/App.vue

@@ -80,6 +80,11 @@ export default {
       if (newPeriod.snapshot) {
         this.gotoSnapshot(newPeriod.snapshot);
       } else {
+        // save current period (aka zoom)
+        // use sessionStorage (not localStorage), as we want this to be a very temporary memory for current page tab/window and no longer; NOTE: it serves when navigating from an "*" query to a specific capture and subsequent reloads
+        if (window.sessionStorage) {
+          window.sessionStorage.setItem('zoom__'+this.config.url, newPeriod.getFullId());
+        }
         this.currentPeriod = newPeriod;
       }
     },
@@ -100,6 +105,15 @@ export default {
         this.showFullView = false;
         this.setSnapshot(this.config.initialView);
       }
+      if (window.sessionStorage) {
+        const currentPeriodId = window.sessionStorage.getItem('zoom__'+this.config.url);
+        if (currentPeriodId) {
+          const newCurrentPeriodFromStorage = this.currentPeriod.findByFullId(currentPeriodId);
+          if (newCurrentPeriodFromStorage) {
+            this.currentPeriod = newCurrentPeriodFromStorage;
+          }
+        }
+      }
     },
     setSnapshot(view) {
       // convert to snapshot objec to support proper rendering of time/date

pywb/vueui/src/model.js

@@ -348,7 +348,43 @@ PywbPeriod.prototype.setSnapshot = function(snap) {
     parent = parent.parent;
   }
 };
+/**
+ * Return the "full" id, which includes all parents ID and self ID, delimited by a hyphen "-"
+ * @returns {string}
+ */
+PywbPeriod.prototype.getFullId = function() {
+  const ids = this.getParents(true).map(p => p.id);
+  ids.push(this.id);
+  return ids.join("-");
+};
 
+/**
+ * Find a period by its full ID (of all ancestors and self, delimited by a hyphen). Start by locating the great-grand-parent (aka timeline), then looping on all IDs and finding the period in loop
+ * @param {string} fullId
+ * @returns {boolean}
+ */
+PywbPeriod.prototype.findByFullId = function(fullId) {
+  let parent = this;
+  if (this.type !== PywbPeriod.Type.all) {
+    parent = this.getParents()[0];
+  }
+  const ids = fullId.split('-');
+
+  let found = false;
+  for(let i=0; i<ids.length; i++) {
+    parent = parent.getChildById(ids[i]);
+    if (parent) {
+      // if last chunk of ID in loop, the period is found
+      if (i === ids.length - 1) {
+        found = parent;
+      }
+    } else {
+      // if no parent is found with ID chunk, abort "mission"
+      break;
+    }
+  }
+  return found;
+};
 PywbPeriod.prototype.getFullReadableId = function(hasDayCardinalSuffix) {
   // remove "all-time" from parents (getParents(true) when printing readable id (of all parents and currrent
   return this.getParents(true).map(p => p.getReadableId(hasDayCardinalSuffix)).join(" ") + " " + this.getReadableId(hasDayCardinalSuffix);