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