From: Tom Hughes Date: Sat, 1 Dec 2012 17:46:26 +0000 (+0000) Subject: Rework notes UI using leaflet X-Git-Tag: live~5052^2~65 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/de78176e04961c52f1fa1283812ec06ce6eb90cf Rework notes UI using leaflet --- diff --git a/app/assets/javascripts/browse.js b/app/assets/javascripts/browse.js index fb6d2d304..2934b8bd9 100644 --- a/app/assets/javascripts/browse.js +++ b/app/assets/javascripts/browse.js @@ -45,12 +45,11 @@ $(document).ready(function () { var centre = bbox.getCenter(); updatelinks(centre.lon, centre.lat, 16, null, params.minlon, params.minlat, params.maxlon, params.maxlat); } else if (params.type == "note") { - var centre = new OpenLayers.LonLat(params.lon, params.lat); + map.setView([params.lat, params.lon], 16); - setMapCenter(centre, 16); - addMarkerToMap(centre); + L.marker([params.lat, params.lon], { icon: getUserIcon() }).addTo(map); - var bbox = unproj(map.getExtent()); + var bbox = map.getBounds(); $("#loading").hide(); $("#browse_map .geolink").show(); @@ -59,7 +58,9 @@ $(document).ready(function () { return remoteEditHandler(bbox); }); - updatelinks(centre.lon, centre.lat, 16, null, bbox.left, bbox.bottom, bbox.right, bbox.top) + updatelinks(params.lon, params.lat, 16, null, + bbox.getWestLng(), bbox.getSouthLat(), + bbox.getEastLng(), bbox.getNorthLat()); } else { $("#object_larger_map").hide(); $("#object_edit").hide(); diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb index 5ecaca7dd..876aeb193 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -3,247 +3,184 @@ $(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 createNote(feature, form) { - var location = unproj(feature.geometry.getBounds().getCenterLonLat()); - - $(form).find("input[type=submit]").prop("disabled", true); - - $.ajax($("#createnoteanchor").attr("href"), { - type: "POST", - data: { - lon: location.lon, - lat: location.lat, - text: $(form.text).val() - }, - success: function (data) { - map.noteSelector.unselect(feature); + 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 = {}; + + map.on("layeradd", function (e) { + if (e.layer == noteLayer) { + loadNotes(); + map.on("moveend", loadNotes); + } + }); - feature.attributes = data.properties; + map.on("layerremove", function (e) { + if (e.layer == noteLayer) { + map.off("moveend", loadNotes); + noteLayer.clearLayers(); + } + }); - map.noteLayer.drawFeature(feature); + if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { + map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name")); - map.noteMover.deactivate(); - } - }); + if (params.notes) map.addLayer(noteLayer); } - function updateNote(feature, form, close) { - var url = close ? feature.attributes.close_url : feature.attributes.comment_url; - - $(form).find("input[type=submit]").prop("disabled", true); - - $.ajax(url, { - type: "POST", - data: { - text: $(form.text).val() - }, - success: function (data) { - map.noteSelector.unselect(feature) - - feature.attributes = data.properties; - - map.noteSelector.select(feature) - } - }); + 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); + } + else + { + marker = L.marker(feature.geometry.coordinates.reverse(), { + icon: icon, + opacity: 0.7 + }); + + marker.addTo(noteLayer).bindPopup(popupContent); + } + + return marker; } - 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"](); + function loadNotes() { + var bounds = map.getBounds(); + var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX(); - onClose = function (e) { - feature.attributes.status = "cancelled"; + $.ajax({ + url: url, + success: function (json) { + var oldNotes = notes; - map.noteSelector.unselect(feature); - map.noteLayer.removeFeatures(feature); + notes = {}; - feature.destroy(); + json.features.forEach(function (feature) { + var marker = oldNotes[feature.properties.id]; - map.noteMover.deactivate(); - }; - } else { - content = JST["templates/notes/show"]({ note: feature.attributes }); + delete oldNotes[feature.properties.id]; - onClose = function (e) { - map.noteSelector.unselect(feature) - }; - }; + notes[feature.properties.id] = updateMarker(marker, feature); + }); - feature.popup = new OpenLayers.Popup.FramedCloud( - feature.attributes.id, location, null, content, null, true, onClose - ); - - map.addPopup(feature.popup); - // feature.popup.show(); + for (id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); + } + } + }); + }; - $(feature.popup.contentDiv).find("textarea").autoGrow(); + function createPopupContent(marker, properties) { + var content = $(JST["templates/notes/show"]({ note: properties })); - $(feature.popup.contentDiv).find("textarea").on("input", function (e) { + 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.comment).prop("disabled", true); } else { $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close")); + $(form.comment).prop("disabled", false); } }); - $(feature.popup.contentDiv).find("input#note-add").click(function (e) { + content.find("input[type=submit]").on("click", function (e) { e.preventDefault(); - - createNote(feature, e.target.form); + updateNote(marker, e.target.form, $(e.target).data("url")); }); - $(feature.popup.contentDiv).find("input#note-comment").click(function (e) { - e.preventDefault(); + return content[0]; + } - updateNote(feature, e.target.form, false); - }); + function createNote(marker, form, url) { + var location = marker.getLatLng(); - $(feature.popup.contentDiv).find("input#note-close").click(function (e) { - e.preventDefault(); + $(form).find("input[type=submit]").prop("disabled", true); - updateNote(feature, e.target.form, true); - }); + $.ajax({ + url: url, + type: "POST", + data: { + lat: location.lat, + lon: location.lng, + text: $(form.text).val() + }, + success: function (feature) { + notes[feature.properties.id] = updateMarker(marker, feature); - feature.popup.updateSize(); + $(".leaflet-popup-close-button").off("click.close"); + } + }); } - function noteUnselected(o) { - var feature = o.feature; + function updateNote(marker, form, url) { + $(form).find("input[type=submit]").prop("disabled", true); - map.removePopup(feature.popup); - } + $.ajax({ + url: url, + type: "POST", + data: { + text: $(form.text).val() + }, + success: function (feature) { + var popupContent = createPopupContent(marker, feature.properties); - 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" + marker.setIcon(noteIcons[feature.properties.status]); + marker._popup.setContent(popupContent); + } }); - - layer.addFeatures(feature); - map.noteSelector.unselectAll(); - map.noteSelector.select(feature); - map.noteMover.activate(); - map.noteLayer.setVisibility(true); } - $("#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() - }) - }); - - 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); + $("#createnoteanchor").click(function (e) { + e.preventDefault(); - map.addLayer(map.noteLayer); + map.addLayer(noteLayer); - map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, { - autoActivate: true + var marker = L.marker(map.getCenter(), { + icon: noteIcons["new"], + opacity: 0.7, + draggable: true }); - map.addControl(map.noteSelector); - - 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]); - } - } - } - }); - - map.addControl(map.noteMover); - - $("#show_notes").click(function (e) { - map.noteLayer.setVisibility(true); + var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") })); + popupContent.find("input[type=submit]").on("click", function (e) { e.preventDefault(); + createNote(marker, e.target.form, $(e.target).data("url")); }); - $("#createnoteanchor").click(function (e) { - map.noteLayer.setVisibility(true); + marker.addTo(noteLayer).bindPopup(popupContent[0]).openPopup(); - addNote(); + $(".leaflet-popup-close-button").on("click.close", function (e) { + map.removeLayer(marker); + }); - e.preventDefault(); + marker.on("dragend", function (e) { + e.target.openPopup(); }); }); }); diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index f069eee99..291633f53 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -109,8 +109,6 @@ function createMap(divName, options) { map.invalidateSize(); }); - $("#" + divName).trigger("initialised"); - return map; } diff --git a/app/assets/javascripts/templates/notes/new.jst.ejs b/app/assets/javascripts/templates/notes/new.jst.ejs index a2796a7a2..2c2e77cfe 100644 --- a/app/assets/javascripts/templates/notes/new.jst.ejs +++ b/app/assets/javascripts/templates/notes/new.jst.ejs @@ -1,15 +1,12 @@
-

- <%- I18n.t('javascripts.notes.new.intro_1') %>
- <%- I18n.t('javascripts.notes.new.intro_2') %> -

+

<%- I18n.t('javascripts.notes.new.intro') %>


- +
diff --git a/app/assets/javascripts/templates/notes/show.jst.ejs b/app/assets/javascripts/templates/notes/show.jst.ejs index cf8ea0a40..8b95fea2e 100644 --- a/app/assets/javascripts/templates/notes/show.jst.ejs +++ b/app/assets/javascripts/templates/notes/show.jst.ejs @@ -16,8 +16,8 @@
- - + +
<% } %> diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 413133e45..d0839844c 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -1417,11 +1417,7 @@ abbr.geo { /* Rules for the notes interface */ -.note { - width: 300px; - - .buttons { - margin-top: 5px; - text-align: right; - } +.note .buttons { + margin-top: 5px; + text-align: right; } diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb index 06516a16f..c979c52bb 100644 --- a/app/views/site/index.html.erb +++ b/app/views/site/index.html.erb @@ -2,12 +2,6 @@ <%= javascript_include_tag "index" %> <% end %> -<% unless STATUS == :api_offline or STATUS == :database_offline -%> - <% content_for :editmenu do -%> -
  • <%= link_to t("browse.start_rjs.notes_layer_name"), notes_url(:format => :json), :id => "show_notes" %>
    • - <% end -%> -<% end -%> - <% content_for :left_menu do %>

  • <%= link_to t("site.key.map_key"), {:action => :key}, :id => "open_map_key", :title => t("site.key.map_key_tooltip") %>

    • <% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 806b9ddd3..62b6b90f8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2017,8 +2017,7 @@ en: createnote_zoom_alert: You must zoom in to add a note to the map notes: new: - intro_1: Move the marker to the correct position and - intro_2: "add your comment in the box below:" + intro: "Move the marker to the correct position and add your comment in the box below:" add: Add Note show: title: Note %{id}