From 9bd7f933c57005299b1899336d163ef3e9712661 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Mon, 23 Jul 2018 23:57:17 +0200 Subject: [PATCH] refactor: move dropdownMenu mouseleave special case to its own utility function --- js/foundation.core.utils.js | 30 +++++++++++++++++++++++++++++- js/foundation.dropdownMenu.js | 23 +++++++---------------- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/js/foundation.core.utils.js b/js/foundation.core.utils.js index c70f989d5..6345a83db 100644 --- a/js/foundation.core.utils.js +++ b/js/foundation.core.utils.js @@ -90,4 +90,32 @@ function onLoad($elem, handler) { return eventType; } -export {rtl, GetYoDigits, RegExpEscape, transitionend, onLoad}; +function onLeaveElement($elem, handler, { leaveWindow = true } = {}) { + const eventType = 'mouseleave.zf.util.onLeaveElement'; + + if ($elem && handler) { + + $elem.on(eventType, function leaveHandler(e, ...rest) { + const _this = this; + setTimeout(function leaveEventDebouncer() { + + if (e.relatedTarget === null && leaveWindow && document.hasFocus && document.hasFocus()) { + + $(document).one('mouseenter', function reenterHandler(reeenterE) { + if ($elem.has(reeenterE.target).length) { return false }; + e.relatedTarget = reeenterE.target; + handler.call(_this, e, ...rest); + }); + + return false; + } + + handler.call(_this, e, ...rest); + }); + }); + } + + return eventType; +} + +export {rtl, GetYoDigits, RegExpEscape, transitionend, onLoad, onLeaveElement}; diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js index 7b4834e05..96f66fb13 100644 --- a/js/foundation.dropdownMenu.js +++ b/js/foundation.dropdownMenu.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import { Plugin } from './foundation.core.plugin'; -import { rtl as Rtl } from './foundation.core.utils'; +import { rtl as Rtl, onLeaveElement } from './foundation.core.utils'; import { Keyboard } from './foundation.util.keyboard'; import { Nest } from './foundation.util.nest'; import { Box } from './foundation.util.box'; @@ -139,17 +139,19 @@ class DropdownMenu extends Plugin { } if (!this.options.disableHover) { - this.$menuItems.on('mouseenter.zf.dropdownMenu', function(e) { + this.$menuItems.on('mouseenter.zf.dropdownMenu', function (e) { var $elem = $(this), - hasSub = $elem.hasClass(parClass); + hasSub = $elem.hasClass(parClass); if (hasSub) { clearTimeout($elem.data('_delay')); - $elem.data('_delay', setTimeout(function() { + $elem.data('_delay', setTimeout(function () { _this._show($elem.children('.is-dropdown-submenu')); }, _this.options.hoverDelay)); } - }).on('mouseleave.zf.dropdownMenu', function(e) { + }); + + onLeaveElement(this.$menuItems, function (e) { var $elem = $(this), hasSub = $elem.hasClass(parClass); if (hasSub && _this.options.autoclose) { @@ -157,19 +159,8 @@ class DropdownMenu extends Plugin { clearTimeout($elem.data('_delay')); $elem.data('_delay', setTimeout(function () { - - // Ignore "magic mouseleave": when the mouse simply disapear from the document - // (like when entering in browser input suggestions See https://git.io/zf-11410), - // unless we actually left the window (and document lost focus). - // - // In firefox, document will not focus at the time the event is triggered, so we have - // to make this test after the delay. - if (e.relatedTarget === null && document.hasFocus && document.hasFocus()) { return false; } - _this._hide($elem); - }, _this.options.closingTime)); - } }); } -- 2.47.2