]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/search.js
Replace querystring parser with qs yarn module
[rails.git] / app / assets / javascripts / index / search.js
1 //= require jquery-simulate/jquery.simulate
2 //= require qs/dist/qs
3
4 OSM.Search = function (map) {
5   $(".search_form input[name=query]").on("input", function (e) {
6     if ($(e.target).val() === "") {
7       $(".describe_location").fadeIn(100);
8     } else {
9       $(".describe_location").fadeOut(100);
10     }
11   });
12
13   $(".search_form a.button.switch_link").on("click", function (e) {
14     e.preventDefault();
15     var query = $(e.target).parent().parent().find("input[name=query]").val();
16     if (query) {
17       OSM.router.route("/directions?from=" + encodeURIComponent(query) + OSM.formatHash(map));
18     } else {
19       OSM.router.route("/directions" + OSM.formatHash(map));
20     }
21   });
22
23   $(".search_form").on("submit", function (e) {
24     e.preventDefault();
25     $("header").addClass("closed");
26     var query = $(this).find("input[name=query]").val();
27     if (query) {
28       OSM.router.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map));
29     } else {
30       OSM.router.route("/" + OSM.formatHash(map));
31     }
32   });
33
34   $(".describe_location").on("click", function (e) {
35     e.preventDefault();
36     var center = map.getCenter().wrap(),
37         precision = OSM.zoomPrecision(map.getZoom());
38     OSM.router.route("/search?whereami=1&query=" + encodeURIComponent(
39       center.lat.toFixed(precision) + "," + center.lng.toFixed(precision)
40     ));
41   });
42
43   $("#sidebar_content")
44     .on("click", ".search_more a", clickSearchMore)
45     .on("click", ".search_results_entry a.set_position", clickSearchResult)
46     .on("mouseover", "li.search_results_entry:has(a.set_position)", showSearchResult)
47     .on("mouseout", "li.search_results_entry:has(a.set_position)", hideSearchResult)
48     .on("mousedown", "li.search_results_entry:has(a.set_position)", function () {
49       var moved = false;
50       $(this).one("click", function (e) {
51         if (!moved && !$(e.target).is("a")) {
52           $(this).find("a.set_position").simulate("click", e);
53         }
54       }).one("mousemove", function () {
55         moved = true;
56       });
57     });
58
59   var markers = L.layerGroup().addTo(map);
60
61   function clickSearchMore(e) {
62     e.preventDefault();
63     e.stopPropagation();
64
65     var div = $(this).parents(".search_more");
66
67     $(this).hide();
68     div.find(".loader").show();
69
70     $.get($(this).attr("href"), function (data) {
71       div.replaceWith(data);
72     });
73   }
74
75   function showSearchResult() {
76     var marker = $(this).data("marker");
77
78     if (!marker) {
79       var data = $(this).find("a.set_position").data();
80
81       marker = L.marker([data.lat, data.lon], { icon: OSM.getUserIcon() });
82
83       $(this).data("marker", marker);
84     }
85
86     markers.addLayer(marker);
87
88     $(this).closest("li").addClass("selected");
89   }
90
91   function hideSearchResult() {
92     var marker = $(this).data("marker");
93
94     if (marker) {
95       markers.removeLayer(marker);
96     }
97
98     $(this).closest("li").removeClass("selected");
99   }
100
101   function panToSearchResult(data) {
102     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
103       map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]);
104     } else {
105       map.setView([data.lat, data.lon], data.zoom);
106     }
107   }
108
109   function clickSearchResult(e) {
110     var data = $(this).data();
111
112     panToSearchResult(data);
113
114     // Let clicks to object browser links propagate.
115     if (data.type && data.id) return;
116
117     e.preventDefault();
118     e.stopPropagation();
119   }
120
121   var page = {};
122
123   page.pushstate = page.popstate = function (path) {
124     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
125     $(".search_form input[name=query]").val(params.query);
126     $(".describe_location").hide();
127     OSM.loadSidebarContent(path, page.load);
128   };
129
130   page.load = function () {
131     $(".search_results_entry").each(function (index) {
132       var entry = $(this);
133       $.ajax({
134         url: entry.data("href"),
135         method: "GET",
136         data: {
137           zoom: map.getZoom(),
138           minlon: map.getBounds().getWest(),
139           minlat: map.getBounds().getSouth(),
140           maxlon: map.getBounds().getEast(),
141           maxlat: map.getBounds().getNorth()
142         },
143         success: function (html) {
144           entry.html(html);
145           // go to first result of first geocoder
146           if (index === 0) {
147             var firstResult = entry.find("*[data-lat][data-lon]:first").first();
148             if (firstResult.length) {
149               panToSearchResult(firstResult.data());
150             }
151           }
152         }
153       });
154     });
155
156     return map.getState();
157   };
158
159   page.unload = function () {
160     markers.clearLayers();
161     $(".search_form input[name=query]").val("");
162     $(".describe_location").fadeIn(100);
163   };
164
165   return page;
166 };