From 7eb349dedced4f65c1a21ca6d855daf45819ecfc Mon Sep 17 00:00:00 2001 From: Vincent Helmreich Date: Mon, 12 Jun 2017 10:23:52 +0200 Subject: [PATCH 1/2] Add possibility to define own classes --- dist/leaflet.contextmenu.js | 5 +++++ dist/leaflet.contextmenu.min.js | 2 +- src/Map.ContextMenu.js | 5 +++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/dist/leaflet.contextmenu.js b/dist/leaflet.contextmenu.js index 58cd4d7..b0eaf48 100644 --- a/dist/leaflet.contextmenu.js +++ b/dist/leaflet.contextmenu.js @@ -231,6 +231,11 @@ L.Map.ContextMenu = L.Handler.extend({ icon = this._getIcon(options), iconCls = this._getIconCls(options), html = ''; + + //add custom classes + if(options.cls){ + el.className += " " + options.cls; + } if (icon) { html = ''; diff --git a/dist/leaflet.contextmenu.min.js b/dist/leaflet.contextmenu.min.js index 6aca0f6..aee9161 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==="object"&&typeof module.exports==="object"){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(){var e=this._map.getContainer();t.DomEvent.on(e,"mouseleave",this._hide,this).on(document,"keydown",this._onKeyDown,this);if(t.Browser.touch){t.DomEvent.on(document,this._touchstart,this._hide,this)}this._map.on({contextmenu:this._show,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this)},removeHooks:function(){var e=this._map.getContainer();t.DomEvent.off(e,"mouseleave",this._hide,this).off(document,"keydown",this._onKeyDown,this);if(t.Browser.touch){t.DomEvent.off(document,this._touchstart,this._hide,this)}this._map.off({contextmenu:this._show,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});return e}return null},removeAllItems:function(){var e=this._container.children,n;while(e.length){n=e[0];this._removeItem(t.Util.stamp(n))}return e},hideAllItems:function(){var t,e,n;for(e=0,n=this._items.length;e'}else if(m){u=''}h.innerHTML=u+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",r);if(t.Browser.touch){t.DomEvent.on(h,this._touchstart,t.DomEvent.stopPropagation)}if(!t.Browser.pointer){t.DomEvent.on(h,"click",this._onItemMouseOut,this)}return{id:t.Util.stamp(h),el:h,callback:r}},_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.min(Math.max(n.x-e.x,0),n.x-o.x-1)+"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.min(Math.max(n.y-e.y,0),n.y-o.y-1)+"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'}else if(m){u=''}h.innerHTML=u+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",r);if(t.Browser.touch){t.DomEvent.on(h,this._touchstart,t.DomEvent.stopPropagation)}if(!t.Browser.pointer){t.DomEvent.on(h,"click",this._onItemMouseOut,this)}return{id:t.Util.stamp(h),el:h,callback:r}},_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.min(Math.max(n.x-e.x,0),n.x-o.x-1)+"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.min(Math.max(n.y-e.y,0),n.y-o.y-1)+"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'; From d3499d464dac986715771a7fdca4977631465412 Mon Sep 17 00:00:00 2001 From: Vincent Helmreich Date: Mon, 12 Jun 2017 14:01:24 +0200 Subject: [PATCH 2/2] Changed that Mixin ContextMenus won't removed after hide, they will be hided --- dist/leaflet.contextmenu.js | 161 ++++++++++++++++++++++++-------- dist/leaflet.contextmenu.min.js | 2 +- src/Map.ContextMenu.js | 120 ++++++++++++++++++------ src/Mixin.ContextMenu.js | 41 +++++--- 4 files changed, 241 insertions(+), 83 deletions(-) diff --git a/dist/leaflet.contextmenu.js b/dist/leaflet.contextmenu.js index b0eaf48..ffdcd8b 100644 --- a/dist/leaflet.contextmenu.js +++ b/dist/leaflet.contextmenu.js @@ -29,14 +29,14 @@ L.Map.mergeOptions({ L.Map.ContextMenu = L.Handler.extend({ _touchstart: L.Browser.msPointer ? 'MSPointerDown' : L.Browser.pointer ? 'pointerdown' : 'touchstart', - + statics: { BASE_CLS: 'leaflet-contextmenu' }, - + initialize: function (map) { L.Handler.prototype.initialize.call(this, map); - + this._items = []; this._visible = false; @@ -61,7 +61,7 @@ L.Map.ContextMenu = L.Handler.extend({ var container = this._map.getContainer(); L.DomEvent - .on(container, 'mouseleave', this._hide, this) + // .on(container, 'mouseleave', this._hide, this) .on(document, 'keydown', this._onKeyDown, this); if (L.Browser.touch) { @@ -110,10 +110,16 @@ L.Map.ContextMenu = L.Handler.extend({ return this.insertItem(options); }, - insertItem: function (options, index) { - index = index !== undefined ? index: this._items.length; + insertItem: function (options) { - var item = this._createItem(this._container, options, index); + index = options.index !== undefined ? options.index : this._items.length; + + var item = this._createItem({ + container: this._container, + options: options.options, + index: index, + isNotMainItem: options.isNotMainItem + }); this._items.push(item); @@ -151,6 +157,35 @@ L.Map.ContextMenu = L.Handler.extend({ return null; }, + itemAvailable: function (item) { + var container = this._container; + + if (!isNaN(item)) { + item = container.children[item]; + } + + if (item) { + return true; + } + + return false; + }, + + hideItem: function (item) { + var container = this._container; + + if (!isNaN(item)) { + item = container.children[item]; + } + + if (item) { + item.style.display = "none"; + return item; + } + + return null; + }, + removeAllItems: function () { var items = this._container.children, item; @@ -180,9 +215,20 @@ L.Map.ContextMenu = L.Handler.extend({ } }, + showAllMainItems: function () { + var item, i, l; + + for (i = 0, l = this._items.length; i < l; i++) { + item = this._items[i]; + if (item.isMainItem) { + item.el.style.display = ''; + } + } + }, + setDisabled: function (item, disabled) { var container = this._container, - itemCls = L.Map.ContextMenu.BASE_CLS + '-item'; + itemCls = L.Map.ContextMenu.BASE_CLS + '-item'; if (!isNaN(item)) { item = container.children[item]; @@ -215,26 +261,33 @@ L.Map.ContextMenu = L.Handler.extend({ i, l; for (i = 0, l = itemOptions.length; i < l; i++) { - this._items.push(this._createItem(this._container, itemOptions[i])); + this._items.push(this._createItem({ + container: this._container, + options: itemOptions[i] + })); } }, - _createItem: function (container, options, index) { - if (options.separator || options === '-') { - return this._createSeparator(container, index); + _createItem: function (options) { + if (options.options.separator || options.options === '-') { + return this._createSeparator({ + container: options.container, + index: options.index, + isNotMainItem: options.isNotMainItem + }); } var itemCls = L.Map.ContextMenu.BASE_CLS + '-item', - cls = options.disabled ? (itemCls + ' ' + itemCls + '-disabled') : itemCls, - el = this._insertElementAt('a', cls, container, index), - callback = this._createEventHandler(el, options.callback, options.context, options.hideOnSelect), - icon = this._getIcon(options), - iconCls = this._getIconCls(options), + cls = options.options.disabled ? (itemCls + ' ' + itemCls + '-disabled') : itemCls, + el = this._insertElementAt('a', cls, options.container, options.index), + callback = this._createEventHandler(el, options.options.callback, options.options.context, options.options.hideOnSelect), + icon = this._getIcon(options.options), + iconCls = this._getIconCls(options.options), html = ''; - + //add custom classes - if(options.cls){ - el.className += " " + options.cls; + if (options.options.cls) { + el.className += " " + options.options.cls; } if (icon) { @@ -243,7 +296,7 @@ L.Map.ContextMenu = L.Handler.extend({ html = ''; } - el.innerHTML = html + options.text; + el.innerHTML = html + options.options.text; el.href = '#'; L.DomEvent @@ -261,10 +314,12 @@ L.Map.ContextMenu = L.Handler.extend({ L.DomEvent.on(el, 'click', this._onItemMouseOut, this); } + return { id: L.Util.stamp(el), el: el, - callback: callback + callback: callback, + isMainItem: !options.isNotMainItem }; }, @@ -305,12 +360,13 @@ L.Map.ContextMenu = L.Handler.extend({ return null; }, - _createSeparator: function (container, index) { - var el = this._insertElementAt('div', L.Map.ContextMenu.BASE_CLS + '-separator', container, index); + _createSeparator: function (options) { + var el = this._insertElementAt('div', L.Map.ContextMenu.BASE_CLS + '-separator', options.container, options.index); return { id: L.Util.stamp(el), - el: el + el: el, + isMainItem: !options.isNotMainItem }; }, @@ -366,9 +422,11 @@ L.Map.ContextMenu = L.Handler.extend({ _showAtPoint: function (pt, data) { if (this._items.length) { var map = this._map, - layerPoint = map.containerPointToLayerPoint(pt), - latlng = map.layerPointToLatLng(layerPoint), - event = L.extend(data || {}, {contextmenu: this}); + layerPoint = map.containerPointToLayerPoint(pt), + latlng = map.layerPointToLatLng(layerPoint), + event = L.extend(data || {}, { + contextmenu: this + }); this._showLocation = { latlng: latlng, @@ -376,7 +434,7 @@ L.Map.ContextMenu = L.Handler.extend({ containerPoint: pt }; - if (data && data.relatedTarget){ + if (data && data.relatedTarget) { this._showLocation.relatedTarget = data.relatedTarget; } @@ -395,7 +453,9 @@ L.Map.ContextMenu = L.Handler.extend({ if (this._visible) { this._visible = false; this._container.style.display = 'none'; - this._map.fire('contextmenu.hide', {contextmenu: this}); + this._map.fire('contextmenu.hide', { + contextmenu: this + }); } }, @@ -487,26 +547,26 @@ L.Mixin.ContextMenu = { return this; }, - unbindContextMenu: function (){ + unbindContextMenu: function () { this.off('contextmenu', this._showContextMenu, this); return this; }, addContextMenuItem: function (item) { - this.options.contextmenuItems.push(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){ + if (this.options.contextmenuItems[i].index == index) { items.push(i); } } var elem = items.pop(); while (elem !== undefined) { - this.options.contextmenuItems.splice(elem,1); + this.options.contextmenuItems.splice(elem, 1); elem = items.pop(); } }, @@ -527,7 +587,9 @@ L.Mixin.ContextMenu = { data, pt, i, l; if (this._map.contextmenu) { - data = L.extend({relatedTarget: this}, e); + data = L.extend({ + relatedTarget: this + }, e); pt = this._map.mouseEventToContainerPoint(e.originalEvent); @@ -536,8 +598,24 @@ L.Mixin.ContextMenu = { } for (i = 0, l = this.options.contextmenuItems.length; i < l; i++) { - itemOptions = this.options.contextmenuItems[i]; - this._items.push(this._map.contextmenu.insertItem(itemOptions, itemOptions.index)); + //add item only if it doesn't exist + if (!this._map.contextmenu.itemAvailable(this._items[i])) { + itemOptions = this.options.contextmenuItems[i]; + + var options = { + options: itemOptions, + index: itemOptions.index, + isNotMainItem: true + } + + + this._items.push(this._map.contextmenu.insertItem(options)); + } + //show it if it exists + else { + this._items[i].style.display = "block"; + } + } this._map.once('contextmenu.hide', this._hideContextMenu, this); @@ -548,15 +626,16 @@ L.Mixin.ContextMenu = { _hideContextMenu: function () { var i, l; - + for (i = 0, l = this._items.length; i < l; i++) { - this._map.contextmenu.removeItem(this._items[i]); + this._map.contextmenu.hideItem(this._items[i]); } - this._items.length = 0; if (!this.options.contextmenuInheritItems) { - this._map.contextmenu.showAllItems(); + this._map.contextmenu.showAllMainItems(); } + + } }; diff --git a/dist/leaflet.contextmenu.min.js b/dist/leaflet.contextmenu.min.js index aee9161..d519a35 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==="object"&&typeof module.exports==="object"){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(){var e=this._map.getContainer();t.DomEvent.on(e,"mouseleave",this._hide,this).on(document,"keydown",this._onKeyDown,this);if(t.Browser.touch){t.DomEvent.on(document,this._touchstart,this._hide,this)}this._map.on({contextmenu:this._show,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this)},removeHooks:function(){var e=this._map.getContainer();t.DomEvent.off(e,"mouseleave",this._hide,this).off(document,"keydown",this._onKeyDown,this);if(t.Browser.touch){t.DomEvent.off(document,this._touchstart,this._hide,this)}this._map.off({contextmenu:this._show,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});return e}return null},removeAllItems:function(){var e=this._container.children,n;while(e.length){n=e[0];this._removeItem(t.Util.stamp(n))}return e},hideAllItems:function(){var t,e,n;for(e=0,n=this._items.length;e'}else if(m){u=''}h.innerHTML=u+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",r);if(t.Browser.touch){t.DomEvent.on(h,this._touchstart,t.DomEvent.stopPropagation)}if(!t.Browser.pointer){t.DomEvent.on(h,"click",this._onItemMouseOut,this)}return{id:t.Util.stamp(h),el:h,callback:r}},_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.min(Math.max(n.x-e.x,0),n.x-o.x-1)+"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.min(Math.max(n.y-e.y,0),n.y-o.y-1)+"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'}else if(r){h=''}o.innerHTML=h+e.options.text;o.href="#";t.DomEvent.on(o,"mouseover",this._onItemMouseOver,this).on(o,"mouseout",this._onItemMouseOut,this).on(o,"mousedown",t.DomEvent.stopPropagation).on(o,"click",s);if(t.Browser.touch){t.DomEvent.on(o,this._touchstart,t.DomEvent.stopPropagation)}if(!t.Browser.pointer){t.DomEvent.on(o,"click",this._onItemMouseOut,this)}return{id:t.Util.stamp(o),el:o,callback:s,isMainItem:!e.isNotMainItem}},_removeItem:function(e){var n,i,o,s,a;for(o=0,s=this._items.length;on.x){i.style.left="auto";i.style.right=Math.min(Math.max(n.x-e.x,0),n.x-o.x-1)+"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.min(Math.max(n.y-e.y,0),n.y-o.y-1)+"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'; } - el.innerHTML = html + options.text; + el.innerHTML = html + options.options.text; el.href = '#'; L.DomEvent @@ -236,10 +289,12 @@ L.Map.ContextMenu = L.Handler.extend({ L.DomEvent.on(el, 'click', this._onItemMouseOut, this); } + return { id: L.Util.stamp(el), el: el, - callback: callback + callback: callback, + isMainItem: !options.isNotMainItem }; }, @@ -280,12 +335,13 @@ L.Map.ContextMenu = L.Handler.extend({ return null; }, - _createSeparator: function (container, index) { - var el = this._insertElementAt('div', L.Map.ContextMenu.BASE_CLS + '-separator', container, index); + _createSeparator: function (options) { + var el = this._insertElementAt('div', L.Map.ContextMenu.BASE_CLS + '-separator', options.container, options.index); return { id: L.Util.stamp(el), - el: el + el: el, + isMainItem: !options.isNotMainItem }; }, @@ -341,9 +397,11 @@ L.Map.ContextMenu = L.Handler.extend({ _showAtPoint: function (pt, data) { if (this._items.length) { var map = this._map, - layerPoint = map.containerPointToLayerPoint(pt), - latlng = map.layerPointToLatLng(layerPoint), - event = L.extend(data || {}, {contextmenu: this}); + layerPoint = map.containerPointToLayerPoint(pt), + latlng = map.layerPointToLatLng(layerPoint), + event = L.extend(data || {}, { + contextmenu: this + }); this._showLocation = { latlng: latlng, @@ -351,7 +409,7 @@ L.Map.ContextMenu = L.Handler.extend({ containerPoint: pt }; - if (data && data.relatedTarget){ + if (data && data.relatedTarget) { this._showLocation.relatedTarget = data.relatedTarget; } @@ -370,7 +428,9 @@ L.Map.ContextMenu = L.Handler.extend({ if (this._visible) { this._visible = false; this._container.style.display = 'none'; - this._map.fire('contextmenu.hide', {contextmenu: this}); + this._map.fire('contextmenu.hide', { + contextmenu: this + }); } }, diff --git a/src/Mixin.ContextMenu.js b/src/Mixin.ContextMenu.js index 4411b98..903606b 100644 --- a/src/Mixin.ContextMenu.js +++ b/src/Mixin.ContextMenu.js @@ -6,26 +6,26 @@ L.Mixin.ContextMenu = { return this; }, - unbindContextMenu: function (){ + unbindContextMenu: function () { this.off('contextmenu', this._showContextMenu, this); return this; }, addContextMenuItem: function (item) { - this.options.contextmenuItems.push(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){ + if (this.options.contextmenuItems[i].index == index) { items.push(i); } } var elem = items.pop(); while (elem !== undefined) { - this.options.contextmenuItems.splice(elem,1); + this.options.contextmenuItems.splice(elem, 1); elem = items.pop(); } }, @@ -46,7 +46,9 @@ L.Mixin.ContextMenu = { data, pt, i, l; if (this._map.contextmenu) { - data = L.extend({relatedTarget: this}, e); + data = L.extend({ + relatedTarget: this + }, e); pt = this._map.mouseEventToContainerPoint(e.originalEvent); @@ -55,8 +57,24 @@ L.Mixin.ContextMenu = { } for (i = 0, l = this.options.contextmenuItems.length; i < l; i++) { - itemOptions = this.options.contextmenuItems[i]; - this._items.push(this._map.contextmenu.insertItem(itemOptions, itemOptions.index)); + //add item only if it doesn't exist + if (!this._map.contextmenu.itemAvailable(this._items[i])) { + itemOptions = this.options.contextmenuItems[i]; + + var options = { + options: itemOptions, + index: itemOptions.index, + isNotMainItem: true + } + + + this._items.push(this._map.contextmenu.insertItem(options)); + } + //show it if it exists + else { + this._items[i].style.display = "block"; + } + } this._map.once('contextmenu.hide', this._hideContextMenu, this); @@ -67,15 +85,16 @@ L.Mixin.ContextMenu = { _hideContextMenu: function () { var i, l; - + for (i = 0, l = this._items.length; i < l; i++) { - this._map.contextmenu.removeItem(this._items[i]); + this._map.contextmenu.hideItem(this._items[i]); } - this._items.length = 0; if (!this.options.contextmenuInheritItems) { - this._map.contextmenu.showAllItems(); + this._map.contextmenu.showAllMainItems(); } + + } };