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

[rails.git] / app / assets / javascripts / index / changeset.js

diff --git a/app/assets/javascripts/index/changeset.js b/app/assets/javascripts/index/changeset.js
index 5c600fe87cacbfe01613f2e7f778e48a00427281..6c1c6a2df7a2df382120f7c23da38b2cf4be859f 100644 (file)
--- a/app/assets/javascripts/index/changeset.js
+++ b/app/assets/javascripts/index/changeset.js
@@ -1,76 +1,80 @@
-OSM.ChangesetList = function(map) {
-  var page = {};
+OSM.Changeset = function (map) {
+  const page = {},
+        content = $("#sidebar_content");

 
 

-  var group = L.featureGroup()
-    .on({
-      mouseover: function (e) {
-        highlightChangeset(e.layer.id);
-      },
-      mouseout: function (e) {
-        unHighlightChangeset(e.layer.id);
-      }
+  page.pushstate = page.popstate = function (path) {
+    OSM.loadSidebarContent(path, function () {
+      page.load();

     });
     });

+  };
+
+  page.load = function () {
+    const changesetData = content.find("[data-changeset]").data("changeset");
+    changesetData.type = "changeset";

 
 

-  group.getLayerId = function(layer) {
-    return layer.id;
+    const hashParams = OSM.parseHash(window.location.hash);
+    initialize();
+    map.addObject(changesetData, function (bounds) {
+      if (!hashParams.center && bounds.isValid()) {
+        OSM.router.withoutMoveListener(function () {
+          map.fitBounds(bounds);
+        });
+      }
+    });

   };
 
   };
 

-  function highlightChangeset(id) {
-    group.getLayer(id).setStyle({fillOpacity: 0.5});
-    $("#changeset_" + id).addClass("selected");
-  }
+  function updateChangeset(method, url, include_data) {
+    const data = new URLSearchParams();

 
 

-  function unHighlightChangeset(id) {
-    group.getLayer(id).setStyle({fillOpacity: 0});
-    $("#changeset_" + id).removeClass("selected");
-  }
+    content.find("#comment-error").prop("hidden", true);
+    content.find("button[data-method][data-url]").prop("disabled", true);

 
 

-  page.pushstate = page.popstate = function(path) {
-    $("#history_tab").addClass("current");
-    $("#sidebar").removeClass("minimized");
-    map.invalidateSize();
-    $('#sidebar_content').load(path, page.load);
-  };
+    if (include_data) {
+      data.set("text", content.find("textarea").val());
+    }

 
 

-  page.load = function() {
-    map.addLayer(group);
+    fetch(url, {
+      method: method,
+      headers: { ...OSM.oauth },
+      body: data
+    })
+      .then(response => {
+        if (response.ok) return response;
+        return response.text().then(text => {
+          throw new Error(text);
+        });
+      })
+      .then(() => {
+        OSM.loadSidebarContent(window.location.pathname, page.load);
+      })
+      .catch(error => {
+        content.find("button[data-method][data-url]").prop("disabled", false);
+        content.find("#comment-error")
+          .text(error.message)
+          .prop("hidden", false)
+          .get(0).scrollIntoView({ block: "nearest" });
+      });
+  }

 
 

-    var changesets = [];
-    $("[data-changeset]").each(function () {
-      var changeset = $(this).data('changeset');
-      if (changeset.bbox) {
-        changeset.bounds = L.latLngBounds([changeset.bbox.minlat, changeset.bbox.minlon],
-          [changeset.bbox.maxlat, changeset.bbox.maxlon]);
-        changesets.push(changeset);
-      }
+  function initialize() {
+    content.find("button[data-method][data-url]").on("click", function (e) {
+      e.preventDefault();
+      const data = $(e.target).data();
+      const include_data = e.target.name === "comment";
+      updateChangeset(data.method, data.url, include_data);

     });
 
     });
 

-    changesets.sort(function (a, b) {
-      return b.bounds.getSize() - a.bounds.getSize();
+    content.find("textarea").on("input", function (e) {
+      const form = e.target.form,
+            disabled = $(e.target).val() === "";
+      form.comment.disabled = disabled;

     });
 
     });
 

-    for (var i = 0; i < changesets.length; ++i) {
-      var changeset = changesets[i],
-        rect = L.rectangle(changeset.bounds,
-          {weight: 2, color: "#ee9900", fillColor: "#ffff55", fillOpacity: 0});
-      rect.id = changeset.id;
-      rect.addTo(group);
-    }
-
-    $("[data-changeset]").on({
-      mouseover: function () {
-        highlightChangeset($(this).data("changeset").id);
-      },
-      mouseout: function () {
-        unHighlightChangeset($(this).data("changeset").id);
-      }
-    });
-  };
+    content.find("textarea").val("").trigger("input");
+  }

 
 

-  page.unload = function() {
-    map.removeLayer(group);
-    group.clearLayers();
-    $("#history_tab").removeClass("current");
+  page.unload = function () {
+    map.removeObject();

   };
 
   return page;
   };
 
   return page;