Commit 9f0ad60892f1924b7c2fb0ad07412b7d1519520d

Authored by Igor Kulikov
1 parent dc3c65dc

Fix map tooltip actions

@@ -333,7 +333,7 @@ export default abstract class LeafletMap { @@ -333,7 +333,7 @@ export default abstract class LeafletMap {
333 point.on('click', () => getTooltip(data)); 333 point.on('click', () => getTooltip(data));
334 } 334 }
335 else { 335 else {
336 - createTooltip(point, this.options, pointsData, getTooltip(data, false)); 336 + createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
337 } 337 }
338 this.points.addLayer(point); 338 this.points.addLayer(point);
339 }); 339 });
@@ -40,18 +40,27 @@ export function createTooltip(target: L.Layer, @@ -40,18 +40,27 @@ export function createTooltip(target: L.Layer,
40 }); 40 });
41 } 41 }
42 target.on('popupopen', () => { 42 target.on('popupopen', () => {
43 - const actions = document.getElementsByClassName('tb-custom-action');  
44 - Array.from(actions).forEach(  
45 - (element: HTMLElement) => {  
46 - const actionName = element.getAttribute('data-action-name');  
47 - if (element && settings.tooltipAction[actionName]) {  
48 - element.addEventListener('click', ($event) => settings.tooltipAction[actionName]($event, datasource));  
49 - }  
50 - }); 43 + bindPopupActions(popup, settings, datasource);
51 }); 44 });
52 return popup; 45 return popup;
53 } 46 }
54 47
  48 +export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings,
  49 + datasource: Datasource) {
  50 + const actions = popup.getElement().getElementsByClassName('tb-custom-action');
  51 + Array.from(actions).forEach(
  52 + (element: HTMLElement) => {
  53 + const actionName = element.getAttribute('data-action-name');
  54 + if (element && settings.tooltipAction[actionName]) {
  55 + element.onclick = ($event) =>
  56 + {
  57 + settings.tooltipAction[actionName]($event, datasource);
  58 + return false;
  59 + };
  60 + }
  61 + });
  62 +}
  63 +
55 export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number { 64 export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number {
56 return (intermediateMoment - firsMoment) / (secondMoment - firsMoment); 65 return (intermediateMoment - firsMoment) / (secondMoment - firsMoment);
57 } 66 }
@@ -133,7 +142,7 @@ const linkActionRegex = /<link-act name=['"]([^['"]*)['"]>([^<]*)<\/link-act>/g; @@ -133,7 +142,7 @@ const linkActionRegex = /<link-act name=['"]([^['"]*)['"]>([^<]*)<\/link-act>/g;
133 const buttonActionRegex = /<button-act name=['"]([^['"]*)['"]>([^<]*)<\/button-act>/g; 142 const buttonActionRegex = /<button-act name=['"]([^['"]*)['"]>([^<]*)<\/button-act>/g;
134 143
135 function createLinkElement(actionName: string, actionText: string): string { 144 function createLinkElement(actionName: string, actionText: string): string {
136 - return `<a href="#" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`; 145 + return `<a href="javascript:void(0);" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`;
137 } 146 }
138 147
139 function createButtonElement(actionName: string, actionText: string) { 148 function createButtonElement(actionName: string, actionText: string) {
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 16
17 import L, { LeafletMouseEvent } from 'leaflet'; 17 import L, { LeafletMouseEvent } from 'leaflet';
18 import { FormattedData, MarkerSettings } from './map-models'; 18 import { FormattedData, MarkerSettings } from './map-models';
19 -import { aspectCache, createTooltip, parseWithTranslation, safeExecute } from './maps-utils'; 19 +import { aspectCache, bindPopupActions, createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
20 import tinycolor from 'tinycolor2'; 20 import tinycolor from 'tinycolor2';
21 import { isDefined } from '@core/utils'; 21 import { isDefined } from '@core/utils';
22 22
@@ -76,6 +76,9 @@ export class Marker { @@ -76,6 +76,9 @@ export class Marker {
76 const pattern = this.settings.useTooltipFunction ? 76 const pattern = this.settings.useTooltipFunction ?
77 safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern; 77 safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern;
78 this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); 78 this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
  79 + if (this.tooltip.isOpen() && this.tooltip.getElement()) {
  80 + bindPopupActions(this.tooltip, this.settings, data.$datasource);
  81 + }
79 } 82 }
80 83
81 updateMarkerPosition(position: L.LatLngExpression) { 84 updateMarkerPosition(position: L.LatLngExpression) {
@@ -50,7 +50,6 @@ export class ImageMap extends LeafletMap { @@ -50,7 +50,6 @@ export class ImageMap extends LeafletMap {
50 return aspectCache(res); 50 return aspectCache(res);
51 })).subscribe(aspect => { 51 })).subscribe(aspect => {
52 this.aspect = aspect; 52 this.aspect = aspect;
53 - console.log("ImageMap -> setImageAlias -> aspect", aspect)  
54 this.onResize(true); 53 this.onResize(true);
55 }); 54 });
56 } 55 }