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

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();
});
});
});