From 9ccaf82b959663b2b7f255de3f77d59adb0bece6 Mon Sep 17 00:00:00 2001 From: leafling Date: Mon, 18 Jul 2016 13:51:26 -0500 Subject: [PATCH] Add delay (hover intent) to _mouseOverHandler and settings options Changed _mouseOverHandler to add delay to check for hover intent. If the mouse is simply passing over the menu en route to other content, it won't trigger unless it hovers for a set duration. Default is set to 0 milliseconds to match previous settings. Also made made the delay an option in the config so one can readily choose if/when a delay should happen in regard to mouse Over/Out. --- js/jquery-accessibleMegaMenu.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/js/jquery-accessibleMegaMenu.js b/js/jquery-accessibleMegaMenu.js index aaabb90..744ccbd 100644 --- a/js/jquery-accessibleMegaMenu.js +++ b/js/jquery-accessibleMegaMenu.js @@ -55,7 +55,9 @@ limitations under the License. panelGroupClass: "accessible-megamenu-panel-group", // default css class for a group of items within a megamenu panel hoverClass: "hover", // default css class for the hover state focusClass: "focus", // default css class for the focus state - openClass: "open" // default css class for the open state + openClass: "open", // default css class for the open state + mouseOverDelay: 0, // default delay in milliseconds to determine hover intent so menu doesn't drop when mouse is simply passing over the menu + mouseOutDelay: 250 // default delay in milliseconds when menu will close after mouse exits }, Keyboard = { BACKSPACE: 8, @@ -647,11 +649,16 @@ limitations under the License. * @private */ _mouseOverHandler = function (event) { - clearTimeout(this.mouseTimeoutID); - $(event.target) + var that = this; + $(event.target) .addClass(this.settings.hoverClass); - _togglePanel.call(this, event); - if ($(event.target).is(':tabbable')) { + + that.mouseTimeoutID = setTimeout(function () { + if ($(event.target).is(':hover')) { // if still hovering, then show menu... + _togglePanel.call(that, event); + } + }, this.settings.mouseOverDelay); + if ($(event.target).is(':tabbable')) { $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target)); } }; @@ -671,7 +678,7 @@ limitations under the License. that.mouseTimeoutID = setTimeout(function () { _togglePanel.call(that, event, true); - }, 250); + }, this.settings.mouseOutDelay ); if ($(event.target).is(':tabbable')) { $('html').off('keydown.accessible-megamenu'); }