app/assets/javascripts/notes.js.erb

   1 $(document).ready(function () {
   2   var params = OSM.mapParams();
   3
   4 //  map.noteLayer = addNoteLayer(map, $("#show_notes").attr("href"), $("#createnoteanchor"), $("#new-note"), 11);
   5
   6   $("#show_notes").click(function () {
   7     map.noteLayer.setVisibility(true);
   8   });
   9
  10   if (params.notes) {
  11     map.noteLayer.setVisibility(true);
  12   }
  13
  14   function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
  15     var newNotes;
  16
  17     var saveNewNotes = function (o) {
  18       var layer = o.object;
  19       newNotes = layer.getFeaturesByAttribute("status", "new")
  20       layer.removeFeatures(newNotes, { silent: true });
  21     };
  22
  23     var restoreNewNotes = function (o) {
  24       var layer = o.object;
  25       layer.addFeatures(newNotes);
  26       newNotes = undefined;
  27     };
  28
  29     var describeNote = function (n) {
  30       var description = "<h2>Note " + n.id + "</h2>";
  31
  32       n.comments.forEach(function (c) {
  33         description += "<p><small class='deemphasize'>" + c.action + " by ";
  34         description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
  35       });
  36
  37       return description;
  38     }
  39
  40     var noteSelected = function (o) {
  41       var feature = o.feature;
  42       var location = feature.geometry.getBounds().getCenterLonLat();
  43       var content;
  44       var close;
  45
  46       if (feature.attributes.status === "new") {
  47         var form = newNoteForm.clone();
  48         form.removeClass("hidden");
  49         content = form.html();
  50         close = false;
  51       } else {
  52         content = describeNote(feature.attributes);
  53         close = true;
  54       };
  55
  56       feature.popup = new OpenLayers.Popup.FramedCloud(
  57         feature.attributes.id, location, null, content, null, close,
  58         function (e) { map.noteSelector.unselect(feature) }
  59       );
  60
  61       map.addPopup(feature.popup);
  62       // feature.popup.show();
  63
  64       $(feature.popup.contentDiv).find("textarea").autoGrow();
  65
  66       $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
  67         var location = unproj(feature.geometry.getBounds().getCenterLonLat());
  68         var form = $(e.target).parents("form").first();
  69
  70         $.ajax(form.prop("action"), {
  71           type: form.prop("method"),
  72           data: {
  73             lon: location.lon,
  74             lat: location.lat,
  75             text: form.find("textarea#comment").val()
  76           },
  77           success: function (data) {
  78             map.noteSelector.unselect(feature);
  79
  80             feature.attributes.status = "open";
  81             feature.attributes.id = data;
  82
  83             map.noteLayer.drawFeature(feature);
  84
  85             map.noteMover.deactivate();
  86           }
  87         });
  88
  89         e.preventDefault();
  90       });
  91
  92       $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
  93         feature.attributes.status = "cancelled";
  94
  95         map.noteSelector.unselect(feature);
  96         map.noteLayer.removeFeatures(feature);
  97
  98         feature.destroy();
  99
 100         map.noteMover.deactivate();
 101
 102         e.preventDefault();
 103       });
 104
 105       feature.popup.updateSize();
 106     };
 107
 108     var noteUnselected = function (o) {
 109       var feature = o.feature;
 110
 111       map.removePopup(feature.popup);
 112
 113       delete feature.popup;
 114     };
 115
 116     var allowNoteReports = function () {
 117       if (map.getZoom() > minZoom) {
 118         newNoteControls.show();
 119       } else {
 120         newNoteControls.hide();
 121       }
 122     };
 123
 124     var addNote = function () {
 125       var lonlat = map.getCenter();
 126       var layer = map.noteLayer;
 127       var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
 128       var feature = new OpenLayers.Feature.Vector(geometry, {
 129         status: "new"
 130       });
 131
 132       layer.addFeatures(feature);
 133       map.noteSelector.unselectAll();
 134       map.noteSelector.select(feature);
 135       map.noteMover.activate();
 136       map.noteLayer.setVisibility(true);
 137     };
 138
 139     map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
 140       visibility: false,
 141       displayInLayerSwitcher: false,
 142       projection: new OpenLayers.Projection("EPSG:4326"),
 143       styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
 144         graphicWidth: 22,
 145         graphicHeight: 22,
 146         graphicOpacity: 0.7,
 147         graphicXOffset: -11,
 148         graphicYOffset: -11
 149       }, {
 150         rules: [
 151           new OpenLayers.Rule({
 152             filter: new OpenLayers.Filter.Comparison({
 153               type: OpenLayers.Filter.Comparison.EQUAL_TO,
 154               property: "status",
 155               value: "new"
 156             }),
 157             symbolizer: {
 158               externalGraphic: "<%= image_path 'new_note_marker.png' %>"
 159             }
 160           }),
 161           new OpenLayers.Rule({
 162             filter: new OpenLayers.Filter.Comparison({
 163               type: OpenLayers.Filter.Comparison.EQUAL_TO,
 164               property: "status",
 165               value: "open"
 166             }),
 167             symbolizer: {
 168               externalGraphic: "<%= image_path 'open_note_marker.png' %>"
 169             }
 170           }),
 171           new OpenLayers.Rule({
 172             filter: new OpenLayers.Filter.Comparison({
 173               type: OpenLayers.Filter.Comparison.EQUAL_TO,
 174               property: "status",
 175               value: "closed"
 176             }),
 177             symbolizer: {
 178               externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
 179             }
 180           })
 181         ]
 182       })),
 183       strategies: [
 184         new OpenLayers.Strategy.BBOX()
 185       ],
 186       protocol: new OpenLayers.Protocol.HTTP({
 187         url: notesUrl,
 188         format: new OpenLayers.Format.GeoJSON()
 189       })
 190     });
 191
 192     map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
 193     map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
 194     map.noteLayer.events.register("featureselected", map, noteSelected);
 195     map.noteLayer.events.register("featureunselected", map, noteUnselected);
 196
 197     map.addLayer(map.noteLayer);
 198
 199     map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
 200       autoActivate: true
 201     });
 202
 203     map.addControl(map.noteSelector);
 204
 205     map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
 206       onDrag: function (feature, pixel) {
 207         feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
 208         feature.popup.updatePosition();
 209       },
 210       featureCallbacks: {
 211         over: function (feature) {
 212           if (feature.attributes.status === "new") {
 213             map.noteMover.overFeature.apply(map.noteMover, [feature]);
 214           }
 215         }
 216       }
 217     });
 218
 219     map.addControl(map.noteMover);
 220
 221     newNoteControls.click(addNote);
 222
 223     map.events.register("zoomend", map, allowNoteReports);
 224
 225     return map.noteLayer;
 226   }
 227 });