Fix map tooltip actions

This commit is contained in:
Igor Kulikov 2020-06-08 12:08:41 +03:00
parent dc3c65dca2
commit 9f0ad60892
4 changed files with 23 additions and 12 deletions

View File

@ -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);
}); });

View File

@ -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) {

View File

@ -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) {

View File

@ -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);
}); });
} }