+//= 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 });
- }
+ 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);
+ }
+ });
+
+ map.on("layerremove", function (e) {
+ if (e.layer == noteLayer) {
+ map.off("moveend", loadNotes);
+ noteLayer.clearLayers();
+ }
+ });
+
+ if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
+ map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name"));
- function restoreNewNotes(o) {
- var layer = o.object;
- layer.addFeatures(newNotes);
- newNotes = undefined;
+ if (params.notes) map.addLayer(noteLayer);
}
- function describeNote(n) {
- var description = "<h2>Note " + n.id + "</h2>";
+ 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
+ });
- n.comments.forEach(function (c) {
- description += "<p><small class='deemphasize'>" + c.action + " by ";
- description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
- });
+ marker.addTo(noteLayer).bindPopup(popupContent, popupOptions());
+ }
- return description;
+ return marker;
}
- 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();
- }
- });
+ var noteLoader;
- e.preventDefault();
- });
+ function loadNotes() {
+ var bounds = map.getBounds();
+ var size = bounds.getSize();
- $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
- feature.attributes.status = "cancelled";
+ if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
+ var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX();
- map.noteSelector.unselect(feature);
- map.noteLayer.removeFeatures(feature);
+ if (noteLoader) noteLoader.abort();
- feature.destroy();
+ noteLoader = $.ajax({
+ url: url,
+ success: function (json) {
+ var oldNotes = notes;
- map.noteMover.deactivate();
+ notes = {};
- e.preventDefault();
- });
+ json.features.forEach(function (feature) {
+ var marker = oldNotes[feature.properties.id];
- feature.popup.updateSize();
- }
+ delete oldNotes[feature.properties.id];
+
+ notes[feature.properties.id] = updateMarker(marker, feature);
+ });
+
+ for (id in oldNotes) {
+ noteLayer.removeLayer(oldNotes[id]);
+ }
+
+ noteLoader = null;
+ }
+ });
+ }
+ };
- function noteUnselected(o) {
- var feature = o.feature;
+ function popupOptions() {
+ var mapSize = map.getSize();
- map.removePopup(feature.popup);
+ return { maxHeight: mapSize.y * 2 / 3, autoPanPadding: new L.Point(60, 40) };
}
- 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"
+ function createPopupContent(marker, properties) {
+ var content = $(JST["templates/notes/show"]({ note: properties }));
+
+ 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);
+ }
+ });
+
+ content.find("input[type=submit]").on("click", function (e) {
+ e.preventDefault();
+ updateNote(marker, e.target.form, $(e.target).data("url"));
});
- layer.addFeatures(feature);
- map.noteSelector.unselectAll();
- map.noteSelector.select(feature);
- map.noteMover.activate();
- map.noteLayer.setVisibility(true);
+ return content[0];
}
- $("#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 createNote(marker, form, url) {
+ var location = marker.getLatLng();
- 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);
+ $(form).find("input[type=submit]").prop("disabled", true);
- map.addLayer(map.noteLayer);
+ $.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);
- map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
- autoActivate: true
+ $(".leaflet-popup-close-button").off("click.close");
+ }
});
+ }
- map.addControl(map.noteSelector);
+ function updateNote(marker, form, url) {
+ $(form).find("input[type=submit]").prop("disabled", true);
- map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
- onDrag: function (feature, pixel) {
- feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
- feature.popup.updatePosition();
+ $.ajax({
+ url: url,
+ type: "POST",
+ data: {
+ text: $(form.text).val()
},
- featureCallbacks: {
- over: function (feature) {
- if (feature.attributes.status === "new") {
- map.noteMover.overFeature.apply(map.noteMover, [feature]);
- }
- }
+ success: function (feature) {
+ var popupContent = createPopupContent(marker, feature.properties);
+
+ marker.setIcon(noteIcons[feature.properties.status]);
+ marker._popup.setContent(popupContent);
}
});
+ }
+
+ $("#createnoteanchor").click(function (e) {
+ e.preventDefault();
- map.addControl(map.noteMover);
+ if ($(e.target).hasClass("disabled")) return;
- $("#show_notes").click(function (e) {
- map.noteLayer.setVisibility(true);
+ map.addLayer(noteLayer);
+ var marker = L.marker(map.getCenter(), {
+ icon: noteIcons["new"],
+ opacity: 0.7,
+ draggable: 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], popupOptions()).openPopup();
- addNote();
+ $(".leaflet-popup-close-button").on("click.close", function (e) {
+ map.removeLayer(marker);
+ });
- e.preventDefault();
+ marker.on("dragend", function (e) {
+ e.target.openPopup();
});
});
});
projects / rails.git / blobdiff