X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/98475075c70d19fc04912c12b67a8f9194fc709f..b1308a87be1aaa0c6e5fd27e0635ef22b76e8081:/app/assets/javascripts/index/notes.js.erb?ds=sidebyside diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb index 154c6026d..072890775 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -24,6 +24,7 @@ $(document).ready(function () { var noteLayer = new L.LayerGroup(); var notes = {}; + var newNote; map.on("layeradd", function (e) { if (e.layer == noteLayer) { @@ -36,6 +37,20 @@ $(document).ready(function () { if (e.layer == noteLayer) { map.off("moveend", loadNotes); noteLayer.clearLayers(); + notes = {}; + } + }); + + 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; + }); } }); @@ -43,60 +58,90 @@ $(document).ready(function () { map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name")); 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) { - var icon = noteIcons[feature.properties.status]; - var popupContent = createPopupContent(marker, feature.properties); - if (marker) { marker.setIcon(noteIcons[feature.properties.status]); - marker._popup.setContent(popupContent); + marker._popup.setContent(createPopupContent(marker, feature.properties)); } else { marker = L.marker(feature.geometry.coordinates.reverse(), { - icon: icon, + icon: noteIcons[feature.properties.status], opacity: 0.7 }); - marker.addTo(noteLayer).bindPopup(popupContent, popupOptions()); + marker.addTo(noteLayer).bindPopup( + createPopupContent(marker, feature.properties), + popupOptions() + ); } return marker; } + var noteLoader; + function loadNotes() { var bounds = map.getBounds(); - var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX(); + var size = bounds.getSize(); - $.ajax({ - url: url, - success: function (json) { - var oldNotes = notes; + if (size <= OSM.MAX_NOTE_REQUEST_AREA) { + var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX(); + + if (noteLoader) noteLoader.abort(); + + noteLoader = $.ajax({ + url: url, + success: function (json) { + var oldNotes = notes; - notes = {}; + notes = {}; - json.features.forEach(function (feature) { - var marker = oldNotes[feature.properties.id]; + json.features.forEach(function (feature) { + var marker = oldNotes[feature.properties.id]; - delete oldNotes[feature.properties.id]; + delete oldNotes[feature.properties.id]; - notes[feature.properties.id] = updateMarker(marker, feature); - }); + notes[feature.properties.id] = updateMarker(marker, feature); + }); - for (id in oldNotes) { - noteLayer.removeLayer(oldNotes[id]); + for (id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); + } + + noteLoader = null; } - } - }); + }); + } }; function popupOptions() { var mapSize = map.getSize(); - return { maxHeight: mapSize.y * 2 / 3 }; + return { + minWidth: 320, + maxWidth: mapSize.y * 1 / 3, + maxHeight: mapSize.y * 2 / 3, + offset: new L.Point(0, -3), + autoPanPadding: new L.Point(60, 40) + }; } function createPopupContent(marker, properties) { @@ -106,17 +151,18 @@ $(document).ready(function () { var form = e.target.form; if ($(e.target).val() == "") { - $(form.close).val(I18n.t("javascripts.notes.show.close")); + $(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_close")); + $(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(); - updateNote(marker, e.target.form, $(e.target).data("url")); + var data = $(e.target).data(); + updateNote(marker, e.target.form, data.method, data.url); }); return content[0]; @@ -130,6 +176,7 @@ $(document).ready(function () { $.ajax({ url: url, type: "POST", + oauth: true, data: { lat: location.lat, lon: location.lng, @@ -137,26 +184,34 @@ $(document).ready(function () { }, success: function (feature) { notes[feature.properties.id] = updateMarker(marker, feature); + newNote = null; - $(".leaflet-popup-close-button").off("click.close"); + $("#createnoteanchor").removeClass("disabled").addClass("geolink"); } }); } - function updateNote(marker, form, url) { + function updateNote(marker, form, method, url) { $(form).find("input[type=submit]").prop("disabled", true); $.ajax({ url: url, - type: "POST", + type: method, + oauth: true, data: { text: $(form.text).val() }, success: function (feature) { - var popupContent = createPopupContent(marker, feature.properties); + if (feature.properties.status == "hidden") { + noteLayer.removeLayer(marker); - marker.setIcon(noteIcons[feature.properties.status]); - marker._popup.setContent(popupContent); + delete notes[feature.properties.id]; + } else { + var popupContent = createPopupContent(marker, feature.properties); + + marker.setIcon(noteIcons[feature.properties.status]); + marker._popup.setContent(popupContent); + } } }); } @@ -164,9 +219,29 @@ $(document).ready(function () { $("#createnoteanchor").click(function (e) { e.preventDefault(); + if ($(e.target).hasClass("disabled")) return; + + $(e.target).removeClass("geolink").addClass("disabled"); + map.addLayer(noteLayer); - var marker = L.marker(map.getCenter(), { + 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.7, draggable: true @@ -174,18 +249,32 @@ $(document).ready(function () { 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(marker, e.target.form, $(e.target).data("url")); + createNote(newNote, e.target.form, $(e.target).data("url")); }); - marker.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); + newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); + + newNote.on("remove", function (e) { + $("#createnoteanchor").removeClass("disabled").addClass("geolink"); + }); - $(".leaflet-popup-close-button").on("click.close", function (e) { - map.removeLayer(marker); + newNote.on("dragstart", function (e) { + $(newNote).stopTime("removenote"); }); - marker.on("dragend", function (e) { + newNote.on("dragend", function (e) { e.target.openPopup(); }); });