diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 378244db4..e0ca66766 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -11,6 +11,7 @@ //= require index/notes //= require index/history //= require index/note +//= require index/new_note //= require router $(document).ready(function () { @@ -221,6 +222,7 @@ $(document).ready(function () { "/search": OSM.Search(map), "/export": OSM.Export(map), "/history": history, + "/new_note": OSM.NewNote(map), "/user/:display_name/edits": history, "/browse/friends": history, "/browse/nearby": history, diff --git a/app/assets/javascripts/index/new_note.js.erb b/app/assets/javascripts/index/new_note.js.erb new file mode 100644 index 000000000..34d8355a5 --- /dev/null +++ b/app/assets/javascripts/index/new_note.js.erb @@ -0,0 +1,144 @@ +OSM.NewNote = function(map) { + var noteLayer = map.noteLayer, + content = $('#sidebar_content'), + page = {}, + addNoteButton = $(".control-note .control-button"), + newNote; + + 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] + }) + }; + + page.pushstate = page.popstate = function() { + page.load(); + }; + + addNoteButton.on("click", function (e) { + e.preventDefault(); + e.stopPropagation(); + + OSM.route('/new_note'); + }); + + function createNote(marker, form, url) { + var location = marker.getLatLng(); + + marker.options.draggable = false; + marker.dragging.disable(); + + $(form).find("input[type=submit]").prop("disabled", true); + + $.ajax({ + url: url, + type: "POST", + oauth: true, + data: { + lat: location.lat, + lon: location.lng, + text: $(form.text).val() + }, + success: function(feature) { + noteCreated(feature, marker); + } + }); + + function noteCreated(feature, marker) { + content.find("textarea").val(""); + updateMarker(feature); + newNote = null; + noteLayer.removeLayer(marker); + addNoteButton.removeClass("active"); + OSM.route('/browse/note/' + feature.properties.id); + } + } + + function updateMarker(feature) { + marker = L.marker(feature.geometry.coordinates.reverse(), { + icon: noteIcons[feature.properties.status], + opacity: 0.9, + clickable: true + }); + marker.id = feature.properties.id; + marker.addTo(noteLayer); + return marker; + } + + function initialize() { + if (addNoteButton.hasClass("disabled")) return; + if (addNoteButton.hasClass("active")) return; + + addNoteButton.addClass("active"); + + map.addLayer(noteLayer); + + var mapSize = map.getSize(); + var markerPosition; + + if (mapSize.y > 800) { + markerPosition = [mapSize.x / 2, mapSize.y / 2]; + } else if (mapSize.y > 400) { + markerPosition = [mapSize.x / 2, 400]; + } else { + markerPosition = [mapSize.x / 2, mapSize.y]; + } + + newNote = L.marker(map.containerPointToLatLng(markerPosition), { + icon: noteIcons["new"], + opacity: 0.9, + draggable: true + }); + + newNote.addTo(noteLayer) + + newNote.on("remove", function (e) { + addNoteButton.removeClass("active"); + }).on("dragstart", function (e) { + $(newNote).stopTime("removenote"); + }).on("dragend", function (e) { + content.find("textarea").focus(); + }); + + content.find("textarea") + .on("input", disableWhenBlank) + .focus(); + + function disableWhenBlank(e) { + $(e.target.form.add).prop("disabled", $(e.target).val() === ""); + } + + content.find('input[type=submit]').on('click', function(e) { + e.preventDefault(); + createNote(newNote, e.target.form, '/api/0.6/notes.json'); + }); + } + + page.load = function() { + content.load(window.location.pathname + "?xhr=1", function(a, b, xhr) { + if (xhr.getResponseHeader('X-Page-Title')) { + document.title = xhr.getResponseHeader('X-Page-Title'); + } + initialize(); + }); + } + + page.unload = function() { + noteLayer.removeLayer(newNote); + addNoteButton.removeClass("active"); + } + + return page; +} diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb index 74b8e85d0..9e92c9a1f 100644 --- a/app/assets/javascripts/index/note.js.erb +++ b/app/assets/javascripts/index/note.js.erb @@ -1,6 +1,3 @@ -//= require templates/notes/show -//= require templates/notes/new - OSM.Note = function(map) { var noteLayer = map.noteLayer, content = $('#sidebar_content'), @@ -66,7 +63,7 @@ OSM.Note = function(map) { content.find("textarea").val('').trigger("input"); } - page.pushstate = page.popstate = function(path) { + page.pushstate = page.popstate = function() { page.load(); }; diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb index 70335748e..c3169ca09 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -1,6 +1,3 @@ -//= require templates/notes/show -//= require templates/notes/new - function initializeNotes(map) { var noteLayer = map.noteLayer, notes = {}, @@ -102,157 +99,4 @@ function initializeNotes(map) { noteLoader = null; } }; - - function popupOptions() { - var mapSize = map.getSize(); - - return { - minWidth: 320, - maxWidth: mapSize.y * 1 / 3, - maxHeight: mapSize.y * 2 / 3, - offset: new L.Point(0, -40), - autoPanPadding: new L.Point(60, 40) - }; - } - - function createPopupContent(marker, properties, comment) { - var content = $(JST["templates/notes/show"]({ note: properties })); - - 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("input[type=submit]").on("click", function (e) { - e.preventDefault(); - var data = $(e.target).data(); - updateNote(marker, e.target.form, data.method, data.url); - }); - - if (comment) { - content.find("textarea").val(comment).trigger("input"); - } - - return content[0]; - } - - var addNoteButton = $(".control-note .control-button"); - - function createNote(marker, form, url) { - var location = marker.getLatLng(); - - marker.options.draggable = false; - marker.dragging.disable(); - - $(form).find("input[type=submit]").prop("disabled", true); - - $.ajax({ - url: url, - type: "POST", - oauth: true, - data: { - lat: location.lat, - lon: location.lng, - text: $(form.text).val() - }, - success: function(feature) { - noteCreated(feature, marker); - } - }); - - function noteCreated(feature, marker) { - $(marker._popup._content).find("textarea").val(""); - - notes[feature.properties.id] = updateMarker(false, feature); - OSM.route('/browse/note/' + feature.properties.id); - newNote = null; - marker.closePopup(); - noteLayer.removeLayer(marker); - addNoteButton.removeClass("active"); - } - } - - 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) { - if (feature.properties.status == "hidden") { - noteLayer.removeLayer(marker); - - delete notes[feature.properties.id]; - } else { - var popupContent = createPopupContent(marker, feature.properties); - - marker.setIcon(noteIcons[feature.properties.status]); - marker.setPopupContent(popupContent); - } - } - }); - } - - addNoteButton.on("click", function (e) { - e.preventDefault(); - e.stopPropagation(); - - if (addNoteButton.hasClass("disabled")) return; - if (addNoteButton.hasClass("active")) return; - - addNoteButton.addClass("active"); - - map.addLayer(noteLayer); - - var mapSize = map.getSize(); - var markerPosition; - - if (mapSize.y > 800) { - markerPosition = [mapSize.x / 2, mapSize.y / 2]; - } else if (mapSize.y > 400) { - markerPosition = [mapSize.x / 2, 400]; - } else { - markerPosition = [mapSize.x / 2, mapSize.y]; - } - - newNote = L.marker(map.containerPointToLatLng(markerPosition), { - icon: noteIcons["new"], - opacity: 0.9, - draggable: true - }); - - var popupContent = $(JST["templates/notes/new"]()); - - popupContent.find("textarea").on("input", disableWhenBlank); - - function disableWhenBlank(e) { - $(e.target.form.add).prop("disabled", $(e.target).val() === ""); - } - - popupContent.find("input[type=submit]").on("click", function (e) { - e.preventDefault(); - createNote(newNote, e.target.form, '/api/0.6/notes.json'); - }); - - newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); - - newNote.on("remove", function (e) { - addNoteButton.removeClass("active"); - }).on("dragstart", function (e) { - $(newNote).stopTime("removenote"); - }).on("dragend", function (e) { - e.target.openPopup(); - }); - }); } diff --git a/app/assets/javascripts/templates/notes/new.jst.ejs b/app/assets/javascripts/templates/notes/new.jst.ejs deleted file mode 100644 index 003971088..000000000 --- a/app/assets/javascripts/templates/notes/new.jst.ejs +++ /dev/null @@ -1,12 +0,0 @@ -
-

<%- I18n.t('javascripts.notes.new.intro') %>

-
- - - -
-
- -
-
-
diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs deleted file mode 100644 index 240259140..000000000 --- a/app/assets/javascripts/templates/notes/show.jst.ejs +++ /dev/null @@ -1,41 +0,0 @@ -
- - <% if (note.comments.some(function (comment) { return !comment.user })) { %> - <%- I18n.t('javascripts.notes.show.anonymous_warning') %> - <% } %> - <% note.comments.forEach(function (comment) { %> -
- - <% if (comment.user) { %> - <%= I18n.t('javascripts.notes.show.' + comment.action + '_by', { - user: comment.user, user_url: comment.user_url, - time: I18n.l("time.formats.long", comment.date) - }) %> - <% } else { %> - <%- I18n.t('javascripts.notes.show.' + comment.action + '_by_anonymous', { - time: I18n.l("time.formats.long", comment.date) - }) %> - <% } %> - -
<%= comment.html %>
-
- <% }) %> - <% if (note.status == "open") { %> -
- -
- - - -
-
- <% } else { %> -
- -
- - -
-
- <% } %> -
diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb new file mode 100644 index 000000000..09af23edc --- /dev/null +++ b/app/views/browse/new_note.html.erb @@ -0,0 +1,20 @@ +<% set_title("New Note") %> + +

+ + <%= t "browse.note.new_note" %> +

+ +
+

<%= t('javascripts.notes.new.intro') %>

+
+ + +
+ +
+
+ +
+
+
diff --git a/config/locales/en.yml b/config/locales/en.yml index 2a546abce..db6614cb0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -282,6 +282,7 @@ en: edit: "Edit way" note: title: "Note" + new_note: "Add a note" open_title: "Unresolved note: %{note_name}" closed_title: "Resolved note: %{note_name}" opened: "Opened" diff --git a/config/routes.rb b/config/routes.rb index 435cff9eb..9eda73015 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -110,6 +110,7 @@ OpenStreetMap::Application.routes.draw do match '/browse/relation/:id/history' => 'browse#relation_history', :via => :get, :id => /\d+/ match '/browse/changeset/:id' => 'browse#changeset', :via => :get, :as => :changeset, :id => /\d+/ match '/browse/note/:id' => 'browse#note', :via => :get, :id => /\d+/, :as => "browse_note" + match '/new_note' => 'browse#new_note', :via => :get match '/user/:display_name/edits' => 'changeset#list', :via => :get match '/user/:display_name/edits/feed' => 'changeset#feed', :via => :get, :defaults => { :format => :atom } match '/user/:display_name/notes' => 'notes#mine', :via => :get