app/assets/javascripts/notes.js.erb

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