From e3d5e3da52ffdf10445f2d9cdcc8c67633f2dd82 Mon Sep 17 00:00:00 2001 From: Tom Hughes Date: Sat, 13 Oct 2012 17:16:07 +0100 Subject: [PATCH] Refactor notes code to work with recent site changes --- app/assets/javascripts/application.js | 1 - app/assets/javascripts/index.js | 1 + app/assets/javascripts/index/notes.js.erb | 214 ++++++++++++++++++++ app/assets/javascripts/map.js.erb | 2 + app/assets/javascripts/notes.js.erb | 227 ---------------------- app/assets/stylesheets/common.css.scss | 6 + app/views/site/index.html.erb | 7 +- config/locales/en.yml | 4 + 8 files changed, 233 insertions(+), 229 deletions(-) create mode 100644 app/assets/javascripts/index/notes.js.erb delete mode 100644 app/assets/javascripts/notes.js.erb diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 6ee15af5b..c52c072a7 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,7 +13,6 @@ //= require sidebar //= require richtext //= require resize -//= require notes function zoomPrecision(zoom) { var decimals = Math.pow(10, Math.floor(zoom/3)); diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 85f5dab0d..c0decd6a6 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -1,6 +1,7 @@ //= require index/browse //= require index/export //= require index/key +//= require index/notes $(document).ready(function () { var marker; diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb new file mode 100644 index 000000000..674aa9204 --- /dev/null +++ b/app/assets/javascripts/index/notes.js.erb @@ -0,0 +1,214 @@ +$(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 describeNote(n) { + var description = "

Note " + n.id + "

"; + + n.comments.forEach(function (c) { + description += "

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

"; + }); + + return description; + } + + 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; + }; + + feature.popup = new OpenLayers.Popup.FramedCloud( + feature.attributes.id, location, null, content, null, close, + function (e) { map.noteSelector.unselect(feature) } + ); + + map.addPopup(feature.popup); + // feature.popup.show(); + + $(feature.popup.contentDiv).find("textarea").autoGrow(); + + $(feature.popup.contentDiv).find("input#note-submit").click(function (e) { + var location = unproj(feature.geometry.getBounds().getCenterLonLat()); + var form = $(e.target).parents("form").first(); + + $.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); + + feature.attributes.status = "open"; + feature.attributes.id = data; + + map.noteLayer.drawFeature(feature); + + map.noteMover.deactivate(); + } + }); + + e.preventDefault(); + }); + + $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) { + feature.attributes.status = "cancelled"; + + map.noteSelector.unselect(feature); + map.noteLayer.removeFeatures(feature); + + feature.destroy(); + + map.noteMover.deactivate(); + + e.preventDefault(); + }); + + feature.popup.updateSize(); + } + + function noteUnselected(o) { + var feature = o.feature; + + 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); + } + + $("#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); + + map.addLayer(map.noteLayer); + + map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, { + autoActivate: 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); + + e.preventDefault(); + }); + + $("#createnoteanchor").click(function (e) { + map.noteLayer.setVisibility(true); + + addNote(); + + e.preventDefault(); + }); + }); +}); diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index c06c9c8ea..4c1a849dc 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -81,6 +81,8 @@ function createMap(divName, options) { map.updateSize(); }); + $("#" + divName).trigger("initialised"); + return map; } diff --git a/app/assets/javascripts/notes.js.erb b/app/assets/javascripts/notes.js.erb deleted file mode 100644 index 63047b3c9..000000000 --- a/app/assets/javascripts/notes.js.erb +++ /dev/null @@ -1,227 +0,0 @@ -$(document).ready(function () { - var params = OSM.mapParams(); - -// map.noteLayer = addNoteLayer(map, $("#show_notes").attr("href"), $("#createnoteanchor"), $("#new-note"), 11); - - $("#show_notes").click(function () { - map.noteLayer.setVisibility(true); - }); - - if (params.notes) { - map.noteLayer.setVisibility(true); - } - - function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) { - var newNotes; - - var saveNewNotes = function (o) { - var layer = o.object; - newNotes = layer.getFeaturesByAttribute("status", "new") - layer.removeFeatures(newNotes, { silent: true }); - }; - - var restoreNewNotes = function (o) { - var layer = o.object; - layer.addFeatures(newNotes); - newNotes = undefined; - }; - - var describeNote = function (n) { - var description = "

Note " + n.id + "

"; - - n.comments.forEach(function (c) { - description += "

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

"; - }); - - return description; - } - - var noteSelected = function (o) { - var feature = o.feature; - var location = feature.geometry.getBounds().getCenterLonLat(); - var content; - var close; - - if (feature.attributes.status === "new") { - var form = newNoteForm.clone(); - form.removeClass("hidden"); - content = form.html(); - close = false; - } else { - content = describeNote(feature.attributes); - close = true; - }; - - feature.popup = new OpenLayers.Popup.FramedCloud( - feature.attributes.id, location, null, content, null, close, - function (e) { map.noteSelector.unselect(feature) } - ); - - map.addPopup(feature.popup); - // feature.popup.show(); - - $(feature.popup.contentDiv).find("textarea").autoGrow(); - - $(feature.popup.contentDiv).find("input#note-submit").click(function (e) { - var location = unproj(feature.geometry.getBounds().getCenterLonLat()); - var form = $(e.target).parents("form").first(); - - $.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); - - feature.attributes.status = "open"; - feature.attributes.id = data; - - map.noteLayer.drawFeature(feature); - - map.noteMover.deactivate(); - } - }); - - e.preventDefault(); - }); - - $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) { - feature.attributes.status = "cancelled"; - - map.noteSelector.unselect(feature); - map.noteLayer.removeFeatures(feature); - - feature.destroy(); - - map.noteMover.deactivate(); - - e.preventDefault(); - }); - - feature.popup.updateSize(); - }; - - var noteUnselected = function (o) { - var feature = o.feature; - - map.removePopup(feature.popup); - - delete feature.popup; - }; - - var allowNoteReports = function () { - if (map.getZoom() > minZoom) { - newNoteControls.show(); - } else { - newNoteControls.hide(); - } - }; - - var addNote = function () { - 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); - }; - - map.noteLayer = new OpenLayers.Layer.Vector("Notes", { - visibility: false, - 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: notesUrl, - 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); - - map.addLayer(map.noteLayer); - - map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, { - autoActivate: 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); - - newNoteControls.click(addNote); - - map.events.register("zoomend", map, allowNoteReports); - - return map.noteLayer; - } -}); diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index c2b11162c..6ead2220a 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -424,6 +424,12 @@ body.site-export #tabnav a#exportanchor { padding: 5px; } +#permalink a.disabled { + color: #ccc; + cursor: default; + text-decoration: none; +} + /* Rules for edit menu */ .menuicon { diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb index 194787ce0..ab1eaa1dc 100644 --- a/app/views/site/index.html.erb +++ b/app/views/site/index.html.erb @@ -28,7 +28,12 @@ diff --git a/config/locales/en.yml b/config/locales/en.yml index a2687884a..dca41e8db 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1296,6 +1296,7 @@ en: js_2: "OpenStreetMap uses JavaScript for its slippy map." permalink: Permalink shortlink: Shortlink + createnote: Add a note license: copyright: "Copyright OpenStreetMap and contributors, under an open license" license_url: "http://openstreetmap.org/copyright" @@ -2016,6 +2017,9 @@ en: history_tooltip: View edits for this area history_disabled_tooltip: Zoom in to view edits for this area history_zoom_alert: You must zoom in to view edits for this area + createnote_tooltip: Add a note to the map + createnote_disabled_tooltip: Zoom in to add a note to the map + createnote_zoom_alert: You must zoom in to add a note to the map note: closed: Closed Note open: Open Note -- 2.43.2