parent
84336b848c
commit
9a93fd9ec4
|
@ -1,4 +1,3 @@
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
import bp from './breakpoints';
|
import bp from './breakpoints';
|
||||||
|
|
||||||
const HIDE_INTERVAL_TIMEOUT = 300;
|
const HIDE_INTERVAL_TIMEOUT = 300;
|
||||||
|
@ -8,9 +7,11 @@ const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
|
||||||
let currentOpenMenu = null;
|
let currentOpenMenu = null;
|
||||||
let menuCornerLocs;
|
let menuCornerLocs;
|
||||||
let timeoutId;
|
let timeoutId;
|
||||||
|
let sidebar;
|
||||||
|
|
||||||
export const mousePos = [];
|
export const mousePos = [];
|
||||||
|
|
||||||
|
export const setSidebar = (el) => { sidebar = el; };
|
||||||
export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; };
|
export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; };
|
||||||
|
|
||||||
export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
|
export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
|
||||||
|
@ -20,10 +21,8 @@ let headerHeight = 50;
|
||||||
export const getHeaderHeight = () => headerHeight;
|
export const getHeaderHeight = () => headerHeight;
|
||||||
|
|
||||||
export const canShowActiveSubItems = (el) => {
|
export const canShowActiveSubItems = (el) => {
|
||||||
const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md';
|
if (el.classList.contains('active') && (sidebar && !sidebar.classList.contains('sidebar-icons-only'))) {
|
||||||
|
return false;
|
||||||
if (el.classList.contains('active') && !isHiddenByMedia) {
|
|
||||||
return Cookies.get('sidebar_collapsed') === 'true';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
|
@ -143,13 +142,13 @@ export const documentMouseMove = (e) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const sidebar = document.querySelector('.sidebar-top-level-items');
|
sidebar = document.querySelector('.nav-sidebar');
|
||||||
|
|
||||||
if (!sidebar) return;
|
if (!sidebar) return;
|
||||||
|
|
||||||
const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
|
const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
|
||||||
|
|
||||||
sidebar.addEventListener('mouseleave', () => {
|
sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
|
||||||
clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
timeoutId = setTimeout(() => {
|
timeoutId = setTimeout(() => {
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
import {
|
import {
|
||||||
calculateTop,
|
calculateTop,
|
||||||
showSubLevelItems,
|
showSubLevelItems,
|
||||||
|
@ -11,6 +10,7 @@ import {
|
||||||
getHideSubItemsInterval,
|
getHideSubItemsInterval,
|
||||||
documentMouseMove,
|
documentMouseMove,
|
||||||
getHeaderHeight,
|
getHeaderHeight,
|
||||||
|
setSidebar,
|
||||||
} from '~/fly_out_nav';
|
} from '~/fly_out_nav';
|
||||||
import bp from '~/breakpoints';
|
import bp from '~/breakpoints';
|
||||||
|
|
||||||
|
@ -113,7 +113,6 @@ describe('Fly out sidebar navigation', () => {
|
||||||
clientX: el.getBoundingClientRect().left + 20,
|
clientX: el.getBoundingClientRect().left + 20,
|
||||||
clientY: el.getBoundingClientRect().top + 10,
|
clientY: el.getBoundingClientRect().top + 10,
|
||||||
});
|
});
|
||||||
console.log(el);
|
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
getHideSubItemsInterval(),
|
getHideSubItemsInterval(),
|
||||||
|
@ -283,7 +282,7 @@ describe('Fly out sidebar navigation', () => {
|
||||||
|
|
||||||
describe('canShowActiveSubItems', () => {
|
describe('canShowActiveSubItems', () => {
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
Cookies.remove('sidebar_collapsed');
|
setSidebar(null);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns true by default', () => {
|
it('returns true by default', () => {
|
||||||
|
@ -292,36 +291,23 @@ describe('Fly out sidebar navigation', () => {
|
||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns false when cookie is false & element is active', () => {
|
it('returns false when active & expanded sidebar', () => {
|
||||||
Cookies.set('sidebar_collapsed', 'false');
|
const sidebar = document.createElement('div');
|
||||||
el.classList.add('active');
|
el.classList.add('active');
|
||||||
|
|
||||||
|
setSidebar(sidebar);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
canShowActiveSubItems(el),
|
canShowActiveSubItems(el),
|
||||||
).toBeFalsy();
|
).toBeFalsy();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns true when cookie is false & element is active', () => {
|
it('returns true when active & collapsed sidebar', () => {
|
||||||
Cookies.set('sidebar_collapsed', 'true');
|
const sidebar = document.createElement('div');
|
||||||
|
sidebar.classList.add('sidebar-icons-only');
|
||||||
el.classList.add('active');
|
el.classList.add('active');
|
||||||
|
|
||||||
expect(
|
setSidebar(sidebar);
|
||||||
canShowActiveSubItems(el),
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('returns true when element is active & breakpoint is sm', () => {
|
|
||||||
breakpointSize = 'sm';
|
|
||||||
el.classList.add('active');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
canShowActiveSubItems(el),
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('returns true when element is active & breakpoint is md', () => {
|
|
||||||
breakpointSize = 'md';
|
|
||||||
el.classList.add('active');
|
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
canShowActiveSubItems(el),
|
canShowActiveSubItems(el),
|
||||||
|
|
Loading…
Reference in New Issue