X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/2b4f8e92c969a5508b73ae7af45811a118fda6b1..f1faffd4d1954f855f6450fc8e5c62ea5f457113:/app/assets/javascripts/index/search.js?ds=sidebyside diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index 6efba746e..52af38c54 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -1,15 +1,59 @@ +//= require jquery.simulate + OSM.Search = function(map) { - $(".search_form input[name=query]") - .on("focus", function() { - $(".describe_location").fadeOut(100); - }) - .on("blur", function() { + $(".search_form input[name=query]").on("input", function(e) { + if ($(e.target).val() === "") { $(".describe_location").fadeIn(100); - }); + } else { + $(".describe_location").fadeOut(100); + } + }); + + $(".search_form a.button.switch_link").on("click", function(e) { + e.preventDefault(); + var query = $(e.target).parent().parent().find("input[name=query]").val(); + if (query) { + OSM.router.route("/directions?from=" + encodeURIComponent(query) + OSM.formatHash(map)); + } else { + OSM.router.route("/directions" + OSM.formatHash(map)); + } + }); + + $(".search_form").on("submit", function(e) { + e.preventDefault(); + $("header").addClass("closed"); + var query = $(this).find("input[name=query]").val(); + if (query) { + OSM.router.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map)); + } else { + OSM.router.route("/" + OSM.formatHash(map)); + } + }); + + $(".describe_location").on("click", function(e) { + e.preventDefault(); + var center = map.getCenter().wrap(), + precision = OSM.zoomPrecision(map.getZoom()); + OSM.router.route("/search?query=" + encodeURIComponent( + center.lat.toFixed(precision) + "," + center.lng.toFixed(precision) + )); + }); $("#sidebar_content") .on("click", ".search_more a", clickSearchMore) - .on("click", ".search_results_entry a.set_position", clickSearchResult); + .on("click", ".search_results_entry a.set_position", clickSearchResult) + .on("mouseover", "p.search_results_entry:has(a.set_position)", showSearchResult) + .on("mouseout", "p.search_results_entry:has(a.set_position)", hideSearchResult) + .on("mousedown", "p.search_results_entry:has(a.set_position)", function () { + var moved = false; + $(this).one("click", function (e) { + if (!moved && !$(e.target).is('a')) { + $(this).find("a.set_position").simulate("click", e); + } + }).one("mousemove", function () { + moved = true; + }); + }); function clickSearchMore(e) { e.preventDefault(); @@ -25,35 +69,65 @@ OSM.Search = function(map) { }); } - function clickSearchResult(e) { - var data = $(this).data(), - center = L.latLng(data.lat, data.lon); + function showSearchResult() { + var marker = $(this).data("marker"); - if (data.type && data.id) return; // Browse link + if (!marker) { + var data = $(this).find("a.set_position").data(); - e.preventDefault(); - e.stopPropagation(); + marker = L.marker([data.lat, data.lon], {icon: OSM.getUserIcon()}); + + $(this).data("marker", marker); + } + + markers.addLayer(marker); + + $(this).closest("li").addClass("selected"); + } + + function hideSearchResult() { + var marker = $(this).data("marker"); + + if (marker) { + markers.removeLayer(marker); + } + $(this).closest("li").removeClass("selected"); + } + + function panToSearchResult(data) { if (data.minLon && data.minLat && data.maxLon && data.maxLat) { - map.fitBounds([[data.minLat, data.minLon], - [data.maxLat, data.maxLon]]); + map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]); } else { - map.setView(center, data.zoom); + map.setView([data.lat, data.lon], data.zoom); } } - var marker = L.marker([0, 0], {icon: getUserIcon()}); + function clickSearchResult(e) { + var data = $(this).data(); + + panToSearchResult(data); + + // Let clicks to object browser links propagate. + if (data.type && data.id) return; + + e.preventDefault(); + e.stopPropagation(); + } + + var markers = L.layerGroup().addTo(map); var page = {}; page.pushstate = page.popstate = function(path) { var params = querystring.parse(path.substring(path.indexOf('?') + 1)); $(".search_form input[name=query]").val(params.query); + $(".describe_location").hide(); OSM.loadSidebarContent(path, page.load); }; page.load = function() { - $(".search_results_entry").each(function() { + $(".search_results_entry").each(function(index) { var entry = $(this); $.ajax({ url: entry.data("href"), @@ -67,6 +141,13 @@ OSM.Search = function(map) { }, success: function(html) { entry.html(html); + // go to first result of first geocoder + if (index === 0) { + var firstResult = entry.find('*[data-lat][data-lon]:first').first(); + if (firstResult.length) { + panToSearchResult(firstResult.data()); + } + } } }); }); @@ -75,9 +156,9 @@ OSM.Search = function(map) { }; page.unload = function() { - map.removeLayer(marker); - map.removeObject(); + markers.clearLayers(); $(".search_form input[name=query]").val(""); + $(".describe_location").fadeIn(100); }; return page;