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 });