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