Use Bootstrap actionable items in query results

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

diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js
index 49d162b1f708252e6d227b524e0e2903bcd9ea7d..313bd1cc00618506e7e0e6e76143577f381f3d75 100644 (file)
--- a/app/assets/javascripts/index/query.js
+++ b/app/assets/javascripts/index/query.js
@@ -1,10 +1,9 @@
-//= require jquery.simulate
-//= require querystring
+//= require jquery-simulate/jquery.simulate
+//= require qs/dist/qs
 
 OSM.Query = function (map) {
-  var querystring = require("querystring-component");
-
   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;
@@ -40,17 +39,21 @@ OSM.Query = function (map) {
     }
   });
 
+  function showResultGeometry() {
+    var geometry = $(this).data("geometry");
+    if (geometry) map.addLayer(geometry);
+    $(this).addClass("selected");
+  }
+
+  function hideResultGeometry() {
+    var geometry = $(this).data("geometry");
+    if (geometry) map.removeLayer(geometry);
+    $(this).removeClass("selected");
+  }
+
   $("#sidebar_content")
-    .on("mouseover", ".query-results li.query-result", function () {
-      var geometry = $(this).data("geometry");
-      if (geometry) map.addLayer(geometry);
-      $(this).addClass("selected");
-    })
-    .on("mouseout", ".query-results li.query-result", function () {
-      var geometry = $(this).data("geometry");
-      if (geometry) map.removeLayer(geometry);
-      $(this).removeClass("selected");
-    })
+    .on("mouseover", ".query-results li.query-result", showResultGeometry)
+    .on("mouseout", ".query-results li.query-result", hideResultGeometry)
     .on("mousedown", ".query-results li.query-result", function () {
       var moved = false;
       $(this).one("click", function (e) {
@@ -105,8 +108,8 @@ OSM.Query = function (map) {
         value = tags[key];
 
         if (prefixes[key]) {
-          var first = value.substr(0, 1).toUpperCase(),
-              rest = value.substr(1).replace(/_/g, " ");
+          var first = value.slice(0, 1).toUpperCase(),
+              rest = value.slice(1).replace(/_/g, " ");
 
           return first + rest;
         }
@@ -122,7 +125,7 @@ OSM.Query = function (map) {
 
   function featureName(feature) {
     var tags = feature.tags,
-        locales = I18n.locales.get();
+        locales = OSM.preferred_languages;
 
     for (var i = 0; i < locales.length; i++) {
       if (tags["name:" + locales[i]]) {
@@ -169,10 +172,6 @@ OSM.Query = function (map) {
     $ul.empty();
     $section.show();
 
-    $section.find(".loader").oneTime(1000, "loading", function () {
-      $(this).show();
-    });
-
     if ($section.data("ajax")) {
       $section.data("ajax").abort();
     }
@@ -183,10 +182,13 @@ OSM.Query = function (map) {
       data: {
         data: "[timeout:10][out:json];" + query
       },
+      xhrFields: {
+        withCredentials: credentials
+      },
       success: function (results) {
         var elements;
 
-        $section.find(".loader").stopTime("loading").hide();
+        $section.find(".loader").hide();
 
         if (merge) {
           elements = results.elements.reduce(function (hash, element) {
@@ -214,36 +216,37 @@ OSM.Query = function (map) {
 
           if (interestingFeature(element)) {
             var $li = $("<li>")
-              .addClass("query-result")
+              .addClass("query-result list-group-item list-group-item-action")
               .data("geometry", featureGeometry(element))
-              .appendTo($ul);
-            var $p = $("<p>")
               .text(featurePrefix(element) + " ")
-              .appendTo($li);
+              .appendTo($ul);
 
             $("<a>")
               .attr("href", "/" + element.type + "/" + element.id)
               .text(featureName(element))
-              .appendTo($p);
+              .appendTo($li);
           }
         }
 
         if (results.remark) {
           $("<li>")
+            .addClass("query-result list-group-item list-group-item-action")
             .text(I18n.t("javascripts.query.error", { server: url, error: results.remark }))
             .appendTo($ul);
         }
 
         if ($ul.find("li").length === 0) {
           $("<li>")
+            .addClass("query-result list-group-item list-group-item-action")
             .text(I18n.t("javascripts.query.nothing_found"))
             .appendTo($ul);
         }
       },
       error: function (xhr, status, error) {
-        $section.find(".loader").stopTime("loading").hide();
+        $section.find(".loader").hide();
 
         $("<li>")
+          .addClass("query-result list-group-item list-group-item-action")
           .text(I18n.t("javascripts.query." + status, { server: url, error: error }))
           .appendTo($ul);
       }
@@ -284,7 +287,11 @@ OSM.Query = function (map) {
   function queryOverpass(lat, lng) {
     var latlng = L.latLng(lat, lng).wrap(),
         bounds = map.getBounds().wrap(),
-        bbox = bounds.getSouth() + "," + bounds.getWest() + "," + bounds.getNorth() + "," + bounds.getEast(),
+        precision = OSM.zoomPrecision(map.getZoom()),
+        bbox = bounds.getSouth().toFixed(precision) + "," +
+               bounds.getWest().toFixed(precision) + "," +
+               bounds.getNorth().toFixed(precision) + "," +
+               bounds.getEast().toFixed(precision),
         radius = 10 * Math.pow(1.5, 19 - map.getZoom()),
         around = "around:" + radius + "," + lat + "," + lng,
         nodes = "node(" + around + ")",
@@ -345,7 +352,7 @@ OSM.Query = function (map) {
   };
 
   page.load = function (path, noCentre) {
-    var params = querystring.parse(path.substring(path.indexOf("?") + 1)),
+    var params = Qs.parse(path.substring(path.indexOf("?") + 1)),
         latlng = L.latLng(params.lat, params.lon);
 
     if (!window.location.hash && !noCentre && !map.getBounds().contains(latlng)) {
@@ -360,6 +367,7 @@ OSM.Query = function (map) {
   page.unload = function (sameController) {
     if (!sameController) {
       disableQueryMode();
+      $("#sidebar_content .query-results li.query-result.selected").each(hideResultGeometry);
     }
   };