Add notes sidebar interaction

app/assets/javascripts/index.js

@@ -10,6 +10,7 @@
 //= require index/export
 //= require index/notes
 //= require index/history
+//= require index/note
 //= require router
 
 $(document).ready(function () {
@@ -279,7 +280,8 @@ $(document).ready(function () {
     return page;
   };
 
-  var history = OSM.History(map);
+  var history = OSM.History(map),
+    note = OSM.Note(map);
 
   OSM.route = OSM.Router({
     "/":                           OSM.Index(map),
@@ -289,6 +291,7 @@ $(document).ready(function () {
     "/user/:display_name/edits":   history,
     "/browse/friends":             history,
     "/browse/nearby":              history,
+    "/browse/note/:id":            note,
     "/browse/:type/:id(/history)": OSM.Browse(map)
   });
 

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

@@ -0,0 +1,83 @@
+//= require templates/notes/show
+//= require templates/notes/new
+
+OSM.Note = function(map) {
+    var noteLayer = map.noteLayer,
+        content = $('#sidebar_content'),
+        page = {};
+
+    var noteIcons = {
+        "new": L.icon({
+            iconUrl: "<%= image_path('new_note_marker.png') %>",
+            iconSize: [25, 40],
+            iconAnchor: [12, 40]
+        }),
+        "open": L.icon({
+            iconUrl: "<%= image_path('open_note_marker.png') %>",
+            iconSize: [25, 40],
+            iconAnchor: [12, 40]
+        }),
+        "closed": L.icon({
+            iconUrl: "<%= image_path('closed_note_marker.png') %>",
+            iconSize: [25, 40],
+            iconAnchor: [12, 40]
+        })
+    };
+
+    function updateNote(marker, form, method, url) {
+        $(form).find("input[type=submit]").prop("disabled", true);
+
+        $.ajax({
+            url: url,
+            type: method,
+            oauth: true,
+            data: {text: $(form.text).val()},
+            success: function (feature) {
+                marker = noteLayer.getLayer(marker);
+                if (feature.properties.status == "hidden") {
+                    noteLayer.removeLayer(marker);
+                } else {
+                    marker.setIcon(noteIcons[feature.properties.status]);
+                    page.load();
+                }
+            }
+        });
+    }
+
+    function bind() {
+        content.find("input[type=submit]").on("click", function (e) {
+            e.preventDefault();
+            var data = $(e.target).data();
+            updateNote(data.noteId, e.target.form, data.method, data.url);
+        });
+
+        content.find("textarea").on("input", function (e) {
+            var form = e.target.form;
+
+            if ($(e.target).val() == "") {
+                $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
+                $(form.comment).prop("disabled", true);
+            } else {
+                $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
+                $(form.comment).prop("disabled", false);
+            }
+        });
+
+        content.find("textarea").val('').trigger("input");
+    }
+
+    page.pushstate = page.popstate = function(path) {
+        page.load();
+    };
+
+    page.load = function() {
+        $('#sidebar_content').load(window.location.pathname + "?xhr=1", function(a, b, xhr) {
+            if (xhr.getResponseHeader('X-Page-Title')) {
+                document.title = xhr.getResponseHeader('X-Page-Title');
+            }
+            bind();
+        });
+    };
+
+    return page;
+};

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

@@ -72,6 +72,7 @@ function initializeNotes(map) {
         icon: noteIcons[feature.properties.status],
         opacity: 0.9
       });
+      marker.id = feature.properties.id;
       marker.addTo(noteLayer).bindPopup(
         createPopupContent(marker, feature.properties),
         popupOptions()
@@ -80,6 +81,10 @@ function initializeNotes(map) {
     return marker;
   }
 
+  noteLayer.getLayerId = function(marker) {
+    return marker.id;
+  };
+
   var noteLoader;
 
   function loadNotes() {