//= 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 });
- }
+function initializeNotes(map) {
+ var noteLayer = map.noteLayer,
+ notes = {},
+ newNote;
+
+ var noteIcons = {
+ "new": L.icon({
+ iconUrl: "<%= image_path 'new_note_marker.png' %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ }),
+ "open": L.icon({
+ iconUrl: "<%= image_path 'open_note_marker.png' %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ }),
+ "closed": L.icon({
+ iconUrl: "<%= image_path 'closed_note_marker.png' %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ })
+ };
+
+ map.on("layeradd", function (e) {
+ if (e.layer == noteLayer) {
+ loadNotes();
+ map.on("moveend", loadNotes);
+ }
+ }).on("layerremove", function (e) {
+ if (e.layer == noteLayer) {
+ map.off("moveend", loadNotes);
+ noteLayer.clearLayers();
+ notes = {};
+ }
+ }).on("popupclose", function (e) {
+ if (newNote && e.popup == newNote._popup) {
+ $(newNote).oneTime(10, "removenote", function () {
+ map.removeLayer(newNote);
+ newNote = null;
+ });
+ }
+ }).on("popupopen", function (e) {
+ if (!('ontouchstart' in document.documentElement)) {
+ $(e.popup._container).find(".comment").focus();
+ }
+ });
- function restoreNewNotes(o) {
- var layer = o.object;
- layer.addFeatures(newNotes);
- newNotes = undefined;
+ noteLayer.showNote = function(id) {
+ $.ajax({
+ url: "/api/" + OSM.API_VERSION + "/notes/" + id + ".json",
+ success: function (feature) {
+ var marker = updateMarker(notes[feature.properties.id], feature);
+ notes[feature.properties.id] = marker;
+ map.addLayer(noteLayer);
+ marker.openPopup();
+ }
+ });
+ };
+
+ function updateMarker(marker, feature) {
+ if (marker) {
+ marker.setIcon(noteIcons[feature.properties.status]);
+ marker.setPopupContent(createPopupContent(
+ marker, feature.properties,
+ $(marker._popup._content).find("textarea").val()
+ ));
+ } else {
+ marker = L.marker(feature.geometry.coordinates.reverse(), {
+ icon: noteIcons[feature.properties.status],
+ opacity: 0.9
+ });
+ marker.addTo(noteLayer).bindPopup(
+ createPopupContent(marker, feature.properties),
+ popupOptions()
+ );
+ }
+ 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"]();
+ var noteLoader;
- onClose = function (e) {
- feature.attributes.status = "cancelled";
+ function loadNotes() {
+ var bounds = map.getBounds();
+ var size = bounds.getSize();
- map.noteSelector.unselect(feature);
- map.noteLayer.removeFeatures(feature);
+ if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
+ var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString();
- feature.destroy();
+ if (noteLoader) noteLoader.abort();
- map.noteMover.deactivate();
- };
- } else {
- content = JST["templates/notes/show"]({ note: feature.attributes });
-
- onClose = function (e) {
- map.noteSelector.unselect(feature)
- };
- };
+ noteLoader = $.ajax({
+ url: url,
+ success: success
+ });
+ }
- feature.popup = new OpenLayers.Popup.FramedCloud(
- feature.attributes.id, location, null, content, null, true, onClose
- );
+ function success(json) {
+ var oldNotes = notes;
+ notes = {};
+ json.features.forEach(updateMarkers);
- map.addPopup(feature.popup);
- // feature.popup.show();
+ function updateMarkers(feature) {
+ var marker = oldNotes[feature.properties.id];
+ delete oldNotes[feature.properties.id];
+ notes[feature.properties.id] = updateMarker(marker, feature);
+ }
- $(feature.popup.contentDiv).find("textarea").autoGrow();
+ for (id in oldNotes) {
+ noteLayer.removeLayer(oldNotes[id]);
+ }
- $(feature.popup.contentDiv).find("input#note-add").click(function (e) {
- var location = unproj(feature.geometry.getBounds().getCenterLonLat());
- var form = e.target.form;
+ noteLoader = null;
+ }
+ };
- e.preventDefault();
+ function popupOptions() {
+ var mapSize = map.getSize();
- $.ajax($("#createnoteanchor").attr("href"), {
- type: "POST",
- data: {
- lon: location.lon,
- lat: location.lat,
- text: $(form.comment).val()
- },
- success: function (data) {
- map.noteSelector.unselect(feature);
+ return {
+ minWidth: 320,
+ maxWidth: mapSize.y * 1 / 3,
+ maxHeight: mapSize.y * 2 / 3,
+ offset: new L.Point(0, -40),
+ autoPanPadding: new L.Point(60, 40)
+ };
+ }
- feature.attributes.status = "open";
- feature.attributes.id = data;
+ function createPopupContent(marker, properties, comment) {
+ var content = $(JST["templates/notes/show"]({ note: properties }));
- map.noteLayer.drawFeature(feature);
+ content.find("textarea").on("input", function (e) {
+ var form = e.target.form;
- map.noteMover.deactivate();
- }
- });
+ if ($(e.target).val() == "") {
+ $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
+ $(form.comment).prop("disabled", true);
+ } else {
+ $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
+ $(form.comment).prop("disabled", false);
+ }
+ });
+ content.find("input[type=submit]").on("click", function (e) {
e.preventDefault();
+ var data = $(e.target).data();
+ updateNote(marker, e.target.form, data.method, data.url);
});
- feature.popup.updateSize();
+ if (comment) {
+ content.find("textarea").val(comment).trigger("input");
+ }
+
+ return content[0];
}
- function noteUnselected(o) {
- var feature = o.feature;
+ var addNoteButton = $(".control-note .control-button");
- map.removePopup(feature.popup);
- }
+ function createNote(marker, form, url) {
+ var location = marker.getLatLng();
- 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.options.draggable = false;
+ marker.dragging.disable();
- layer.addFeatures(feature);
- map.noteSelector.unselectAll();
- map.noteSelector.select(feature);
- map.noteMover.activate();
- map.noteLayer.setVisibility(true);
- }
+ $(form).find("input[type=submit]").prop("disabled", 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()
- })
+ $.ajax({
+ url: url,
+ type: "POST",
+ oauth: true,
+ data: {
+ lat: location.lat,
+ lon: location.lng,
+ text: $(form.text).val()
+ },
+ success: noteCreated
});
- 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);
+ function noteCreated(feature) {
+ $(marker._popup._content).find("textarea").val("");
- map.addLayer(map.noteLayer);
+ notes[feature.properties.id] = updateMarker(marker, feature);
+ newNote = null;
- map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
- autoActivate: true
- });
+ addNoteButton.removeClass("active");
+ }
+ }
- map.addControl(map.noteSelector);
+ function updateNote(marker, form, method, 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: method,
+ oauth: true,
+ data: {
+ text: $(form.text).val()
},
- featureCallbacks: {
- over: function (feature) {
- if (feature.attributes.status === "new") {
- map.noteMover.overFeature.apply(map.noteMover, [feature]);
- }
+ success: function (feature) {
+ if (feature.properties.status == "hidden") {
+ noteLayer.removeLayer(marker);
+
+ delete notes[feature.properties.id];
+ } else {
+ var popupContent = createPopupContent(marker, feature.properties);
+
+ marker.setIcon(noteIcons[feature.properties.status]);
+ marker.setPopupContent(popupContent);
}
}
});
+ }
- map.addControl(map.noteMover);
+ addNoteButton.on("click", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
- $("#show_notes").click(function (e) {
- map.noteLayer.setVisibility(true);
+ if (addNoteButton.hasClass("disabled")) return;
+ if (addNoteButton.hasClass("active")) return;
- e.preventDefault();
+ addNoteButton.addClass("active");
+
+ map.addLayer(noteLayer);
+
+ var mapSize = map.getSize();
+ var markerPosition;
+
+ if (mapSize.y > 800) {
+ markerPosition = [mapSize.x / 2, mapSize.y / 2];
+ } else if (mapSize.y > 400) {
+ markerPosition = [mapSize.x / 2, 400];
+ } else {
+ markerPosition = [mapSize.x / 2, mapSize.y];
+ }
+
+ newNote = L.marker(map.containerPointToLatLng(markerPosition), {
+ icon: noteIcons["new"],
+ opacity: 0.9,
+ draggable: true
});
- $("#createnoteanchor").click(function (e) {
- map.noteLayer.setVisibility(true);
+ var popupContent = $(JST["templates/notes/new"]());
+
+ popupContent.find("textarea").on("input", disableWhenBlank);
- addNote();
+ function disableWhenBlank(e) {
+ $(e.target.form.add).prop("disabled", $(e.target).val() === "");
+ }
+ popupContent.find("input[type=submit]").on("click", function (e) {
e.preventDefault();
+ createNote(newNote, e.target.form, '/api/0.6/notes.json');
+ });
+
+ newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
+
+ newNote.on("remove", function (e) {
+ addNoteButton.removeClass("active");
+ }).on("dragstart", function (e) {
+ $(newNote).stopTime("removenote");
+ }).on("dragend", function (e) {
+ e.target.openPopup();
});
});
-});
+}
projects / rails.git / blobdiff