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