backup/pywb
1
0
Fork 0
mirror of https://github.com/webrecorder/pywb.git synced 2025-03-24 06:59:52 +01:00
Code Issues Projects Releases Activity

vueui: fixed date/time labels for hover-over period

Browse Source
This commit is contained in:
Ivan Velev 2021-09-20 13:32:17 -07:00
parent 7d63e6be43
commit 71f305b997
3 changed files with 97 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
pywb/static/vue/vueui.js
View File

File diff suppressed because one or more lines are too long

53
pywb/vueui/src/components/Timeline.vue
View File

@ -1,16 +1,17 @@
<template> <template>
<div class="timeline"> <div class="timeline">
<div class="period-tooltip" v-show="periodToShowInTooltip" :style="{left: periodToShowInTooltipPos.x+'px', top: periodToShowInTooltipPos.y+'px'}"> <div class="period-tooltip" v-show="tooltipPeriod" :style="{left: tooltipPeriodPos.x+'px', top: tooltipPeriodPos.y+'px'}">
<template v-if="periodToShowInTooltip"> <template v-if="tooltipPeriod">
<div v-if="periodToShowInTooltip.snapshot">View capture from <div v-if="tooltipPeriod.snapshot">View capture on
{{ periodToShowInTooltip.snapshot.getTimeDateFormatted() }} {{ tooltipPeriod.snapshot.getTimeDateFormatted() }}
</div> </div>
<div v-else-if="periodToShowInTooltip.snapshotPeriod">View capture from <div v-else-if="tooltipPeriod.snapshotPeriod">View capture on
{{ periodToShowInTooltip.snapshotPeriod.snapshot.getTimeDateFormatted() }} {{ tooltipPeriod.snapshotPeriod.snapshot.getTimeDateFormatted() }}
</div> </div>
<div v-else-if="periodToShowInTooltip.snapshotCount"> <div v-else-if="tooltipPeriod.snapshotCount">
{{ periodToShowInTooltip.snapshotCount }} captures from {{ tooltipPeriod.snapshotCount }} captures
{{ periodToShowInTooltip.getFullReadableId() }} <span v-if="isTooltipPeriodDayOrHour">on</span><span v-else>in</span>
{{ tooltipPeriod.getFullReadableId() }}
</div> </div>
</template> </template>
</div> </div>
@ -22,8 +23,8 @@
class="period" class="period"
:class="{empty: !subPeriod.snapshotCount, highlight: highlightPeriod === subPeriod, 'last-level': isLastZoomLevel}" :class="{empty: !subPeriod.snapshotCount, highlight: highlightPeriod === subPeriod, 'last-level': isLastZoomLevel}"
@click="changePeriod(subPeriod, $event)" @click="changePeriod(subPeriod, $event)"
@mouseover="setPeriodToShowInTooltip(subPeriod, $event)" @mouseover="setTooltipPeriod(subPeriod, $event)"
@mouseout="setPeriodToShowInTooltip(null, $event)" @mouseout="setTooltipPeriod(null, $event)"
> >
<div class="histo"> <div class="histo">
<div class="line" <div class="line"
@ -32,15 +33,14 @@
:style="{height: getHistoLineHeight(histoPeriod.snapshotCount)}" :style="{height: getHistoLineHeight(histoPeriod.snapshotCount)}"
:class="{'has-single-snap': !!histoPeriod.snapshotPeriod}" :class="{'has-single-snap': !!histoPeriod.snapshotPeriod}"
@click="changePeriod(histoPeriod, $event)" @click="changePeriod(histoPeriod, $event)"
@mouseover="setPeriodToShowInTooltip(histoPeriod, $event)" @mouseover="setTooltipPeriod(histoPeriod, $event)"
@mouseout="setPeriodToShowInTooltip(null, $event)" @mouseout="setTooltipPeriod(null, $event)"
> >
</div> </div>
</div> </div>
<div class="inner"> <div class="inner">
<div class="label"> <div class="label">
{{subPeriod.getReadableId()}} {{subPeriod.getReadableId()}}
<div class="count" v-if="subPeriod.snapshotCount">({{subPeriod.snapshotCount}})</div>
</div> </div>
</div> </div>
</div> </div>
@ -62,8 +62,8 @@ export default{
nextPeriod: null, nextPeriod: null,
isScrollZero: true, isScrollZero: true,
isScrollMax: true, isScrollMax: true,
periodToShowInTooltip: null, tooltipPeriod: null,
periodToShowInTooltipPos: {x:0,y:0} tooltipPeriodPos: {x:0,y:0}
}; };
}, },
created: function() { created: function() {
@ -82,6 +82,9 @@ export default{
// this determins which the last zoom level is before we go straight to showing snapshot // this determins which the last zoom level is before we go straight to showing snapshot
isLastZoomLevel() { isLastZoomLevel() {
return this.period.type === PywbPeriod.Type.day; return this.period.type === PywbPeriod.Type.day;
},
isTooltipPeriodDayOrHour() {
return this.tooltipPeriod.type >= PywbPeriod.Type.day;
} }
}, },
updated() { updated() {
@ -174,12 +177,12 @@ export default{
this.updateScrollArrows(); this.updateScrollArrows();
}).bind(this), 1); }).bind(this), 1);
}, },
setPeriodToShowInTooltip(period, event) { setTooltipPeriod(period, event) {
if (!period || !period.snapshotCount) { if (!period || !period.snapshotCount) {
this.periodToShowInTooltip = null; this.tooltipPeriod = null;
return; return;
} }
this.periodToShowInTooltip = period; this.tooltipPeriod = period;
this.$nextTick(function() { this.$nextTick(function() {
const tooltipContentsEl = document.querySelector('.period-tooltip div'); const tooltipContentsEl = document.querySelector('.period-tooltip div');
@ -192,11 +195,11 @@ export default{
const tooltipHeight = parseInt(periodTooltipStyle.height); const tooltipHeight = parseInt(periodTooltipStyle.height);
const spacing = 10; const spacing = 10;
if (window.innerWidth < event.x + (spacing*2) + tooltipWidth) { if (window.innerWidth < event.x + (spacing*2) + tooltipWidth) {
this.periodToShowInTooltipPos.x = event.x - (tooltipWidth + spacing); this.tooltipPeriodPos.x = event.x - (tooltipWidth + spacing);
} else { } 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(); event.stopPropagation();
return false; return false;
@ -331,12 +334,6 @@ export default{
z-index: 20; z-index: 20;
background-color: lightgrey; background-color: lightgrey;
} }
.timeline .period .count {
display: none;
}
.timeline .period:hover .count {
display: inline;
}
.timeline .period .histo { .timeline .period .histo {
display: flex; display: flex;

18
pywb/vueui/src/model.js
View File

@ -88,7 +88,7 @@ export class PywbSnapshot {
} }
getTimeDateFormatted() { getTimeDateFormatted() {
return `${this.year}-${PywbMonthLabels[this.month]}-${this.day} ${this.getTimeFormatted()}`; return `${PywbMonthLabels[this.month]} ${this.day}, ${this.year} at ${this.getTimeFormatted()}`;
} }
getDateFormatted() { getDateFormatted() {
@ -389,7 +389,21 @@ PywbPeriod.prototype.findByFullId = function(fullId) {
}; };
PywbPeriod.prototype.getFullReadableId = function(hasDayCardinalSuffix) { PywbPeriod.prototype.getFullReadableId = function(hasDayCardinalSuffix) {
// remove "all-time" from parents (getParents(true) when printing readable id (of all parents and currrent // 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) { PywbPeriod.prototype.getReadableId = function(hasDayCardinalSuffix) {
switch (this.type) { switch (this.type) {