vueui: attempt to nest timeline in calendar click

pywb/vueui/src/components/CalendarMonth.vue

@@ -87,7 +87,7 @@
         <h3>{{month.getReadableId()}} ({{month.snapshotCount}})</h3>
         <div v-if="month.snapshotCount">
             <span v-for="(day) in ['S', 'M', 'T', 'W', 'H', 'F', 'S']" class="day" :style="dayStyle">{{day}}</span><br/>
-            <span v-for="(day,i) in days"><br v-if="i && i % 7===0"/><span class="day" :class="{empty: !day || !day.snapshotCount}" :style="dayStyle"  @click="gotoDay(day)"><template v-if="day"><span class="size" v-if="day.snapshotCount" :style="getDayCountCircleStyle(day.snapshotCount)"> </span><span class="day-id">{{day.id}}</span><span v-if="day.snapshotCount" class="count">{{day.snapshotCount}} capture<span v-if="day.snapshotCount!==1">s</span></span></template><template v-else v-html="'&nbsp;'"></template></span></span>
+            <span v-for="(day,i) in days"><br v-if="i && i % 7===0"/><span class="day" :class="{empty: !day || !day.snapshotCount}" :style="dayStyle"  @click="gotoDay(day, $event)"><template v-if="day"><span class="size" v-if="day.snapshotCount" :style="getDayCountCircleStyle(day.snapshotCount)"> </span><span class="day-id">{{day.id}}</span><span v-if="day.snapshotCount" class="count">{{day.snapshotCount}} capture<span v-if="day.snapshotCount!==1">s</span></span></template><template v-else v-html="'&nbsp;'"></template></span></span>
         </div>
         <div v-else class="empty">no captures</div>
     </div>
@@ -130,13 +130,13 @@ export default {
     }
   },
   methods: {
-    gotoDay(day) {
+    gotoDay(day, event) {
       if (!day || !day.snapshotCount) {
         return;
       }
       // upon doing to day, tell timeline to highlight itself
-      this.$root.timelineHighlight = true;
-      this.$emit("goto-period", day);
+      // this.$root.timelineHighlight = true;
+      this.$emit("show-day-timeline", day, event);
     },
     getDayCountCircleStyle(snapshotCount) {
       const size = Math.ceil((snapshotCount/this.year.maxGrandchildSnapshotCount) * this.daySize);

pywb/vueui/src/components/CalendarYear.vue

@@ -31,20 +31,35 @@
                     :year="year"
                     :is-current="month === currentMonth"
                     @goto-period="$emit('goto-period', $event)"
+                    @show-day-timeline="setCurrentTimeline"
             ></CalendarMonth>
         </div>
+        <Tooltip :position="currentTimelinePos" v-if="currentTimeline">
+          <Timeline
+              :period="currentTimelinePeriod"
+              :stay-within-period="currentTimeline"
+              @goto-period="gotoPeriod"
+          ></Timeline>
+        </Tooltip>
     </div>
 </template>
 
 <script>
 import CalendarMonth from "./CalendarMonth.vue";
+import Timeline from "./Timeline.vue";
+import Tooltip from "./Tooltip.vue";
 import { PywbPeriod } from "../model.js";
 
 export default {
-  components: {CalendarMonth},
+  components: {CalendarMonth, Timeline, Tooltip},
   props: ["period"],
   data: function() {
-    return {};
+    return {
+      firstZoomLevel: PywbPeriod.Type.day,
+      currentTimeline: null,
+      currentTimelinePeriod: null,
+      currentTimelinePos: '0,0'
+    };
   },
   computed: {
     year() {
@@ -70,6 +85,22 @@ export default {
       }
       return month;
     }
+  },
+  methods: {
+    setCurrentTimeline(day, event) {
+      this.currentTimeline = day;
+      this.currentTimelinePeriod = day;
+      this.currentTimelinePos = `${event.x},${event.y}`;
+    },
+    gotoPeriod(period) {
+      console.log('calendar year gotoperiod', period.id);
+      if (period.snapshot || period.snapshotPeriod) {
+        this.$emit('goto-period', period);
+      } else {
+        this.currentTimelinePeriod = period;
+      }
+    },
+
   }
 };
 </script>

pywb/vueui/src/components/Timeline.vue

@@ -54,7 +54,12 @@
 import { PywbPeriod } from "../model.js";
 
 export default{
-  props: ["period", "currentSnapshot", "highlight"],
+  props: {
+    period: { required: true },
+    currentSnapshot: { required: false, default: null},
+    highlight: { required: false, default: false},
+    stayWithinPeriod: { required: false, default: false},
+  },
   data: function() {
     return {
       highlightPeriod: null,
@@ -142,7 +147,8 @@ export default{
             periodToChangeTo = period.snapshotPeriod;
           }
         } else {
-        // if contains mulitple snapshots, just ZOOM to period clicked itself
+        // if contains mulitple snapshots,
+          // zoom if ZOOM level is day or less, OR if period contain TOO MANY (>10)
           if (period.type <= PywbPeriod.Type.day) {
             periodToChangeTo = period;
           }
@@ -158,11 +164,17 @@ export default{
     },
     onPeriodChanged(newPeriod, oldPeriod) {
       this.addEmptySubPeriods();
-      this.previousPeriod = this.period.getPrevious();
-      this.nextPeriod = this.period.getNext();
+      const previousPeriod = this.period.getPrevious();
+      const nextPeriod = this.period.getNext();
+      if (this.stayWithinPeriod && this.stayWithinPeriod.contains(previousPeriod)) {
+        this.previousPeriod = previousPeriod;
+      }
+      if (this.stayWithinPeriod && this.stayWithinPeriod.contains(nextPeriod)) {
+        this.nextPeriod = nextPeriod;
+      }
 
       // detect if going up level of period (new period type should be in old period parents)
-      if (oldPeriod.type - newPeriod.type > 0) {
+      if (oldPeriod && oldPeriod.type - newPeriod.type > 0) {
         let highlightPeriod = oldPeriod;
         for (let i=oldPeriod.type - newPeriod.type; i > 1; i--) {
           highlightPeriod = highlightPeriod.parent;
@@ -236,9 +248,10 @@ export default{
     .timeline .arrow.next {
     }
     .timeline .arrow.disabled, .timeline .arrow.disabled:hover {
-        color: lightgray;
+        /*color: lightgray;*/
         background-color: transparent;
-        cursor: not-allowed;
+        /*cursor: not-allowed;*/
+        visibility: hidden;
     }
     .timeline .arrow:hover {
         background-color: antiquewhite;

pywb/vueui/src/components/Tooltip.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="tooltip" :style="{left: x+'px', top: y+'px'}">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+let elStyle = null;
+export default {
+  name: "Tooltip",
+  props: ['position'],
+  data() {
+    return {
+      x: 0,
+      y: 0
+    }
+  },
+  mounted() {
+    this.$watch('position', this.updatePosition);
+    this.updatePosition();
+  },
+  methods: {
+    updatePosition() {
+      const style = window.getComputedStyle(this.$el);
+      const width = parseInt(style.width);
+      const height = parseInt(style.height);
+      const spacing = 10;
+      const [initX, initY] = this.position.split(',').map(s => parseInt(s));
+      if (window.innerWidth < initX + (spacing*2) + width) {
+        this.x = initX - (width + spacing);
+      } else {
+        this.x = initX + spacing;
+      }
+      this.y = initY - (spacing + height);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tooltip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 40;
+  background-color: white;
+  border: 1px solid grey;
+  border-radius: 5px;
+}
+</style>

pywb/vueui/src/model.js

@@ -318,6 +318,10 @@ PywbPeriod.prototype.getParents = function(skipAllTime=false) {
   return parents;
 };
 
+PywbPeriod.prototype.contains = function(period) {
+  return !!period.getParents().find(this);
+};
+
 PywbPeriod.prototype.snapshot = null;
 PywbPeriod.prototype.snapshotPeriod = null;