X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/e3d5e3da52ffdf10445f2d9cdcc8c67633f2dd82..47a75be1c724bd450cf34da94863f62cb5d8b545:/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 674aa9204..072890775 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -1,214 +1,281 @@ +//= require templates/notes/show +//= require templates/notes/new + $(document).ready(function () { var params = OSM.mapParams(); - var newNotes; - function saveNewNotes(o) { - var layer = o.object; - newNotes = layer.getFeaturesByAttribute("status", "new") - layer.removeFeatures(newNotes, { silent: true }); - } + var noteIcons = { + "new": L.icon({ + iconUrl: "<%= image_path 'new_note_marker.png' %>", + iconSize: [22, 22], + iconAnchor: [11, 11] + }), + "open": L.icon({ + iconUrl: "<%= image_path 'open_note_marker.png' %>", + iconSize: [22, 22], + iconAnchor: [11, 11] + }), + "closed": L.icon({ + iconUrl: "<%= image_path 'closed_note_marker.png' %>", + iconSize: [22, 22], + iconAnchor: [11, 11] + }) + }; + + 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) { + 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; + }); + } + }); + + 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.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; - function restoreNewNotes(o) { - var layer = o.object; - layer.addFeatures(newNotes); - newNotes = undefined; + map.addLayer(noteLayer); + marker.openPopup(); + } + }); + } } - function describeNote(n) { - var description = "

Note " + n.id + "

"; + function updateMarker(marker, feature) { + if (marker) + { + marker.setIcon(noteIcons[feature.properties.status]); + marker._popup.setContent(createPopupContent(marker, feature.properties)); + } + else + { + marker = L.marker(feature.geometry.coordinates.reverse(), { + icon: noteIcons[feature.properties.status], + opacity: 0.7 + }); - n.comments.forEach(function (c) { - description += "

" + c.action + " by "; - description += c.user + " at " + c.date + "
" + c.text + "

"; - }); + marker.addTo(noteLayer).bindPopup( + createPopupContent(marker, feature.properties), + popupOptions() + ); + } - return description; + return marker; } - function noteSelected(o) { - var feature = o.feature; - var location = feature.geometry.getBounds().getCenterLonLat(); - var content; - var close; - - if (feature.attributes.status === "new") { - var form = $("#new-note").clone(); - form.removeClass("hidden"); - content = form.html(); - close = false; - } else { - content = describeNote(feature.attributes); - close = true; - }; + var noteLoader; + + function loadNotes() { + var bounds = map.getBounds(); + var size = bounds.getSize(); - feature.popup = new OpenLayers.Popup.FramedCloud( - feature.attributes.id, location, null, content, null, close, - function (e) { map.noteSelector.unselect(feature) } - ); + if (size <= OSM.MAX_NOTE_REQUEST_AREA) { + var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX(); - map.addPopup(feature.popup); - // feature.popup.show(); + if (noteLoader) noteLoader.abort(); - $(feature.popup.contentDiv).find("textarea").autoGrow(); + noteLoader = $.ajax({ + url: url, + success: function (json) { + var oldNotes = notes; - $(feature.popup.contentDiv).find("input#note-submit").click(function (e) { - var location = unproj(feature.geometry.getBounds().getCenterLonLat()); - var form = $(e.target).parents("form").first(); + notes = {}; - $.ajax(form.prop("action"), { - type: form.prop("method"), - data: { - lon: location.lon, - lat: location.lat, - text: form.find("textarea#comment").val() - }, - success: function (data) { - map.noteSelector.unselect(feature); + json.features.forEach(function (feature) { + var marker = oldNotes[feature.properties.id]; - feature.attributes.status = "open"; - feature.attributes.id = data; + delete oldNotes[feature.properties.id]; - map.noteLayer.drawFeature(feature); + notes[feature.properties.id] = updateMarker(marker, feature); + }); - map.noteMover.deactivate(); + for (id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); + } + + noteLoader = null; } }); + } + }; + + function popupOptions() { + var mapSize = map.getSize(); + + 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) { + 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); }); - $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) { - feature.attributes.status = "cancelled"; + return content[0]; + } - map.noteSelector.unselect(feature); - map.noteLayer.removeFeatures(feature); + function createNote(marker, form, url) { + var location = marker.getLatLng(); - feature.destroy(); + $(form).find("input[type=submit]").prop("disabled", true); - map.noteMover.deactivate(); + $.ajax({ + url: url, + type: "POST", + oauth: true, + data: { + lat: location.lat, + lon: location.lng, + text: $(form.text).val() + }, + success: function (feature) { + notes[feature.properties.id] = updateMarker(marker, feature); + newNote = null; - e.preventDefault(); + $("#createnoteanchor").removeClass("disabled").addClass("geolink"); + } }); - - feature.popup.updateSize(); } - function noteUnselected(o) { - var feature = o.feature; + function updateNote(marker, form, method, url) { + $(form).find("input[type=submit]").prop("disabled", true); - map.removePopup(feature.popup); - } + $.ajax({ + url: url, + type: method, + oauth: true, + data: { + text: $(form.text).val() + }, + success: function (feature) { + if (feature.properties.status == "hidden") { + noteLayer.removeLayer(marker); - function addNote() { - var lonlat = map.getCenter(); - var layer = map.noteLayer; - var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); - var feature = new OpenLayers.Feature.Vector(geometry, { - status: "new" - }); + delete notes[feature.properties.id]; + } else { + var popupContent = createPopupContent(marker, feature.properties); - layer.addFeatures(feature); - map.noteSelector.unselectAll(); - map.noteSelector.select(feature); - map.noteMover.activate(); - map.noteLayer.setVisibility(true); + marker.setIcon(noteIcons[feature.properties.status]); + marker._popup.setContent(popupContent); + } + } + }); } - $("#map").on("initialised", function () { - map.noteLayer = new OpenLayers.Layer.Vector("Notes", { - visibility: params.notes, - displayInLayerSwitcher: false, - projection: new OpenLayers.Projection("EPSG:4326"), - styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({ - graphicWidth: 22, - graphicHeight: 22, - graphicOpacity: 0.7, - graphicXOffset: -11, - graphicYOffset: -11 - }, { - rules: [ - new OpenLayers.Rule({ - filter: new OpenLayers.Filter.Comparison({ - type: OpenLayers.Filter.Comparison.EQUAL_TO, - property: "status", - value: "new" - }), - symbolizer: { - externalGraphic: "<%= image_path 'new_note_marker.png' %>" - } - }), - new OpenLayers.Rule({ - filter: new OpenLayers.Filter.Comparison({ - type: OpenLayers.Filter.Comparison.EQUAL_TO, - property: "status", - value: "open" - }), - symbolizer: { - externalGraphic: "<%= image_path 'open_note_marker.png' %>" - } - }), - new OpenLayers.Rule({ - filter: new OpenLayers.Filter.Comparison({ - type: OpenLayers.Filter.Comparison.EQUAL_TO, - property: "status", - value: "closed" - }), - symbolizer: { - externalGraphic: "<%= image_path 'closed_note_marker.png' %>" - } - }) - ] - })), - strategies: [ - new OpenLayers.Strategy.BBOX() - ], - protocol: new OpenLayers.Protocol.HTTP({ - url: $("#show_notes").attr("href"), - format: new OpenLayers.Format.GeoJSON() - }) - }); + $("#createnoteanchor").click(function (e) { + e.preventDefault(); - map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes); - map.noteLayer.events.register("featuresremoved", map, restoreNewNotes); - map.noteLayer.events.register("featureselected", map, noteSelected); - map.noteLayer.events.register("featureunselected", map, noteUnselected); + if ($(e.target).hasClass("disabled")) return; - map.addLayer(map.noteLayer); + $(e.target).removeClass("geolink").addClass("disabled"); - map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, { - autoActivate: true - }); + map.addLayer(noteLayer); - map.addControl(map.noteSelector); + var mapSize = map.getSize(); + var markerPosition; - map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, { - onDrag: function (feature, pixel) { - feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat(); - feature.popup.updatePosition(); - }, - featureCallbacks: { - over: function (feature) { - if (feature.attributes.status === "new") { - map.noteMover.overFeature.apply(map.noteMover, [feature]); - } - } - } + 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 }); - map.addControl(map.noteMover); + var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") })); - $("#show_notes").click(function (e) { - map.noteLayer.setVisibility(true); + 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")); }); - $("#createnoteanchor").click(function (e) { - map.noteLayer.setVisibility(true); + newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); + + newNote.on("remove", function (e) { + $("#createnoteanchor").removeClass("disabled").addClass("geolink"); + }); - addNote(); + newNote.on("dragstart", function (e) { + $(newNote).stopTime("removenote"); + }); - e.preventDefault(); + newNote.on("dragend", function (e) { + e.target.openPopup(); }); }); });