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

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