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