X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/890153b2a6412a60f352f88fc3d8c80be14451fc..d380ce79aabcd98ade3eabe8f982e516311f6aee:/app/assets/javascripts/index/notes.js.erb diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb index 7336c49ec..3bcdd4a19 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -1,8 +1,6 @@ -//= require templates/notes/show -//= require templates/notes/new - -$(document).ready(function () { - var params = OSM.mapParams(); +function initializeNotes(map) { + var noteLayer = map.noteLayer, + notes = {}; var noteIcons = { "new": L.icon({ @@ -22,23 +20,12 @@ $(document).ready(function () { }) }; - var noteLayer = new L.LayerGroup(); - var notes = {}; - var newNote; - - layers.push({ - layer: noteLayer, - layerCode: "N" - }); - map.on("layeradd", function (e) { if (e.layer == noteLayer) { loadNotes(); map.on("moveend", loadNotes); } - }); - - map.on("layerremove", function (e) { + }).on("layerremove", function (e) { if (e.layer == noteLayer) { map.off("moveend", loadNotes); noteLayer.clearLayers(); @@ -46,68 +33,29 @@ $(document).ready(function () { } }); - // Don't focus the text area on touch devices to avoid flashing the keyboard - if (!('ontouchstart' in document.documentElement)) { - map.on("popupopen", function (e) { - $(e.popup._container).find(".comment").focus(); - }); - } - - map.on("popupclose", function (e) { - if (newNote && e.popup == newNote._popup) { - $(newNote).oneTime(10, "removenote", function () { - map.removeLayer(newNote); - newNote = null; - }); - } + noteLayer.on('click', function(e) { + OSM.route('/browse/note/' + e.layer.id); }); - if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { - map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name")); - - if (params.layers) setMapLayers(params.layers); - if (params.notes) map.addLayer(noteLayer); - - if (params.note) { - $.ajax({ - url: "/api/" + OSM.API_VERSION + "/notes/" + params.note + ".json", - success: function (feature) { - var marker = updateMarker(notes[feature.properties.id], feature); - - notes[feature.properties.id] = marker; - - map.addLayer(noteLayer); - marker.openPopup(); - } - }); - } - } - function updateMarker(marker, feature) { - if (marker) - { + if (marker) { marker.setIcon(noteIcons[feature.properties.status]); - marker._popup.setContent(createPopupContent( - marker, feature.properties, - $(marker._popup._content).find("textarea").val() - )); - } - else - { + } else { marker = L.marker(feature.geometry.coordinates.reverse(), { icon: noteIcons[feature.properties.status], - opacity: 0.9 + opacity: 0.9, + clickable: true }); - - marker.addTo(noteLayer).bindPopup( - createPopupContent(marker, feature.properties), - popupOptions() - ); + marker.id = feature.properties.id; + marker.addTo(noteLayer); } - return marker; } + noteLayer.getLayerId = function(marker) { + return marker.id; + }; + var noteLoader; function loadNotes() { @@ -115,188 +63,32 @@ $(document).ready(function () { var size = bounds.getSize(); if (size <= OSM.MAX_NOTE_REQUEST_AREA) { - var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX(); + var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString(); if (noteLoader) noteLoader.abort(); noteLoader = $.ajax({ url: url, - success: function (json) { - var oldNotes = notes; - - notes = {}; - - json.features.forEach(function (feature) { - var marker = oldNotes[feature.properties.id]; - - delete oldNotes[feature.properties.id]; - - notes[feature.properties.id] = updateMarker(marker, feature); - }); - - for (id in oldNotes) { - noteLayer.removeLayer(oldNotes[id]); - } - - noteLoader = null; - } + success: success }); } - }; - - 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]; - } - - 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) { - $(marker._popup._content).find("textarea").val(""); + function success(json) { + var oldNotes = notes; + notes = {}; + json.features.forEach(updateMarkers); + function updateMarkers(feature) { + var marker = oldNotes[feature.properties.id]; + delete oldNotes[feature.properties.id]; notes[feature.properties.id] = updateMarker(marker, feature); - newNote = null; - - $("#createnoteanchor").removeClass("disabled").addClass("geolink"); } - }); - } - - 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._popup.setContent(popupContent); - } + for (var id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); } - }); - } - - $(".leaflet-control-attribution").on("click", "#createnoteanchor", function (e) { - e.preventDefault(); - if ($(e.target).hasClass("disabled")) return; - - $(e.target).removeClass("geolink").addClass("disabled"); - - 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]; + noteLoader = null; } - 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"]({ create_url: $(e.target).attr("href") })); - - popupContent.find("textarea").on("input", function (e) { - var form = e.target.form; - - if ($(e.target).val() == "") { - $(form.add).prop("disabled", true); - } else { - $(form.add).prop("disabled", false); - } - }); - - popupContent.find("input[type=submit]").on("click", function (e) { - e.preventDefault(); - createNote(newNote, e.target.form, $(e.target).data("url")); - }); - - newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); - - newNote.on("remove", function (e) { - $("#createnoteanchor").removeClass("disabled").addClass("geolink"); - }); - - newNote.on("dragstart", function (e) { - $(newNote).stopTime("removenote"); - }); - - newNote.on("dragend", function (e) { - e.target.openPopup(); - }); - }); -}); + } +}