From 0b03bd31a1ec8a3bef3938129bde17e8c9cf8088 Mon Sep 17 00:00:00 2001 From: Adam Ratcliffe Date: Mon, 3 Oct 2016 11:35:43 +1300 Subject: [PATCH] Fix for menu item click handlers not being invoked on IE 11 under Leaflet 1.0 --- README.md | 2 ++ dist/leaflet.contextmenu.js | 55 +++++++++++++++++++++++++++------ dist/leaflet.contextmenu.min.js | 2 +- examples/index.html | 5 +-- src/Map.ContextMenu.js | 8 +++++ 5 files changed, 59 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 06ad993..6a907ef 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ ==================== A context menu for Leaflet. See the [demo](http://aratcliffe.github.io/Leaflet.contextmenu/examples/index.html). +Now supporting Leaflet 1.0 + ##Usage The context menu is implemented as a map interaction handler. To use the plugin include the script and enable using the map `contextmenu` option. diff --git a/dist/leaflet.contextmenu.js b/dist/leaflet.contextmenu.js index 4dd588f..f10e768 100644 --- a/dist/leaflet.contextmenu.js +++ b/dist/leaflet.contextmenu.js @@ -59,33 +59,41 @@ L.Map.ContextMenu = L.Handler.extend({ }, addHooks: function () { + var container = this._map.getContainer(); + L.DomEvent - .on(document, (L.Browser.touch ? this._touchstart : 'mousedown'), this._onMouseDown, this) + .on(container, 'mouseleave', this._hide, this) .on(document, 'keydown', this._onKeyDown, this); + if (L.Browser.touch) { + L.DomEvent.on(document, this._touchstart, this._hide, this); + } + this._map.on({ contextmenu: this._show, mousedown: this._hide, movestart: this._hide, zoomstart: this._hide }, this); - - L.DomEvent.on(this._map.getContainer(), 'mouseleave', this._hide, this); }, removeHooks: function () { + var container = this._map.getContainer(); + L.DomEvent - .off(document, (L.Browser.touch ? this._touchstart : 'mousedown'), this._onMouseDown, this) + .off(container, 'mouseleave', this._hide, this) .off(document, 'keydown', this._onKeyDown, this); + if (L.Browser.touch) { + L.DomEvent.off(document, this._touchstart, this._hide, this); + } + this._map.off({ contextmenu: this._show, mousedown: this._hide, movestart: this._hide, zoomstart: this._hide }, this); - - L.DomEvent.off(this._map.getContainer(), 'mouseleave', this._hide, this); }, showAt: function (point, data) { @@ -232,6 +240,10 @@ L.Map.ContextMenu = L.Handler.extend({ .on(el, 'mousedown', L.DomEvent.stopPropagation) .on(el, 'click', callback); + if (L.Browser.touch) { + L.DomEvent.on(el, this._touchstart, L.DomEvent.stopPropagation); + } + return { id: L.Util.stamp(el), el: el, @@ -257,6 +269,10 @@ L.Map.ContextMenu = L.Handler.extend({ .off(el, 'mouseover', this._onItemMouseOut, this) .off(el, 'mousedown', L.DomEvent.stopPropagation) .off(el, 'click', callback); + + if (L.Browser.touch) { + L.DomEvent.off(el, this._touchstart, L.DomEvent.stopPropagation); + } } this._container.removeChild(el); @@ -417,10 +433,6 @@ L.Map.ContextMenu = L.Handler.extend({ return size; }, - _onMouseDown: function (e) { - this._hide(); - }, - _onKeyDown: function (e) { var key = e.keyCode; @@ -455,6 +467,29 @@ L.Mixin.ContextMenu = { return this; }, + addContextMenuItem: function (item) { + this.options.contextmenuItems.push(item); + }, + + removeContextMenuItemWithIndex: function (index) { + var items = []; + for (var i = 0; i < this.options.contextmenuItems.length; i++) { + if(this.options.contextmenuItems[i].index == index){ + items.push(i); + } + } + var elem = items.pop(); + while (elem !== undefined) { + this.options.contextmenuItems.splice(elem,1); + elem = items.pop(); + } + }, + + replaceConextMenuItem: function (item) { + this.removeContextMenuItemWithIndex(item.index); + this.addContextMenuItem(item); + }, + _initContextMenu: function () { this._items = []; diff --git a/dist/leaflet.contextmenu.min.js b/dist/leaflet.contextmenu.min.js index d910d88..7d74098 100644 --- a/dist/leaflet.contextmenu.min.js +++ b/dist/leaflet.contextmenu.min.js @@ -4,4 +4,4 @@ @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,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this);t.DomEvent.on(this._map.getContainer(),"mouseleave",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,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this);t.DomEvent.off(this._map.getContainer(),"mouseleave",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'}else if(n.iconCls){r=''}h.innerHTML=r+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,h;for(o=0,s=this._items.length;on.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(e){var n,i,o,s,h;if(this._map.contextmenu){i=t.extend({relatedTarget:this},e);o=this._map.mouseEventToContainerPoint(e.originalEvent);if(!this.options.contextmenuInheritItems){this._map.contextmenu.hideAllItems()}for(s=0,h=this.options.contextmenuItems.length;s'}else if(n.iconCls){r=''}h.innerHTML=r+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);if(t.Browser.touch){t.DomEvent.on(h,this._touchstart,t.DomEvent.stopPropagation)}return{id:t.Util.stamp(h),el:h,callback:a}},_removeItem:function(e){var n,i,o,s,h;for(o=0,s=this._items.length;on.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},_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},addContextMenuItem:function(t){this.options.contextmenuItems.push(t)},removeContextMenuItemWithIndex:function(t){var e=[];for(var n=0;n Leaflet Context Menu - +
- + +