X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/d3bf4149e09053436d8d266952c49bb8f7ef6946..e58a5c69d3e7cdedfcf6a056fdb74aa505c5e285:/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 c546469db..52af38c54 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -1,75 +1,165 @@ -function initializeSearch(map) { - $("#search_form").submit(submitSearch); - $("#describe_location").click(describeLocation); +//= require jquery.simulate - if ($("#query").val()) { - $("#search_form").submit(); - } +OSM.Search = function(map) { + $(".search_form input[name=query]").on("input", function(e) { + if ($(e.target).val() === "") { + $(".describe_location").fadeIn(100); + } else { + $(".describe_location").fadeOut(100); + } + }); - $("#query") - .on("focus", function() { - $("#describe_location").fadeOut(100); - }) - .on("blur", function() { - $("#describe_location").fadeIn(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)); + } + }); - $("#sidebar_content").on("click", ".search_results_entry a.set_position", clickSearchResult); + $(".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)); + } + }); - var marker = L.marker([0, 0], {icon: getUserIcon()}); + $(".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("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 submitSearch(e) { + function clickSearchMore(e) { e.preventDefault(); + e.stopPropagation(); - var bounds = map.getBounds(); + var div = $(this).parents(".search_more"); - $("#sidebar_content").load($(this).attr("action"), { - query: $("#query").val(), - zoom: map.getZoom(), - minlon: bounds.getWest(), - minlat: bounds.getSouth(), - maxlon: bounds.getEast(), - maxlat: bounds.getNorth() - }); + $(this).hide(); + div.find(".loader").show(); - $("#sidebar").one("closed", function () { - map.removeLayer(marker); - map.removeObject(); + $.get($(this).attr("href"), function(data) { + div.replaceWith(data); }); } - function clickSearchResult(e) { - e.preventDefault(); + function showSearchResult() { + var marker = $(this).data("marker"); - var data = $(this).data(), - center = L.latLng(data.lat, data.lon); + if (!marker) { + var data = $(this).find("a.set_position").data(); - 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 = L.marker([data.lat, data.lon], {icon: OSM.getUserIcon()}); + + $(this).data("marker", marker); } - marker - .setLatLng(center) - .addTo(map); + markers.addLayer(marker); - if (data.type && data.id) { - map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } }); + $(this).closest("li").addClass("selected"); + } + + function hideSearchResult() { + var marker = $(this).data("marker"); + + if (marker) { + markers.removeLayer(marker); } + + $(this).closest("li").removeClass("selected"); } - function describeLocation(e) { - e.preventDefault(); + function panToSearchResult(data) { + if (data.minLon && data.minLat && data.maxLon && data.maxLat) { + map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]); + } else { + map.setView([data.lat, data.lon], data.zoom); + } + } + + function clickSearchResult(e) { + var data = $(this).data(); - var center = map.getCenter(), - zoom = map.getZoom(); + panToSearchResult(data); - $("#sidebar_content").load($(this).attr("href"), { - lat: center.lat, - lon: center.lng, - zoom: zoom - }); + // 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(index) { + 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); + // 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()); + } + } + } + }); + }); + + return map.getState(); + }; + + page.unload = function() { + markers.clearLayers(); + $(".search_form input[name=query]").val(""); + $(".describe_location").fadeIn(100); + }; + + return page; +};