From: Tom Hughes <tom@compton.nu>
Date: Sun, 12 Feb 2017 15:04:50 +0000 (+0000)
Subject: Merge remote-tracking branch 'openstreetmap/pull/1030' into next
X-Git-Tag: live~3596^2~4
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/043d29fd7eb72048cf5d07edfbc20ec5c25af708?hp=a4eef7dab8b1bd1712c9cdd880dd91cb84681140

Merge remote-tracking branch 'openstreetmap/pull/1030' into next
---

diff --git a/Vendorfile b/Vendorfile
index 361f2c843..93ad74c7b 100644
--- a/Vendorfile
+++ b/Vendorfile
@@ -20,6 +20,11 @@ folder 'vendor/assets' do
       file "images/#{image}", "https://unpkg.com/leaflet@1.0.3/dist/images/#{image}"
     end
 
+    from 'git://github.com/aratcliffe/Leaflet.contextmenu.git' do
+      file 'leaflet.contextmenu.js', 'dist/leaflet.contextmenu.js'
+      file 'leaflet.contextmenu.css', 'dist/leaflet.contextmenu.css'
+    end
+
     from 'git://github.com/kajic/leaflet-locationfilter.git' do
       file 'leaflet.locationfilter.css', 'src/locationfilter.css'
       file 'leaflet.locationfilter.js', 'src/locationfilter.js'
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 9d7122e4d..096290806 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -7,6 +7,8 @@
 //= require leaflet.share
 //= require leaflet.polyline
 //= require leaflet.query
+//= require leaflet.contextmenu
+//= require index/contextmenu
 //= require index/search
 //= require index/browse
 //= require index/export
@@ -75,9 +77,42 @@ $(document).ready(function () {
 
   var params = OSM.mapParams();
 
+  // 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: 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);
+    }
   });
 
   map.attributionControl.setPrefix('');
diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js
new file mode 100644
index 000000000..4a8f3cc1e
--- /dev/null
+++ b/app/assets/javascripts/index/contextmenu.js
@@ -0,0 +1,46 @@
+  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));
+  };
+
+  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()
+    }));
+  };
+
+  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
+    }));
+  };
+
+  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');
+  };
+
+  var context_centrehere = function(e, map){
+    map.panTo(e.latlng);
+  };
+
+  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);
+  };
+
diff --git a/app/assets/stylesheets/leaflet-all.scss b/app/assets/stylesheets/leaflet-all.scss
index 10ad2607a..82312e5c2 100644
--- a/app/assets/stylesheets/leaflet-all.scss
+++ b/app/assets/stylesheets/leaflet-all.scss
@@ -1,6 +1,7 @@
 /*
  *= require leaflet
  *= require leaflet.locationfilter
+ *= require leaflet.contextmenu
  */
 
 /* Override to serve images through the asset pipeline. */
diff --git a/vendor/assets/leaflet/leaflet.contextmenu.css b/vendor/assets/leaflet/leaflet.contextmenu.css
new file mode 100644
index 000000000..55e405c6d
--- /dev/null
+++ b/vendor/assets/leaflet/leaflet.contextmenu.css
@@ -0,0 +1,54 @@
+.leaflet-contextmenu {
+    display: none;
+	box-shadow: 0 1px 7px rgba(0,0,0,0.4);
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+    padding: 4px 0;
+    background-color: #fff;
+    cursor: default;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item {
+    display: block;
+    color: #222;
+    font-size: 12px;
+    line-height: 20px;
+    text-decoration: none;
+    padding: 0 12px;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    cursor: default;
+    outline: none;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
+    opacity: 0.5;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item.over {
+    background-color: #f4f4f4;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {
+    background-color: inherit;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+}
+
+.leaflet-contextmenu-icon {
+    margin: 2px 8px 0 0;
+    width: 16px;
+    height: 16px;
+    float: left;
+    border: 0;
+}
+
+.leaflet-contextmenu-separator {
+    border-bottom: 1px solid #ccc;
+    margin: 5px 0;
+}
\ No newline at end of file
diff --git a/vendor/assets/leaflet/leaflet.contextmenu.js b/vendor/assets/leaflet/leaflet.contextmenu.js
new file mode 100644
index 000000000..dff20b412
--- /dev/null
+++ b/vendor/assets/leaflet/leaflet.contextmenu.js
@@ -0,0 +1,7 @@
+/*
+	Leaflet.contextmenu, a context menu for Leaflet.
+	(c) 2014, Adam Ratcliffe, GeoSmart Maps Limited
+       
+        @preserve
+*/
+(function(t){var e;if(typeof define==="function"&&define.amd){define(["leaflet"],t)}else if(typeof module!=="undefined"){e=require("leaflet");module.exports=t(e)}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}t(window.L)}})(function(t){t.Map.mergeOptions({contextmenuItems:[]});t.Map.ContextMenu=t.Handler.extend({_touchstart:t.Browser.msPointer?"MSPointerDown":t.Browser.pointer?"pointerdown":"touchstart",statics:{BASE_CLS:"leaflet-contextmenu"},initialize:function(e){t.Handler.prototype.initialize.call(this,e);this._items=[];this._visible=false;var n=this._container=t.DomUtil.create("div",t.Map.ContextMenu.BASE_CLS,e._container);n.style.zIndex=1e4;n.style.position="absolute";if(e.options.contextmenuWidth){n.style.width=e.options.contextmenuWidth+"px"}this._createItems();t.DomEvent.on(n,"click",t.DomEvent.stop).on(n,"mousedown",t.DomEvent.stop).on(n,"dblclick",t.DomEvent.stop).on(n,"contextmenu",t.DomEvent.stop)},addHooks:function(){t.DomEvent.on(document,t.Browser.touch?this._touchstart:"mousedown",this._onMouseDown,this).on(document,"keydown",this._onKeyDown,this);this._map.on({contextmenu:this._show,mouseout:this._hide,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this)},removeHooks:function(){t.DomEvent.off(document,t.Browser.touch?this._touchstart:"mousedown",this._onMouseDown,this).off(document,"keydown",this._onKeyDown,this);this._map.off({contextmenu:this._show,mouseout:this._hide,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this)},showAt:function(e,n){if(e instanceof t.LatLng){e=this._map.latLngToContainerPoint(e)}this._showAtPoint(e,n)},hide:function(){this._hide()},addItem:function(t){return this.insertItem(t)},insertItem:function(t,e){e=e!==undefined?e:this._items.length;var n=this._createItem(this._container,t,e);this._items.push(n);this._sizeChanged=true;this._map.fire("contextmenu.additem",{contextmenu:this,el:n.el,index:e});return n.el},removeItem:function(e){var n=this._container;if(!isNaN(e)){e=n.children[e]}if(e){this._removeItem(t.Util.stamp(e));this._sizeChanged=true;this._map.fire("contextmenu.removeitem",{contextmenu:this,el:e})}},removeAllItems:function(){var e;while(this._container.children.length){e=this._container.children[0];this._removeItem(t.Util.stamp(e))}},hideAllItems:function(){var t,e,n;for(e=0,n=this._items.length;e<n;e++){t=this._items[e];t.el.style.display="none"}},showAllItems:function(){var t,e,n;for(e=0,n=this._items.length;e<n;e++){t=this._items[e];t.el.style.display=""}},setDisabled:function(e,n){var i=this._container,o=t.Map.ContextMenu.BASE_CLS+"-item";if(!isNaN(e)){e=i.children[e]}if(e&&t.DomUtil.hasClass(e,o)){if(n){t.DomUtil.addClass(e,o+"-disabled");this._map.fire("contextmenu.disableitem",{contextmenu:this,el:e})}else{t.DomUtil.removeClass(e,o+"-disabled");this._map.fire("contextmenu.enableitem",{contextmenu:this,el:e})}}},isVisible:function(){return this._visible},_createItems:function(){var t=this._map.options.contextmenuItems,e,n,i;for(n=0,i=t.length;n<i;n++){this._items.push(this._createItem(this._container,t[n]))}},_createItem:function(e,n,i){if(n.separator||n==="-"){return this._createSeparator(e,i)}var o=t.Map.ContextMenu.BASE_CLS+"-item",s=n.disabled?o+" "+o+"-disabled":o,h=this._insertElementAt("a",s,e,i),a=this._createEventHandler(h,n.callback,n.context,n.hideOnSelect),m="";if(n.icon){m='<img class="'+t.Map.ContextMenu.BASE_CLS+'-icon" src="'+n.icon+'"/>'}else if(n.iconCls){m='<span class="'+t.Map.ContextMenu.BASE_CLS+"-icon "+n.iconCls+'"></span>'}h.innerHTML=m+n.text;h.href="#";t.DomEvent.on(h,"mouseover",this._onItemMouseOver,this).on(h,"mouseout",this._onItemMouseOut,this).on(h,"mousedown",t.DomEvent.stopPropagation).on(h,"click",a);return{id:t.Util.stamp(h),el:h,callback:a}},_removeItem:function(e){var n,i,o,s;for(o=0,s=this._items.length;o<s;o++){n=this._items[o];if(n.id===e){i=n.el;callback=n.callback;if(callback){t.DomEvent.off(i,"mouseover",this._onItemMouseOver,this).off(i,"mouseover",this._onItemMouseOut,this).off(i,"mousedown",t.DomEvent.stopPropagation).off(i,"click",n.callback)}this._container.removeChild(i);this._items.splice(o,1);return n}}return null},_createSeparator:function(e,n){var i=this._insertElementAt("div",t.Map.ContextMenu.BASE_CLS+"-separator",e,n);return{id:t.Util.stamp(i),el:i}},_createEventHandler:function(e,n,i,o){var s=this,h=this._map,a=t.Map.ContextMenu.BASE_CLS+"-item-disabled",o=o!==undefined?o:true;return function(m){if(t.DomUtil.hasClass(e,a)){return}if(o){s._hide()}if(n){n.call(i||h,s._showLocation)}s._map.fire("contextmenu:select",{contextmenu:s,el:e})}},_insertElementAt:function(t,e,n,i){var o,s=document.createElement(t);s.className=e;if(i!==undefined){o=n.children[i]}if(o){n.insertBefore(s,o)}else{n.appendChild(s)}return s},_show:function(t){this._showAtPoint(t.containerPoint)},_showAtPoint:function(e,n){if(this._items.length){var i=this._map,o=i.containerPointToLayerPoint(e),s=i.layerPointToLatLng(o),h={contextmenu:this};if(n){h=t.extend(n,h)}this._showLocation={latlng:s,layerPoint:o,containerPoint:e};this._setPosition(e);if(!this._visible){this._container.style.display="block";this._visible=true}else{this._setPosition(e)}this._map.fire("contextmenu.show",h)}},_hide:function(){if(this._visible){this._visible=false;this._container.style.display="none";this._map.fire("contextmenu.hide",{contextmenu:this})}},_setPosition:function(e){var n=this._map.getSize(),i=this._container,o=this._getElementSize(i),s;if(this._map.options.contextmenuAnchor){s=t.point(this._map.options.contextmenuAnchor);e=e.add(s)}i._leaflet_pos=e;if(e.x+o.x>n.x){i.style.left="auto";i.style.right=Math.max(n.x-e.x,0)+"px"}else{i.style.left=Math.max(e.x,0)+"px";i.style.right="auto"}if(e.y+o.y>n.y){i.style.top="auto";i.style.bottom=Math.max(n.y-e.y,0)+"px"}else{i.style.top=Math.max(e.y,0)+"px";i.style.bottom="auto"}},_getElementSize:function(t){var e=this._size,n=t.style.display;if(!e||this._sizeChanged){e={};t.style.left="-999999px";t.style.right="auto";t.style.display="block";e.x=t.offsetWidth;e.y=t.offsetHeight;t.style.left="auto";t.style.display=n;this._sizeChanged=false}return e},_onMouseDown:function(t){this._hide()},_onKeyDown:function(t){var e=t.keyCode;if(e===27){this._hide()}},_onItemMouseOver:function(e){t.DomUtil.addClass(e.target||e.srcElement,"over")},_onItemMouseOut:function(e){t.DomUtil.removeClass(e.target||e.srcElement,"over")}});t.Map.addInitHook("addHandler","contextmenu",t.Map.ContextMenu);t.Mixin.ContextMenu={bindContextMenu:function(e){t.setOptions(this,e);this._initContextMenu();return this},unbindContextMenu:function(){this.off("contextmenu",this._showContextMenu,this);return this},_initContextMenu:function(){this._items=[];this.on("contextmenu",this._showContextMenu,this)},_showContextMenu:function(t){var e,n,i,o;if(this._map.contextmenu){n=this._map.mouseEventToContainerPoint(t.originalEvent);if(!this.options.contextmenuInheritItems){this._map.contextmenu.hideAllItems()}for(i=0,o=this.options.contextmenuItems.length;i<o;i++){e=this.options.contextmenuItems[i];this._items.push(this._map.contextmenu.insertItem(e,e.index))}this._map.once("contextmenu.hide",this._hideContextMenu,this);this._map.contextmenu.showAt(n,{relatedTarget:this})}},_hideContextMenu:function(){var t,e;for(t=0,e=this._items.length;t<e;t++){this._map.contextmenu.removeItem(this._items[t])}this._items.length=0;if(!this.options.contextmenuInheritItems){this._map.contextmenu.showAllItems()}}};var e=[t.Marker,t.Path,t.GeoJSON],n={contextmenu:false,contextmenuItems:[],contextmenuInheritItems:true},i,o,s;for(o=0,s=e.length;o<s;o++){i=e[o];if(!i.prototype.options){i.prototype.options=n}else{i.mergeOptions(n)}i.addInitHook(function(){if(this.options.contextmenu){this._initContextMenu()}});i.include(t.Mixin.ContextMenu)}return t.Map.ContextMenu});
\ No newline at end of file