Improve context menu initialisation to avoid namespace pollution

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 0962908064ba7c1bae8797f3a8aa7f5306577e75..1ba2fbbdef5cc719b5799813aa03bce0cfd50870 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -77,42 +77,11 @@ $(document).ready(function () {
 
   var params = OSM.mapParams();
 
 
   var params = OSM.mapParams();
 

-  // TODO internationalisation of the context menu strings

   var map = new L.OSM.Map("map", {
     zoomControl: false,
     layerControl: false,
     contextmenu: true,
   var map = new L.OSM.Map("map", {
     zoomControl: false,
     layerControl: false,
     contextmenu: true,

-    contextmenuWidth: 140,
-    contextmenuItems: [{
-        text: 'Directions from here',
-        callback: function(e){ context_directionsfrom(e, map); }
-    }, {
-        text: 'Directions to here',
-        callback: function(e){ context_directionsto(e, map); }
-    }, '-', {
-        text: 'Add a note here',
-        callback: function(e){ context_addnote(e, map); }
-    }, {
-        text: 'Show address',
-        callback: function(e){ context_describe(e, map); }
-    }, {
-        text: 'Query features',
-        callback: function(e){ context_queryhere(e, map); }
-    }, {
-        text: 'Centre map here',
-        callback: function(e){ context_centrehere(e, map); }
-    }]
-  });
-
-  $(document).on('mousedown', function(e){
-    if(e.shiftKey){
-      map.contextmenu.disable(); // on firefox, shift disables our contextmenu. we explicitly do this for all browsers.
-    }else{
-      map.contextmenu.enable();
-      // we also decide whether to disable some options that only like high zoom
-      map.contextmenu.setDisabled(3, map.getZoom() < 12);
-      map.contextmenu.setDisabled(5, map.getZoom() < 14);
-    }
+    contextmenuWidth: 140

   });
 
   map.attributionControl.setPrefix('');
   });
 
   map.attributionControl.setPrefix('');


@@ -182,6 +151,8 @@ $(document).ready(function () {
   L.control.scale()
     .addTo(map);
 
   L.control.scale()
     .addTo(map);
 

+  OSM.initializeContextMenu(map);
+

   if (OSM.STATUS !== 'api_offline' && OSM.STATUS !== 'database_offline') {
     OSM.initializeNotes(map);
     if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {
   if (OSM.STATUS !== 'api_offline' && OSM.STATUS !== 'database_offline') {
     OSM.initializeNotes(map);
     if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {

diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js
index 4a8f3cc1eff6953a9d35bd725592dce7d8946cff..f9f49db15c736186f31be61c36bba57138bac1f8 100644 (file)
--- a/app/assets/javascripts/index/contextmenu.js
+++ b/app/assets/javascripts/index/contextmenu.js
@@ -1,46 +1,83 @@
-  var context_describe = function(e, map){
-    var precision = OSM.zoomPrecision(map.getZoom()),
-      latlng = e.latlng.wrap(),
-      lat = latlng.lat.toFixed(precision),
-      lng = latlng.lng.toFixed(precision);
-    OSM.router.route("/search?query=" + encodeURIComponent(lat + "," + lng));
-  };
+OSM.initializeContextMenu = function (map) {
+  map.contextmenu.addItem({
+    text: "Directions from here",
+    callback: function directionsFromHere(e) {
+      var precision = OSM.zoomPrecision(map.getZoom()),
+          latlng = e.latlng.wrap(),
+          lat = latlng.lat.toFixed(precision),
+          lng = latlng.lng.toFixed(precision);

 
 

-  var context_directionsfrom = function(e, map){
-    var precision = OSM.zoomPrecision(map.getZoom()),
-      latlng = e.latlng.wrap(),
-      lat = latlng.lat.toFixed(precision),
-      lng = latlng.lng.toFixed(precision);
-    OSM.router.route("/directions?" + querystring.stringify({
-      route: lat + ',' + lng + ';' + $('#route_to').val()
-    }));
-  };
+      OSM.router.route("/directions?" + querystring.stringify({
+        route: lat + "," + lng + ";" + $("#route_to").val()
+      }));
+    }
+  });

 
 

-  var context_directionsto = function(e, map){
-    var precision = OSM.zoomPrecision(map.getZoom()),
-      latlng = e.latlng.wrap(),
-      lat = latlng.lat.toFixed(precision),
-      lng = latlng.lng.toFixed(precision);
-    OSM.router.route("/directions?" + querystring.stringify({
-      route: $('#route_from').val() + ';' + lat + ',' + lng
-    }));
-  };
+  map.contextmenu.addItem({
+    text: "Directions to here",
+    callback: function directionsToHere(e) {
+      var precision = OSM.zoomPrecision(map.getZoom()),
+          latlng = e.latlng.wrap(),
+          lat = latlng.lat.toFixed(precision),
+          lng = latlng.lng.toFixed(precision);

 
 

-  var context_addnote = function(e, map){
-    // I'd like this, instead of panning, to pass a query parameter about where to place the marker
-    map.panTo(e.latlng.wrap(), {animate: false});
-    OSM.router.route('/note/new');
-  };
+      OSM.router.route("/directions?" + querystring.stringify({
+        route: $("#route_from").val() + ";" + lat + "," + lng
+      }));
+    }
+  });

 
 

-  var context_centrehere = function(e, map){
-    map.panTo(e.latlng);
-  };
+  map.contextmenu.addItem({
+    text: "Add a note here",
+    callback: function addNoteHere(e) {
+      // I'd like this, instead of panning, to pass a query parameter about where to place the marker
+      map.panTo(e.latlng.wrap(), {animate: false});
+      OSM.router.route("/note/new");
+    }
+  });
+
+  map.contextmenu.addItem({
+    text: "Show address",
+    callback: function describeLocation(e) {
+      var precision = OSM.zoomPrecision(map.getZoom()),
+          latlng = e.latlng.wrap(),
+          lat = latlng.lat.toFixed(precision),
+          lng = latlng.lng.toFixed(precision);
+
+      OSM.router.route("/search?query=" + encodeURIComponent(lat + "," + lng));
+    }
+  });
+
+  map.contextmenu.addItem({
+    text: "Query features",
+    callback: function queryFeatures(e) {
+      var precision = OSM.zoomPrecision(map.getZoom()),
+          latlng = e.latlng.wrap(),
+          lat = latlng.lat.toFixed(precision),
+          lng = latlng.lng.toFixed(precision);
+
+      OSM.router.route("/query?lat=" + lat + "&lon=" + lng);
+    }
+  });
+
+  map.contextmenu.addItem({
+    text: "Centre map here",
+    callback: function centreMap(e) {
+      map.panTo(e.latlng);
+    }
+  });
+
+  map.on("mousedown", function (e) {
+    if (e.shiftKey) map.contextmenu.disable();
+  }).on("mouseup", function () {
+    map.contextmenu.enable();
+  });

 
 

-  var context_queryhere = function(e, map) {
-    var precision = OSM.zoomPrecision(map.getZoom()),
-      latlng = e.latlng.wrap(),
-      lat = latlng.lat.toFixed(precision),
-      lng = latlng.lng.toFixed(precision);
-    OSM.router.route("/query?lat=" + lat + "&lon=" + lng);
+  var updateMenu = function updateMenu () {
+    map.contextmenu.setDisabled(2, map.getZoom() < 12);
+    map.contextmenu.setDisabled(4, map.getZoom() < 14);

   };
 
   };
 

+  map.on("zoomend", updateMenu);
+  updateMenu();
+};