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 (e) {
 108           addNoteButton.removeClass("active");
 109         }).on("dragstart", function (e) {
 110           $(newNote).stopTime("removenote");
 111         }).on("dragend", function (e) {
 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 }