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:

Browse Source 
made tooltip close upon click outside tooltip
This commit is contained in:
Ivan Velev 2021-09-21 03:31:19 -07:00
parent d34a88eb3b
commit 576050dbb6
2 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

28
pywb/vueui/src/components/CalendarYear.vue
View File

@ -34,7 +34,7 @@
@show-day-timeline="setCurrentTimeline" @show-day-timeline="setCurrentTimeline"
></CalendarMonth> ></CalendarMonth>
</div> </div>
<Tooltip :position="currentTimelinePos" v-if="currentTimeline"> <Tooltip :position="currentTimelinePos" v-if="currentTimelinePeriod" ref="timelineLinearTooltip">
<TimelineLinear <TimelineLinear
:period="currentTimelinePeriod" :period="currentTimelinePeriod"
@goto-period="gotoPeriod" @goto-period="gotoPeriod"
@ -55,11 +55,13 @@ export default {
data: function() { data: function() {
return { return {
firstZoomLevel: PywbPeriod.Type.day, firstZoomLevel: PywbPeriod.Type.day,
currentTimeline: null,
currentTimelinePeriod: null, currentTimelinePeriod: null,
currentTimelinePos: '0,0' currentTimelinePos: '0,0'
}; };
}, },
mounted() {
document.querySelector('body').addEventListener('click', this.resetCurrentTimeline);
},
computed: { computed: {
year() { year() {
let year = null; let year = null;
@ -86,10 +88,30 @@ export default {
} }
}, },
methods: { methods: {
resetCurrentTimeline(event) {
if (event && this.$refs.timelineLinearTooltip) {
let el = event.target;
let clickWithinTooltip = false;
while(el.parentElement) {
if (el === this.$refs.timelineLinearTooltip.$el) {
clickWithinTooltip = true;
break;
}
el = el.parentElement;
}
if (!clickWithinTooltip) {
this.currentTimelinePeriod = null;
}
}
},
setCurrentTimeline(day, event) { setCurrentTimeline(day, event) {
this.currentTimeline = day;
this.currentTimelinePeriod = day; this.currentTimelinePeriod = day;
if (!day) {
return;
}
this.currentTimelinePos = `${event.x},${event.y}`; this.currentTimelinePos = `${event.x},${event.y}`;
event.stopPropagation();
event.preventDefault();
}, },
gotoPeriod(period) { gotoPeriod(period) {
if (period.snapshot || period.snapshotPeriod) { if (period.snapshot || period.snapshotPeriod) {