diff options
author | Phil Hughes <me@iamphill.com> | 2017-08-30 13:48:33 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-08-31 12:09:49 +0300 |
commit | 465813a2c8a9218ca453b3610024f25b2d51f81d (patch) | |
tree | 973971a72eb62ddea5b59cacb381ad340cc4b223 | |
parent | 3e092caa91853afeab3bb01be10869e45c39de5d (diff) |
Fixes the fly-out navigation flashing in & out
Closes #37022
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 14 | ||||
-rw-r--r-- | changelogs/unreleased/fly-out-nav-hiding-fix.yml | 5 | ||||
-rw-r--r-- | spec/javascripts/fly_out_nav_spec.js | 27 |
3 files changed, 42 insertions, 4 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 81697af189b..063155a167a 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -12,6 +12,7 @@ let sidebar; export const mousePos = []; export const setSidebar = (el) => { sidebar = el; }; +export const getOpenMenu = () => currentOpenMenu; export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; }; export const slope = (a, b) => (b.y - a.y) / (b.x - a.x); @@ -141,6 +142,14 @@ export const documentMouseMove = (e) => { if (mousePos.length > 6) mousePos.shift(); }; +export const subItemsMouseLeave = (relatedTarget) => { + clearTimeout(timeoutId); + + if (!relatedTarget.closest(`.${IS_OVER_CLASS}`)) { + hideMenu(currentOpenMenu); + } +}; + export default () => { sidebar = document.querySelector('.nav-sidebar'); @@ -162,10 +171,7 @@ export default () => { const subItems = el.querySelector('.sidebar-sub-level-items'); if (subItems) { - subItems.addEventListener('mouseleave', () => { - clearTimeout(timeoutId); - hideMenu(currentOpenMenu); - }); + subItems.addEventListener('mouseleave', e => subItemsMouseLeave(e.relatedTarget)); } el.addEventListener('mouseenter', e => mouseEnterTopItems(e.currentTarget)); diff --git a/changelogs/unreleased/fly-out-nav-hiding-fix.yml b/changelogs/unreleased/fly-out-nav-hiding-fix.yml new file mode 100644 index 00000000000..0688ea89d16 --- /dev/null +++ b/changelogs/unreleased/fly-out-nav-hiding-fix.yml @@ -0,0 +1,5 @@ +--- +title: Fixed fly-out nav flashing in & out +merge_request: +author: +type: fixed diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js index 0847e463577..4588bf3d971 100644 --- a/spec/javascripts/fly_out_nav_spec.js +++ b/spec/javascripts/fly_out_nav_spec.js @@ -5,12 +5,14 @@ import { canShowActiveSubItems, mouseEnterTopItems, mouseLeaveTopItem, + getOpenMenu, setOpenMenu, mousePos, getHideSubItemsInterval, documentMouseMove, getHeaderHeight, setSidebar, + subItemsMouseLeave, } from '~/fly_out_nav'; import bp from '~/breakpoints'; @@ -314,4 +316,29 @@ describe('Fly out sidebar navigation', () => { ).toBeTruthy(); }); }); + + describe('subItemsMouseLeave', () => { + beforeEach(() => { + el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>'; + + setOpenMenu(el.querySelector('.sidebar-sub-level-items')); + }); + + it('hides subMenu if element is not hovered', () => { + subItemsMouseLeave(el); + + expect( + getOpenMenu(), + ).toBeNull(); + }); + + it('does not hide subMenu if element is hovered', () => { + el.classList.add('is-over'); + subItemsMouseLeave(el); + + expect( + getOpenMenu(), + ).not.toBeNull(); + }); + }); }); |