Make directions endpoints own the value and not care which input box they get it...

[rails.git] / app / assets / javascripts / index / directions.js.erb

diff --git a/app/assets/javascripts/index/directions.js.erb b/app/assets/javascripts/index/directions.js.erb
index 3520f3ecdb43b236420d6236ca1267e8be22353d..c3ad085ffeda4c20560d4b122cca6e87743f9fb7 100644 (file)
--- a/app/assets/javascripts/index/directions.js.erb
+++ b/app/assets/javascripts/index/directions.js.erb
@@ -52,11 +52,29 @@ OSM.Directions = function (map) {
     });
 
     input.on("change", function (e) {
+      // make text the same in both text boxes
+      var value = e.target.value;
+      endpoint.setValue(value)
+      endpoint.getGeocode();
+    });
+
+    endpoint.setValue = function(value) {
+      endpoint.value = value;
+      input.val(value);
+    }
+
+    endpoint.getGeocode = function() {
+      // if no one has entered a value yet, then we can't geocode, so don't
+      // even try.
+      if (!endpoint.value) {
+        return;
+      }
+
       endpoint.awaitingGeocode = true;
 
-      $.getJSON('<%= NOMINATIM_URL %>search?q=' + encodeURIComponent(e.target.value) + '&format=json', function (json) {
+      $.getJSON('<%= NOMINATIM_URL %>search?q=' + encodeURIComponent(endpoint.value) + '&format=json', function (json) {
         endpoint.awaitingGeocode = false;
-
+        endpoint.hasGeocode = true;
         if (json.length == 0) {
           alert(I18n.t('javascripts.directions.errors.no_place'));
           return;
@@ -74,11 +92,12 @@ OSM.Directions = function (map) {
           getRoute();
         }
       });
-    });
+    }
 
     endpoint.setLatLng = function (ll) {
       var precision = OSM.zoomPrecision(map.getZoom());
       input.val(ll.lat.toFixed(precision) + ", " + ll.lng.toFixed(precision));
+      endpoint.hasGeocode = true;
       endpoint.latlng = ll;
       endpoint.marker
         .setLatLng(ll)
@@ -88,6 +107,16 @@ OSM.Directions = function (map) {
     return endpoint;
   }
 
+  $(".directions_form a.directions_close").on("click", function(e) {
+    e.preventDefault();
+    var route_from = endpoint[0].value;
+    if (route_from) {
+      OSM.router.route("/?query=" + encodeURIComponent(route_from) + OSM.formatHash(map));
+    } else {
+      OSM.router.route("/" + OSM.formatHash(map));
+    }
+  });
+
   function formatDistance(m) {
     if (m < 1000) {
       return Math.round(m) + "m";
@@ -115,6 +144,15 @@ OSM.Directions = function (map) {
   }
 
   function getRoute() {
+    // go fetch geocodes for any endpoints which have not already
+    // been geocoded.
+    for (var ep_i = 0; ep_i < 2; ++ep_i) {
+      var endpoint = endpoints[ep_i];
+      if (!endpoint.hasGeocode && !endpoint.awaitingGeocode) {
+        endpoint.getGeocode();
+        awaitingGeocode = true;
+      }
+    }
     if (endpoints[0].awaitingGeocode || endpoints[1].awaitingGeocode) {
       awaitingGeocode = true;
       return;
@@ -133,14 +171,16 @@ OSM.Directions = function (map) {
              d.lat.toFixed(precision) + ',' + d.lng.toFixed(precision)
     }));
 
-    $(".directions_form .spinner").show();
+    // copy loading item to sidebar and display it. we copy it, rather than
+    // just using it in-place and replacing it in case it has to be used
+    // again.
+    $('#sidebar_content').html($('.directions_form .loader_copy').html());
     awaitingRoute = true;
+    map.setSidebarOverlaid(false);
 
     chosenEngine.getRoute([o, d], function (err, route) {
       awaitingRoute = false;
 
-      $(".directions_form .spinner").hide();
-
       if (err) {
         map.removeLayer(polyline);
 
@@ -155,8 +195,6 @@ OSM.Directions = function (map) {
         .setLatLngs(route.line)
         .addTo(map);
 
-      map.setSidebarOverlaid(false);
-
       if (!dragging) {
         map.fitBounds(polyline.getBounds().pad(0.05));
       }
@@ -195,7 +233,7 @@ OSM.Directions = function (map) {
         }
 
         var row = $("<tr class='turn'/>");
-        row.append("<td class='direction i" + direction + "'> ");
+        row.append("<td><div class='direction i" + direction + "'/></td> ");
         row.append("<td class='instruction'>" + instruction);
         row.append("<td class='distance'>" + dist);
 
@@ -220,6 +258,14 @@ OSM.Directions = function (map) {
       $('#sidebar_content').append('<p id="routing_credit">' +
         I18n.t('javascripts.directions.instructions.courtesy', {link: chosenEngine.creditline}) +
         '</p>');
+
+      $('#sidebar_content a.geolink').on('click', function(e) {
+        e.preventDefault();
+        map.removeLayer(polyline);
+        $('#sidebar_content').html('');
+        map.setSidebarOverlaid(true);
+        // TODO: collapse width of sidebar back to previous
+      });
     });
   }
 
@@ -290,6 +336,10 @@ OSM.Directions = function (map) {
       setEngine(params.engine);
     }
 
+    if (params.from) {
+      endpoints[0].setValue(params.from);
+    }
+
     var o = route[0] && L.latLng(route[0].split(',')),
         d = route[1] && L.latLng(route[1].split(','));