Add support for hover open delay

evermade · Aug 30, 2024 · 4ffe229 · 4ffe229
1 parent 62cdde2
commit 4ffe229
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -159,6 +159,7 @@ const menu = menuFromHTML( menuEl, {
 	visuallyHiddenClass: 'screen-reader-text',
 	expandChildMenuText: 'Sub menu',
 	hoverTimeout: 750,
+	hoverOpenDelay: 0,
 	buttonIcon:
 		'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>',
 	shouldWrapAnchorToButton: null,
@@ -230,6 +231,12 @@ Time in milliseconds to wait before closing sub menu after hover moves outside o
 
 Defaults to `750`.
 
+#### hoverOpenDelay (number)
+
+Time in milliseconds to wait before opening sub menu after hover. This is used to prevent accidental opening of sub menus and let cursor quickly move over the menu without opening it.
+
+Defaults to `0`.
+
 #### buttonIcon (string)
 
 HTML string to be used as toggle button icon.
@@ -404,6 +411,10 @@ This library has taken a lot from [MEOM/navigation](https://github.com/MEOM/navi
 
 ## Change log
 
+### 1.0.3
+
+Add support for hover open delay. This allows cursors to quickly move over the menu without opening it. This is good for huge mega menus.
+
 ### 1.0.2
 
 Prevent double initialization of menu. This could happen by human error or by some cookie consent scripts that re-run scripts after consent is given.

diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -51,6 +51,7 @@ function menuFromHTML(element, options) {
         visuallyHiddenClass: 'screen-reader-text',
         expandChildMenuText: 'Sub menu',
         hoverTimeout: 750,
+        hoverOpenDelay: 0,
         buttonIcon: '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>',
         shouldWrapAnchorToButton: null,
         activeListItemSelector: '.current-menu-item',
@@ -413,7 +414,19 @@ function menuFromHTML(element, options) {
             closeSubMenu(subMenu, event);
         });
         if (ul) {
-            openSubMenu(ul, event);
+            // Delay opening if there is a delay set.
+            if (settings.hoverOpenDelay === 0) {
+                openSubMenu(ul, event);
+            }
+            else {
+                setTimeout(() => {
+                    const hoveredEls = document.querySelectorAll(':hover');
+                    const isHovered = Array.from(hoveredEls).some((el) => el === currentTarget || currentTarget.contains(el));
+                    if (isHovered) {
+                        openSubMenu(ul, event);
+                    }
+                }, settings.hoverOpenDelay);
+            }
         }
     };
     /**

diff --git a/dist/index.esm.min.js b/dist/index.esm.min.js
diff --git a/dist/index.js b/dist/index.js
@@ -57,6 +57,7 @@ button:not([disabled])
             visuallyHiddenClass: 'screen-reader-text',
             expandChildMenuText: 'Sub menu',
             hoverTimeout: 750,
+            hoverOpenDelay: 0,
             buttonIcon: '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>',
             shouldWrapAnchorToButton: null,
             activeListItemSelector: '.current-menu-item',
@@ -419,7 +420,19 @@ button:not([disabled])
                 closeSubMenu(subMenu, event);
             });
             if (ul) {
-                openSubMenu(ul, event);
+                // Delay opening if there is a delay set.
+                if (settings.hoverOpenDelay === 0) {
+                    openSubMenu(ul, event);
+                }
+                else {
+                    setTimeout(() => {
+                        const hoveredEls = document.querySelectorAll(':hover');
+                        const isHovered = Array.from(hoveredEls).some((el) => el === currentTarget || currentTarget.contains(el));
+                        if (isHovered) {
+                            openSubMenu(ul, event);
+                        }
+                    }, settings.hoverOpenDelay);
+                }
             }
         };
         /**