X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/b97fe91bba29c942a3e5924dd7d81a940e7a1d3b..ef37ad8aaac510d34ccf7f14589c2584fc2b63ac:/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 9f8eb2f54..e540826ec 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -7,23 +7,29 @@ $(document).ready(function () { var noteIcons = { "new": L.icon({ iconUrl: "<%= image_path 'new_note_marker.png' %>", - iconSize: [22, 22], - iconAnchor: [11, 11] + iconSize: [25, 40], + iconAnchor: [12, 40] }), "open": L.icon({ iconUrl: "<%= image_path 'open_note_marker.png' %>", - iconSize: [22, 22], - iconAnchor: [11, 11] + iconSize: [25, 40], + iconAnchor: [12, 40] }), "closed": L.icon({ iconUrl: "<%= image_path 'closed_note_marker.png' %>", - iconSize: [22, 22], - iconAnchor: [11, 11] + iconSize: [25, 40], + iconAnchor: [12, 40] }) }; var noteLayer = new L.LayerGroup(); var notes = {}; + var newNote; + + layers.push({ + layer: noteLayer, + layerCode: "N" + }); map.on("layeradd", function (e) { if (e.layer == noteLayer) { @@ -36,12 +42,30 @@ $(document).ready(function () { if (e.layer == noteLayer) { map.off("moveend", loadNotes); noteLayer.clearLayers(); + notes = {}; + } + }); + + // 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; + }); } }); if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { - map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name")); +// 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) { @@ -60,22 +84,25 @@ $(document).ready(function () { } 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.setPopupContent(createPopupContent( + marker, feature.properties, + $(marker._popup._content).find("textarea").val() + )); } else { marker = L.marker(feature.geometry.coordinates.reverse(), { - icon: icon, - opacity: 0.7 + icon: noteIcons[feature.properties.status], + opacity: 0.9 }); - marker.addTo(noteLayer).bindPopup(popupContent, popupOptions()); + marker.addTo(noteLayer).bindPopup( + createPopupContent(marker, feature.properties), + popupOptions() + ); } return marker; @@ -88,7 +115,7 @@ $(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(); @@ -124,75 +151,93 @@ $(document).ready(function () { minWidth: 320, maxWidth: mapSize.y * 1 / 3, maxHeight: mapSize.y * 2 / 3, - offset: new L.Point(0, -3), + offset: new L.Point(0, -40), autoPanPadding: new L.Point(60, 40) }; } - function createPopupContent(marker, properties) { + 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.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); }); + 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(""); + 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.setPopupContent(popupContent); + } } }); } - $("#createnoteanchor").click(function (e) { + $(".leaflet-control-attribution").on("click", "#createnoteanchor", function (e) { e.preventDefault(); if ($(e.target).hasClass("disabled")) return; @@ -217,9 +262,9 @@ $(document).ready(function () { markerPosition = [mapSize.x / 2, mapSize.y]; } - var marker = L.marker(map.containerPointToLatLng(markerPosition), { + newNote = L.marker(map.containerPointToLatLng(markerPosition), { icon: noteIcons["new"], - opacity: 0.7, + opacity: 0.9, draggable: true }); @@ -237,18 +282,20 @@ $(document).ready(function () { 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(); - - $(".leaflet-popup-close-button").on("click.close", function (e) { - map.removeLayer(marker); + newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); + newNote.on("remove", function (e) { $("#createnoteanchor").removeClass("disabled").addClass("geolink"); }); - marker.on("dragend", function (e) { + newNote.on("dragstart", function (e) { + $(newNote).stopTime("removenote"); + }); + + newNote.on("dragend", function (e) { e.target.openPopup(); }); });