You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { Tooltip } from 'leaflet';
|
|
import type { TooltipOptions } from 'leaflet';
|
|
import { defineProps, num, str, on } from '../core/props.ts';
|
|
import { WithProps, buildOptions, numAttr, registerWithParent } from '../core/utils.ts';
|
|
|
|
const PROPS = defineProps({
|
|
lat: num(),
|
|
lng: num(),
|
|
pane: str(),
|
|
offset: str(),
|
|
direction: str('auto'),
|
|
permanent: on(),
|
|
sticky: on(),
|
|
opacity: num(1.0),
|
|
});
|
|
|
|
export default class LeafletTooltip extends WithProps(HTMLElement, PROPS) {
|
|
#obj?: Tooltip;
|
|
#observer?: MutationObserver;
|
|
|
|
connectedCallback() {
|
|
this.#obj = new Tooltip({
|
|
...buildOptions(this, PROPS, ['lat', 'lng']),
|
|
content: this.innerHTML,
|
|
} as unknown as TooltipOptions);
|
|
if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
|
|
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
|
|
}
|
|
registerWithParent(this, this.#obj);
|
|
|
|
this.#observer = new MutationObserver(() => {
|
|
this.#obj?.setContent(this.innerHTML);
|
|
});
|
|
this.#observer.observe(this, {
|
|
childList: true,
|
|
characterData: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this.#observer?.disconnect();
|
|
this.#observer = undefined;
|
|
this.#obj?.remove();
|
|
this.#obj = undefined;
|
|
}
|
|
|
|
attributeChangedCallback(name: string) {
|
|
if (!this.#obj) return;
|
|
if (name === 'lat' || name === 'lng') {
|
|
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-tooltip', LeafletTooltip);
|