Move endpoints code to its own module

diff --git a/app/assets/javascripts/index/directions-endpoint.js b/app/assets/javascripts/index/directions-endpoint.js
new file mode 100644 (file)
index 0000000..0f53e77
--- /dev/null
+++ b/app/assets/javascripts/index/directions-endpoint.js
@@ -0,0 +1,84 @@
+OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, geocodeCallback) {
+  var endpoint = {};
+
+  endpoint.marker = L.marker([0, 0], {
+    icon: L.icon({
+      iconUrl: iconUrl,
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowUrl: OSM.MARKER_SHADOW,
+      shadowSize: [41, 41]
+    }),
+    draggable: true,
+    autoPan: true
+  });
+
+  endpoint.marker.on("drag dragend", function (e) {
+    endpoint.setLatLng(e.target.getLatLng());
+    dragCallback(e.type === "drag");
+  });
+
+  input.on("keydown", function () {
+    input.removeClass("is-invalid");
+  });
+
+  input.on("change", function (e) {
+    // make text the same in both text boxes
+    var value = e.target.value;
+    endpoint.setValue(value);
+  });
+
+  endpoint.setValue = function (value, latlng) {
+    endpoint.value = value;
+    delete endpoint.latlng;
+    input.removeClass("is-invalid");
+    input.val(value);
+
+    if (latlng) {
+      endpoint.setLatLng(latlng);
+    } else {
+      endpoint.getGeocode();
+    }
+  };
+
+  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;
+
+    var viewbox = map.getBounds().toBBoxString(); // <sw lon>,<sw lat>,<ne lon>,<ne lat>
+
+    $.getJSON(OSM.NOMINATIM_URL + "search?q=" + encodeURIComponent(endpoint.value) + "&format=json&viewbox=" + viewbox, function (json) {
+      endpoint.awaitingGeocode = false;
+      endpoint.hasGeocode = true;
+      if (json.length === 0) {
+        input.addClass("is-invalid");
+        alert(I18n.t("javascripts.directions.errors.no_place", { place: endpoint.value }));
+        return;
+      }
+
+      endpoint.setLatLng(L.latLng(json[0]));
+
+      input.val(json[0].display_name);
+
+      geocodeCallback();
+    });
+  };
+
+  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)
+      .addTo(map);
+  };
+
+  return endpoint;
+};

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index f7ce2adc151f52a52202c7c129934eafe11d2c58..ccd4a68c253ada6b537f063f465b9fb61f2e7a18 100644 (file)
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -1,3 +1,4 @@
+//= require ./directions-endpoint
 //= require_self
 //= require_tree ./directions
 //= require qs/dist/qs
@@ -32,8 +33,8 @@ OSM.Directions = function (map) {
   };
 
   var endpoints = [
-    Endpoint($("input[name='route_from']"), OSM.MARKER_GREEN, endpointDragCallback, endpointGeocodeCallback),
-    Endpoint($("input[name='route_to']"), OSM.MARKER_RED, endpointDragCallback, endpointGeocodeCallback)
+    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), OSM.MARKER_GREEN, endpointDragCallback, endpointGeocodeCallback),
+    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), OSM.MARKER_RED, endpointDragCallback, endpointGeocodeCallback)
   ];
 
   var expiry = new Date();
@@ -53,91 +54,6 @@ OSM.Directions = function (map) {
     select.append("<option value='" + i + "'>" + I18n.t("javascripts.directions.engines." + engine.id) + "</option>");
   });
 
-  function Endpoint(input, iconUrl, dragCallback, geocodeCallback) {
-    var endpoint = {};
-
-    endpoint.marker = L.marker([0, 0], {
-      icon: L.icon({
-        iconUrl: iconUrl,
-        iconSize: [25, 41],
-        iconAnchor: [12, 41],
-        popupAnchor: [1, -34],
-        shadowUrl: OSM.MARKER_SHADOW,
-        shadowSize: [41, 41]
-      }),
-      draggable: true,
-      autoPan: true
-    });
-
-    endpoint.marker.on("drag dragend", function (e) {
-      endpoint.setLatLng(e.target.getLatLng());
-      dragCallback(e.type === "drag");
-    });
-
-    input.on("keydown", function () {
-      input.removeClass("is-invalid");
-    });
-
-    input.on("change", function (e) {
-      // make text the same in both text boxes
-      var value = e.target.value;
-      endpoint.setValue(value);
-    });
-
-    endpoint.setValue = function (value, latlng) {
-      endpoint.value = value;
-      delete endpoint.latlng;
-      input.removeClass("is-invalid");
-      input.val(value);
-
-      if (latlng) {
-        endpoint.setLatLng(latlng);
-      } else {
-        endpoint.getGeocode();
-      }
-    };
-
-    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;
-
-      var viewbox = map.getBounds().toBBoxString(); // <sw lon>,<sw lat>,<ne lon>,<ne lat>
-
-      $.getJSON(OSM.NOMINATIM_URL + "search?q=" + encodeURIComponent(endpoint.value) + "&format=json&viewbox=" + viewbox, function (json) {
-        endpoint.awaitingGeocode = false;
-        endpoint.hasGeocode = true;
-        if (json.length === 0) {
-          input.addClass("is-invalid");
-          alert(I18n.t("javascripts.directions.errors.no_place", { place: endpoint.value }));
-          return;
-        }
-
-        endpoint.setLatLng(L.latLng(json[0]));
-
-        input.val(json[0].display_name);
-
-        geocodeCallback();
-      });
-    };
-
-    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)
-        .addTo(map);
-    };
-
-    return endpoint;
-  }
-
   $(".directions_form .reverse_directions").on("click", function () {
     var coordFrom = endpoints[0].latlng,
         coordTo = endpoints[1].latlng,