View capture on
+ {{ tooltipPeriod.snapshot.getTimeDateFormatted() }}
- View capture from
- {{ periodToShowInTooltip.snapshotPeriod.snapshot.getTimeDateFormatted() }}
+
View capture on
+ {{ tooltipPeriod.snapshotPeriod.snapshot.getTimeDateFormatted() }}
-
- {{ periodToShowInTooltip.snapshotCount }} captures from
- {{ periodToShowInTooltip.getFullReadableId() }}
+
+ {{ tooltipPeriod.snapshotCount }} captures
+ onin
+ {{ tooltipPeriod.getFullReadableId() }}
@@ -22,8 +23,8 @@
class="period"
:class="{empty: !subPeriod.snapshotCount, highlight: highlightPeriod === subPeriod, 'last-level': isLastZoomLevel}"
@click="changePeriod(subPeriod, $event)"
- @mouseover="setPeriodToShowInTooltip(subPeriod, $event)"
- @mouseout="setPeriodToShowInTooltip(null, $event)"
+ @mouseover="setTooltipPeriod(subPeriod, $event)"
+ @mouseout="setTooltipPeriod(null, $event)"
>
{{subPeriod.getReadableId()}}
-
({{subPeriod.snapshotCount}})
@@ -62,8 +62,8 @@ export default{
nextPeriod: null,
isScrollZero: true,
isScrollMax: true,
- periodToShowInTooltip: null,
- periodToShowInTooltipPos: {x:0,y:0}
+ tooltipPeriod: null,
+ tooltipPeriodPos: {x:0,y:0}
};
},
created: function() {
@@ -82,6 +82,9 @@ export default{
// this determins which the last zoom level is before we go straight to showing snapshot
isLastZoomLevel() {
return this.period.type === PywbPeriod.Type.day;
+ },
+ isTooltipPeriodDayOrHour() {
+ return this.tooltipPeriod.type >= PywbPeriod.Type.day;
}
},
updated() {
@@ -174,12 +177,12 @@ export default{
this.updateScrollArrows();
}).bind(this), 1);
},
- setPeriodToShowInTooltip(period, event) {
+ setTooltipPeriod(period, event) {
if (!period || !period.snapshotCount) {
- this.periodToShowInTooltip = null;
+ this.tooltipPeriod = null;
return;
}
- this.periodToShowInTooltip = period;
+ this.tooltipPeriod = period;
this.$nextTick(function() {
const tooltipContentsEl = document.querySelector('.period-tooltip div');
@@ -192,11 +195,11 @@ export default{
const tooltipHeight = parseInt(periodTooltipStyle.height);
const spacing = 10;
if (window.innerWidth < event.x + (spacing*2) + tooltipWidth) {
- this.periodToShowInTooltipPos.x = event.x - (tooltipWidth + spacing);
+ this.tooltipPeriodPos.x = event.x - (tooltipWidth + spacing);
} else {
- this.periodToShowInTooltipPos.x = event.x + spacing;
+ this.tooltipPeriodPos.x = event.x + spacing;
}
- this.periodToShowInTooltipPos.y = event.y - (spacing + tooltipHeight);
+ this.tooltipPeriodPos.y = event.y - (spacing + tooltipHeight);
});
event.stopPropagation();
return false;
@@ -331,12 +334,6 @@ export default{
z-index: 20;
background-color: lightgrey;
}
- .timeline .period .count {
- display: none;
- }
- .timeline .period:hover .count {
- display: inline;
- }
.timeline .period .histo {
display: flex;
diff --git a/pywb/vueui/src/model.js b/pywb/vueui/src/model.js
index 050e2101..46e99774 100644
--- a/pywb/vueui/src/model.js
+++ b/pywb/vueui/src/model.js
@@ -88,7 +88,7 @@ export class PywbSnapshot {
}
getTimeDateFormatted() {
- return `${this.year}-${PywbMonthLabels[this.month]}-${this.day} ${this.getTimeFormatted()}`;
+ return `${PywbMonthLabels[this.month]} ${this.day}, ${this.year} at ${this.getTimeFormatted()}`;
}
getDateFormatted() {
@@ -389,7 +389,21 @@ PywbPeriod.prototype.findByFullId = function(fullId) {
};
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);
+ switch (this.type) {
+ case PywbPeriod.Type.all:
+ return "";
+ case PywbPeriod.Type.year:
+ return this.id;
+ case PywbPeriod.Type.month:
+ return this.getReadableId(hasDayCardinalSuffix) + ' ' + this.parent.id;
+ case PywbPeriod.Type.day: {
+ return this.parent.getReadableId(hasDayCardinalSuffix) + ' ' + this.getReadableId(hasDayCardinalSuffix) + ', ' + this.parent.parent.id;
+ }
+ case PywbPeriod.Type.hour:
+ return this.parent.parent.getReadableId(hasDayCardinalSuffix) + ' ' + this.parent.getReadableId(hasDayCardinalSuffix) + ', ' + this.parent.parent.parent.id + ' at ' + this.getReadableId(hasDayCardinalSuffix);
+ case PywbPeriod.Type.snapshot:
+ return this.parent.parent.getReadableId(hasDayCardinalSuffix) + ' ' + this.parent.getReadableId(hasDayCardinalSuffix) + ', ' + this.parent.parent.parent.id + ' at ' + this.snapshot.getTimeFormatted();
+ }
};
PywbPeriod.prototype.getReadableId = function(hasDayCardinalSuffix) {
switch (this.type) {