From: Tom Hughes <tom@compton.nu>
Date: Wed, 5 Oct 2022 17:59:18 +0000 (+0100)
Subject: Merge remote-tracking branch 'upstream/pull/3732'
X-Git-Tag: live~2323
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/44810b2b3993ddc579bfd255bdd92df2b1e33b71?hp=979803f65e87e5abbc48dd3f4dafcc6c0b30787e

Merge remote-tracking branch 'upstream/pull/3732'
---

diff --git a/app/assets/javascripts/index/note.js b/app/assets/javascripts/index/note.js
index 7efec6c5d..8188b8aee 100644
--- a/app/assets/javascripts/index/note.js
+++ b/app/assets/javascripts/index/note.js
@@ -1,7 +1,6 @@
 OSM.Note = function (map) {
   var content = $("#sidebar_content"),
-      page = {},
-      halo, currentNote;
+      page = {};
 
   var noteIcons = {
     "new": L.icon({
@@ -21,23 +20,9 @@ OSM.Note = function (map) {
     })
   };
 
-  function updateNote(form, method, url) {
-    $(form).find("input[type=submit]").prop("disabled", true);
-
-    $.ajax({
-      url: url,
-      type: method,
-      oauth: true,
-      data: { text: $(form.text).val() },
-      success: function () {
-        OSM.loadSidebarContent(window.location.pathname, page.load);
-      }
-    });
-  }
-
-  page.pushstate = page.popstate = function (path) {
+  page.pushstate = page.popstate = function (path, id) {
     OSM.loadSidebarContent(path, function () {
-      initialize(function () {
+      initialize(path, id, function () {
         var data = $(".details").data(),
             latLng = L.latLng(data.coordinates.split(","));
         if (!map.getBounds().contains(latLng)) moveToNote();
@@ -45,15 +30,29 @@ OSM.Note = function (map) {
     });
   };
 
-  page.load = function () {
-    initialize(moveToNote);
+  page.load = function (path, id) {
+    initialize(path, id, moveToNote);
   };
 
-  function initialize(callback) {
+  function initialize(path, id, callback) {
     content.find("input[type=submit]").on("click", function (e) {
       e.preventDefault();
       var data = $(e.target).data();
-      updateNote(e.target.form, data.method, data.url);
+      var form = e.target.form;
+
+      $(form).find("input[type=submit]").prop("disabled", true);
+
+      $.ajax({
+        url: data.url,
+        type: data.method,
+        oauth: true,
+        data: { text: $(form.text).val() },
+        success: function () {
+          OSM.loadSidebarContent(path, function () {
+            initialize(path, id, moveToNote);
+          });
+        }
+      });
     });
 
     content.find("textarea").on("input", function (e) {
@@ -70,29 +69,15 @@ OSM.Note = function (map) {
 
     content.find("textarea").val("").trigger("input");
 
-    var data = $(".details").data(),
-        latLng = L.latLng(data.coordinates.split(","));
+    var data = $(".details").data();
 
-    if (!halo || !map.hasLayer(halo)) {
-      halo = L.circleMarker(latLng, {
-        weight: 2.5,
-        radius: 20,
-        fillOpacity: 0.5,
-        color: "#FF6200"
-      });
-      map.addLayer(halo);
-    }
-
-    if (currentNote && map.hasLayer(currentNote)) map.removeLayer(currentNote);
-
-    currentNote = L.marker(latLng, {
-      icon: noteIcons[data.status],
-      opacity: 1,
-      interactive: true
+    map.addObject({
+      type: "note",
+      id: parseInt(id, 10),
+      latLng: L.latLng(data.coordinates.split(",")),
+      icon: noteIcons[data.status]
     });
 
-    map.addLayer(currentNote);
-
     if (callback) callback();
   }
 
@@ -108,8 +93,7 @@ OSM.Note = function (map) {
   }
 
   page.unload = function () {
-    if (map.hasLayer(halo)) map.removeLayer(halo);
-    if (map.hasLayer(currentNote)) map.removeLayer(currentNote);
+    map.removeObject();
   };
 
   return page;
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index 105b03ed6..83cb73ec5 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -242,42 +242,64 @@ L.OSM.Map = L.Map.extend({
       interactive: false
     };
 
+    var haloStyle = {
+      weight: 2.5,
+      radius: 20,
+      fillOpacity: 0.5,
+      color: "#FF6200"
+    };
+
     this.removeObject();
 
-    var map = this;
-    this._objectLoader = $.ajax({
-      url: OSM.apiUrl(object),
-      dataType: "xml",
-      success: function (xml) {
-        map._object = object;
-
-        map._objectLayer = new L.OSM.DataLayer(null, {
-          styles: {
-            node: objectStyle,
-            way: objectStyle,
-            area: objectStyle,
-            changeset: changesetStyle
-          }
-        });
-
-        map._objectLayer.interestingNode = function (node, ways, relations) {
-          if (object.type === "node") {
-            return true;
-          } else if (object.type === "relation") {
-            for (var i = 0; i < relations.length; i++) {
-              if (relations[i].members.indexOf(node) !== -1) return true;
+    if (object.type === "note") {
+      this._objectLoader = {
+        abort: function () {}
+      };
+      this._object = object;
+      this._objectLayer = L.featureGroup().addTo(this);
+      L.circleMarker(object.latLng, haloStyle).addTo(this._objectLayer);
+      L.marker(object.latLng, {
+        icon: object.icon,
+        opacity: 1,
+        interactive: true
+      }).addTo(this._objectLayer);
+      if (callback) callback(this._objectLayer.getBounds());
+    } else { // element or changeset handled by L.OSM.DataLayer
+      var map = this;
+      this._objectLoader = $.ajax({
+        url: OSM.apiUrl(object),
+        dataType: "xml",
+        success: function (xml) {
+          map._object = object;
+
+          map._objectLayer = new L.OSM.DataLayer(null, {
+            styles: {
+              node: objectStyle,
+              way: objectStyle,
+              area: objectStyle,
+              changeset: changesetStyle
+            }
+          });
+
+          map._objectLayer.interestingNode = function (node, ways, relations) {
+            if (object.type === "node") {
+              return true;
+            } else if (object.type === "relation") {
+              for (var i = 0; i < relations.length; i++) {
+                if (relations[i].members.indexOf(node) !== -1) return true;
+              }
+            } else {
+              return false;
             }
-          } else {
-            return false;
-          }
-        };
+          };
 
-        map._objectLayer.addData(xml);
-        map._objectLayer.addTo(map);
+          map._objectLayer.addData(xml);
+          map._objectLayer.addTo(map);
 
-        if (callback) callback(map._objectLayer.getBounds());
-      }
-    });
+          if (callback) callback(map._objectLayer.getBounds());
+        }
+      });
+    }
   },
 
   removeObject: function () {