Add notes sidebar interaction

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 7d2e954ad4528d72405a0b504970b5de69e826be..057fa13144526fa4f3f83a0017c4b733958cc8b4 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -10,6 +10,7 @@
 //= require index/export
 //= require index/notes
 //= require index/history
 //= require index/export
 //= require index/notes
 //= require index/history

+//= require index/note

 //= require router
 
 $(document).ready(function () {
 //= require router
 
 $(document).ready(function () {


@@ -279,7 +280,8 @@ $(document).ready(function () {
     return page;
   };
 
     return page;
   };
 

-  var history = OSM.History(map);
+  var history = OSM.History(map),
+    note = OSM.Note(map);

 
   OSM.route = OSM.Router({
     "/":                           OSM.Index(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,
     "/user/:display_name/edits":   history,
     "/browse/friends":             history,
     "/browse/nearby":              history,

+    "/browse/note/:id":            note,

     "/browse/:type/:id(/history)": OSM.Browse(map)
   });
 
     "/browse/:type/:id(/history)": OSM.Browse(map)
   });
 

diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb
new file mode 100644 (file)
index 0000000..74b8e85
--- /dev/null
+++ b/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;
+};

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 4538e9968cb9bfc22438c6b416cd3e6f7167f676..75ca5ad50a3382072ea5a05b9b033bee6e5df79b 100644 (file)
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -72,6 +72,7 @@ function initializeNotes(map) {
         icon: noteIcons[feature.properties.status],
         opacity: 0.9
       });
         icon: noteIcons[feature.properties.status],
         opacity: 0.9
       });

+      marker.id = feature.properties.id;

       marker.addTo(noteLayer).bindPopup(
         createPopupContent(marker, feature.properties),
         popupOptions()
       marker.addTo(noteLayer).bindPopup(
         createPopupContent(marker, feature.properties),
         popupOptions()


@@ -80,6 +81,10 @@ function initializeNotes(map) {
     return marker;
   }
 
     return marker;
   }
 

+  noteLayer.getLayerId = function(marker) {
+    return marker.id;
+  };
+

   var noteLoader;
 
   function loadNotes() {
   var noteLoader;
 
   function loadNotes() {

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 86b5a6a757d2b0b3f593768c722eea684ad3de5a..24172416f257f254935f104fa0316397952f19c3 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1992,7 +1992,7 @@ a.button {
     float: left;
     border-radius: 0;
     margin:0;
     float: left;
     border-radius: 0;
     margin:0;

-    min-width: 100px;
+    min-width: 75px;

     max-width: 180px;
     border-right:1px solid white;
     text-overflow: ellipsis;
     max-width: 180px;
     border-right:1px solid white;
     text-overflow: ellipsis;

diff --git a/app/views/browse/note.html.erb b/app/views/browse/note.html.erb
index 5c364e81557499aadd2bcff1e898b225ab94951a..12842f87c57dde0eec9ddd992ce5df17af7b8baa 100644 (file)
--- a/app/views/browse/note.html.erb
+++ b/app/views/browse/note.html.erb
@@ -44,3 +44,23 @@
     </ul>
   </div>
 <% end %>
     </ul>
   </div>
 <% end %>

+<div class="browse-section">
+  <% if @note.status == "open" %>
+  <form action="#">
+    <textarea class="comment" name="text" cols="40" rows="5"></textarea>
+    <div class="buttons clearfix">
+      <input type="submit" name="hide" value="<%= t('javascripts.notes.show.hide') %>" class="hide_unless_moderator deemphasize" data-note-id="<%= @note.id %>" data-method="DELETE" data-url="<%= note_url(@note, 'json') %>">
+      <input type="submit" name="close" value="<%= t('javascripts.notes.show.resolve') %>" class="hide_unless_logged_in" data-note-id="<%= @note.id %>" data-method="POST" data-url="<%= close_note_url(@note, 'json') %>">
+      <input type="submit" name="comment" value="<%= t('javascripts.notes.show.comment') %>" data-note-id="<%= @note.id %>" data-method="POST" data-url="<%= comment_note_url(@note, 'json') %>" disabled="1">
+    </div>
+  </form>
+  <% else %>
+  <form action="#">
+    <input type="hidden" name="text" value="">
+    <div class="buttons clearfix">
+      <input type="submit" name="hide" value="<%= t('javascripts.notes.show.hide') %>" class="hide_unless_moderator deemphasize" data-note-id="<%= @note.id %>" data-method="DELETE" data-url="<%= note_url(@note, 'json') %>">
+      <input type="submit" name="reopen" value="<%= t('javascripts.notes.show.reactivate') %>" class="hide_unless_logged_in" data-note-id="<%= @note.id %>" data-method="POST" data-url="<%= reopen_note_url(@note, 'json') %>">
+    </div>
+  </form>
+  <% end %>
+</div>