]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/notes.js.erb
Persist the state of the notes layer
[rails.git] / app / assets / javascripts / index / notes.js.erb
1 //= require templates/notes/show
2 //= require templates/notes/new
3
4 $(document).ready(function () {
5   var params = OSM.mapParams();
6
7   var noteIcons = {
8     "new": L.icon({
9       iconUrl: "<%= image_path 'new_note_marker.png' %>",
10       iconSize: [22, 22],
11       iconAnchor: [11, 11]
12     }),
13     "open": L.icon({
14       iconUrl: "<%= image_path 'open_note_marker.png' %>",
15       iconSize: [22, 22],
16       iconAnchor: [11, 11]
17     }),
18     "closed": L.icon({
19       iconUrl: "<%= image_path 'closed_note_marker.png' %>",
20       iconSize: [22, 22],
21       iconAnchor: [11, 11]
22     })
23   };
24
25   var noteLayer = new L.LayerGroup();
26   var notes = {};
27   var newNote;
28
29   layers.push({
30     layer: noteLayer,
31     layerCode: "N"
32   });
33
34   map.on("layeradd", function (e) {
35     if (e.layer == noteLayer) {
36       loadNotes();
37       map.on("moveend", loadNotes);
38     }
39   });
40
41   map.on("layerremove", function (e) {
42     if (e.layer == noteLayer) {
43       map.off("moveend", loadNotes);
44       noteLayer.clearLayers();
45       notes = {};
46     }
47   });
48
49   map.on("popupopen", function (e) {
50     $(e.popup._container).find(".comment").focus();
51   });
52
53   map.on("popupclose", function (e) {
54     if (newNote && e.popup == newNote._popup) {
55       $(newNote).oneTime(10, "removenote", function () {
56         map.removeLayer(newNote);
57         newNote = null;
58       });
59     }
60   });
61
62   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
63     map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name"));
64
65     if (params.layers) setMapLayers(params.layers);
66     if (params.notes) map.addLayer(noteLayer);
67
68     if (params.note) {
69       $.ajax({
70         url: "/api/" + OSM.API_VERSION + "/notes/" + params.note + ".json",
71         success: function (feature) {
72           var marker = updateMarker(notes[feature.properties.id], feature);
73
74           notes[feature.properties.id] = marker;
75
76           map.addLayer(noteLayer);
77           marker.openPopup();
78         }
79       });
80     }
81   }
82
83   function updateMarker(marker, feature) {
84     if (marker)
85     {
86       marker.setIcon(noteIcons[feature.properties.status]);
87       marker._popup.setContent(createPopupContent(marker, feature.properties));
88     }
89     else
90     {
91       marker = L.marker(feature.geometry.coordinates.reverse(), {
92         icon: noteIcons[feature.properties.status],
93         opacity: 0.7
94       });
95
96       marker.addTo(noteLayer).bindPopup(
97         createPopupContent(marker, feature.properties),
98         popupOptions()
99       );
100     }
101
102     return marker;
103   }
104
105   var noteLoader;
106
107   function loadNotes() {
108     var bounds = map.getBounds();
109     var size = bounds.getSize();
110
111     if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
112       var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX();
113
114       if (noteLoader) noteLoader.abort();
115
116       noteLoader = $.ajax({
117         url: url,
118         success: function (json) {
119           var oldNotes = notes;
120
121           notes = {};
122
123           json.features.forEach(function (feature) {
124             var marker = oldNotes[feature.properties.id];
125
126             delete oldNotes[feature.properties.id];
127
128             notes[feature.properties.id] = updateMarker(marker, feature);
129           });
130
131           for (id in oldNotes) {
132             noteLayer.removeLayer(oldNotes[id]);
133           }
134
135           noteLoader = null;
136         }
137       });
138     }
139   };
140
141   function popupOptions() {
142     var mapSize = map.getSize();
143
144     return {
145       minWidth: 320,
146       maxWidth: mapSize.y * 1 / 3,
147       maxHeight: mapSize.y * 2 / 3,
148       offset: new L.Point(0, -3),
149       autoPanPadding: new L.Point(60, 40)
150     };
151   }
152
153   function createPopupContent(marker, properties) {
154     var content = $(JST["templates/notes/show"]({ note: properties }));
155
156     content.find("textarea").on("input", function (e) {
157       var form = e.target.form;
158
159       if ($(e.target).val() == "") {
160         $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
161         $(form.comment).prop("disabled", true);
162       } else {
163         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
164         $(form.comment).prop("disabled", false);
165       }
166     });
167
168     content.find("input[type=submit]").on("click", function (e) {
169       e.preventDefault();
170       var data = $(e.target).data();
171       updateNote(marker, e.target.form, data.method, data.url);
172     });
173
174     return content[0];
175   }
176
177   function createNote(marker, form, url) {
178     var location = marker.getLatLng();
179
180     marker.options.draggable = false;
181     marker.dragging.disable();
182
183     $(form).find("input[type=submit]").prop("disabled", true);
184
185     $.ajax({
186       url: url,
187       type: "POST",
188       oauth: true,
189       data: {
190         lat: location.lat,
191         lon: location.lng,
192         text: $(form.text).val()
193       },
194       success: function (feature) {
195         notes[feature.properties.id] = updateMarker(marker, feature);
196         newNote = null;
197
198         $("#createnoteanchor").removeClass("disabled").addClass("geolink");
199       }
200     });
201   }
202
203   function updateNote(marker, form, method, url) {
204     $(form).find("input[type=submit]").prop("disabled", true);
205
206     $.ajax({
207       url: url,
208       type: method,
209       oauth: true,
210       data: {
211         text: $(form.text).val()
212       },
213       success: function (feature) {
214         if (feature.properties.status == "hidden") {
215           noteLayer.removeLayer(marker);
216
217           delete notes[feature.properties.id];
218         } else {
219           var popupContent = createPopupContent(marker, feature.properties);
220
221           marker.setIcon(noteIcons[feature.properties.status]);
222           marker._popup.setContent(popupContent);
223         }
224       }
225     });
226   }
227
228   $(".leaflet-control-attribution").on("click", "#createnoteanchor", function (e) {
229     e.preventDefault();
230
231     if ($(e.target).hasClass("disabled")) return;
232
233     $(e.target).removeClass("geolink").addClass("disabled");
234
235     map.addLayer(noteLayer);
236
237     var mapSize = map.getSize();
238     var markerPosition;
239
240     if (mapSize.y > 800)
241     {
242       markerPosition = [mapSize.x / 2, mapSize.y / 2];
243     }
244     else if (mapSize.y > 400)
245     {
246       markerPosition = [mapSize.x / 2, 400];
247     }
248     else
249     {
250       markerPosition = [mapSize.x / 2, mapSize.y];
251     }
252
253     newNote = L.marker(map.containerPointToLatLng(markerPosition), {
254       icon: noteIcons["new"],
255       opacity: 0.7,
256       draggable: true
257     });
258
259     var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") }));
260
261     popupContent.find("textarea").on("input", function (e) {
262       var form = e.target.form;
263
264       if ($(e.target).val() == "") {
265         $(form.add).prop("disabled", true);
266       } else {
267         $(form.add).prop("disabled", false);
268       }
269     });
270
271     popupContent.find("input[type=submit]").on("click", function (e) {
272       e.preventDefault();
273       createNote(newNote, e.target.form, $(e.target).data("url"));
274     });
275
276     newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
277
278     newNote.on("remove", function (e) {
279       $("#createnoteanchor").removeClass("disabled").addClass("geolink");
280     });
281
282     newNote.on("dragstart", function (e) {
283       $(newNote).stopTime("removenote");
284     });
285
286     newNote.on("dragend", function (e) {
287       e.target.openPopup();
288     });
289   });
290 });