ol-contextmenu/dist/ol-contextmenu.js

Custom Context Menu for Openlayers

/*!
  * ol-contextmenu - v4.1.0
  * https://github.com/jonataswalker/ol-contextmenu
  * Built: Sat Aug 15 2020 10:43:26 GMT-0300 (Brasilia Standard Time)
  */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("ol/control/Control")):"function"==typeof define&&define.amd?define(["ol/control/Control"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).ContextMenu=e(t.ol.control.Control)}(this,(function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t),i="ol-ctx-menu",o={namespace:i,container:i+"-container",separator:i+"-separator",submenu:i+"-submenu",hidden:i+"-hidden",icon:i+"-icon",zoomIn:i+"-zoom-in",zoomOut:i+"-zoom-out",unselectable:"ol-unselectable"},s=o,a="beforeopen",r="open",l="close",c="contextmenu",h={width:150,scrollAt:4,eventType:c,defaultItems:!0},p=[{text:"Zoom In",classname:o.zoomIn+" "+o.icon,callback:function(t,e){var n=e.getView();n.animate({zoom:+n.getZoom()+1,duration:700,center:t.coordinate})}},{text:"Zoom Out",classname:o.zoomOut+" "+o.icon,callback:function(t,e){var n=e.getView();n.animate({zoom:+n.getZoom()-1,duration:700,center:t.coordinate})}}];function u(t,e){if(void 0===e&&(e="Assertion failed"),!t){if("undefined"!=typeof Error)throw new Error(e);throw e}}function d(t){return/^\d+$/.test(t)}function m(t,e){return t.classList?t.classList.contains(e):g(e).test(t.className)}function f(t,e,n){void 0===e&&(e=window.document);var i=Array.prototype.slice,o=[];if(/^(#?[\w-]+|\.[\w-.]+)$/.test(t))switch(t[0]){case"#":o=[y(t.substr(1))];break;case".":o=i.call(e.getElementsByClassName(t.substr(1).replace(/\./g," ")));break;default:o=i.call(e.getElementsByTagName(t))}else o=i.call(e.querySelectorAll(t));return n?o:o[0]}function y(t){return t="#"===t[0]?t.substr(1,t.length):t,document.getElementById(t)}function v(t){var e=document.createDocumentFragment(),n=document.createElement("div");for(n.innerHTML=t;n.firstChild;)e.appendChild(n.firstChild);return e}function g(t){return new RegExp("(^|\\s+) "+t+" (\\s+|$)")}function b(t,e,n){t.classList?t.classList.add(e):t.className=(t.className+" "+e).trim(),n&&d(n)&&window.setTimeout((function(){return C(t,e)}),n)}function C(t,e,n){t.classList?t.classList.remove(e):t.className=t.className.replace(g(e)," ").trim(),n&&d(n)&&window.setTimeout((function(){return b(t,e)}),n)}var E=function(t){return this.Base=t,this.map=void 0,this.viewport=void 0,this.coordinateClicked=void 0,this.pixelClicked=void 0,this.lineHeight=0,this.items={},this.opened=!1,this.submenu={left:t.options.width-15+"px",lastLeft:""},this.eventHandler=this.handleEvent.bind(this),this.eventMapMoveHandler=this.handleMapMoveEvent.bind(this),this};E.prototype.init=function(t){this.map=t,this.viewport=t.getViewport(),this.setListeners(),this.Base.Html.createMenu(),this.lineHeight=this.getItemsLength()>0?this.Base.container.offsetHeight/this.getItemsLength():this.Base.Html.cloneAndGetLineHeight()},E.prototype.getItemsLength=function(){var t=this,e=0;return Object.keys(this.items).forEach((function(n){t.items[n].submenu||t.items[n].separator||e++})),e},E.prototype.getPixelClicked=function(){return this.pixelClicked},E.prototype.getCoordinateClicked=function(){return this.coordinateClicked},E.prototype.positionContainer=function(t){var e=this,n=this.Base.container,i=this.map.getSize(),o=i[1]-t[1],a=i[0]-t[0],r=n.offsetWidth,l=Math.round(this.lineHeight*this.getItemsLength()),c=f("li."+s.submenu+">div",n,!0);a>=r?(n.style.right="auto",n.style.left=t[0]+5+"px"):(n.style.left="auto",n.style.right="15px"),o>=l?(n.style.bottom="auto",n.style.top=t[1]-10+"px"):(n.style.top="auto",n.style.bottom=0),function t(e,n,i){if(Array.isArray(e))e.forEach((function(e){return t(e,n,i)}));else for(var o=Array.isArray(n)?n:n.split(/\s+/),s=o.length;s--;)m(e,o[s])&&C(e,o[s],i)}(n,s.hidden),c.length&&(this.submenu.lastLeft=a<2*r?"-"+r+"px":this.submenu.left,c.forEach((function(t){var n,i,s,a={w:window.innerWidth||document.documentElement.clientWidth,h:window.innerHeight||document.documentElement.clientHeight},r=(i=(n=t).getBoundingClientRect(),s=document.documentElement,{left:i.left+window.pageXOffset-s.clientLeft,top:i.top+window.pageYOffset-s.clientTop,width:n.offsetWidth,height:n.offsetHeight}),l=r.height,c=o-l;c<0&&(c=l-(a.h-r.top),t.style.top="-"+c+"px"),t.style.left=e.submenu.lastLeft})))},E.prototype.openMenu=function(t,e){this.Base.dispatchEvent({type:r,pixel:t,coordinate:e}),this.opened=!0,this.positionContainer(t)},E.prototype.closeMenu=function(){this.opened=!1,function t(e,n,i){if(Array.isArray(e))e.forEach((function(e){return t(e,n)}));else for(var o=Array.isArray(n)?n:n.split(/\s+/),s=o.length;s--;)m(e,o[s])||b(e,o[s],i)}(this.Base.container,s.hidden),this.Base.dispatchEvent({type:l})},E.prototype.setListeners=function(){this.viewport.addEventListener(this.Base.options.eventType,this.eventHandler,!1),this.map.on("movestart",this.eventMapMoveHandler)},E.prototype.removeListeners=function(){this.viewport.removeEventListener(this.Base.options.eventType,this.eventHandler,!1),this.map.un("movestart",this.eventMapMoveHandler)},E.prototype.handleEvent=function(t){var e=this;this.coordinateClicked=this.map.getEventCoordinate(t),this.pixelClicked=this.map.getEventPixel(t),this.Base.dispatchEvent({type:a,pixel:this.pixelClicked,coordinate:this.coordinateClicked}),this.Base.disabled||(this.Base.options.eventType===c&&(t.stopPropagation(),t.preventDefault()),this.openMenu(this.pixelClicked,this.coordinateClicked),t.target.addEventListener("pointerdown",{handleEvent:function(n){e.opened&&(e.closeMenu(),n.stopPropagation(),t.target.removeEventListener(n.type,this,!1))}},!1))},E.prototype.handleMapMoveEvent=function(t){this.closeMenu()},E.prototype.setItemListener=function(t,e){var n,i=this;t&&"function"==typeof this.items[e].callback&&(n=this.items[e].callback,t.addEventListener("click",(function(t){t.preventDefault();var o={coordinate:i.getCoordinateClicked(),data:i.items[e].data||null};i.closeMenu(),n(o,i.map)}),!1))};var w=function(t){return this.Base=t,this.Base.container=this.container=this.createContainer(!0),this};return w.prototype.createContainer=function(t){var e=document.createElement("div"),n=document.createElement("ul"),i=[s.container,s.unselectable];return t&&i.push(s.hidden),e.className=i.join(" "),e.style.width=parseInt(this.Base.options.width,10)+"px",e.appendChild(n),e},w.prototype.createMenu=function(){var t=[];if("items"in this.Base.options?t=this.Base.options.defaultItems?this.Base.options.items.concat(p):this.Base.options.items:this.Base.options.defaultItems&&(t=p),0===t.length)return!1;t.forEach(this.addMenuEntry,this)},w.prototype.addMenuEntry=function(t){var e,n=this;if(t.items&&Array.isArray(t.items)){t.classname=t.classname||"",e=s.submenu,~t.classname.indexOf(e)||(t.classname=t.classname.length?" "+s.submenu:s.submenu);var i=this.generateHtmlAndPublish(this.container,t),o=this.createContainer();o.style.left=this.Base.Internal.submenu.lastLeft||this.Base.Internal.submenu.left,i.appendChild(o),t.items.forEach((function(t){n.generateHtmlAndPublish(o,t,!0)}))}else this.generateHtmlAndPublish(this.container,t)},w.prototype.generateHtmlAndPublish=function(t,e,n){var i,o,a="_"+Math.random().toString(36).substr(2,9),r=!1;return"string"==typeof e&&"-"===e.trim()?(i=v('<li id="'+a+'" class="'+s.separator+'"><hr></li>'),o=[].slice.call(i.childNodes,0)[0],t.firstChild.appendChild(i),r=!0):(e.classname=e.classname||"",i=v("<span>"+e.text+"</span>"),o=document.createElement("li"),e.icon&&(""===e.classname?e.classname=s.icon:-1===e.classname.indexOf(s.icon)&&(e.classname+=" "+s.icon),o.setAttribute("style","background-image:url("+e.icon+")")),o.id=a,o.className=e.classname,o.appendChild(i),t.firstChild.appendChild(o)),this.Base.Internal.items[a]={id:a,submenu:n||0,separator:r,callback:e.callback,data:e.data||null},this.Base.Internal.setItemListener(o,a),o},w.prototype.removeMenuEntry=function(t){var e=f("#"+t,this.container.firstChild);e&&this.container.firstChild.removeChild(e),delete this.Base.Internal.items[t]},w.prototype.cloneAndGetLineHeight=function(){var t=this.container.cloneNode(),e=v("<span>Foo</span>"),n=v("<span>Foo</span>"),i=document.createElement("li"),o=document.createElement("li");i.appendChild(e),o.appendChild(n),t.appendChild(i),t.appendChild(o),this.container.parentNode.appendChild(t);var s=t.offsetHeight/2;return this.container.parentNode.removeChild(t),s},function(t){function e(e){void 0===e&&(e={}),u("object"==typeof e,"@param `opt_options` should be object type!"),this.options=function(t,e){var n={};for(var i in t)n[i]=t[i];for(var o in e)n[o]=e[o];return n}(h,e),this.disabled=!1,this.Internal=new E(this),this.Html=new w(this),t.call(this,{element:this.container})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.clear=function(){Object.keys(this.Internal.items).forEach(this.Html.removeMenuEntry,this.Html)},e.prototype.close=function(){this.Internal.closeMenu()},e.prototype.enable=function(){this.disabled=!1},e.prototype.disable=function(){this.disabled=!0},e.prototype.getDefaultItems=function(){return p},e.prototype.countItems=function(){return Object.keys(this.Internal.items).length},e.prototype.extend=function(t){u(Array.isArray(t),"@param `arr` should be an Array."),t.forEach(this.push,this)},e.prototype.isOpen=function(){return this.Internal.opened},e.prototype.updatePosition=function(t){u(Array.isArray(t),"@param `pixel` should be an Array."),this.isOpen()&&this.Internal.positionContainer(t)},e.prototype.pop=function(){var t=Object.keys(this.Internal.items);this.Html.removeMenuEntry(t[t.length-1])},e.prototype.push=function(t){u(null!=t,"@param `item` must be informed."),this.Html.addMenuEntry(t)},e.prototype.shift=function(){this.Html.removeMenuEntry(Object.keys(this.Internal.items)[0])},e.prototype.setMap=function(e){t.prototype.setMap.call(this,e),e?this.Internal.init(e,this):this.Internal.removeListeners()},e}(n.default)}));