Refactor search JS

app/assets/javascripts/index.js

@@ -5,6 +5,7 @@
 //= require leaflet.key
 //= require leaflet.note
 //= require leaflet.share
+//= require index/search
 //= require index/browse
 //= require index/export
 //= require index/notes
@@ -103,7 +104,7 @@ $(document).ready(function () {
 
   map.on('moveend layeradd layerremove', updateLocation);
 
-  map.markerLayer = L.layerGroup().addTo(map);
+  var marker = L.marker([0, 0], {icon: getUserIcon()});
 
   if (!params.object_zoom) {
     if (params.bounds) {
@@ -122,14 +123,22 @@ $(document).ready(function () {
   }
 
   if (params.marker) {
-    L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map.markerLayer);
+    marker.setLatLng([params.mlat, params.mlon]).addTo(map);
   }
 
   if (params.object) {
     map.addObject(params.object, { zoom: params.object_zoom });
   }
 
-  $("body").on("click", "a.set_position", setPositionLink(map));
+  $("#homeanchor").on("click", function(e) {
+    e.preventDefault();
+
+    var data = $(this).data(),
+      center = L.latLng(data.lat, data.lon);
+
+    map.setView(center, data.zoom);
+    marker.setLatLng(center).addTo(map);
+  });
 
   $("a[data-editor=remote]").click(function(e) {
       remoteEditHandler(map.getBounds());
@@ -140,19 +149,7 @@ $(document).ready(function () {
     remoteEditHandler(map.getBounds());
   }
 
-  $("#search_form").submit(submitSearch(map));
-
-
-  if ($("#query").val()) {
-    $("#search_form").submit();
-  }
-
-  // Focus the search field for browsers that don't support
-  // the HTML5 'autofocus' attribute
-  if (!("autofocus" in document.createElement("input"))) {
-    $("#query").focus();
-  }
-
+  initializeSearch(map);
   initializeExport(map);
   initializeBrowse(map, params);
   initializeNotes(map, params);
@@ -171,43 +168,3 @@ function updateLocation() {
   // Trigger hash update on layer changes.
   this.hash.onMapMove();
 }
-
-function setPositionLink(map) {
-  return function(e) {
-      var data = $(this).data(),
-          center = L.latLng(data.lat, data.lon);
-
-      if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
-        map.fitBounds([[data.minLat, data.minLon],
-                       [data.maxLat, data.maxLon]]);
-      } else {
-        map.setView(center, data.zoom);
-      }
-
-      if (data.type && data.id) {
-        map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } });
-      }
-
-      map.markerLayer.clearLayers();
-      L.marker(center, {icon: getUserIcon()}).addTo(map.markerLayer);
-
-      return e.preventDefault();
-  };
-}
-
-function submitSearch(map) {
-  return function(e) {
-    var bounds = map.getBounds();
-
-    $("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
-    $("#sidebar_content").load($(this).attr("action"), {
-      query: $("#query").val(),
-      minlon: bounds.getWest(),
-      minlat: bounds.getSouth(),
-      maxlon: bounds.getEast(),
-      maxlat: bounds.getNorth()
-    }, openSidebar);
-
-    return e.preventDefault();
-  };
-}

app/assets/javascripts/index/search.js

@@ -0,0 +1,56 @@
+function initializeSearch(map) {
+  $("#search_form").submit(submitSearch);
+
+  if ($("#query").val()) {
+    $("#search_form").submit();
+  }
+
+  // Focus the search field for browsers that don't support
+  // the HTML5 'autofocus' attribute
+  if (!("autofocus" in document.createElement("input"))) {
+    $("#query").focus();
+  }
+
+  $("#sidebar_content").on("click", ".search_results_entry a.set_position", clickSearchResult);
+
+  var marker = L.marker([0, 0], {icon: getUserIcon()});
+
+  function submitSearch(e) {
+    e.preventDefault();
+
+    var bounds = map.getBounds();
+
+    $("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
+    $("#sidebar_content").load($(this).attr("action"), {
+      query: $("#query").val(),
+      minlon: bounds.getWest(),
+      minlat: bounds.getSouth(),
+      maxlon: bounds.getEast(),
+      maxlat: bounds.getNorth()
+    });
+
+    openSidebar();
+  }
+
+  function clickSearchResult(e) {
+    e.preventDefault();
+
+    var data = $(this).data(),
+      center = L.latLng(data.lat, data.lon);
+
+    if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
+      map.fitBounds([[data.minLat, data.minLon],
+                     [data.maxLat, data.maxLon]]);
+    } else {
+      map.setView(center, data.zoom);
+    }
+
+    marker
+      .setLatLng(center)
+      .addTo(map);
+
+    if (data.type && data.id) {
+      map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } });
+    }
+  }
+}

app/views/site/_home_link.html.erb

@@ -1,5 +1,12 @@
 <% if @user and !@user.home_lon.nil? and !@user.home_lat.nil? %>
   <% content_for :greeting do %>
-    <%= link_to t("layouts.home"), "#", :class => "set_position", :data => { :lat => @user.home_lat, :lon => @user.home_lon, :zoom => 15 }, :title => t("layouts.home_tooltip") %>
+    <%= link_to t("layouts.home"),
+                "#",
+                :id => "homeanchor",
+                :class => "set_position",
+                :data => { :lat => @user.home_lat,
+                           :lon => @user.home_lon,
+                           :zoom => 15 },
+                :title => t("layouts.home_tooltip") %>
   <% end %>
 <% end %>