Trigger event on attribut click #1067

Viglino · Jun 19, 2024 · 9ca2774 · 9ca2774
1 parent c9acc22
commit 9ca2774
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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 })