Fix map tooltip actions
This commit is contained in:
parent
dc3c65dca2
commit
9f0ad60892
@ -333,7 +333,7 @@ export default abstract class LeafletMap {
|
|||||||
point.on('click', () => getTooltip(data));
|
point.on('click', () => getTooltip(data));
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
createTooltip(point, this.options, pointsData, getTooltip(data, false));
|
createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
|
||||||
}
|
}
|
||||||
this.points.addLayer(point);
|
this.points.addLayer(point);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -40,18 +40,27 @@ export function createTooltip(target: L.Layer,
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
target.on('popupopen', () => {
|
target.on('popupopen', () => {
|
||||||
const actions = document.getElementsByClassName('tb-custom-action');
|
bindPopupActions(popup, settings, datasource);
|
||||||
Array.from(actions).forEach(
|
|
||||||
(element: HTMLElement) => {
|
|
||||||
const actionName = element.getAttribute('data-action-name');
|
|
||||||
if (element && settings.tooltipAction[actionName]) {
|
|
||||||
element.addEventListener('click', ($event) => settings.tooltipAction[actionName]($event, datasource));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
return popup;
|
return popup;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings,
|
||||||
|
datasource: Datasource) {
|
||||||
|
const actions = popup.getElement().getElementsByClassName('tb-custom-action');
|
||||||
|
Array.from(actions).forEach(
|
||||||
|
(element: HTMLElement) => {
|
||||||
|
const actionName = element.getAttribute('data-action-name');
|
||||||
|
if (element && settings.tooltipAction[actionName]) {
|
||||||
|
element.onclick = ($event) =>
|
||||||
|
{
|
||||||
|
settings.tooltipAction[actionName]($event, datasource);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number {
|
export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number {
|
||||||
return (intermediateMoment - firsMoment) / (secondMoment - firsMoment);
|
return (intermediateMoment - firsMoment) / (secondMoment - firsMoment);
|
||||||
}
|
}
|
||||||
@ -133,7 +142,7 @@ const linkActionRegex = /<link-act name=['"]([^['"]*)['"]>([^<]*)<\/link-act>/g;
|
|||||||
const buttonActionRegex = /<button-act name=['"]([^['"]*)['"]>([^<]*)<\/button-act>/g;
|
const buttonActionRegex = /<button-act name=['"]([^['"]*)['"]>([^<]*)<\/button-act>/g;
|
||||||
|
|
||||||
function createLinkElement(actionName: string, actionText: string): string {
|
function createLinkElement(actionName: string, actionText: string): string {
|
||||||
return `<a href="#" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`;
|
return `<a href="javascript:void(0);" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createButtonElement(actionName: string, actionText: string) {
|
function createButtonElement(actionName: string, actionText: string) {
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
import L, { LeafletMouseEvent } from 'leaflet';
|
import L, { LeafletMouseEvent } from 'leaflet';
|
||||||
import { FormattedData, MarkerSettings } from './map-models';
|
import { FormattedData, MarkerSettings } from './map-models';
|
||||||
import { aspectCache, createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
|
import { aspectCache, bindPopupActions, createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { isDefined } from '@core/utils';
|
import { isDefined } from '@core/utils';
|
||||||
|
|
||||||
@ -76,6 +76,9 @@ export class Marker {
|
|||||||
const pattern = this.settings.useTooltipFunction ?
|
const pattern = this.settings.useTooltipFunction ?
|
||||||
safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern;
|
safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern;
|
||||||
this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
|
this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
|
||||||
|
if (this.tooltip.isOpen() && this.tooltip.getElement()) {
|
||||||
|
bindPopupActions(this.tooltip, this.settings, data.$datasource);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updateMarkerPosition(position: L.LatLngExpression) {
|
updateMarkerPosition(position: L.LatLngExpression) {
|
||||||
|
|||||||
@ -50,7 +50,6 @@ export class ImageMap extends LeafletMap {
|
|||||||
return aspectCache(res);
|
return aspectCache(res);
|
||||||
})).subscribe(aspect => {
|
})).subscribe(aspect => {
|
||||||
this.aspect = aspect;
|
this.aspect = aspect;
|
||||||
console.log("ImageMap -> setImageAlias -> aspect", aspect)
|
|
||||||
this.onResize(true);
|
this.onResize(true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user