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.addTo(noteLayer).bindPopup(
  76         createPopupContent(marker, feature.properties),
  77         popupOptions()
  78       );
  79     }
  80     return marker;
  81   }
  82
  83   var noteLoader;
  84
  85   function loadNotes() {
  86     var bounds = map.getBounds();
  87     var size = bounds.getSize();
  88
  89     if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
  90       var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString();
  91
  92       if (noteLoader) noteLoader.abort();
  93
  94       noteLoader = $.ajax({
  95         url: url,
  96         success: success
  97       });
  98     }
  99
 100     function success(json) {
 101       var oldNotes = notes;
 102       notes = {};
 103       json.features.forEach(updateMarkers);
 104
 105       function updateMarkers(feature) {
 106         var marker = oldNotes[feature.properties.id];
 107         delete oldNotes[feature.properties.id];
 108         notes[feature.properties.id] = updateMarker(marker, feature);
 109       }
 110
 111       for (id in oldNotes) {
 112         noteLayer.removeLayer(oldNotes[id]);
 113       }
 114
 115       noteLoader = null;
 116     }
 117   };
 118
 119   function popupOptions() {
 120     var mapSize = map.getSize();
 121
 122     return {
 123       minWidth: 320,
 124       maxWidth: mapSize.y * 1 / 3,
 125       maxHeight: mapSize.y * 2 / 3,
 126       offset: new L.Point(0, -40),
 127       autoPanPadding: new L.Point(60, 40)
 128     };
 129   }
 130
 131   function createPopupContent(marker, properties, comment) {
 132     var content = $(JST["templates/notes/show"]({ note: properties }));
 133
 134     content.find("textarea").on("input", function (e) {
 135       var form = e.target.form;
 136
 137       if ($(e.target).val() == "") {
 138         $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
 139         $(form.comment).prop("disabled", true);
 140       } else {
 141         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
 142         $(form.comment).prop("disabled", false);
 143       }
 144     });
 145
 146     content.find("input[type=submit]").on("click", function (e) {
 147       e.preventDefault();
 148       var data = $(e.target).data();
 149       updateNote(marker, e.target.form, data.method, data.url);
 150     });
 151
 152     if (comment) {
 153       content.find("textarea").val(comment).trigger("input");
 154     }
 155
 156     return content[0];
 157   }
 158
 159   var addNoteButton = $(".control-note .control-button");
 160
 161   function createNote(marker, form, url) {
 162     var location = marker.getLatLng();
 163
 164     marker.options.draggable = false;
 165     marker.dragging.disable();
 166
 167     $(form).find("input[type=submit]").prop("disabled", true);
 168
 169     $.ajax({
 170       url: url,
 171       type: "POST",
 172       oauth: true,
 173       data: {
 174         lat: location.lat,
 175         lon: location.lng,
 176         text: $(form.text).val()
 177       },
 178       success: noteCreated
 179     });
 180
 181     function noteCreated(feature) {
 182       $(marker._popup._content).find("textarea").val("");
 183
 184       notes[feature.properties.id] = updateMarker(marker, feature);
 185       newNote = null;
 186
 187       addNoteButton.removeClass("active");
 188     }
 189   }
 190
 191   function updateNote(marker, form, method, url) {
 192     $(form).find("input[type=submit]").prop("disabled", true);
 193
 194     $.ajax({
 195       url: url,
 196       type: method,
 197       oauth: true,
 198       data: {
 199         text: $(form.text).val()
 200       },
 201       success: function (feature) {
 202         if (feature.properties.status == "hidden") {
 203           noteLayer.removeLayer(marker);
 204
 205           delete notes[feature.properties.id];
 206         } else {
 207           var popupContent = createPopupContent(marker, feature.properties);
 208
 209           marker.setIcon(noteIcons[feature.properties.status]);
 210           marker.setPopupContent(popupContent);
 211         }
 212       }
 213     });
 214   }
 215
 216   addNoteButton.on("click", function (e) {
 217     e.preventDefault();
 218     e.stopPropagation();
 219
 220     if (addNoteButton.hasClass("disabled")) return;
 221     if (addNoteButton.hasClass("active")) return;
 222
 223     addNoteButton.addClass("active");
 224
 225     map.addLayer(noteLayer);
 226
 227     var mapSize = map.getSize();
 228     var markerPosition;
 229
 230     if (mapSize.y > 800) {
 231       markerPosition = [mapSize.x / 2, mapSize.y / 2];
 232     } else if (mapSize.y > 400) {
 233       markerPosition = [mapSize.x / 2, 400];
 234     } else {
 235       markerPosition = [mapSize.x / 2, mapSize.y];
 236     }
 237
 238     newNote = L.marker(map.containerPointToLatLng(markerPosition), {
 239       icon: noteIcons["new"],
 240       opacity: 0.9,
 241       draggable: true
 242     });
 243
 244     var popupContent = $(JST["templates/notes/new"]());
 245
 246     popupContent.find("textarea").on("input", disableWhenBlank);
 247
 248     function disableWhenBlank(e) {
 249       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
 250     }
 251
 252     popupContent.find("input[type=submit]").on("click", function (e) {
 253       e.preventDefault();
 254       createNote(newNote, e.target.form, '/api/0.6/notes.json');
 255     });
 256
 257     newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
 258
 259     newNote.on("remove", function (e) {
 260       addNoteButton.removeClass("active");
 261     }).on("dragstart", function (e) {
 262       $(newNote).stopTime("removenote");
 263     }).on("dragend", function (e) {
 264       e.target.openPopup();
 265     });
 266   });
 267 }