]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/notes.js.erb
Display formatted notes in the web UI
[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
28   map.on("layeradd", function (e) {
29     if (e.layer == noteLayer) {
30       loadNotes();
31       map.on("moveend", loadNotes);
32     }
33   });
34
35   map.on("layerremove", function (e) {
36     if (e.layer == noteLayer) {
37       map.off("moveend", loadNotes);
38       noteLayer.clearLayers();
39     }
40   });
41
42   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
43     map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name"));
44
45     if (params.notes) map.addLayer(noteLayer);
46   }
47
48   function updateMarker(marker, feature) {
49     var icon = noteIcons[feature.properties.status];
50     var popupContent = createPopupContent(marker, feature.properties);
51
52     if (marker)
53     {
54       marker.setIcon(noteIcons[feature.properties.status]);
55       marker._popup.setContent(popupContent);
56     }
57     else
58     {
59       marker = L.marker(feature.geometry.coordinates.reverse(), {
60         icon: icon,
61         opacity: 0.7
62       });
63
64       marker.addTo(noteLayer).bindPopup(popupContent, popupOptions());
65     }
66
67     return marker;
68   }
69
70   var noteLoader;
71
72   function loadNotes() {
73     var bounds = map.getBounds();
74     var size = bounds.getSize();
75
76     if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
77       var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX();
78
79       if (noteLoader) noteLoader.abort();
80
81       noteLoader = $.ajax({
82         url: url,
83         success: function (json) {
84           var oldNotes = notes;
85
86           notes = {};
87
88           json.features.forEach(function (feature) {
89             var marker = oldNotes[feature.properties.id];
90
91             delete oldNotes[feature.properties.id];
92
93             notes[feature.properties.id] = updateMarker(marker, feature);
94           });
95
96           for (id in oldNotes) {
97             noteLayer.removeLayer(oldNotes[id]);
98           }
99
100           noteLoader = null;
101         }
102       });
103     }
104   };
105
106   function popupOptions() {
107     var mapSize = map.getSize();
108
109     return { maxHeight: mapSize.y * 2 / 3, autoPanPadding: new L.Point(60, 40) };
110   }
111
112   function createPopupContent(marker, properties) {
113     var content = $(JST["templates/notes/show"]({ note: properties }));
114
115     content.find("textarea").on("input", function (e) {
116       var form = e.target.form;
117
118       if ($(e.target).val() == "") {
119         $(form.close).val(I18n.t("javascripts.notes.show.close"));
120         $(form.comment).prop("disabled", true);
121       } else {
122         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close"));
123         $(form.comment).prop("disabled", false);
124       }
125     });
126
127     content.find("input[type=submit]").on("click", function (e) {
128       e.preventDefault();
129       updateNote(marker, e.target.form, $(e.target).data("url"));
130     });
131
132     return content[0];
133   }
134
135   function createNote(marker, form, url) {
136     var location = marker.getLatLng();
137
138     $(form).find("input[type=submit]").prop("disabled", true);
139
140     $.ajax({
141       url: url,
142       type: "POST",
143       data: {
144         lat: location.lat,
145         lon: location.lng,
146         text: $(form.text).val()
147       },
148       success: function (feature) {
149         notes[feature.properties.id] = updateMarker(marker, feature);
150
151         $(".leaflet-popup-close-button").off("click.close");
152       }
153     });
154   }
155
156   function updateNote(marker, form, url) {
157     $(form).find("input[type=submit]").prop("disabled", true);
158
159     $.ajax({
160       url: url,
161       type: "POST",
162       data: {
163         text: $(form.text).val()
164       },
165       success: function (feature) {
166         var popupContent = createPopupContent(marker, feature.properties);
167
168         marker.setIcon(noteIcons[feature.properties.status]);
169         marker._popup.setContent(popupContent);
170       }
171     });
172   }
173
174   $("#createnoteanchor").click(function (e) {
175     e.preventDefault();
176
177     map.addLayer(noteLayer);
178
179     var marker = L.marker(map.getCenter(), {
180       icon: noteIcons["new"],
181       opacity: 0.7,
182       draggable: true
183     });
184
185     var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") }));
186
187     popupContent.find("input[type=submit]").on("click", function (e) {
188       e.preventDefault();
189       createNote(marker, e.target.form, $(e.target).data("url"));
190     });
191
192     marker.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
193
194     $(".leaflet-popup-close-button").on("click.close", function (e) {
195       map.removeLayer(marker);
196     });
197
198     marker.on("dragend", function (e) {
199       e.target.openPopup();
200     });
201   });
202 });