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

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