X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/d57755b737cbb38a590b0e017a4b5c6c661aea62..565f661f20ad0caca2b91cba4d036ff65ee6e9ec:/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 3df948e6b..841ae1f7b 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -1,253 +1,94 @@ -//= 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 }); - } - - function restoreNewNotes(o) { - var layer = o.object; - layer.addFeatures(newNotes); - newNotes = undefined; - } - - function noteSelected(o) { - var feature = o.feature; - var location = feature.geometry.getBounds().getCenterLonLat(); - var content; - var onClose; - - if (feature.attributes.status === "new") { - content = JST["templates/notes/new"](); - - onClose = function (e) { - feature.attributes.status = "cancelled"; - - map.noteSelector.unselect(feature); - map.noteLayer.removeFeatures(feature); +function initializeNotes(map) { + var noteLayer = map.noteLayer, + notes = {}; + + var noteIcons = { + "new": L.icon({ + iconUrl: "<%= image_path 'new_note_marker.png' %>", + iconSize: [25, 40], + iconAnchor: [12, 40] + }), + "open": L.icon({ + iconUrl: "<%= image_path 'open_note_marker.png' %>", + iconSize: [25, 40], + iconAnchor: [12, 40] + }), + "closed": L.icon({ + iconUrl: "<%= image_path 'closed_note_marker.png' %>", + iconSize: [25, 40], + iconAnchor: [12, 40] + }) + }; + + map.on("layeradd", function (e) { + if (e.layer == noteLayer) { + loadNotes(); + map.on("moveend", loadNotes); + } + }).on("layerremove", function (e) { + if (e.layer == noteLayer) { + map.off("moveend", loadNotes); + noteLayer.clearLayers(); + notes = {}; + } + }); - feature.destroy(); + noteLayer.on('click', function(e) { + OSM.router.route('/note/' + e.layer.id); + }); - map.noteMover.deactivate(); - }; + function updateMarker(marker, feature) { + if (marker) { + marker.setIcon(noteIcons[feature.properties.status]); } else { - content = JST["templates/notes/show"]({ note: feature.attributes }); - - onClose = function (e) { - map.noteSelector.unselect(feature) - }; - }; - - feature.popup = new OpenLayers.Popup.FramedCloud( - feature.attributes.id, location, null, content, null, true, onClose - ); - - map.addPopup(feature.popup); - // feature.popup.show(); - - $(feature.popup.contentDiv).find("textarea").autoGrow(); - - $(feature.popup.contentDiv).find("textarea").on("input", function (e) { - var form = e.target.form; - - if ($(e.target).val() == "") { - $(form.close).val(I18n.t("javascripts.notes.show.close")); - } else { - $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close")); - } - }); - - $(feature.popup.contentDiv).find("input#note-add").click(function (e) { - var location = unproj(feature.geometry.getBounds().getCenterLonLat()); - var form = e.target.form; - - e.preventDefault(); - - $.ajax($("#createnoteanchor").attr("href"), { - type: "POST", - data: { - lon: location.lon, - lat: location.lat, - text: $(form.comment).val() - }, - success: function (data) { - map.noteSelector.unselect(feature); - - feature.attributes.status = "open"; - feature.attributes.id = data; - - map.noteLayer.drawFeature(feature); - - map.noteMover.deactivate(); - } + marker = L.marker(feature.geometry.coordinates.reverse(), { + icon: noteIcons[feature.properties.status], + opacity: 0.8, + clickable: true }); - }); - - $(feature.popup.contentDiv).find("input#note-comment").click(function (e) { - var form = e.target.form; - - e.preventDefault(); - - $.ajax(feature.attributes.comment_url, { - type: "POST", - data: { - text: $(form.text).val() - }, - success: function (data) { - map.noteSelector.unselect(feature) - - feature.attributes = data.properties; - - map.noteSelector.select(feature) - } - }); - }); - - $(feature.popup.contentDiv).find("input#note-close").click(function (e) { - var form = e.target.form; - - e.preventDefault(); - - $.ajax(feature.attributes.close_url, { - type: "POST", - data: { - text: $(form.text).val() - }, - success: function (data) { - map.noteSelector.unselect(feature) - - feature.attributes = data.properties; - - map.noteSelector.select(feature) - } - }); - }); - - feature.popup.updateSize(); + marker.id = feature.properties.id; + marker.addTo(noteLayer); + } + return marker; } - function noteUnselected(o) { - var feature = o.feature; + noteLayer.getLayerId = function(marker) { + return marker.id; + }; - map.removePopup(feature.popup); - } - - 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" - }); - - layer.addFeatures(feature); - map.noteSelector.unselectAll(); - map.noteSelector.select(feature); - map.noteMover.activate(); - map.noteLayer.setVisibility(true); - } + var noteLoader; - $("#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() - }) - }); + function loadNotes() { + var bounds = map.getBounds(); + var size = bounds.getSize(); - 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 (size <= OSM.MAX_NOTE_REQUEST_AREA) { + var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString(); - map.addLayer(map.noteLayer); + if (noteLoader) noteLoader.abort(); - map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, { - autoActivate: true - }); + noteLoader = $.ajax({ + url: url, + success: success + }); + } - map.addControl(map.noteSelector); + function success(json) { + var oldNotes = notes; + notes = {}; + json.features.forEach(updateMarkers); - 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]); - } - } + function updateMarkers(feature) { + var marker = oldNotes[feature.properties.id]; + delete oldNotes[feature.properties.id]; + notes[feature.properties.id] = updateMarker(marker, feature); } - }); - - map.addControl(map.noteMover); - $("#show_notes").click(function (e) { - map.noteLayer.setVisibility(true); - - e.preventDefault(); - }); - - $("#createnoteanchor").click(function (e) { - map.noteLayer.setVisibility(true); - - addNote(); + for (var id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); + } - e.preventDefault(); - }); - }); -}); + noteLoader = null; + } + } +}