From 9ca2774ea2b05f036770f8f784ad1e76b94c1d04 Mon Sep 17 00:00:00 2001
From: viglino <jean-marc.viglino@ign.fr>
Date: Wed, 19 Jun 2024 12:13:47 +0200
Subject: [PATCH] Trigger event on attribut click #1067

---
 examples/popup/map.popup.feature.html |  3 +++
 src/overlay/PopupFeature.js           | 14 +++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/examples/popup/map.popup.feature.html b/examples/popup/map.popup.feature.html
index c31dd399..867c0737 100644
--- a/examples/popup/map.popup.feature.html
+++ b/examples/popup/map.popup.feature.html
@@ -175,6 +175,9 @@ <h2>Options:</h2>
   });
   map.addOverlay (popup);
 
+  // Event on attribute click
+  popup.on('attribute', console.log)
+
   </script>
   
 </body>
diff --git a/src/overlay/PopupFeature.js b/src/overlay/PopupFeature.js
index 9b651b88..73d302b0 100644
--- a/src/overlay/PopupFeature.js
+++ b/src/overlay/PopupFeature.js
@@ -30,6 +30,7 @@ import ol_ext_element from '../util/element.js'
  * @fires show
  * @fires hide
  * @fires select
+ * @fires attribute
  * @param {} options Extend Popup options 
  *  @param {String} options.popupClass the a class of the overlay to style the popup.
  *  @param {bool} options.closeBox popup has a close box, default false.
@@ -173,7 +174,7 @@ var ol_Overlay_PopupFeature = class olOverlayPopupFeature extends ol_Overlay_Pop
       var tr, table = ol_ext_element.create('TABLE', { parent: html });
       var atts = this._attributeObject(template);
       var featureAtts = feature.getProperties();
-      for (var att in atts) {
+      Object.keys(atts).forEach(function(att) {
         if (featureAtts.hasOwnProperty(att)) {
           var a = atts[att];
           var content, val = featureAtts[att];
@@ -191,8 +192,14 @@ var ol_Overlay_PopupFeature = class olOverlayPopupFeature extends ol_Overlay_Pop
           }
 
           if (visible) {
-            tr = ol_ext_element.create('TR', { parent: table });
+            tr = ol_ext_element.create('TR', {
+              click: function(e) {
+                this.dispatchEvent({ type: 'attribute', attribute: att, originalEvent: e })
+              }.bind(this),
+              parent: table 
+            });
             ol_ext_element.create('TD', { 
+              className: 'ol-label',
               html: a ? a.title || att : att, 
               parent: tr 
             });
@@ -216,12 +223,13 @@ var ol_Overlay_PopupFeature = class olOverlayPopupFeature extends ol_Overlay_Pop
 
             // Add value
             ol_ext_element.create('TD', {
+              className: 'ol-value',
               html: content,
               parent: tr
             });
           }
         }
-      }
+      }.bind(this))
     }
     // Zoom button
     ol_ext_element.create('BUTTON', { className: 'ol-zoombt', parent: html })