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