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