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
  48   function updateMarker(marker, feature) {
  49     var icon = noteIcons[feature.properties.status];
  50     var popupContent = createPopupContent(marker, feature.properties);
  51
  52     if (marker)
  53     {
  54       marker.setIcon(noteIcons[feature.properties.status]);
  55       marker._popup.setContent(popupContent);
  56     }
  57     else
  58     {
  59       marker = L.marker(feature.geometry.coordinates.reverse(), {
  60         icon: icon,
  61         opacity: 0.7
  62       });
  63
  64       marker.addTo(noteLayer).bindPopup(popupContent, popupOptions());
  65     }
  66
  67     return marker;
  68   }
  69
  70   function loadNotes() {
  71     var bounds = map.getBounds();
  72     var size = bounds.getSize();
  73
  74     if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
  75       var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX();
  76
  77       $.ajax({
  78         url: url,
  79         success: function (json) {
  80           var oldNotes = notes;
  81
  82           notes = {};
  83
  84           json.features.forEach(function (feature) {
  85             var marker = oldNotes[feature.properties.id];
  86
  87             delete oldNotes[feature.properties.id];
  88
  89             notes[feature.properties.id] = updateMarker(marker, feature);
  90           });
  91
  92           for (id in oldNotes) {
  93             noteLayer.removeLayer(oldNotes[id]);
  94           }
  95         }
  96       });
  97     }
  98   };
  99
 100   function popupOptions() {
 101     var mapSize = map.getSize();
 102
 103     return { maxHeight: mapSize.y * 2 / 3, autoPanPadding: new L.Point(60, 40) };
 104   }
 105
 106   function createPopupContent(marker, properties) {
 107     var content = $(JST["templates/notes/show"]({ note: properties }));
 108
 109     content.find("textarea").on("input", function (e) {
 110       var form = e.target.form;
 111
 112       if ($(e.target).val() == "") {
 113         $(form.close).val(I18n.t("javascripts.notes.show.close"));
 114         $(form.comment).prop("disabled", true);
 115       } else {
 116         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close"));
 117         $(form.comment).prop("disabled", false);
 118       }
 119     });
 120
 121     content.find("input[type=submit]").on("click", function (e) {
 122       e.preventDefault();
 123       updateNote(marker, e.target.form, $(e.target).data("url"));
 124     });
 125
 126     return content[0];
 127   }
 128
 129   function createNote(marker, form, url) {
 130     var location = marker.getLatLng();
 131
 132     $(form).find("input[type=submit]").prop("disabled", true);
 133
 134     $.ajax({
 135       url: url,
 136       type: "POST",
 137       data: {
 138         lat: location.lat,
 139         lon: location.lng,
 140         text: $(form.text).val()
 141       },
 142       success: function (feature) {
 143         notes[feature.properties.id] = updateMarker(marker, feature);
 144
 145         $(".leaflet-popup-close-button").off("click.close");
 146       }
 147     });
 148   }
 149
 150   function updateNote(marker, form, url) {
 151     $(form).find("input[type=submit]").prop("disabled", true);
 152
 153     $.ajax({
 154       url: url,
 155       type: "POST",
 156       data: {
 157         text: $(form.text).val()
 158       },
 159       success: function (feature) {
 160         var popupContent = createPopupContent(marker, feature.properties);
 161
 162         marker.setIcon(noteIcons[feature.properties.status]);
 163         marker._popup.setContent(popupContent);
 164       }
 165     });
 166   }
 167
 168   $("#createnoteanchor").click(function (e) {
 169     e.preventDefault();
 170
 171     map.addLayer(noteLayer);
 172
 173     var marker = L.marker(map.getCenter(), {
 174       icon: noteIcons["new"],
 175       opacity: 0.7,
 176       draggable: true
 177     });
 178
 179     var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") }));
 180
 181     popupContent.find("input[type=submit]").on("click", function (e) {
 182       e.preventDefault();
 183       createNote(marker, e.target.form, $(e.target).data("url"));
 184     });
 185
 186     marker.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
 187
 188     $(".leaflet-popup-close-button").on("click.close", function (e) {
 189       map.removeLayer(marker);
 190     });
 191
 192     marker.on("dragend", function (e) {
 193       e.target.openPopup();
 194     });
 195   });
 196 });