fix #28

nkappler · Oct 5, 2021 · 2f51fdf · 2f51fdf
1 parent 673b732
commit 2f51fdf
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 43 deletions.
diff --git a/docs/ctxmenu.js b/docs/ctxmenu.js
@@ -108,6 +108,7 @@
         this.cache = {};
         this.hdir = "r";
         this.vdir = "d";
+        this.preventCloseOnScroll = false;
         window.addEventListener("click", function (ev) {
           var item = ev.target instanceof Element && ev.target.parentElement;
 
@@ -120,8 +121,19 @@
         window.addEventListener("resize", function () {
           return _this.hide();
         });
-        window.addEventListener("scroll", function () {
-          return _this.hide();
+        var timeout = 0;
+        window.addEventListener("wheel", function () {
+          clearTimeout(timeout);
+          timeout = setTimeout(function () {
+            if (_this.preventCloseOnScroll) {
+              _this.preventCloseOnScroll = false;
+              return;
+            }
+
+            _this.hide();
+          });
+        }, {
+          passive: true
         });
         ContextMenu.addStylesToDom();
       }
@@ -153,7 +165,7 @@
           };
 
           this.cache[target] = {
-            ctxmenu: ctxMenu,
+            ctxMenu: ctxMenu,
             handler: handler,
             beforeRender: beforeRender
           };
@@ -166,7 +178,7 @@
           var t = document.querySelector(target);
           o && (t === null || t === void 0 ? void 0 : t.removeEventListener("contextmenu", o.handler));
           delete this.cache[target];
-          this.attach(target, ctxMenu || (o === null || o === void 0 ? void 0 : o.ctxmenu) || [], beforeRender || (o === null || o === void 0 ? void 0 : o.beforeRender));
+          this.attach(target, ctxMenu || (o === null || o === void 0 ? void 0 : o.ctxMenu) || [], beforeRender || (o === null || o === void 0 ? void 0 : o.beforeRender));
         }
       }, {
         key: "delete",
@@ -191,13 +203,20 @@
       }, {
         key: "show",
         value: function show(ctxMenu, eventOrElement) {
+          var _this3 = this;
+
           if (eventOrElement instanceof MouseEvent) {
             eventOrElement.stopImmediatePropagation();
           }
 
           this.hide();
           this.menu = this.generateDOM(_toConsumableArray(ctxMenu), eventOrElement);
           document.body.appendChild(this.menu);
+          this.menu.addEventListener("wheel", function () {
+            return _this3.preventCloseOnScroll = true;
+          }, {
+            passive: true
+          });
 
           if (eventOrElement instanceof MouseEvent) {
             eventOrElement.preventDefault();
@@ -237,7 +256,7 @@
       }, {
         key: "generateDOM",
         value: function generateDOM(ctxMenu, parentOrEvent) {
-          var _this3 = this;
+          var _this4 = this;
 
           var container = document.createElement("ul");
 
@@ -248,13 +267,13 @@
           ctxMenu.forEach(function (item) {
             var li = document.createElement("li");
 
-            _this3.debounce(li, function () {
+            _this4.debounce(li, function () {
               var _a;
 
               var subMenu = (_a = li.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector("ul");
 
               if (subMenu && subMenu.parentElement !== li) {
-                _this3.hide(subMenu);
+                _this4.hide(subMenu);
               }
             });
 
@@ -279,14 +298,14 @@
                     li.addEventListener("click", function (e) {
                       item.action(e);
 
-                      _this3.hide();
+                      _this4.hide();
                     });
                   } else if (ContextMenu.itemIsAnchor(item)) {
                     var a = document.createElement("a");
                     elem ? a.append(elem) : a.innerHTML = html ? html : text;
 
                     a.onclick = function () {
-                      return _this3.hide();
+                      return _this4.hide();
                     };
 
                     a.href = ContextMenu.getProp(item.href);
@@ -309,11 +328,11 @@
                     } else {
                       li.classList.add("submenu");
 
-                      _this3.debounce(li, function (ev) {
+                      _this4.debounce(li, function (ev) {
                         var subMenu = li.querySelector("ul");
 
                         if (!subMenu) {
-                          _this3.openSubMenu(ev, ContextMenu.getProp(item.subMenu), li);
+                          _this4.openSubMenu(ev, ContextMenu.getProp(item.subMenu), li);
                         }
                       });
                     }
@@ -467,14 +486,16 @@
           var _append = function append() {
             var styles = {
               ".ctxmenu": {
+                maxHeight: "100vh",
                 border: "1px solid #999",
                 padding: "2px 0",
                 boxShadow: "3px 3px 3px #aaa",
                 background: "#fff",
                 margin: "0",
                 fontSize: "15px",
                 fontFamily: "Verdana, sans-serif",
-                zIndex: "9999"
+                zIndex: "9999",
+                overflowY: "auto"
               },
               ".ctxmenu li": {
                 margin: "1px 0",