X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/52611a5bfa69165179bd871b925b5f8b14942e2e..c8f8dbca19f9f1ed3539f93e1785d4de70f2b093:/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 072890775..3a2a15393 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -1,72 +1,62 @@ //= require templates/notes/show //= require templates/notes/new -$(document).ready(function () { - var params = OSM.mapParams(); +function initializeNotes(map) { + var params = OSM.mapParams(), + noteLayer = map.noteLayer, + notes = {}, + newNote; 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; - 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(); notes = {}; } - }); - - map.on("popupopen", function (e) { - $(e.popup._container).find(".comment").focus(); - }); - - map.on("popupclose", function (e) { + }).on("popupclose", function (e) { if (newNote && e.popup == newNote._popup) { $(newNote).oneTime(10, "removenote", function () { map.removeLayer(newNote); newNote = null; }); } + }).on("popupopen", function (e) { + if (!('ontouchstart' in document.documentElement)) { + $(e.popup._container).find(".comment").focus(); + } }); if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { - map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name")); - - if (params.notes) map.addLayer(noteLayer); - + if (params.notes || params.layers.indexOf('N') >= 0) 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(); } @@ -75,24 +65,22 @@ $(document).ready(function () { } function updateMarker(marker, feature) { - if (marker) - { + if (marker) { marker.setIcon(noteIcons[feature.properties.status]); - marker._popup.setContent(createPopupContent(marker, feature.properties)); - } - else - { + marker.setPopupContent(createPopupContent( + marker, feature.properties, + $(marker._popup._content).find("textarea").val() + )); + } else { marker = L.marker(feature.geometry.coordinates.reverse(), { icon: noteIcons[feature.properties.status], - opacity: 0.7 + opacity: 0.9 }); - marker.addTo(noteLayer).bindPopup( createPopupContent(marker, feature.properties), popupOptions() ); } - return marker; } @@ -103,32 +91,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]; + success: success + }); + } - delete oldNotes[feature.properties.id]; + function success(json) { + var oldNotes = notes; + notes = {}; + json.features.forEach(updateMarkers); - notes[feature.properties.id] = updateMarker(marker, feature); - }); + function updateMarkers(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]); - } + for (id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); + } - noteLoader = null; - } - }); + noteLoader = null; } }; @@ -139,12 +127,12 @@ $(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) { @@ -165,12 +153,19 @@ $(document).ready(function () { 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({ @@ -182,13 +177,17 @@ $(document).ready(function () { lon: location.lng, text: $(form.text).val() }, - success: function (feature) { - notes[feature.properties.id] = updateMarker(marker, feature); - newNote = null; - - $("#createnoteanchor").removeClass("disabled").addClass("geolink"); - } + success: noteCreated }); + + function noteCreated(feature) { + $(marker._popup._content).find("textarea").val(""); + + notes[feature.properties.id] = updateMarker(marker, feature); + newNote = null; + + $("#createnoteanchor").removeClass("disabled").addClass("geolink"); + } } function updateNote(marker, form, method, url) { @@ -210,13 +209,13 @@ $(document).ready(function () { var popupContent = createPopupContent(marker, feature.properties); marker.setIcon(noteIcons[feature.properties.status]); - marker._popup.setContent(popupContent); + marker.setPopupContent(popupContent); } } }); } - $("#createnoteanchor").click(function (e) { + $(".leaflet-control-attribution").on("click", "#createnoteanchor", function (e) { e.preventDefault(); if ($(e.target).hasClass("disabled")) return; @@ -228,36 +227,29 @@ $(document).ready(function () { var mapSize = map.getSize(); var markerPosition; - if (mapSize.y > 800) - { + if (mapSize.y > 800) { markerPosition = [mapSize.x / 2, mapSize.y / 2]; - } - else if (mapSize.y > 400) - { + } else if (mapSize.y > 400) { markerPosition = [mapSize.x / 2, 400]; - } - else - { + } else { markerPosition = [mapSize.x / 2, mapSize.y]; } newNote = L.marker(map.containerPointToLatLng(markerPosition), { icon: noteIcons["new"], - opacity: 0.7, + opacity: 0.9, draggable: true }); - var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") })); + var popupContent = $(JST["templates/notes/new"]({ + create_url: $(e.target).attr("href") + })); - popupContent.find("textarea").on("input", function (e) { - var form = e.target.form; + popupContent.find("textarea").on("input", disableWhenBlank); - if ($(e.target).val() == "") { - $(form.add).prop("disabled", true); - } else { - $(form.add).prop("disabled", false); - } - }); + function disableWhenBlank(e) { + $(e.target.form).prop("disabled", $(e.target).val() === ""); + } popupContent.find("input[type=submit]").on("click", function (e) { e.preventDefault(); @@ -268,14 +260,10 @@ $(document).ready(function () { newNote.on("remove", function (e) { $("#createnoteanchor").removeClass("disabled").addClass("geolink"); - }); - - newNote.on("dragstart", function (e) { + }).on("dragstart", function (e) { $(newNote).stopTime("removenote"); - }); - - newNote.on("dragend", function (e) { + }).on("dragend", function (e) { e.target.openPopup(); }); }); -}); +}