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     halo;
   8
   9   var noteIcons = {
  10     "new": L.icon({
  11       iconUrl: "<%= image_path 'new_note_marker.png' %>",
  12       iconSize: [25, 40],
  13       iconAnchor: [12, 40]
  14     }),
  15     "open": L.icon({
  16       iconUrl: "<%= image_path 'open_note_marker.png' %>",
  17       iconSize: [25, 40],
  18       iconAnchor: [12, 40]
  19     }),
  20     "closed": L.icon({
  21       iconUrl: "<%= image_path 'closed_note_marker.png' %>",
  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.route('/new_note');
  34   });
  35
  36   function createNote(marker, form, url) {
  37     var location = marker.getLatLng();
  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.route('/browse/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       clickable: 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, page.load);
  81   };
  82
  83   page.load = function () {
  84     if (addNoteButton.hasClass("disabled")) return;
  85     if (addNoteButton.hasClass("active")) return;
  86
  87     addNoteButton.addClass("active");
  88
  89     map.addLayer(noteLayer);
  90
  91     var mapSize = map.getSize();
  92     var markerPosition;
  93
  94     if (mapSize.y > 800) {
  95       markerPosition = [mapSize.x / 2, mapSize.y / 2];
  96     } else if (mapSize.y > 400) {
  97       markerPosition = [mapSize.x / 2, 400];
  98     } else {
  99       markerPosition = [mapSize.x / 2, mapSize.y];
 100     }
 101
 102     newNote = L.marker(map.containerPointToLatLng(markerPosition), {
 103       icon: noteIcons["new"],
 104       opacity: 0.9,
 105       draggable: true
 106     });
 107
 108     newNote.addTo(noteLayer);
 109
 110     halo = L.circleMarker(map.containerPointToLatLng(markerPosition), {
 111       weight: 2.5,
 112       radius: 20,
 113       fillOpacity: 0.5,
 114       color: "#FF6200"
 115     });
 116
 117     map.addLayer(halo);
 118
 119     newNote.on("remove", function () {
 120       addNoteButton.removeClass("active");
 121     }).on("dragstart",function () {
 122       $(newNote).stopTime("removenote");
 123     }).on("dragend", function () {
 124       content.find("textarea").focus();
 125     });
 126
 127     content.find("textarea")
 128       .on("input", disableWhenBlank)
 129       .focus();
 130
 131     function disableWhenBlank(e) {
 132       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
 133     }
 134
 135     content.find('input[type=submit]').on('click', function (e) {
 136       e.preventDefault();
 137       createNote(newNote, e.target.form, '/api/0.6/notes.json');
 138     });
 139   };
 140
 141   page.unload = function () {
 142     noteLayer.removeLayer(newNote);
 143     map.removeLayer(halo);
 144     addNoteButton.removeClass("active");
 145   };
 146
 147   return page;
 148 };