Showing
4 changed files
with
23 additions
and
12 deletions
@@ -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 | } |