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

vueui:

Browse Source 
fixed positioning logic of tooltip
This commit is contained in:
Ivan Velev 2021-09-21 04:41:39 -07:00
parent ad8c12a5cd
commit b694fa817f
2 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,5 @@
<template>
<div class="pywb-tooltip" :style="{left: x+'px', top: y+'px'}">
<div class="pywb-tooltip">
<slot></slot>
</div>
</template>
@ -9,29 +9,37 @@ 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() {
this.$el.style.top = 0;
this.$el.style.left = 0;
this.$el.style.maxHeight = 'auto';
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);
this.$el.style.left = (initX - (width + spacing)) + 'px';
} else {
this.x = initX + spacing;
this.$el.style.left = (initX + spacing) + 'px';
}
if ((window.innerHeight < initY + (spacing*2) + height) && (initY - (spacing*2) - height < 0) ) {
if (initY > window.innerHeight / 2) {
this.$el.style.top = (window.innerHeight - (height + (spacing*2))) + 'px';
} else {
this.$el.style.top = (spacing*2) + 'px';
}
} else if (window.innerHeight < initY + (spacing*2) + height) {
this.$el.style.top = (initY - (spacing + height)) + 'px';
} else {
this.$el.style.top = initY + 'px';
}
this.y = initY - (spacing + height);
}
}
}