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