app/assets/javascripts/index/new_note.js

   1 //= require qs/dist/qs
   2
   3 OSM.NewNote = function (map) {
   4   var noteLayer = map.noteLayer,
   5       content = $("#sidebar_content"),
   6       page = {},
   7       addNoteButton = $(".control-note .control-button"),
   8       newNoteMarker,
   9       halo;
  10
  11   var noteIcons = {
  12     "new": L.icon({
  13       iconUrl: OSM.NEW_NOTE_MARKER,
  14       iconSize: [25, 40],
  15       iconAnchor: [12, 40]
  16     }),
  17     "open": L.icon({
  18       iconUrl: OSM.OPEN_NOTE_MARKER,
  19       iconSize: [25, 40],
  20       iconAnchor: [12, 40]
  21     }),
  22     "closed": L.icon({
  23       iconUrl: OSM.CLOSED_NOTE_MARKER,
  24       iconSize: [25, 40],
  25       iconAnchor: [12, 40]
  26     })
  27   };
  28
  29   addNoteButton.on("click", function (e) {
  30     e.preventDefault();
  31     e.stopPropagation();
  32
  33     if ($(this).hasClass("disabled")) return;
  34
  35     OSM.router.route("/note/new");
  36   });
  37
  38   function createNote(marker, text, callback) {
  39     var location = marker.getLatLng().wrap();
  40
  41     marker.options.draggable = false;
  42     marker.dragging.disable();
  43
  44     $.ajax({
  45       url: "/api/0.6/notes.json",
  46       type: "POST",
  47       oauth: true,
  48       data: {
  49         lat: location.lat,
  50         lon: location.lng,
  51         text
  52       },
  53       success: callback
  54     });
  55   }
  56
  57   function updateMarker(feature) {
  58     var marker = L.marker(feature.geometry.coordinates.reverse(), {
  59       icon: noteIcons[feature.properties.status],
  60       opacity: 0.9,
  61       interactive: true
  62     });
  63     marker.id = feature.properties.id;
  64     marker.addTo(noteLayer);
  65     return marker;
  66   }
  67
  68   page.pushstate = page.popstate = function (path) {
  69     OSM.loadSidebarContent(path, function () {
  70       page.load(path);
  71     });
  72   };
  73
  74   function newHalo(loc, a) {
  75     var hasHalo = halo && map.hasLayer(halo);
  76
  77     if (a === "dragstart" && hasHalo) {
  78       map.removeLayer(halo);
  79     } else {
  80       if (hasHalo) map.removeLayer(halo);
  81
  82       halo = L.circleMarker(loc, {
  83         weight: 2.5,
  84         radius: 20,
  85         fillOpacity: 0.5,
  86         color: "#FF6200"
  87       });
  88
  89       map.addLayer(halo);
  90     }
  91   }
  92
  93   page.load = function (path) {
  94     if (addNoteButton.hasClass("disabled")) return;
  95     if (addNoteButton.hasClass("active")) return;
  96
  97     addNoteButton.addClass("active");
  98
  99     map.addLayer(noteLayer);
 100
 101     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
 102     var markerLatlng;
 103
 104     if (params.lat && params.lon) {
 105       markerLatlng = L.latLng(params.lat, params.lon);
 106     } else {
 107       markerLatlng = map.getCenter();
 108     }
 109
 110     map.panInside(markerLatlng, {
 111       padding: [50, 50]
 112     });
 113
 114     newNoteMarker = L.marker(markerLatlng, {
 115       icon: noteIcons.new,
 116       opacity: 0.9,
 117       draggable: true
 118     });
 119
 120     newNoteMarker.on("dragstart dragend", function (a) {
 121       newHalo(newNoteMarker.getLatLng(), a.type);
 122     });
 123
 124     newNoteMarker.addTo(noteLayer);
 125     newHalo(newNoteMarker.getLatLng());
 126
 127     newNoteMarker.on("remove", function () {
 128       addNoteButton.removeClass("active");
 129     }).on("dragend", function () {
 130       content.find("textarea").focus();
 131     });
 132
 133     content.find("textarea")
 134       .on("input", disableWhenBlank)
 135       .focus();
 136
 137     function disableWhenBlank(e) {
 138       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
 139     }
 140
 141     content.find("input[type=submit]").on("click", function (e) {
 142       const text = content.find("textarea").val();
 143
 144       e.preventDefault();
 145       $(this).prop("disabled", true);
 146       createNote(newNoteMarker, text, (feature) => {
 147         content.find("textarea").val("");
 148         updateMarker(feature);
 149         noteLayer.removeLayer(newNoteMarker);
 150         newNoteMarker = null;
 151         addNoteButton.removeClass("active");
 152         OSM.router.route("/note/" + feature.properties.id);
 153       });
 154     });
 155
 156     return map.getState();
 157   };
 158
 159   page.unload = function () {
 160     if (newNoteMarker) noteLayer.removeLayer(newNoteMarker);
 161     if (halo) map.removeLayer(halo);
 162     addNoteButton.removeClass("active");
 163   };
 164
 165   return page;
 166 };