mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-06-24 09:49:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Update:Show tooltip for library item card titles that are truncated #2451

Browse source 
- Refactored tooltip so that they dont overflow the window
This commit is contained in:
advplyr 2024-01-06 15:54:48 -06:00
parent 935e545caa
commit e88c1fa329
2 changed files with 69 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

77
client/components/ui/Tooltip.vue
View file

@ -15,6 +15,13 @@ export default {
type: String,
default: 'right'
},
/**
* Delay showing the tooltip after X milliseconds of hovering
*/
delayOnShow: {
type: Number,
default: 0
},
disabled: Boolean
},
data() {
@ -22,7 +29,8 @@ export default {
tooltip: null,
tooltipId: null,
isShowing: false,
hideTimeout: null
hideTimeout: null,
delayOnShowTimeout: null
}
},
watch: {
@ -59,29 +67,44 @@ export default {
this.tooltip = tooltip
},
setTooltipPosition(tooltip) {
var boxChow = this.$refs.box.getBoundingClientRect()
const boxRect = this.$refs.box.getBoundingClientRect()
const shouldMount = !tooltip.isConnected
var shouldMount = !tooltip.isConnected
// Calculate size of tooltip
if (shouldMount) document.body.appendChild(tooltip)
var { width, height } = tooltip.getBoundingClientRect()
const tooltipRect = tooltip.getBoundingClientRect()
if (shouldMount) tooltip.remove()
var top = 0
var left = 0
// Subtracting scrollbar size
const windowHeight = window.innerHeight - 8
const windowWidth = window.innerWidth - 8
let top = 0
let left = 0
if (this.direction === 'right') {
top = boxChow.top - height / 2 + boxChow.height / 2
left = boxChow.left + boxChow.width + 4
top = Math.max(0, boxRect.top - tooltipRect.height / 2 + boxRect.height / 2)
left = Math.max(0, boxRect.left + boxRect.width + 4)
} else if (this.direction === 'bottom') {
top = boxChow.top + boxChow.height + 4
left = boxChow.left - width / 2 + boxChow.width / 2
top = Math.max(0, boxRect.top + boxRect.height + 4)
left = Math.max(0, boxRect.left - tooltipRect.width / 2 + boxRect.width / 2)
} else if (this.direction === 'top') {
top = boxChow.top - height - 4
left = boxChow.left - width / 2 + boxChow.width / 2
top = Math.max(0, boxRect.top - tooltipRect.height - 4)
left = Math.max(0, boxRect.left - tooltipRect.width / 2 + boxRect.width / 2)
} else if (this.direction === 'left') {
top = boxChow.top - height / 2 + boxChow.height / 2
left = boxChow.left - width - 4
top = Math.max(0, boxRect.top - tooltipRect.height / 2 + boxRect.height / 2)
left = Math.max(0, boxRect.left - tooltipRect.width - 4)
}
// Shift left if tooltip would overflow the window on the right
if (left + tooltipRect.width > windowWidth) {
left -= left + tooltipRect.width - windowWidth
}
// Shift up if tooltip would overflow the window on the bottom
if (top + tooltipRect.height > windowHeight) {
top -= top + tooltipRect.height - windowHeight
}
tooltip.style.top = top + 'px'
tooltip.style.left = left + 'px'
},
@ -107,15 +130,33 @@ export default {
this.isShowing = false
},
cancelHide() {
if (this.hideTimeout) clearTimeout(this.hideTimeout)
clearTimeout(this.hideTimeout)
},
mouseover() {
if (!this.isShowing) this.showTooltip()
if (this.isShowing || this.disabled) return
if (this.delayOnShow) {
if (this.delayOnShowTimeout) {
// Delay already running
return
}
this.delayOnShowTimeout = setTimeout(() => {
this.showTooltip()
this.delayOnShowTimeout = null
}, this.delayOnShow)
} else {
this.showTooltip()
}
},
mouseleave() {
if (this.isShowing) {
this.hideTimeout = setTimeout(this.hideTooltip, 100)
if (!this.isShowing) {
clearTimeout(this.delayOnShowTimeout)
this.delayOnShowTimeout = null
return
}
this.hideTimeout = setTimeout(this.hideTooltip, 100)
}
},
beforeDestroy() {