almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 03:42:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: better computation of tooltip bottom position

Browse source 
Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-01-23 18:08:04 +01:00
parent b62085b7aa
commit 3e3ce0b8f5
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
umap/static/umap/js/modules/ui/base.js
View file

@ -33,8 +33,9 @@ export class Positioned {
anchorBottom(el) {
this.container.className = 'tooltip-bottom'
const coords = this.getPosition(el)
const selfCoords = this.getPosition(this.container)
this.setPosition({
left: coords.left,
left: coords.left + coords.width / 2 - selfCoords.width / 2,
top: coords.bottom + 11,
})
}

25
umap/static/umap/js/modules/ui/tooltip.js
View file

@ -1,24 +1,29 @@
import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from '../i18n.js'
import { Positioned } from './base.js'
import * as Utils from '../utils.js'
export default class Tooltip extends Positioned {
constructor(parent) {
super()
this.parent = parent
this.container = DomUtil.create('div', 'with-transition', this.parent)
this.container.id = 'umap-tooltip-container'
this.container = Utils.loadTemplate(
'<div id="umap-tooltip-container" class="with-transition"></div>'
)
this.parent.appendChild(this.container)
DomEvent.disableClickPropagation(this.container)
DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
this.container.addEventListener('contextmenu', (event) => event.stopPropagation()) // Do not activate our custom context menu.
this.container.addEventListener('wheel', (event) => event.stopPropagation())
this.container.addEventListener('MozMousePixelScroll', (event) =>
event.stopPropagation()
)
}
open(opts) {
const showIt = () => {
this.container.innerHTML = Utils.escapeHTML(opts.content)
this.parent.classList.add('umap-tooltip')
this.openAt(opts)
L.DomUtil.addClass(this.parent, 'umap-tooltip')
this.container.innerHTML = U.Utils.escapeHTML(opts.content)
}
this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0)
const id = this.TOOLTIP_ID
@ -26,7 +31,7 @@ export default class Tooltip extends Positioned {
this.close(id)
}
if (opts.anchor) {
L.DomEvent.once(opts.anchor, 'mouseout', closeIt)
opts.anchor.addEventListener('mouseout', closeIt, { once: true })
}
if (opts.duration !== Number.POSITIVE_INFINITY) {
window.setTimeout(closeIt, opts.duration || 3000)
@ -41,6 +46,6 @@ export default class Tooltip extends Positioned {
this.container.className = ''
this.container.innerHTML = ''
this.setPosition({})
L.DomUtil.removeClass(this.parent, 'umap-tooltip')
this.parent.classList.remove('umap-tooltip')
}
}