X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/aaeca5b5346b01d7ef26a301492804d36049eff8..a47c0a4411825f48e447641094678b15df3b2f74:/app/assets/javascripts/index/search.js diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index dc4df821e..cfdcdf64f 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -1,77 +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); + } + }); - // Focus the search field for browsers that don't support - // the HTML5 'autofocus' attribute - if (!("autofocus" in document.createElement("input"))) { - $("#query").focus(); - } + $(".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)); + } + }); - $("#sidebar_content").on("click", ".search_results_entry a.set_position", clickSearchResult); + $(".describe_location").on("click", function (e) { + e.preventDefault(); + var center = map.getCenter().wrap(), + precision = OSM.zoomPrecision(map.getZoom()); + OSM.router.route("/search?whereami=1&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; + }); + }); - var marker = L.marker([0, 0], {icon: getUserIcon()}); + var markers = L.layerGroup().addTo(map); - function submitSearch(e) { + function clickSearchMore(e) { e.preventDefault(); + e.stopPropagation(); + + var div = $(this).parents(".search_more"); - var bounds = map.getBounds(); + $(this).hide(); + div.find(".loader").show(); - $("#sidebar_title").html(I18n.t('site.sidebar.search_results')); - $("#sidebar_content").load($(this).attr("action"), { - query: $("#query").val(), - zoom: map.getZoom(), - minlon: bounds.getWest(), - minlat: bounds.getSouth(), - maxlon: bounds.getEast(), - maxlat: bounds.getNorth() + $.get($(this).attr("href"), function (data) { + div.replaceWith(data); }); + } - openSidebar(); + function showSearchResult() { + var marker = $(this).data("marker"); - $("#sidebar").one("closed", function () { - map.removeLayer(marker); - map.removeObject(); - }); + if (!marker) { + var data = $(this).find("a.set_position").data(); + + marker = L.marker([data.lat, data.lon], { icon: OSM.getUserIcon() }); + + $(this).data("marker", marker); + } + + markers.addLayer(marker); + + $(this).closest("li").addClass("selected"); } - function clickSearchResult(e) { - e.preventDefault(); + function hideSearchResult() { + var marker = $(this).data("marker"); - var data = $(this).data(), - center = L.latLng(data.lat, data.lon); + 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); } + } - marker - .setLatLng(center) - .addTo(map); + function clickSearchResult(e) { + var data = $(this).data(); - if (data.type && data.id) { - map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } }); - } - } + panToSearchResult(data); + + // Let clicks to object browser links propagate. + if (data.type && data.id) return; - function describeLocation(e) { e.preventDefault(); + e.stopPropagation(); + } - var center = map.getCenter(), - zoom = map.getZoom(); + var page = {}; + + page.pushstate = page.popstate = function (path) { + var params = qs.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()); + } + } + } + }); + }); - $("#sidebar_title").html(I18n.t('site.sidebar.search_results')); - $("#sidebar_content").load($(this).attr("href"), { - lat: center.lat, - lon: center.lng, - zoom: zoom - }, openSidebar); - } -} + return map.getState(); + }; + + page.unload = function () { + markers.clearLayers(); + $(".search_form input[name=query]").val(""); + $(".describe_location").fadeIn(100); + }; + + return page; +};