parent
3e092caa91
commit
465813a2c8
|
@ -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));
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Fixed fly-out nav flashing in & out
|
||||
merge_request:
|
||||
author:
|
||||
type: fixed
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue