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

app/assets/javascripts/index.js

@@ -41,19 +41,18 @@ $(document).ready(function () {
     $("#sidebar_content")
       .empty();
 
-    $.ajax({
+    fetch(content_path, { headers: { "accept": "text/html", "x-requested-with": "XMLHttpRequest" } })
-      url: content_path,
+      .then(response => {
-      dataType: "html",
-      complete: function (xhr) {
         $("#flash").empty();
         $("#sidebar_loader").removeClass("delayed-fade-in").hide();
 
-        var content = $(xhr.responseText);
+        const title = response.headers.get("X-Page-Title");
+        if (title) document.title = decodeURIComponent(title);
 
-        if (xhr.getResponseHeader("X-Page-Title")) {
+        return response.text();
-          var title = xhr.getResponseHeader("X-Page-Title");
+      })
-          document.title = decodeURIComponent(title);
+      .then(html => {
-        }
+        const content = $(html);
 
         $("head")
           .find("link[type=\"application/atom+xml\"]")
@@ -67,8 +66,7 @@ $(document).ready(function () {
         if (callback) {
           callback();
         }
-      }
+      });
-    });
   };
 
   var params = OSM.mapParams();

app/assets/javascripts/index/history.js

@@ -56,24 +56,23 @@ OSM.History = function (map) {
   }
 
   function update() {
-    var data = { list: "1" };
+    const data = new URLSearchParams();
 
     if (window.location.pathname === "/history") {
-      data.bbox = map.getBounds().wrap().toBBoxString();
+      data.set("bbox", map.getBounds().wrap().toBBoxString());
       var feedLink = $("link[type=\"application/atom+xml\"]"),
           feedHref = feedLink.attr("href").split("?")[0];
-      feedLink.attr("href", feedHref + "?bbox=" + data.bbox);
+      feedLink.attr("href", feedHref + "?" + data);
     }
 
-    $.ajax({
+    data.set("list", "1");
-      url: window.location.pathname,
+
-      method: "GET",
+    fetch(window.location.pathname + "?" + data)
-      data: data,
+      .then(response => response.text())
-      success: function (html) {
+      .then(function (html) {
         displayFirstChangesets(html);
         updateMap();
-      }
+      });
-    });
   }
 
   function loadMore(e) {

app/assets/javascripts/index/layers/data.js

@@ -79,20 +79,27 @@ OSM.initializeDataLayer = function (map) {
 
   function getData() {
     var bounds = map.getBounds();
-    var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
+    var url = "/api/" + OSM.API_VERSION + "/map.json?bbox=" + bounds.toBBoxString();
 
     /*
      * Modern browsers are quite happy showing far more than 100 features in
-     * the data browser, so increase the limit to 4000 by default.
+     * the data browser, so increase the limit to 4000.
      */
     const maxFeatures = 4000;
 
     if (dataLoader) dataLoader.abort();
 
-    dataLoader = $.ajax({
+    dataLoader = new AbortController();
-      url: url,
+    fetch(url, { signal: dataLoader.signal })
-      dataType: "json",
+      .then(response => {
-      success: function (data) {
+        if (response.ok) return response.json();
+        const status = response.statusText || response.status;
+        if (response.status !== 400) throw new Error(status);
+        return response.text().then(text => {
+          throw new Error(text || status);
+        });
+      })
+      .then(function (data) {
         dataLayer.clearLayers();
 
         var features = dataLayer.buildFeatures(data);
@@ -116,26 +123,15 @@ OSM.initializeDataLayer = function (map) {
         if (map._objectLayer) {
           map._objectLayer.bringToFront();
         }
+      })
+      .catch(function (error) {
+        if (error.name === "AbortError") return;
 
-        dataLoader = null;
+        displayLoadError(error?.message, () => {
-      },
-      error: function (XMLHttpRequest, textStatus) {
-        dataLoader = null;
-        if (textStatus === "abort") return;
-
-        function closeError() {
           $("#browse_status").empty();
-        }
+        });
-
+      })
-        if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) {
+      .finally(() => dataLoader = null);
-          displayLoadError(XMLHttpRequest.responseText, closeError);
-        } else if (XMLHttpRequest.statusText) {
-          displayLoadError(XMLHttpRequest.statusText, closeError);
-        } else {
-          displayLoadError(String(XMLHttpRequest.status), closeError);
-        }
-      }
-    });
   }
 
   function onSelect(layer) {

app/assets/javascripts/index/layers/notes.js

@@ -75,10 +75,12 @@ OSM.initializeNotesLayer = function (map) {
 
       if (noteLoader) noteLoader.abort();
 
-      noteLoader = $.ajax({
+      noteLoader = new AbortController();
-        url: url,
+      fetch(url, { signal: noteLoader.signal })
-        success: success
+        .then(response => response.json())
-      });
+        .then(success)
+        .catch(() => {})
+        .finally(() => noteLoader = null);
     }
 
     function success(json) {
@@ -93,8 +95,6 @@ OSM.initializeNotesLayer = function (map) {
       for (var id in oldNotes) {
         noteLayer.removeLayer(oldNotes[id]);
       }
-
-      noteLoader = null;
     }
   }
 };

app/assets/javascripts/index/query.js

@@ -157,16 +157,17 @@ OSM.Query = function (map) {
       $section.data("ajax").abort();
     }
 
-    $section.data("ajax", $.ajax({
+    $section.data("ajax", new AbortController());
-      url: url,
+    fetch(url, {
       method: "POST",
-      data: {
+      body: new URLSearchParams({
         data: "[timeout:10][out:json];" + query
-      },
+      }),
-      xhrFields: {
+      credentials: credentials ? "include" : "same-origin",
-        withCredentials: credentials
+      signal: $section.data("ajax").signal
-      },
+    })
-      success: function (results) {
+      .then(response => response.json())
+      .then(function (results) {
         var elements;
 
         $section.find(".loader").hide();
@@ -221,16 +222,17 @@ OSM.Query = function (map) {
             .text(I18n.t("javascripts.query.nothing_found"))
             .appendTo($ul);
         }
-      },
+      })
-      error: function (xhr, status, error) {
+      .catch(function (error) {
+        if (error.name === "AbortError") return;
+
         $section.find(".loader").hide();
 
         $("<li>")
           .addClass("list-group-item")
-          .text(I18n.t("javascripts.query." + status, { server: url, error: error }))
+          .text(I18n.t("javascripts.query.error", { server: url, error: error.message }))
           .appendTo($ul);
-      }
+      });
-    }));
   }
 
   function compareSize(feature1, feature2) {

app/assets/javascripts/index/search.js

@@ -47,21 +47,19 @@ OSM.Search = function (map) {
     var div = $(this).parents(".search_more"),
         csrf_param = $("meta[name=csrf-param]").attr("content"),
         csrf_token = $("meta[name=csrf-token]").attr("content"),
-        params = {};
+        params = new URLSearchParams();
 
     $(this).hide();
     div.find(".loader").show();
 
-    params[csrf_param] = csrf_token;
+    params.set(csrf_param, csrf_token);
 
-    $.ajax({
+    fetch($(this).attr("href"), {
-      url: $(this).attr("href"),
       method: "POST",
-      data: params,
+      body: params
-      success: function (data) {
+    })
-        div.replaceWith(data);
+      .then(response => response.text())
-      }
+      .then(data => div.replaceWith(data));
-    });
   }
 
   function showSearchResult() {
@@ -125,19 +123,20 @@ OSM.Search = function (map) {
       var entry = $(this),
           csrf_param = $("meta[name=csrf-param]").attr("content"),
           csrf_token = $("meta[name=csrf-token]").attr("content"),
-          params = {
+          params = new URLSearchParams({
             zoom: map.getZoom(),
             minlon: map.getBounds().getWest(),
             minlat: map.getBounds().getSouth(),
             maxlon: map.getBounds().getEast(),
             maxlat: map.getBounds().getNorth()
-          };
+          });
-      params[csrf_param] = csrf_token;
+      params.set(csrf_param, csrf_token);
-      $.ajax({
+      fetch(entry.data("href"), {
-        url: entry.data("href"),
         method: "POST",
-        data: params,
+        body: params
-        success: function (html) {
+      })
+        .then(response => response.text())
+        .then(function (html) {
           entry.html(html);
           // go to first result of first geocoder
           if (index === 0) {
@@ -146,8 +145,7 @@ OSM.Search = function (map) {
               panToSearchResult(firstResult.data());
             }
           }
-        }
+        });
-      });
     });
 
     return map.getState();

app/assets/javascripts/leaflet.map.js

@@ -265,9 +265,7 @@ L.OSM.Map = L.Map.extend({
     this.removeObject();
 
     if (object.type === "note" || object.type === "changeset") {
-      this._objectLoader = {
+      this._objectLoader = { abort: () => {} };
-        abort: function () {}
-      };
 
       this._object = object;
       this._objectLayer = L.featureGroup().addTo(this);
@@ -295,10 +293,13 @@ L.OSM.Map = L.Map.extend({
       this.fire("overlayadd", { layer: this._objectLayer });
     } else { // element handled by L.OSM.DataLayer
       var map = this;
-      this._objectLoader = $.ajax({
+      this._objectLoader = new AbortController();
-        url: OSM.apiUrl(object),
+      fetch(OSM.apiUrl(object), {
-        dataType: "json",
+        headers: { accept: "application/json" },
-        success: function (data) {
+        signal: this._objectLoader.signal
+      })
+        .then(response => response.json())
+        .then(function (data) {
           map._object = object;
 
           map._objectLayer = new L.OSM.DataLayer(null, {
@@ -320,8 +321,8 @@ L.OSM.Map = L.Map.extend({
 
           if (callback) callback(map._objectLayer.getBounds());
           map.fire("overlayadd", { layer: map._objectLayer });
-        }
+        })
-      });
+        .catch(() => {});
     }
   },