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