X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/1b19974b1209fdab6f35168290251572ca86f142..42c1dec8f0f53b457e9512bcc24f26cad9df9916:/app/assets/javascripts/index/note.js.erb diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb index 9e92c9a1f..18000deb0 100644 --- a/app/assets/javascripts/index/note.js.erb +++ b/app/assets/javascripts/index/note.js.erb @@ -1,80 +1,116 @@ -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(); - } - } - }); - } +OSM.Note = function (map) { + var noteLayer = map.noteLayer, + content = $('#sidebar_content'), + page = {}, + halo, currentNote; + + 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(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 () { + OSM.loadSidebarContent(window.location.pathname, page.load); + } + }); + } + + page.pushstate = page.popstate = function (path) { + OSM.loadSidebarContent(path, function() { + initialize(function() { + var data = $('.details').data(), + latLng = L.latLng(data.coordinates.split(',')); + if (!map.getBounds().contains(latLng)) moveToNote(); + }); + }); + }; + + page.load = function() { + initialize(moveToNote); + }; + + function initialize(callback) { + content.find("input[type=submit]").on("click", function (e) { + e.preventDefault(); + var data = $(e.target).data(); + updateNote(e.target.form, data.method, data.url); + }); + + content.find("textarea").on("input", function (e) { + var form = e.target.form; - 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"); + 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"); + + var data = $('.details').data(), + latLng = L.latLng(data.coordinates.split(',')); + + if (!map.hasLayer(halo)) { + halo = L.circleMarker(latLng, { + weight: 2.5, + radius: 20, + fillOpacity: 0.5, + color: "#FF6200" + }); + map.addLayer(halo); } - page.pushstate = page.popstate = function() { - page.load(); - }; + if (map.hasLayer(currentNote)) map.removeLayer(currentNote); + currentNote = L.marker(latLng, { + icon: noteIcons[data.status], + opacity: 1, + clickable: true + }); + + map.addLayer(currentNote); + + if (callback) callback(); + }; + + function moveToNote() { + var data = $('.details').data(), + latLng = L.latLng(data.coordinates.split(',')); + + if (!window.location.hash || window.location.hash.match(/^#?c[0-9]+$/)) { + OSM.router.moveListenerOff(); + map.once('moveend', OSM.router.moveListenerOn); + map.setView(latLng, 15, {reset: true}); + } + } - 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(); - }); - }; + page.unload = function () { + if (map.hasLayer(halo)) map.removeLayer(halo); + if (map.hasLayer(currentNote)) map.removeLayer(currentNote); + }; - return page; + return page; };