jspanel4/es6module/extensions/contextmenu/jspanel.contextmenu.min.js

A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu

import{jsPanel}from"../../jspanel.js";jsPanel.contextmenu||(jsPanel.contextmenu={version:"1.2.0",date:"2021-01-13 10:40",defaults:{dragit:!1,resizeit:!1,header:!1,headerControls:"none",closeOnMouseleave:!0},cmOverflow(e){let t=e.cmEvent.clientX,n=e.cmEvent.clientY,o=e.offsetWidth,s=e.offsetHeight,l=window.innerWidth-(t+o),a=window.innerHeight-(n+s);l<0&&(e.style.left=t+(window.scrollX||window.pageXOffset)-o+"px"),a<0&&(e.style.top=n+(window.scrollY||window.pageYOffset)-s+"px")},create(e={},t="contextmenu"){e.paneltype="contextmenu";let n=e.target;if(!n)return!1;"string"==typeof n&&(n=document.querySelector(n)),n.addEventListener(t,t=>{t.preventDefault(),document.querySelectorAll(".jsPanel-contextmenu").forEach(e=>{e.close()});let o=(t.pageX||t.touches[0].pageX)+"px",s=(t.pageY||t.touches[0].pageY)+"px",l=e;e.config&&delete(l=Object.assign({},e.config,e)).config,l=Object.assign({},this.defaults,l,{position:!1,container:"body"}),jsPanel.create(l,e=>{jsPanel.setStyle(e,{position:"absolute",left:o,top:s});let a=n.closest(".jsPanel-modal");if(a)e.style.zIndex=a.style.zIndex;else{let t=n.closest(".jsPanel");t&&t.front(),e.style.zIndex=jsPanel.zi.next()}e.cmEvent=t,jsPanel.contextmenu.cmOverflow(e),l.closeOnMouseleave&&e.addEventListener("mouseleave",()=>{e.close()},!1),jsPanel.pointerdown.forEach(function(t){e.addEventListener(t,function(e){e.stopPropagation()})})})},!1)}},jsPanel.ajaxAlwaysCallbacks.push(function(e,t){t&&t.classList&&t.classList.contains("jsPanel-contextmenu")&&jsPanel.contextmenu.cmOverflow(t)}),jsPanel.pointerdown.forEach(function(e){document.addEventListener(e,function(e){document.querySelectorAll(".jsPanel-contextmenu").forEach(function(t){e.target.closest(".jsPanel-contextmenu")||t.close()})},!1)}));