app/assets/javascripts/index/new_note.js

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