//= 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 restoreNewNotes(o) { var layer = o.object; layer.addFeatures(newNotes); newNotes = undefined; } 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"](); onClose = function (e) { feature.attributes.status = "cancelled"; map.noteSelector.unselect(feature); map.noteLayer.removeFeatures(feature); feature.destroy(); map.noteMover.deactivate(); }; } else { content = JST["templates/notes/show"]({ note: feature.attributes }); onClose = function (e) { map.noteSelector.unselect(feature) }; }; feature.popup = new OpenLayers.Popup.FramedCloud( feature.attributes.id, location, null, content, null, true, onClose ); map.addPopup(feature.popup); // feature.popup.show(); $(feature.popup.contentDiv).find("textarea").autoGrow(); $(feature.popup.contentDiv).find("textarea").on("input", function (e) { var form = e.target.form; if ($(e.target).val() == "") { $(form.close).val(I18n.t("javascripts.notes.show.close")); } else { $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close")); } }); $(feature.popup.contentDiv).find("input#note-add").click(function (e) { var location = unproj(feature.geometry.getBounds().getCenterLonLat()); var form = e.target.form; e.preventDefault(); $.ajax($("#createnoteanchor").attr("href"), { type: "POST", data: { lon: location.lon, lat: location.lat, text: $(form.comment).val() }, success: function (data) { map.noteSelector.unselect(feature); feature.attributes.status = "open"; feature.attributes.id = data; map.noteLayer.drawFeature(feature); map.noteMover.deactivate(); } }); }); $(feature.popup.contentDiv).find("input#note-comment").click(function (e) { var form = e.target.form; e.preventDefault(); $.ajax(feature.attributes.comment_url, { type: "POST", data: { text: $(form.text).val() }, success: function (data) { map.noteSelector.unselect(feature) feature.attributes = data.properties; map.noteSelector.select(feature) } }); }); $(feature.popup.contentDiv).find("input#note-close").click(function (e) { var form = e.target.form; e.preventDefault(); $.ajax(feature.attributes.close_url, { type: "POST", data: { text: $(form.text).val() }, success: function (data) { map.noteSelector.unselect(feature) feature.attributes = data.properties; map.noteSelector.select(feature) } }); }); 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(); }); }); });