X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/7cf9bf0e553a141acab2afea53842f97eddd0a40..HEAD:/app/assets/javascripts/index/query.js

diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js
index 3874dbdbb..ee9d3f415 100644
--- a/app/assets/javascripts/index/query.js
+++ b/app/assets/javascripts/index/query.js
@@ -1,11 +1,11 @@
 OSM.Query = function (map) {
-  var url = OSM.OVERPASS_URL,
-      credentials = OSM.OVERPASS_CREDENTIALS,
-      queryButton = $(".control-query .control-button"),
-      uninterestingTags = ["source", "source_ref", "source:ref", "history", "attribution", "created_by", "tiger:county", "tiger:tlid", "tiger:upload_uuid", "KSJ2:curve_id", "KSJ2:lat", "KSJ2:lon", "KSJ2:coordinate", "KSJ2:filename", "note:ja"],
-      marker;
+  const url = OSM.OVERPASS_URL,
+        credentials = OSM.OVERPASS_CREDENTIALS,
+        queryButton = $(".control-query .control-button"),
+        uninterestingTags = ["source", "source_ref", "source:ref", "history", "attribution", "created_by", "tiger:county", "tiger:tlid", "tiger:upload_uuid", "KSJ2:curve_id", "KSJ2:lat", "KSJ2:lon", "KSJ2:coordinate", "KSJ2:filename", "note:ja"];
+  let marker;
 
-  var featureStyle = {
+  const featureStyle = {
     color: "#FF6200",
     weight: 4,
     opacity: 1,
@@ -37,13 +37,13 @@ OSM.Query = function (map) {
   });
 
   function showResultGeometry() {
-    var geometry = $(this).data("geometry");
+    const geometry = $(this).data("geometry");
     if (geometry) map.addLayer(geometry);
     $(this).addClass("selected");
   }
 
   function hideResultGeometry() {
-    var geometry = $(this).data("geometry");
+    const geometry = $(this).data("geometry");
     if (geometry) map.removeLayer(geometry);
     $(this).removeClass("selected");
   }
@@ -54,7 +54,7 @@ OSM.Query = function (map) {
 
   function interestingFeature(feature) {
     if (feature.tags) {
-      for (var key in feature.tags) {
+      for (const key in feature.tags) {
         if (uninterestingTags.indexOf(key) < 0) {
           return true;
         }
@@ -65,19 +65,18 @@ OSM.Query = function (map) {
   }
 
   function featurePrefix(feature) {
-    var tags = feature.tags;
-    var prefix = "";
+    const tags = feature.tags;
+    let prefix = "";
 
     if (tags.boundary === "administrative" && tags.admin_level) {
       prefix = I18n.t("geocoder.search_osm_nominatim.admin_levels.level" + tags.admin_level, {
         defaultValue: I18n.t("geocoder.search_osm_nominatim.prefix.boundary.administrative")
       });
     } else {
-      var prefixes = I18n.t("geocoder.search_osm_nominatim.prefix");
-      var key, value;
+      const prefixes = I18n.t("geocoder.search_osm_nominatim.prefix");
 
-      for (key in tags) {
-        value = tags[key];
+      for (const key in tags) {
+        const value = tags[key];
 
         if (prefixes[key]) {
           if (prefixes[key][value]) {
@@ -86,12 +85,12 @@ OSM.Query = function (map) {
         }
       }
 
-      for (key in tags) {
-        value = tags[key];
+      for (const key in tags) {
+        const value = tags[key];
 
         if (prefixes[key]) {
-          var first = value.slice(0, 1).toUpperCase(),
-              rest = value.slice(1).replace(/_/g, " ");
+          const first = value.slice(0, 1).toUpperCase(),
+                rest = value.slice(1).replace(/_/g, " ");
 
           return first + rest;
         }
@@ -106,30 +105,29 @@ OSM.Query = function (map) {
   }
 
   function featureName(feature) {
-    var tags = feature.tags,
-        locales = OSM.preferred_languages;
+    const tags = feature.tags,
+          locales = OSM.preferred_languages;
 
-    for (var i = 0; i < locales.length; i++) {
-      if (tags["name:" + locales[i]]) {
-        return tags["name:" + locales[i]];
+    for (const locale of locales) {
+      if (tags["name:" + locale]) {
+        return tags["name:" + locale];
       }
     }
 
-    if (tags.name) {
-      return tags.name;
-    } else if (tags.ref) {
-      return tags.ref;
-    } else if (tags["addr:housename"]) {
-      return tags["addr:housename"];
-    } else if (tags["addr:housenumber"] && tags["addr:street"]) {
+    for (const key of ["name", "ref", "addr:housename"]) {
+      if (tags[key]) {
+        return tags[key];
+      }
+    }
+
+    if (tags["addr:housenumber"] && tags["addr:street"]) {
       return tags["addr:housenumber"] + " " + tags["addr:street"];
-    } else {
-      return "#" + feature.id;
     }
+    return "#" + feature.id;
   }
 
   function featureGeometry(feature) {
-    var geometry;
+    let geometry;
 
     if (feature.type === "node" && feature.lat && feature.lon) {
       geometry = L.circleMarker([feature.lat, feature.lon], featureStyle);
@@ -149,7 +147,7 @@ OSM.Query = function (map) {
   }
 
   function runQuery(latlng, radius, query, $section, merge, compare) {
-    var $ul = $section.find("ul");
+    const $ul = $section.find("ul");
 
     $ul.empty();
     $section.show();
@@ -158,23 +156,24 @@ OSM.Query = function (map) {
       $section.data("ajax").abort();
     }
 
-    $section.data("ajax", $.ajax({
-      url: url,
+    $section.data("ajax", new AbortController());
+    fetch(url, {
       method: "POST",
-      data: {
+      body: new URLSearchParams({
         data: "[timeout:10][out:json];" + query
-      },
-      xhrFields: {
-        withCredentials: credentials
-      },
-      success: function (results) {
-        var elements;
+      }),
+      credentials: credentials ? "include" : "same-origin",
+      signal: $section.data("ajax").signal
+    })
+      .then(response => response.json())
+      .then(function (results) {
+        let elements;
 
         $section.find(".loader").hide();
 
         if (merge) {
           elements = results.elements.reduce(function (hash, element) {
-            var key = element.type + element.id;
+            const key = element.type + element.id;
             if ("geometry" in element) {
               delete element.bounds;
             }
@@ -193,22 +192,20 @@ OSM.Query = function (map) {
           elements = elements.sort(compare);
         }
 
-        for (var i = 0; i < elements.length; i++) {
-          var element = elements[i];
-
-          if (interestingFeature(element)) {
-            var $li = $("<li>")
-              .addClass("list-group-item list-group-item-action")
-              .text(featurePrefix(element) + " ")
-              .appendTo($ul);
-
-            $("<a>")
-              .addClass("stretched-link")
-              .attr("href", "/" + element.type + "/" + element.id)
-              .data("geometry", featureGeometry(element))
-              .text(featureName(element))
-              .appendTo($li);
-          }
+        for (const element of elements) {
+          if (!interestingFeature(element)) continue;
+
+          const $li = $("<li>")
+            .addClass("list-group-item list-group-item-action")
+            .text(featurePrefix(element) + " ")
+            .appendTo($ul);
+
+          $("<a>")
+            .addClass("stretched-link")
+            .attr("href", "/" + element.type + "/" + element.id)
+            .data("geometry", featureGeometry(element))
+            .text(featureName(element))
+            .appendTo($li);
         }
 
         if (results.remark) {
@@ -224,25 +221,26 @@ 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) {
-    var width1 = feature1.bounds.maxlon - feature1.bounds.minlon,
-        height1 = feature1.bounds.maxlat - feature1.bounds.minlat,
-        area1 = width1 * height1,
-        width2 = feature2.bounds.maxlat - feature2.bounds.minlat,
-        height2 = feature2.bounds.maxlat - feature2.bounds.minlat,
-        area2 = width2 * height2;
+    const width1 = feature1.bounds.maxlon - feature1.bounds.minlon,
+          height1 = feature1.bounds.maxlat - feature1.bounds.minlat,
+          area1 = width1 * height1,
+          width2 = feature2.bounds.maxlat - feature2.bounds.minlat,
+          height2 = feature2.bounds.maxlat - feature2.bounds.minlat,
+          area2 = width2 * height2;
 
     return area1 - area2;
   }
@@ -268,29 +266,30 @@ OSM.Query = function (map) {
    * for each object.
    */
   function queryOverpass(lat, lng) {
-    var latlng = L.latLng(lat, lng).wrap(),
-        bounds = map.getBounds().wrap(),
-        zoom = map.getZoom(),
-        bbox = [bounds.getSouthWest(), bounds.getNorthEast()]
-          .map(c => OSM.cropLocation(c, zoom))
-          .join(),
-        geombbox = "geom(" + bbox + ");",
-        radius = 10 * Math.pow(1.5, 19 - zoom),
-        around = "(around:" + radius + "," + lat + "," + lng + ")",
-        nodes = "node" + around,
-        ways = "way" + around,
-        relations = "relation" + around,
-        nearby = "(" + nodes + ";" + ways + ";);out tags " + geombbox + relations + ";out " + geombbox,
-        isin = "is_in(" + lat + "," + lng + ")->.a;way(pivot.a);out tags bb;out ids " + geombbox + "relation(pivot.a);out tags bb;";
+    const latlng = L.latLng(lat, lng).wrap(),
+          bounds = map.getBounds().wrap(),
+          zoom = map.getZoom(),
+          bbox = [bounds.getSouthWest(), bounds.getNorthEast()]
+            .map(c => OSM.cropLocation(c, zoom))
+            .join(),
+          geombbox = "geom(" + bbox + ");",
+          radius = 10 * Math.pow(1.5, 19 - zoom),
+          around = "(around:" + radius + "," + lat + "," + lng + ")",
+          nodes = "node" + around,
+          ways = "way" + around,
+          relations = "relation" + around,
+          nearby = "(" + nodes + ";" + ways + ";);out tags " + geombbox + relations + ";out " + geombbox,
+          isin = "is_in(" + lat + "," + lng + ")->.a;way(pivot.a);out tags bb;out ids " + geombbox + "relation(pivot.a);out tags bb;";
 
     $("#sidebar_content .query-intro")
       .hide();
 
     if (marker) map.removeLayer(marker);
-    marker = L.circle(latlng, Object.assign({
+    marker = L.circle(latlng, {
       radius: radius,
-      className: "query-marker"
-    }, featureStyle)).addTo(map);
+      className: "query-marker",
+      ...featureStyle
+    }).addTo(map);
 
     runQuery(latlng, radius, nearby, $("#query-nearby"), false);
     runQuery(latlng, radius, isin, $("#query-isin"), true, compareSize);
@@ -315,7 +314,7 @@ OSM.Query = function (map) {
     queryButton.removeClass("active");
   }
 
-  var page = {};
+  const page = {};
 
   page.pushstate = page.popstate = function (path) {
     OSM.loadSidebarContent(path, function () {