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