From 35458c009652645972a9167d80aba1c4fdce82cf Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Fri, 4 Oct 2013 14:24:25 -0700 Subject: [PATCH 1/1] Convert search to pushState --- app/assets/javascripts/index.js | 12 +++- app/assets/javascripts/index/search.js | 80 ++++++++++++-------------- app/assets/javascripts/router.js | 6 +- app/controllers/geocoder_controller.rb | 2 + app/views/geocoder/search.html.erb | 5 +- app/views/layouts/map.html.erb | 6 +- config/routes.rb | 2 +- 7 files changed, 58 insertions(+), 55 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 62d47a3af..91855f823 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -210,7 +210,6 @@ $(document).ready(function () { }); } - initializeSearch(map); initializeBrowse(map, params); initializeNotes(map, params); @@ -249,6 +248,7 @@ $(document).ready(function () { var router = OSM.Router({ "/": OSM.Index(map), + "/search": OSM.Search(map), "/export": OSM.Export(map), "/browse/changesets": OSM.ChangesetList(map), "/browse/:type/:id(/history)": OSM.Browse(map) @@ -257,4 +257,14 @@ $(document).ready(function () { $(document).on("click", "a", function(e) { if (router(this.pathname + this.search + this.hash)) e.preventDefault(); }); + + $("#search_form").on("submit", function(e) { + e.preventDefault(); + router("/search?query=" + encodeURIComponent($("#query").val()) + OSM.formatHash(map)); + }); + + $("#describe_location").on("click", function(e) { + e.preventDefault(); + router("/search?query=" + encodeURIComponent(map.getCenter().lat + "," + map.getCenter().lng)); + }); }); diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index c546469db..d881facbc 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -1,11 +1,4 @@ -function initializeSearch(map) { - $("#search_form").submit(submitSearch); - $("#describe_location").click(describeLocation); - - if ($("#query").val()) { - $("#search_form").submit(); - } - +OSM.Search = function(map) { $("#query") .on("focus", function() { $("#describe_location").fadeOut(100); @@ -16,28 +9,6 @@ function initializeSearch(map) { $("#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_content").load($(this).attr("action"), { - query: $("#query").val(), - zoom: map.getZoom(), - minlon: bounds.getWest(), - minlat: bounds.getSouth(), - maxlon: bounds.getEast(), - maxlat: bounds.getNorth() - }); - - $("#sidebar").one("closed", function () { - map.removeLayer(marker); - map.removeObject(); - }); - } - function clickSearchResult(e) { e.preventDefault(); @@ -46,7 +17,7 @@ function initializeSearch(map) { if (data.minLon && data.minLat && data.maxLon && data.maxLat) { map.fitBounds([[data.minLat, data.minLon], - [data.maxLat, data.maxLon]]); + [data.maxLat, data.maxLon]]); } else { map.setView(center, data.zoom); } @@ -60,16 +31,41 @@ function initializeSearch(map) { } } - function describeLocation(e) { - e.preventDefault(); - - var center = map.getCenter(), - zoom = map.getZoom(); + var marker = L.marker([0, 0], {icon: getUserIcon()}); - $("#sidebar_content").load($(this).attr("href"), { - lat: center.lat, - lon: center.lng, - zoom: zoom + var page = {}; + + page.pushstate = page.popstate = function(path) { + var params = querystring.parse(path.substring(path.indexOf('?') + 1)); + $("#query").val(params.query); + $("#sidebar_content").load(path, page.load); + }; + + page.load = function() { + $(".search_results_entry").each(function() { + var entry = $(this); + $.ajax({ + url: entry.data("href"), + method: 'GET', + data: { + zoom: map.getZoom(), + minlon: map.getBounds().getWest(), + minlat: map.getBounds().getSouth(), + maxlon: map.getBounds().getEast(), + maxlat: map.getBounds().getNorth() + }, + success: function(html) { + entry.html(html); + } + }); }); - } -} + }; + + page.unload = function() { + map.removeLayer(marker); + map.removeObject(); + $("#query").val(""); + }; + + return page; +}; diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js index 7b2e99546..654ec860b 100644 --- a/app/assets/javascripts/router.js +++ b/app/assets/javascripts/router.js @@ -11,7 +11,7 @@ OSM.Router = function(rts) { .replace(namedParam, function(match, optional){ return optional ? match : '([^\/]+)'; }) - .replace(splatParam, '(.*?)') + '(?:$|[?#])'); + .replace(splatParam, '(.*?)') + '(?:\\?.*)?$'); var route = {}; @@ -44,14 +44,14 @@ OSM.Router = function(rts) { } }; - var currentPath = window.location.pathname, + var currentPath = window.location.pathname + window.location.search, currentRoute = routes.recognize(currentPath); currentRoute.run('load', currentPath); if (window.history && window.history.pushState) { $(window).on('popstate', function() { - var path = window.location.pathname; + var path = window.location.pathname + window.location.search; if (path === currentPath) return; currentRoute.run('unload'); currentPath = path; diff --git a/app/controllers/geocoder_controller.rb b/app/controllers/geocoder_controller.rb index ac6a2013c..592ff020a 100644 --- a/app/controllers/geocoder_controller.rb +++ b/app/controllers/geocoder_controller.rb @@ -28,6 +28,8 @@ class GeocoderController < ApplicationController @sources.push "osm_nominatim" @sources.push "geonames" if defined?(GEONAMES_USERNAME) end + + render :layout => map_layout end def search_us_postcode diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb index 007516dd6..b030dc71a 100644 --- a/app/views/geocoder/search.html.erb +++ b/app/views/geocoder/search.html.erb @@ -1,10 +1,7 @@

<%= t('site.sidebar.search_results') %>

<% @sources.each do |source| %>

<%= raw(t "geocoder.search.title.#{source}") %>

-
"> +
"> <%= image_tag "searching.gif", :class => "search_searching" %>
- <% end %> diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 6e6caf95c..a8a15a30f 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -6,14 +6,12 @@ <% content_for :content do %>