app/assets/javascripts/index/new_note.js

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