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 
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> <template>
<div class="pywb-tooltip" :style="{left: x+'px', top: y+'px'}"> <div class="pywb-tooltip">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -9,29 +9,37 @@ let elStyle = null;
export default { export default {
name: "Tooltip", name: "Tooltip",
props: ['position'], props: ['position'],
data() {
return {
x: 0,
y: 0
}
},
mounted() { mounted() {
this.$watch('position', this.updatePosition); this.$watch('position', this.updatePosition);
this.updatePosition(); this.updatePosition();
}, },
methods: { methods: {
updatePosition() { updatePosition() {
this.$el.style.top = 0;
this.$el.style.left = 0;
this.$el.style.maxHeight = 'auto';
const style = window.getComputedStyle(this.$el); const style = window.getComputedStyle(this.$el);
const width = parseInt(style.width); const width = parseInt(style.width);
const height = parseInt(style.height); const height = parseInt(style.height);
const spacing = 10; const spacing = 10;
const [initX, initY] = this.position.split(',').map(s => parseInt(s)); const [initX, initY] = this.position.split(',').map(s => parseInt(s));
if (window.innerWidth < initX + (spacing*2) + width) { if (window.innerWidth < initX + (spacing*2) + width) {
this.x = initX - (width + spacing); this.$el.style.left = (initX - (width + spacing)) + 'px';
} else { } 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);
} }
} }
} }