cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor notes code to work with recent site changes

Browse source
This commit is contained in:
Tom Hughes 2012-10-13 17:16:07 +01:00
parent 0037502426
commit e3d5e3da52
8 changed files with 233 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/application.js
View file

@ -13,7 +13,6 @@
//= require sidebar
//= require richtext
//= require resize
//= require notes
function zoomPrecision(zoom) {
var decimals = Math.pow(10, Math.floor(zoom/3));

1
app/assets/javascripts/index.js
View file

@ -1,6 +1,7 @@
//= require index/browse
//= require index/export
//= require index/key
//= require index/notes
$(document).ready(function () {
var marker;

214
app/assets/javascripts/index/notes.js.erb Normal file
View file

@ -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 = "<h2>Note " + n.id + "</h2>";
n.comments.forEach(function (c) {
description += "<p><small class='deemphasize'>" + c.action + " by ";
description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
});
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();
});
});
});

2
app/assets/javascripts/map.js.erb
View file

@ -81,6 +81,8 @@ function createMap(divName, options) {
map.updateSize();
});
$("#" + divName).trigger("initialised");
return map;
}

227
app/assets/javascripts/notes.js.erb
View file

@ -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 = "<h2>Note " + n.id + "</h2>";
n.comments.forEach(function (c) {
description += "<p><small class='deemphasize'>" + c.action + " by ";
description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
});
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;
}
});

6
app/assets/stylesheets/common.css.scss
View file

@ -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 {

7
app/views/site/index.html.erb
View file

@ -28,7 +28,12 @@
<div id="permalink">
<a href="/" id="permalinkanchor" class="geolink llz layers object"><%= t 'site.index.permalink' %></a>
<a href="/" id="shortlinkanchor"><%= t 'site.index.shortlink' %></a>
<a href="#" id="createnoteanchor">Report a problem</a>
<%= link_to t("site.index.createnote"), notes_url,
:id => "createnoteanchor",
:data => { :minzoom => 12 },
:title => "javascripts.site.createnote_tooltip",
:class => "geolink"
%>
</div>
</div>

4
config/locales/en.yml
View file

@ -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