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