From 9f0ad60892f1924b7c2fb0ad07412b7d1519520d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 8 Jun 2020 12:08:41 +0300
Subject: [PATCH] Fix map tooltip actions

---
 .../components/widget/lib/maps/leaflet-map.ts |  2 +-
 .../components/widget/lib/maps/maps-utils.ts  | 27 ++++++++++++-------
 .../components/widget/lib/maps/markers.ts     |  5 +++-
 .../widget/lib/maps/providers/image-map.ts    |  1 -
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index b11dbda737..68e967c29b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -333,7 +333,7 @@ export default abstract class LeafletMap {
                     point.on('click', () => getTooltip(data));
                 }
                 else {
-                    createTooltip(point, this.options, pointsData, getTooltip(data, false));
+                    createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
                 }
                 this.points.addLayer(point);
             });
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index ed742bc6da..8db4c2edbe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -40,18 +40,27 @@ export function createTooltip(target: L.Layer,
         });
     }
     target.on('popupopen', () => {
-        const actions = document.getElementsByClassName('tb-custom-action');
-        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));
-                }
-            });
+      bindPopupActions(popup, settings, datasource);
     });
     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 {
     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;
 
 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) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index c4e932878c..eec2e257ea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
@@ -16,7 +16,7 @@
 
 import L, { LeafletMouseEvent } from 'leaflet';
 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 { isDefined } from '@core/utils';
 
@@ -76,6 +76,9 @@ export class Marker {
         const pattern = this.settings.useTooltipFunction ?
             safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern;
         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) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
index 07f94fbb3f..095bff401d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
@@ -50,7 +50,6 @@ export class ImageMap extends LeafletMap {
             return aspectCache(res);
         })).subscribe(aspect => {
             this.aspect = aspect;
-            console.log("ImageMap -> setImageAlias -> aspect", aspect)
             this.onResize(true);
         });
     }