X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/2061b5c257f9f22253f55946d43ee97d15c2c67c..154af087869566bbe3c5871d642a40ebd596cb1f:/app/assets/javascripts/index/search.js diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index 2f3882e3a..b33d904a9 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -1,5 +1,3 @@ -//= require qs/dist/qs - OSM.Search = function (map) { $(".search_form input[name=query]").on("input", function (e) { if ($(e.target).val() === "") { @@ -11,33 +9,27 @@ OSM.Search = function (map) { $(".search_form a.btn.switch_link").on("click", function (e) { e.preventDefault(); - var query = $(this).closest("form").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)); - } + const query = $(this).closest("form").find("input[name=query]").val(); + let search = ""; + if (query) search = "?" + new URLSearchParams({ to: query }); + OSM.router.route("/directions" + search + 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)); - } + const query = $(this).find("input[name=query]").val(); + let search = "/"; + if (query) search = "/search?" + new URLSearchParams({ query }); + OSM.router.route(search + OSM.formatHash(map)); }); $(".describe_location").on("click", function (e) { e.preventDefault(); - var center = map.getCenter().wrap(), - precision = OSM.zoomPrecision(map.getZoom()), - lat = center.lat.toFixed(precision), - lng = center.lng.toFixed(precision); + $("header").addClass("closed"); + const [lat, lon] = OSM.cropLocation(map.getCenter(), map.getZoom()); - OSM.router.route("/search?lat=" + encodeURIComponent(lat) + "&lon=" + encodeURIComponent(lng)); + OSM.router.route("/search?" + new URLSearchParams({ lat, lon })); }); $("#sidebar_content") @@ -46,37 +38,35 @@ OSM.Search = function (map) { .on("mouseover", "li.search_results_entry:has(a.set_position)", showSearchResult) .on("mouseout", "li.search_results_entry:has(a.set_position)", hideSearchResult); - var markers = L.layerGroup().addTo(map); + const markers = L.layerGroup().addTo(map); function clickSearchMore(e) { e.preventDefault(); e.stopPropagation(); - var div = $(this).parents(".search_more"), - csrf_param = $("meta[name=csrf-param]").attr("content"), - csrf_token = $("meta[name=csrf-token]").attr("content"), - params = {}; + const div = $(this).parents(".search_more"), + csrf_param = $("meta[name=csrf-param]").attr("content"), + csrf_token = $("meta[name=csrf-token]").attr("content"), + params = new URLSearchParams(); $(this).hide(); div.find(".loader").show(); - params[csrf_param] = csrf_token; + params.set(csrf_param, csrf_token); - $.ajax({ - url: $(this).attr("href"), + fetch($(this).attr("href"), { method: "POST", - data: params, - success: function (data) { - div.replaceWith(data); - } - }); + body: params + }) + .then(response => response.text()) + .then(data => div.replaceWith(data)); } function showSearchResult() { - var marker = $(this).data("marker"); + let marker = $(this).data("marker"); if (!marker) { - var data = $(this).find("a.set_position").data(); + const data = $(this).find("a.set_position").data(); marker = L.marker([data.lat, data.lon], { icon: OSM.getUserIcon() }); @@ -87,7 +77,7 @@ OSM.Search = function (map) { } function hideSearchResult() { - var marker = $(this).data("marker"); + const marker = $(this).data("marker"); if (marker) { markers.removeLayer(marker); @@ -103,7 +93,7 @@ OSM.Search = function (map) { } function clickSearchResult(e) { - var data = $(this).data(); + const data = $(this).data(); panToSearchResult(data); @@ -114,43 +104,48 @@ OSM.Search = function (map) { e.stopPropagation(); } - var page = {}; + const 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(); + const params = new URLSearchParams(path.substring(path.indexOf("?"))); + if (params.has("query")) { + $(".search_form input[name=query]").val(params.get("query")); + $(".describe_location").hide(); + } else if (params.has("lat") && params.has("lon")) { + $(".search_form input[name=query]").val(params.get("lat") + ", " + params.get("lon")); + $(".describe_location").hide(); + } OSM.loadSidebarContent(path, page.load); }; page.load = function () { $(".search_results_entry").each(function (index) { - var entry = $(this), - csrf_param = $("meta[name=csrf-param]").attr("content"), - csrf_token = $("meta[name=csrf-token]").attr("content"), - params = { - zoom: map.getZoom(), - minlon: map.getBounds().getWest(), - minlat: map.getBounds().getSouth(), - maxlon: map.getBounds().getEast(), - maxlat: map.getBounds().getNorth() - }; - params[csrf_param] = csrf_token; - $.ajax({ - url: entry.data("href"), + const entry = $(this), + csrf_param = $("meta[name=csrf-param]").attr("content"), + csrf_token = $("meta[name=csrf-token]").attr("content"), + params = new URLSearchParams({ + zoom: map.getZoom(), + minlon: map.getBounds().getWest(), + minlat: map.getBounds().getSouth(), + maxlon: map.getBounds().getEast(), + maxlat: map.getBounds().getNorth() + }); + params.set(csrf_param, csrf_token); + fetch(entry.data("href"), { method: "POST", - data: params, - success: function (html) { + body: params + }) + .then(response => response.text()) + .then(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(); + const firstResult = entry.find("*[data-lat][data-lon]:first").first(); if (firstResult.length) { panToSearchResult(firstResult.data()); } } - } - }); + }); }); return map.getState();