app/assets/javascripts/index/notes.js.erb

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