app/assets/javascripts/index/notes.js.erb

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