app/assets/javascripts/index/new_note.js.erb

   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
   8   var noteIcons = {
   9     "new": L.icon({
  10       iconUrl: "<%= image_path 'new_note_marker.png' %>",
  11       iconSize: [25, 40],
  12       iconAnchor: [12, 40]
  13     }),
  14     "open": L.icon({
  15       iconUrl: "<%= image_path 'open_note_marker.png' %>",
  16       iconSize: [25, 40],
  17       iconAnchor: [12, 40]
  18     }),
  19     "closed": L.icon({
  20       iconUrl: "<%= image_path 'closed_note_marker.png' %>",
  21       iconSize: [25, 40],
  22       iconAnchor: [12, 40]
  23     })
  24   };
  25
  26   addNoteButton.on("click", function (e) {
  27     e.preventDefault();
  28     e.stopPropagation();
  29
  30     if ($(this).hasClass('disabled')) return;
  31
  32     OSM.route('/new_note');
  33   });
  34
  35   function createNote(marker, form, url) {
  36     var location = marker.getLatLng();
  37
  38     marker.options.draggable = false;
  39     marker.dragging.disable();
  40
  41     $(form).find("input[type=submit]").prop("disabled", true);
  42
  43     $.ajax({
  44       url: url,
  45       type: "POST",
  46       oauth: true,
  47       data: {
  48         lat: location.lat,
  49         lon: location.lng,
  50         text: $(form.text).val()
  51       },
  52       success: function (feature) {
  53         noteCreated(feature, marker);
  54       }
  55     });
  56
  57     function noteCreated(feature, marker) {
  58       content.find("textarea").val("");
  59       updateMarker(feature);
  60       newNote = null;
  61       noteLayer.removeLayer(marker);
  62       addNoteButton.removeClass("active");
  63       OSM.route('/browse/note/' + feature.properties.id);
  64     }
  65   }
  66
  67   function updateMarker(feature) {
  68     var marker = L.marker(feature.geometry.coordinates.reverse(), {
  69       icon: noteIcons[feature.properties.status],
  70       opacity: 0.9,
  71       clickable: true
  72     });
  73     marker.id = feature.properties.id;
  74     marker.addTo(noteLayer);
  75     return marker;
  76   }
  77
  78   page.pushstate = page.popstate = function (path) {
  79     OSM.loadSidebarContent(path, page.load);
  80   };
  81
  82   page.load = function () {
  83     if (addNoteButton.hasClass("disabled")) return;
  84     if (addNoteButton.hasClass("active")) return;
  85
  86     addNoteButton.addClass("active");
  87
  88     map.addLayer(noteLayer);
  89
  90     var mapSize = map.getSize();
  91     var markerPosition;
  92
  93     if (mapSize.y > 800) {
  94       markerPosition = [mapSize.x / 2, mapSize.y / 2];
  95     } else if (mapSize.y > 400) {
  96       markerPosition = [mapSize.x / 2, 400];
  97     } else {
  98       markerPosition = [mapSize.x / 2, mapSize.y];
  99     }
 100
 101     newNote = L.marker(map.containerPointToLatLng(markerPosition), {
 102       icon: noteIcons["new"],
 103       opacity: 0.9,
 104       draggable: true
 105     });
 106
 107     newNote.addTo(noteLayer);
 108
 109     newNote.on("remove", function () {
 110       addNoteButton.removeClass("active");
 111     }).on("dragstart",function () {
 112       $(newNote).stopTime("removenote");
 113     }).on("dragend", function () {
 114       content.find("textarea").focus();
 115     });
 116
 117     content.find("textarea")
 118       .on("input", disableWhenBlank)
 119       .focus();
 120
 121     function disableWhenBlank(e) {
 122       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
 123     }
 124
 125     content.find('input[type=submit]').on('click', function (e) {
 126       e.preventDefault();
 127       createNote(newNote, e.target.form, '/api/0.6/notes.json');
 128     });
 129   };
 130
 131   page.unload = function () {
 132     noteLayer.removeLayer(newNote);
 133     addNoteButton.removeClass("active");
 134   };
 135
 136   return page;
 137 };