add popupOptions to allow popup customisation

to Close #311

Author: dceejay

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v5.3.0 - Let msg.payload.popupOptions object set Leaflet popup options so it can be customised. Issue #311
  - v5.2.0 - Allow left click send back co-ords. Let Button be replaceable more easily and take value property. Issue #308 and #309
  - v5.1.6 - Let Cot __milsym set the SIDC if present.
  - v5.1.5 - Fix links to SIDC unitgenerator so it is now local.

README.md

@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v5.3.0 - Let msg.payload.popupOptions object set Leaflet popup options so it can be customised. Issue #311
 - v5.2.0 - Allow left click send back co-ords. Let Button be replaceable more easily and take value property. Issue #308 and #309
 - v5.1.6 - Let Cot __milsym set the SIDC if present.
 - v5.1.5 - Fix links to SIDC unitgenerator so it is now local.
@@ -28,8 +29,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 - v5.0.3 - Add great context menu example flow. PR #290. Bump express lib. PR #291.
 - v5.0.2 - Fix sidcEdgeIcon docs PR #289.
 - v5.0.1 - Fix isArray error PR #288.
-- v5.0.0 - v5.0.0 - Feedback cleanup PR #281, edgeicons option PR #287, bump libs for vuln fixes.
-
+- v5.0.0 - Feedback cleanup PR #281, edgeicons option PR #287, bump libs for vuln fixes.
 
 - see [CHANGELOG](https://github.com/dceejay/RedMap/blob/master/CHANGELOG.md) for full list of changes.
 
@@ -77,6 +77,7 @@ Optional properties for **msg.payload** include
  - **clickable** : Default true. Setting to false disables showing any popup.
  - **popped** : set to true to automatically open the popup info box, set to false to close it.
  - **popup** : html to fill the popup if you don't want the automatic default of the properties list. Using this overrides photourl, videourl and weblink options.
+ - **popupOptions** : optional object to help style the popup - See Leaflet popup docs for options - eg to add a custom class - `{className:"mySpecialPopup",width:600}`
  - **label** : displays the contents as a permanent label next to the marker, or
  - **tooltip** : displays the contents when you hover over the marker. (Mutually exclusive with label. Label has priority)
  - **tooltipOptions** : custom tooltip/label options  (offset, direction, permanent, sticky, interactive, opacity, className) )

package-lock.json

@@ -1,11 +1,11 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "5.2.0",
+    "version": "5.3.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~7.2.0",
         "cgi": "0.3.1",
-        "compression": "^1.8.0",
+        "compression": "^1.8.1",
         "express": "^4.21.2",
         "sockjs": "~0.3.24"
     },

package.json

@@ -2358,31 +2358,37 @@ function setMarker(data) {
     if (data.hasOwnProperty("radius")) { delete data.radius; }
     if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
 
-    // then any remaining properties to the info box
-    var longline = 0;
-    if (data.popup) { words = data.popup; }
-    else {
-        words += '<table>';
-        for (var i in data) {
-            if ((i != "name") && (i != "length") && (i != "clickable")) {
-                if (typeof data[i] === "object") {
-                    words += '<tr><td valign="top">'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
-                }
-                else {
-                    // words += i +" : "+data[i]+"<br/>";
-                    if (data[i].length > longline) { longline = data[i].length; }
-                    words += '<tr><td valign="top">'+ i +'</td><td>' + data[i] + '</td></tr>';
+    if (!data.hasOwnProperty("clickable") && data.clickable != false) {
+        var wopt = { autoClose:false, closeButton:true, closeOnClick:false, minWidth:200 };
+        if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; } // make popup wider if it has an image or video
+        if (data?.popupOptions) { // allow user to override popup options eg to add className
+            wopt = data.popupOptions;
+            delete data.popupOptions;
+        }
+
+        // then any remaining properties to the info box
+        var longline = 0;
+        if (data.popup) { words = data.popup; }
+        else {
+            words += '<table>';
+            for (var i in data) {
+                if ((i != "name") && (i != "length") && (i != "clickable")) {
+                    if (typeof data[i] === "object") {
+                        words += '<tr><td valign="top">'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
+                    }
+                    else {
+                        // words += i +" : "+data[i]+"<br/>";
+                        if (data[i].length > longline) { longline = data[i].length; }
+                        words += '<tr><td valign="top">'+ i +'</td><td>' + data[i] + '</td></tr>';
+                    }
                 }
             }
+            words += '<tr><td>lat, lon</td><td>'+ marker.getLatLng().toString().replace('LatLng(','').replace(')','') + '</td></tr>';
+            words += '</table>';
         }
-        words += '<tr><td>lat, lon</td><td>'+ marker.getLatLng().toString().replace('LatLng(','').replace(')','') + '</td></tr>';
-        words += '</table>';
-    }
-    words = "<b>"+data["name"]+"</b><br/>" + words.replace(/\${name}/g,data["name"]); //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
-    var wopt = {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200};
-    if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; } // make popup wider if it has an image or video
-    if (longline > 100) { wopt.minWidth="640"; } // make popup wider if it has a long line
-    if (!data.hasOwnProperty("clickable") && data.clickable != false) {
+        words = "<b>"+data["name"]+"</b><br/>" + words.replace(/\${name}/g,data["name"]); //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
+
+        if (longline > 100) { wopt.minWidth="640"; } // make popup wider if it has a long line
         marker.bindPopup(words, wopt);
         marker._popup.dname = data["name"];
     }