Refactor notes code to work with recent site changes
authorTom Hughes <tom@compton.nu>
Sat, 13 Oct 2012 16:16:07 +0000 (17:16 +0100)
committerTom Hughes <tom@compton.nu>
Sat, 13 Oct 2012 16:16:07 +0000 (17:16 +0100)
app/assets/javascripts/application.js
app/assets/javascripts/index.js
app/assets/javascripts/index/notes.js.erb [new file with mode: 0644]
app/assets/javascripts/map.js.erb
app/assets/javascripts/notes.js.erb [deleted file]
app/assets/stylesheets/common.css.scss
app/views/site/index.html.erb
config/locales/en.yml

index 6ee15af5b8d98f8e559e674a3952123a0d24cc4d..c52c072a754fa941a33b61b920aebe96e7b3ffe0 100644 (file)
@@ -13,7 +13,6 @@
 //= require sidebar
 //= require richtext
 //= require resize
-//= require notes
 
 function zoomPrecision(zoom) {
     var decimals = Math.pow(10, Math.floor(zoom/3));
index 85f5dab0dac16bf5e958e4b90a9fe8f5204cbba5..c0decd6a6ce9a9af8e3bdc0a3eaffd8cae490af8 100644 (file)
@@ -1,6 +1,7 @@
 //= require index/browse
 //= require index/export
 //= require index/key
+//= require index/notes
 
 $(document).ready(function () {
   var marker;
diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
new file mode 100644 (file)
index 0000000..674aa92
--- /dev/null
@@ -0,0 +1,214 @@
+$(document).ready(function () {
+  var params = OSM.mapParams();
+  var newNotes;
+
+  function saveNewNotes(o) {
+    var layer = o.object;
+    newNotes = layer.getFeaturesByAttribute("status", "new")
+    layer.removeFeatures(newNotes, { silent: true });
+  }
+
+  function restoreNewNotes(o) {
+    var layer = o.object;
+    layer.addFeatures(newNotes);
+    newNotes = undefined;
+  }
+
+  function describeNote(n) {
+    var description = "<h2>Note " + n.id + "</h2>";
+
+    n.comments.forEach(function (c) {
+      description += "<p><small class='deemphasize'>" + c.action + " by ";
+      description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
+    });
+
+    return description;
+  }
+
+  function noteSelected(o) {
+    var feature = o.feature;
+    var location = feature.geometry.getBounds().getCenterLonLat();
+    var content;
+    var close;
+
+    if (feature.attributes.status === "new") {
+      var form = $("#new-note").clone();
+      form.removeClass("hidden");
+      content = form.html();
+      close = false;
+    } else {
+      content = describeNote(feature.attributes);
+      close = true;
+    };
+
+    feature.popup = new OpenLayers.Popup.FramedCloud(
+      feature.attributes.id, location, null, content, null, close,
+      function (e) { map.noteSelector.unselect(feature) }
+    );
+
+    map.addPopup(feature.popup);
+    // feature.popup.show();
+
+    $(feature.popup.contentDiv).find("textarea").autoGrow();
+
+    $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
+      var location = unproj(feature.geometry.getBounds().getCenterLonLat());
+      var form = $(e.target).parents("form").first();
+
+      $.ajax(form.prop("action"), {
+        type: form.prop("method"),
+        data: {
+          lon: location.lon,
+          lat: location.lat,
+          text: form.find("textarea#comment").val()
+        },
+        success: function (data) {
+          map.noteSelector.unselect(feature);
+
+          feature.attributes.status = "open";
+          feature.attributes.id = data;
+
+          map.noteLayer.drawFeature(feature);
+
+          map.noteMover.deactivate();
+        }
+      });
+
+      e.preventDefault();
+    });
+
+    $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
+      feature.attributes.status = "cancelled";
+
+      map.noteSelector.unselect(feature);
+      map.noteLayer.removeFeatures(feature);
+
+      feature.destroy();
+
+      map.noteMover.deactivate();
+
+      e.preventDefault();
+    });
+
+    feature.popup.updateSize();
+  }
+
+  function noteUnselected(o) {
+    var feature = o.feature;
+
+    map.removePopup(feature.popup);
+  }
+
+  function addNote() {
+    var lonlat = map.getCenter();
+    var layer = map.noteLayer;
+    var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
+    var feature = new OpenLayers.Feature.Vector(geometry, {
+      status: "new"
+    });
+
+    layer.addFeatures(feature);
+    map.noteSelector.unselectAll();
+    map.noteSelector.select(feature);
+    map.noteMover.activate();
+    map.noteLayer.setVisibility(true);
+  }
+
+  $("#map").on("initialised", function () {
+    map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
+      visibility: params.notes,
+      displayInLayerSwitcher: false,
+      projection: new OpenLayers.Projection("EPSG:4326"),
+      styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
+        graphicWidth: 22,
+        graphicHeight: 22,
+        graphicOpacity: 0.7,
+        graphicXOffset: -11,
+        graphicYOffset: -11
+      }, {
+        rules: [
+          new OpenLayers.Rule({
+            filter: new OpenLayers.Filter.Comparison({
+              type: OpenLayers.Filter.Comparison.EQUAL_TO,
+              property: "status",
+              value: "new"
+            }),
+            symbolizer: {
+              externalGraphic: "<%= image_path 'new_note_marker.png' %>"
+            }
+          }),
+          new OpenLayers.Rule({
+            filter: new OpenLayers.Filter.Comparison({
+              type: OpenLayers.Filter.Comparison.EQUAL_TO,
+              property: "status",
+              value: "open"
+            }),
+            symbolizer: {
+              externalGraphic: "<%= image_path 'open_note_marker.png' %>"
+            }
+          }),
+          new OpenLayers.Rule({
+            filter: new OpenLayers.Filter.Comparison({
+              type: OpenLayers.Filter.Comparison.EQUAL_TO,
+              property: "status",
+              value: "closed"
+            }),
+            symbolizer: {
+              externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
+            }
+          })
+        ]
+      })),
+      strategies: [
+        new OpenLayers.Strategy.BBOX()
+      ],
+      protocol: new OpenLayers.Protocol.HTTP({
+        url: $("#show_notes").attr("href"),
+        format: new OpenLayers.Format.GeoJSON()
+      })
+    });
+
+    map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
+    map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
+    map.noteLayer.events.register("featureselected", map, noteSelected);
+    map.noteLayer.events.register("featureunselected", map, noteUnselected);
+
+    map.addLayer(map.noteLayer);
+
+    map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
+      autoActivate: true
+    });
+
+    map.addControl(map.noteSelector);
+
+    map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
+      onDrag: function (feature, pixel) {
+        feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
+        feature.popup.updatePosition();
+      },
+      featureCallbacks: {
+        over: function (feature) {
+          if (feature.attributes.status === "new") {
+            map.noteMover.overFeature.apply(map.noteMover, [feature]);
+          }
+        }
+      }
+    });
+
+    map.addControl(map.noteMover);
+
+    $("#show_notes").click(function (e) {
+      map.noteLayer.setVisibility(true);
+
+      e.preventDefault();
+    });
+
+    $("#createnoteanchor").click(function (e) {
+      map.noteLayer.setVisibility(true);
+
+      addNote();
+
+      e.preventDefault();
+    });
+  });
+});
index c06c9c8eaf809cf0aecc9733da766b0458aeff2a..4c1a849dc25d5f4a4572ac74e649515a378eb0e1 100644 (file)
@@ -81,6 +81,8 @@ function createMap(divName, options) {
      map.updateSize();
    });
 
+   $("#" + divName).trigger("initialised");
+
    return map;
 }
 
diff --git a/app/assets/javascripts/notes.js.erb b/app/assets/javascripts/notes.js.erb
deleted file mode 100644 (file)
index 63047b3..0000000
+++ /dev/null
@@ -1,227 +0,0 @@
-$(document).ready(function () {
-  var params = OSM.mapParams();
-
-//  map.noteLayer = addNoteLayer(map, $("#show_notes").attr("href"), $("#createnoteanchor"), $("#new-note"), 11);
-
-  $("#show_notes").click(function () {
-    map.noteLayer.setVisibility(true);
-  });
-
-  if (params.notes) {
-    map.noteLayer.setVisibility(true);
-  }
-
-  function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
-    var newNotes;
-
-    var saveNewNotes = function (o) {
-      var layer = o.object;
-      newNotes = layer.getFeaturesByAttribute("status", "new")
-      layer.removeFeatures(newNotes, { silent: true });
-    };
-
-    var restoreNewNotes = function (o) {
-      var layer = o.object;
-      layer.addFeatures(newNotes);
-      newNotes = undefined;
-    };
-
-    var describeNote = function (n) {
-      var description = "<h2>Note " + n.id + "</h2>";
-
-      n.comments.forEach(function (c) {
-        description += "<p><small class='deemphasize'>" + c.action + " by ";
-        description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
-      });
-
-      return description;
-    }
-
-    var noteSelected = function (o) {
-      var feature = o.feature;
-      var location = feature.geometry.getBounds().getCenterLonLat();
-      var content;
-      var close;
-
-      if (feature.attributes.status === "new") {
-        var form = newNoteForm.clone();
-        form.removeClass("hidden");
-        content = form.html();
-        close = false;
-      } else {
-        content = describeNote(feature.attributes);
-        close = true;
-      };
-
-      feature.popup = new OpenLayers.Popup.FramedCloud(
-        feature.attributes.id, location, null, content, null, close,
-        function (e) { map.noteSelector.unselect(feature) }
-      );
-
-      map.addPopup(feature.popup);
-      // feature.popup.show();
-
-      $(feature.popup.contentDiv).find("textarea").autoGrow();
-
-      $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
-        var location = unproj(feature.geometry.getBounds().getCenterLonLat());
-        var form = $(e.target).parents("form").first();
-
-        $.ajax(form.prop("action"), {
-          type: form.prop("method"),
-          data: {
-            lon: location.lon,
-            lat: location.lat,
-            text: form.find("textarea#comment").val()
-          },
-          success: function (data) {
-            map.noteSelector.unselect(feature);
-
-            feature.attributes.status = "open";
-            feature.attributes.id = data;
-
-            map.noteLayer.drawFeature(feature);
-
-            map.noteMover.deactivate();
-          }
-        });
-
-        e.preventDefault();
-      });
-
-      $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
-        feature.attributes.status = "cancelled";
-
-        map.noteSelector.unselect(feature);
-        map.noteLayer.removeFeatures(feature);
-
-        feature.destroy();
-
-        map.noteMover.deactivate();
-
-        e.preventDefault();
-      });
-
-      feature.popup.updateSize();
-    };
-
-    var noteUnselected = function (o) {
-      var feature = o.feature;
-
-      map.removePopup(feature.popup);
-
-      delete feature.popup;
-    };
-
-    var allowNoteReports = function () { 
-      if (map.getZoom() > minZoom) {
-        newNoteControls.show();
-      } else {
-        newNoteControls.hide();
-      }
-    };
-
-    var addNote = function () {
-      var lonlat = map.getCenter();
-      var layer = map.noteLayer;
-      var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
-      var feature = new OpenLayers.Feature.Vector(geometry, {
-        status: "new"
-      });
-
-      layer.addFeatures(feature);
-      map.noteSelector.unselectAll();
-      map.noteSelector.select(feature);
-      map.noteMover.activate();
-      map.noteLayer.setVisibility(true);
-    };
-
-    map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
-      visibility: false,
-      displayInLayerSwitcher: false,
-      projection: new OpenLayers.Projection("EPSG:4326"),
-      styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
-        graphicWidth: 22,
-        graphicHeight: 22,
-        graphicOpacity: 0.7,
-        graphicXOffset: -11,
-        graphicYOffset: -11
-      }, {
-        rules: [
-          new OpenLayers.Rule({
-            filter: new OpenLayers.Filter.Comparison({
-              type: OpenLayers.Filter.Comparison.EQUAL_TO,
-              property: "status",
-              value: "new"
-            }),
-            symbolizer: {
-              externalGraphic: "<%= image_path 'new_note_marker.png' %>"
-            }
-          }),
-          new OpenLayers.Rule({
-            filter: new OpenLayers.Filter.Comparison({
-              type: OpenLayers.Filter.Comparison.EQUAL_TO,
-              property: "status",
-              value: "open"
-            }),
-            symbolizer: {
-              externalGraphic: "<%= image_path 'open_note_marker.png' %>"
-            }
-          }),
-          new OpenLayers.Rule({
-            filter: new OpenLayers.Filter.Comparison({
-              type: OpenLayers.Filter.Comparison.EQUAL_TO,
-              property: "status",
-              value: "closed"
-            }),
-            symbolizer: {
-              externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
-            }
-          })
-        ]
-      })),
-      strategies: [
-        new OpenLayers.Strategy.BBOX()
-      ],
-      protocol: new OpenLayers.Protocol.HTTP({
-        url: notesUrl,
-        format: new OpenLayers.Format.GeoJSON()
-      })
-    });
-
-    map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
-    map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
-    map.noteLayer.events.register("featureselected", map, noteSelected);
-    map.noteLayer.events.register("featureunselected", map, noteUnselected);
-
-    map.addLayer(map.noteLayer);
-
-    map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
-      autoActivate: true
-    });
-
-    map.addControl(map.noteSelector);
-
-    map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
-      onDrag: function (feature, pixel) {
-        feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
-        feature.popup.updatePosition();
-      },
-      featureCallbacks: {
-        over: function (feature) {
-          if (feature.attributes.status === "new") {
-            map.noteMover.overFeature.apply(map.noteMover, [feature]);
-          }
-        }
-      }
-    });
-
-    map.addControl(map.noteMover);
-
-    newNoteControls.click(addNote);
-
-    map.events.register("zoomend", map, allowNoteReports);
-
-    return map.noteLayer;
-  }
-});
index c2b11162cde9e435cefa38195efa2b3f51d29044..6ead2220a079949ffb0ee9fd6665df845a6c2e99 100644 (file)
@@ -424,6 +424,12 @@ body.site-export #tabnav a#exportanchor {
   padding: 5px;
 }
 
+#permalink a.disabled {
+  color: #ccc;
+  cursor: default;
+  text-decoration: none;
+}
+
 /* Rules for edit menu */
 
 .menuicon {
index 194787ce0f52ce21c93f6d937a7edcca6dc638d2..ab1eaa1dc48833cee1625d00ca8eaa0db54c2004 100644 (file)
   <div id="permalink">
     <a href="/" id="permalinkanchor" class="geolink llz layers object"><%= t 'site.index.permalink' %></a>
     <a href="/" id="shortlinkanchor"><%= t 'site.index.shortlink' %></a>
-    <a href="#" id="createnoteanchor">Report a problem</a>     
+    <%= link_to t("site.index.createnote"), notes_url,
+        :id => "createnoteanchor",
+        :data => { :minzoom => 12 },
+        :title => "javascripts.site.createnote_tooltip",
+        :class => "geolink"
+    %> 
   </div>
 </div>
 
index a2687884ac666a6f1cb5a6992337e4aa44e5e233..dca41e8db7819e92945dc48011f26e15cd8e18b8 100644 (file)
@@ -1296,6 +1296,7 @@ en:
       js_2: "OpenStreetMap uses JavaScript for its slippy map."
       permalink: Permalink
       shortlink: Shortlink
+      createnote: Add a note
       license:
         copyright: "Copyright OpenStreetMap and contributors, under an open license"
         license_url: "http://openstreetmap.org/copyright"
@@ -2016,6 +2017,9 @@ en:
       history_tooltip: View edits for this area
       history_disabled_tooltip: Zoom in to view edits for this area
       history_zoom_alert: You must zoom in to view edits for this area
+      createnote_tooltip: Add a note to the map
+      createnote_disabled_tooltip: Zoom in to add a note to the map
+      createnote_zoom_alert: You must zoom in to add a note to the map
     note:
       closed: Closed Note
       open: Open Note