Implement context menu with: directions, add note, describe, centre.

[rails.git] / app / assets / javascripts / index.js

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 79c866b2e48c404d2bbc8a1112af9ee7ac8bf267..8964cef1dd78138410b3477d9dc7aa7985f10829 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -7,6 +7,7 @@
 //= require leaflet.share
 //= require leaflet.polyline
 //= require leaflet.query
+//= require leaflet.contextmenu
 //= require index/search
 //= require index/browse
 //= require index/export
@@ -54,7 +55,7 @@ $(document).ready(function () {
 
         if (xhr.getResponseHeader('X-Page-Title')) {
           var title = xhr.getResponseHeader('X-Page-Title');
-          document.title = decodeURIComponent(escape(title));
+          document.title = decodeURIComponent(title);
         }
 
         $('head')
@@ -75,9 +76,60 @@ $(document).ready(function () {
 
   var params = OSM.mapParams();
 
+  // TODO consider using a separate js file for the context menu additions
+  var context_describe = function(e){
+    var precision = OSM.zoomPrecision(map.getZoom());
+    OSM.router.route("/search?query=" + encodeURIComponent(
+      e.latlng.lat.toFixed(precision) + "," + e.latlng.lng.toFixed(precision)
+    ));
+  };
+
+  var context_directionsfrom = function(e){
+    var precision = OSM.zoomPrecision(map.getZoom());
+    OSM.router.route("/directions?" + querystring.stringify({
+      route: e.latlng.lat.toFixed(precision) + ',' + e.latlng.lng.toFixed(precision) + ';' + $('#route_to').val()
+    }));
+  }
+
+  var context_directionsto = function(e){
+    var precision = OSM.zoomPrecision(map.getZoom());
+    OSM.router.route("/directions?" + querystring.stringify({
+      route: $('#route_from').val() + ';' + e.latlng.lat.toFixed(precision) + ',' + e.latlng.lng.toFixed(precision)
+    }));
+  }
+
+  var context_addnote = function(e){
+    // TODO this currently doesn't work correctly - I think the "route" needs to be chained to ensure it comes once the pan has finished.
+    map.panTo(e.latlng, {animate: false});
+    OSM.router.route('/note/new');
+  }
+
+  var context_centrehere = function(e){
+    map.panTo(e.latlng);
+  }
+
+  // TODO internationalisation of the context menu strings
   var map = new L.OSM.Map("map", {
     zoomControl: false,
-    layerControl: false
+    layerControl: false,
+    contextmenu: true,
+    contextmenuWidth: 140,
+    contextmenuItems: [{
+        text: 'Directions from here',
+        callback: context_directionsfrom
+    }, {
+        text: 'Directions to here',
+        callback: context_directionsto
+    }, '-', {
+        text: 'Add a note here',
+        callback: context_addnote
+    }, {
+        text: 'Show address',
+        callback: context_describe
+    }, {
+        text: 'Centre map here',
+        callback: context_centrehere
+    }]
   });
 
   map.attributionControl.setPrefix('');
@@ -137,18 +189,19 @@ $(document).ready(function () {
     .addTo(map);
 
   if (OSM.STATUS !== 'api_offline' && OSM.STATUS !== 'database_offline') {
-    initializeNotes(map);
+    OSM.initializeNotes(map);
     if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {
       map.addLayer(map.noteLayer);
     }
 
-    initializeBrowse(map);
+    OSM.initializeBrowse(map);
     if (params.layers.indexOf(map.dataLayer.options.code) >= 0) {
       map.addLayer(map.dataLayer);
     }
   }
 
-  $('.leaflet-control .control-button').tooltip({placement: 'left', container: 'body'});
+  var placement = $('html').attr('dir') === 'rtl' ? 'right' : 'left';
+  $('.leaflet-control .control-button').tooltip({placement: placement, container: 'body'});
 
   var expiry = new Date();
   expiry.setYear(expiry.getFullYear() + 10);
@@ -191,7 +244,7 @@ $(document).ready(function () {
     map.setView([params.lat, params.lon], params.zoom);
   }
 
-  var marker = L.marker([0, 0], {icon: getUserIcon()});
+  var marker = L.marker([0, 0], {icon: OSM.getUserIcon()});
 
   if (params.marker) {
     marker.setLatLng([params.mlat, params.mlon]).addTo(map);
@@ -207,6 +260,39 @@ $(document).ready(function () {
     marker.setLatLng(center).addTo(map);
   });
 
+  function remoteEditHandler(bbox, object) {
+    var loaded = false,
+        url = document.location.protocol === "https:" ?
+        "https://127.0.0.1:8112/load_and_zoom?" :
+        "http://127.0.0.1:8111/load_and_zoom?",
+        query = {
+          left: bbox.getWest() - 0.0001,
+          top: bbox.getNorth() + 0.0001,
+          right: bbox.getEast() + 0.0001,
+          bottom: bbox.getSouth() - 0.0001
+        };
+
+    if (object) query.select = object.type + object.id;
+
+    var iframe = $('<iframe>')
+        .hide()
+        .appendTo('body')
+        .attr("src", url + querystring.stringify(query))
+        .on('load', function() {
+          $(this).remove();
+          loaded = true;
+        });
+
+    setTimeout(function () {
+      if (!loaded) {
+        alert(I18n.t('site.index.remote_failed'));
+        iframe.remove();
+      }
+    }, 1000);
+
+    return false;
+  }
+
   $("a[data-editor=remote]").click(function(e) {
     var params = OSM.mapParams(this.search);
     remoteEditHandler(map.getBounds(), params.object);
@@ -322,24 +408,4 @@ $(document).ready(function () {
     if (OSM.router.route(this.pathname + this.search + this.hash))
       e.preventDefault();
   });
-
-  $(".search_form").on("submit", function(e) {
-    e.preventDefault();
-    $("header").addClass("closed");
-    var query = $(this).find("input[name=query]").val();
-    if (query) {
-      OSM.router.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map));
-    } else {
-      OSM.router.route("/");
-    }
-  });
-
-  $(".describe_location").on("click", function(e) {
-    e.preventDefault();
-    var center = map.getCenter().wrap(),
-      precision = OSM.zoomPrecision(map.getZoom());
-    OSM.router.route("/search?query=" + encodeURIComponent(
-      center.lat.toFixed(precision) + "," + center.lng.toFixed(precision)
-    ));
-  });
 });