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

   1 //= require templates/notes/show
   2 //= require templates/notes/new
   3
   4 function initializeNotes(map, params) {
   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   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
  52     if (params.layers.indexOf(noteLayer.options.code) >= 0) {
  53       map.addLayer(noteLayer);
  54     }
  55
  56     if (params.note) {
  57       $.ajax({
  58         url: "/api/" + OSM.API_VERSION + "/notes/" + params.note + ".json",
  59         success: function (feature) {
  60           var marker = updateMarker(notes[feature.properties.id], feature);
  61           notes[feature.properties.id] = marker;
  62           map.addLayer(noteLayer);
  63           marker.openPopup();
  64         }
  65       });
  66     }
  67   }
  68
  69   function updateMarker(marker, feature) {
  70     if (marker) {
  71       marker.setIcon(noteIcons[feature.properties.status]);
  72       marker.setPopupContent(createPopupContent(
  73         marker, feature.properties,
  74         $(marker._popup._content).find("textarea").val()
  75       ));
  76     } else {
  77       marker = L.marker(feature.geometry.coordinates.reverse(), {
  78         icon: noteIcons[feature.properties.status],
  79         opacity: 0.9
  80       });
  81       marker.addTo(noteLayer).bindPopup(
  82         createPopupContent(marker, feature.properties),
  83         popupOptions()
  84       );
  85     }
  86     return marker;
  87   }
  88
  89   var noteLoader;
  90
  91   function loadNotes() {
  92     var bounds = map.getBounds();
  93     var size = bounds.getSize();
  94
  95     if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
  96       var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString();
  97
  98       if (noteLoader) noteLoader.abort();
  99
 100       noteLoader = $.ajax({
 101         url: url,
 102         success: success
 103       });
 104     }
 105
 106     function success(json) {
 107       var oldNotes = notes;
 108       notes = {};
 109       json.features.forEach(updateMarkers);
 110
 111       function updateMarkers(feature) {
 112         var marker = oldNotes[feature.properties.id];
 113         delete oldNotes[feature.properties.id];
 114         notes[feature.properties.id] = updateMarker(marker, feature);
 115       }
 116
 117       for (id in oldNotes) {
 118         noteLayer.removeLayer(oldNotes[id]);
 119       }
 120
 121       noteLoader = null;
 122     }
 123   };
 124
 125   function popupOptions() {
 126     var mapSize = map.getSize();
 127
 128     return {
 129       minWidth: 320,
 130       maxWidth: mapSize.y * 1 / 3,
 131       maxHeight: mapSize.y * 2 / 3,
 132       offset: new L.Point(0, -40),
 133       autoPanPadding: new L.Point(60, 40)
 134     };
 135   }
 136
 137   function createPopupContent(marker, properties, comment) {
 138     var content = $(JST["templates/notes/show"]({ note: properties }));
 139
 140     content.find("textarea").on("input", function (e) {
 141       var form = e.target.form;
 142
 143       if ($(e.target).val() == "") {
 144         $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
 145         $(form.comment).prop("disabled", true);
 146       } else {
 147         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
 148         $(form.comment).prop("disabled", false);
 149       }
 150     });
 151
 152     content.find("input[type=submit]").on("click", function (e) {
 153       e.preventDefault();
 154       var data = $(e.target).data();
 155       updateNote(marker, e.target.form, data.method, data.url);
 156     });
 157
 158     if (comment) {
 159       content.find("textarea").val(comment).trigger("input");
 160     }
 161
 162     return content[0];
 163   }
 164
 165   var addNoteButton = $(".control-note .control-button");
 166
 167   function createNote(marker, form, url) {
 168     var location = marker.getLatLng();
 169
 170     marker.options.draggable = false;
 171     marker.dragging.disable();
 172
 173     $(form).find("input[type=submit]").prop("disabled", true);
 174
 175     $.ajax({
 176       url: url,
 177       type: "POST",
 178       oauth: true,
 179       data: {
 180         lat: location.lat,
 181         lon: location.lng,
 182         text: $(form.text).val()
 183       },
 184       success: noteCreated
 185     });
 186
 187     function noteCreated(feature) {
 188       $(marker._popup._content).find("textarea").val("");
 189
 190       notes[feature.properties.id] = updateMarker(marker, feature);
 191       newNote = null;
 192
 193       addNoteButton.removeClass("active").addClass("geolink");
 194     }
 195   }
 196
 197   function updateNote(marker, form, method, url) {
 198     $(form).find("input[type=submit]").prop("disabled", true);
 199
 200     $.ajax({
 201       url: url,
 202       type: method,
 203       oauth: true,
 204       data: {
 205         text: $(form.text).val()
 206       },
 207       success: function (feature) {
 208         if (feature.properties.status == "hidden") {
 209           noteLayer.removeLayer(marker);
 210
 211           delete notes[feature.properties.id];
 212         } else {
 213           var popupContent = createPopupContent(marker, feature.properties);
 214
 215           marker.setIcon(noteIcons[feature.properties.status]);
 216           marker.setPopupContent(popupContent);
 217         }
 218       }
 219     });
 220   }
 221
 222   addNoteButton.on("click", function (e) {
 223     e.preventDefault();
 224     e.stopPropagation();
 225
 226     if (addNoteButton.hasClass("active")) return;
 227
 228     addNoteButton.removeClass("geolink").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").addClass("geolink");
 266     }).on("dragstart", function (e) {
 267       $(newNote).stopTime("removenote");
 268     }).on("dragend", function (e) {
 269       e.target.openPopup();
 270     });
 271   });
 272 }