]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/browse.js
Avoid multiple click bindings on data layer
[rails.git] / app / assets / javascripts / index / browse.js
1 //= require templates/browse/feature
2 //= require templates/browse/feature_list
3 //= require templates/browse/feature_history
4
5 $(document).ready(function () {
6   var browseBounds;
7   var layersById;
8   var selectedLayer;
9   var browseObjectList;
10   var areasHidden = false;
11   var locationFilter;
12
13   var dataLayer = new L.OSM.DataLayer(null, {
14     styles: {
15       way: {
16         weight: 3,
17         color: "#000000",
18         opacity: 0.4
19       },
20       area: {
21         weight: 3,
22         color: "#ff0000"
23       },
24       node: {
25         color: "#00ff00"
26       }
27     }
28   });
29
30   dataLayer.isWayArea = function () {
31     return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
32   };
33
34   dataLayer.on("click", function (e) {
35     onSelect(e.layer);
36   });
37
38   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
39     map.layersControl.addOverlay(dataLayer, I18n.t("browse.start_rjs.data_layer_name"));
40   }
41
42   map.on('layeradd', function (e) {
43     if (e.layer === dataLayer) {
44       $.ajax({ url: "/browse/start", success: function (sidebarHtml) {
45         startBrowse(sidebarHtml);
46       }});
47     }
48   });
49
50   map.on('layerremove', function (e) {
51     if (e.layer === dataLayer) {
52       closeSidebar();
53     }
54   });
55
56   function startBrowse(sidebarHtml) {
57     locationFilter = new L.LocationFilter({
58       enableButton: false,
59       adjustButton: false
60     }).addTo(map);
61
62     locationFilter.on("change", getData);
63
64     $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
65     $("#sidebar_content").html(sidebarHtml);
66
67     openSidebar();
68
69     map.on("moveend", updateData);
70     updateData();
71
72     $("#browse_filter_toggle").toggle(enableFilter, disableFilter);
73
74     $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
75     $("#browse_hide_areas_box").toggle(hideAreas, showAreas);
76
77     $("#sidebar").one("closed", function () {
78       map.removeLayer(dataLayer);
79       map.removeLayer(locationFilter);
80       map.off("moveend", updateData);
81       locationFilter.off("change", getData);
82     });
83   }
84
85   function updateData() {
86     if (!locationFilter.isEnabled()) {
87       if (map.getZoom() >= 15) {
88         var bounds = map.getBounds();
89         if (!browseBounds || !browseBounds.contains(bounds)) {
90           browseBounds = bounds;
91           getData();
92         }
93       } else {
94         setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
95       }
96     }
97   }
98
99   function enableFilter() {
100     $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data'));
101     locationFilter.setBounds(map.getBounds().pad(-0.2));
102     locationFilter.enable();
103     getData();
104   }
105
106   function disableFilter() {
107     $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select'));
108     locationFilter.disable();
109     getData();
110   }
111
112   function hideAreas() {
113     $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
114     areasHidden = true;
115     getData();
116   }
117
118   function showAreas() {
119     $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
120     areasHidden = false;
121     getData();
122   }
123
124   function displayFeatureWarning(count, limit, callback) {
125     clearStatus();
126
127     var div = document.createElement("div");
128
129     var p = document.createElement("p");
130     p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
131     div.appendChild(p);
132
133     var input = document.createElement("input");
134     input.type = "submit";
135     input.value = I18n.t('browse.start_rjs.load_data');
136     input.onclick = callback;
137     div.appendChild(input);
138
139     $("#browse_content").html("");
140     $("#browse_content").append(div);
141   }
142
143   function getData() {
144     var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds();
145     var size = bounds.getSize();
146
147     if (size > OSM.MAX_REQUEST_AREA) {
148       setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
149       return;
150     }
151
152     setStatus(I18n.t('browse.start_rjs.loading'));
153
154     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX();
155
156     /*
157      * Modern browsers are quite happy showing far more than 100 features in
158      * the data browser, so increase the limit to 2000 by default, but keep
159      * it restricted to 500 for IE8 and 100 for older IEs.
160      */
161     var maxFeatures = 2000;
162
163     /*@cc_on
164       if (navigator.appVersion < 8) {
165         maxFeatures = 100;
166       } else if (navigator.appVersion < 9) {
167         maxFeatures = 500;
168       }
169     @*/
170
171     $.ajax({
172       url: url,
173       success: function (xml) {
174         clearStatus();
175
176         $("#browse_content").empty();
177         dataLayer.clearLayers();
178         selectedLayer = null;
179
180         var features = dataLayer.buildFeatures(xml);
181
182         function addFeatures() {
183           dataLayer.addData(features);
184
185           layersById = {};
186
187           dataLayer.eachLayer(function (layer) {
188             var feature = layer.feature;
189             layersById[feature.id] = layer;
190             $.extend(feature, {
191               typeName: featureTypeName(feature),
192               url: "/browse/" + feature.type + "/" + feature.id,
193               name: featureName(feature)
194             });
195           });
196
197           browseObjectList = $(JST["templates/browse/feature_list"]({
198             features: features,
199             url: url
200           }))[0];
201
202           loadObjectList();
203         }
204
205         if (features.length < maxFeatures) {
206           addFeatures();
207         } else {
208           displayFeatureWarning(features.length, maxFeatures, addFeatures);
209         }
210       }
211     });
212   }
213
214   function viewFeatureLink() {
215     var layer = layersById[$(this).data("feature-id")];
216
217     onSelect(layer);
218
219     if (locationFilter.isEnabled()) {
220       map.panTo(layer.getBounds().getCenter());
221     }
222
223     return false;
224   }
225
226   function loadObjectList() {
227     $("#browse_content").html(browseObjectList);
228     $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink);
229
230     return false;
231   }
232
233   function onSelect(layer) {
234     // Unselect previously selected feature
235     if (selectedLayer) {
236       selectedLayer.setStyle(selectedLayer.originalStyle);
237     }
238
239     // Redraw in selected style
240     layer.originalStyle = layer.options;
241     layer.setStyle({color: '#0000ff', weight: 8});
242
243     // If the current object is the list, don't innerHTML="", since that could clear it.
244     if ($("#browse_content").firstChild == browseObjectList) {
245       $("#browse_content").removeChild(browseObjectList);
246     } else {
247       $("#browse_content").empty();
248     }
249
250     var feature = layer.feature;
251
252     $("#browse_content").html(JST["templates/browse/feature"]({
253       name: featureNameSelect(feature),
254       url: "/browse/" + feature.type + "/" + feature.id,
255       attributes: feature.tags
256     }));
257
258     $("#browse_content").find("a.browse_show_list").click(loadObjectList);
259     $("#browse_content").find("a.browse_show_history").click(loadHistory);
260
261     // Stash the currently drawn feature
262     selectedLayer = layer;
263   }
264
265   function loadHistory() {
266     $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait'));
267
268     var feature = selectedLayer.feature;
269
270     $.ajax({
271       url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history",
272       success: function (xml) {
273         if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) {
274           return;
275         }
276
277         $(this).remove();
278
279         var history = [];
280         var nodes = xml.getElementsByTagName(feature.type);
281         for (var i = nodes.length - 1; i >= 0; i--) {
282           history.push({
283             user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'),
284             timestamp: nodes[i].getAttribute("timestamp")
285           });
286         }
287
288         $("#browse_content").append(JST["templates/browse/feature_history"]({
289           name: featureNameHistory(feature),
290           url: "/browse/" + feature.type + "/" + feature.id,
291           history: history
292         }));
293       }.bind(this)
294     });
295
296     return false;
297   }
298
299   function featureTypeName(feature) {
300     return I18n.t('browse.start_rjs.object_list.type.' + feature.type);
301   }
302
303   function featureName(feature) {
304     return feature.tags['name:' + $('html').attr('lang')] ||
305       feature.tags.name ||
306       feature.id;
307   }
308
309   function featureNameSelect(feature) {
310     return feature.tags['name:' + $('html').attr('lang')] ||
311       feature.tags.name ||
312       I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.id });
313   }
314
315   function featureNameHistory(feature) {
316     return feature.tags['name:' + $('html').attr('lang')] ||
317       feature.tags.name ||
318       I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id });
319   }
320
321   function setStatus(status) {
322     $("#browse_status").html(status);
323     $("#browse_status").show();
324   }
325
326   function clearStatus() {
327     $("#browse_status").html("");
328     $("#browse_status").hide();
329   }
330 });