Skip to content

G
gitlab-ce
Commit 237d26b9 authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

Merge branch 'fly-out-update-for-stable' into '9-5-stable' 

Fixes the stable branches fly out nav JS

See merge request !13683
parents 55b15c21 150e8b30
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 284 deletions
app/assets/javascripts/fly_out_nav.js
View file @ 237d26b9
import Cookies from 'js-cookie';
import bp from './breakpoints'; import bp from './breakpoints';
const HIDE_INTERVAL_TIMEOUT = 300;
const IS_OVER_CLASS = 'is-over';
const IS_ABOVE_CLASS = 'is-above';
const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
let currentOpenMenu = null;
let menuCornerLocs;
let timeoutId;
export const mousePos = [];
export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; };
export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
let headerHeight = 50; let headerHeight = 50;
let sidebar;
export const setSidebar = (el) => { sidebar = el; };
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;
}; };
export const canShowSubItems = () => bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg'; export const canShowSubItems = () => bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg';
export const getHideSubItemsInterval = () => {
if (!currentOpenMenu) return 0;
const currentMousePos = mousePos[mousePos.length - 1];
const prevMousePos = mousePos[0];
const currentMousePosY = currentMousePos.y;
const [menuTop, menuBottom] = menuCornerLocs;
if (currentMousePosY < menuTop.y ||
currentMousePosY > menuBottom.y) return 0;
if (slope(prevMousePos, menuBottom) < slope(currentMousePos, menuBottom) &&
slope(prevMousePos, menuTop) > slope(currentMousePos, menuTop)) {
return HIDE_INTERVAL_TIMEOUT;
}
return 0;
};
export const calculateTop = (boundingRect, outerHeight) => { export const calculateTop = (boundingRect, outerHeight) => {
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
const bottomOverflow = windowHeight - (boundingRect.top + outerHeight); const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
...@@ -58,120 +24,51 @@ export const calculateTop = (boundingRect, outerHeight) => { ...@@ -58,120 +24,51 @@ export const calculateTop = (boundingRect, outerHeight) => {
boundingRect.top; boundingRect.top;
}; };
export const hideMenu = (el) => { export const showSubLevelItems = (el) => {
if (!el) return; const subItems = el.querySelector('.sidebar-sub-level-items');
const parentEl = el.parentNode;
el.style.display = ''; // eslint-disable-line no-param-reassign if (!subItems || !canShowSubItems() || !canShowActiveSubItems(el)) return;
el.style.transform = ''; // eslint-disable-line no-param-reassign
el.classList.remove(IS_ABOVE_CLASS);
parentEl.classList.remove(IS_OVER_CLASS);
parentEl.classList.remove(IS_SHOWING_FLY_OUT_CLASS);
setOpenMenu(); subItems.style.display = 'block';
}; el.classList.add('is-showing-fly-out');
el.classList.add('is-over');
export const moveSubItemsToPosition = (el, subItems) => {
const boundingRect = el.getBoundingClientRect(); const boundingRect = el.getBoundingClientRect();
const top = calculateTop(boundingRect, subItems.offsetHeight); const top = calculateTop(boundingRect, subItems.offsetHeight);
const isAbove = top < boundingRect.top; const isAbove = top < boundingRect.top;
subItems.classList.add('fly-out-list'); subItems.classList.add('fly-out-list');
subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`;
const subItemsRect = subItems.getBoundingClientRect();
menuCornerLocs = [
{
x: subItemsRect.left, // left position of the sub items
y: subItemsRect.top, // top position of the sub items
},
{
x: subItemsRect.left, // left position of the sub items
y: subItemsRect.top + subItemsRect.height, // bottom position of the sub items
},
];
if (isAbove) { if (isAbove) {
subItems.classList.add(IS_ABOVE_CLASS); subItems.classList.add('is-above');
} }
}; };
export const showSubLevelItems = (el) => { export const hideSubLevelItems = (el) => {
const subItems = el.querySelector('.sidebar-sub-level-items'); const subItems = el.querySelector('.sidebar-sub-level-items');
if (!canShowSubItems() || !canShowActiveSubItems(el)) return; if (!subItems || !canShowSubItems() || !canShowActiveSubItems(el)) return;
el.classList.add(IS_OVER_CLASS);
if (!subItems) return; el.classList.remove('is-showing-fly-out');
el.classList.remove('is-over');
subItems.style.display = 'block'; subItems.style.display = '';
el.classList.add(IS_SHOWING_FLY_OUT_CLASS); subItems.style.transform = '';
subItems.classList.remove('is-above');
setOpenMenu(subItems);
moveSubItemsToPosition(el, subItems);
};
export const mouseEnterTopItems = (el) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
if (currentOpenMenu) hideMenu(currentOpenMenu);
showSubLevelItems(el);
}, getHideSubItemsInterval());
};
export const mouseLeaveTopItem = (el) => {
const subItems = el.querySelector('.sidebar-sub-level-items');
if (!canShowSubItems() || !canShowActiveSubItems(el) ||
(subItems && subItems === currentOpenMenu)) return;
el.classList.remove(IS_OVER_CLASS);
};
export const documentMouseMove = (e) => {
mousePos.push({
x: e.clientX,
y: e.clientY,
});
if (mousePos.length > 6) mousePos.shift();
}; };
export default () => { export default () => {
const sidebar = document.querySelector('.sidebar-top-level-items'); const items = [...document.querySelectorAll('.sidebar-top-level-items > li')]
.filter(el => el.querySelector('.sidebar-sub-level-items'));
if (!sidebar) return;
const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
sidebar.addEventListener('mouseleave', () => { sidebar = document.querySelector('.nav-sidebar');
clearTimeout(timeoutId);
timeoutId = setTimeout(() => { if (sidebar) {
if (currentOpenMenu) hideMenu(currentOpenMenu); headerHeight = sidebar.offsetTop;
}, getHideSubItemsInterval());
});
headerHeight = document.querySelector('.nav-sidebar').offsetTop; items.forEach((el) => {
el.addEventListener('mouseenter', e => showSubLevelItems(e.currentTarget));
items.forEach((el) => { el.addEventListener('mouseleave', e => hideSubLevelItems(e.currentTarget));
const subItems = el.querySelector('.sidebar-sub-level-items'); });
}
if (subItems) {
subItems.addEventListener('mouseleave', () => {
clearTimeout(timeoutId);
hideMenu(currentOpenMenu);
});
}
el.addEventListener('mouseenter', e => mouseEnterTopItems(e.currentTarget));
el.addEventListener('mouseleave', e => mouseLeaveTopItem(e.currentTarget));
});
document.addEventListener('mousemove', documentMouseMove);
}; };
spec/javascripts/fly_out_nav_spec.js
View file @ 237d26b9
import Cookies from 'js-cookie';
import { import {
calculateTop, calculateTop,
hideSubLevelItems,
showSubLevelItems, showSubLevelItems,
canShowSubItems, canShowSubItems,
canShowActiveSubItems, canShowActiveSubItems,
mouseEnterTopItems,
mouseLeaveTopItem,
setOpenMenu,
mousePos,
getHideSubItemsInterval,
documentMouseMove,
getHeaderHeight, getHeaderHeight,
setSidebar,
} from '~/fly_out_nav'; } from '~/fly_out_nav';
import bp from '~/breakpoints'; import bp from '~/breakpoints';
...@@ -24,14 +19,11 @@ describe('Fly out sidebar navigation', () => { ...@@ -24,14 +19,11 @@ describe('Fly out sidebar navigation', () => {
document.body.appendChild(el); document.body.appendChild(el);
spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize); spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize);
setOpenMenu(null);
}); });
afterEach(() => { afterEach(() => {
document.body.innerHTML = ''; el.remove();
breakpointSize = 'lg'; breakpointSize = 'lg';
mousePos.length = 0;
}); });
describe('calculateTop', () => { describe('calculateTop', () => {
...@@ -58,153 +50,61 @@ describe('Fly out sidebar navigation', () => { ...@@ -58,153 +50,61 @@ describe('Fly out sidebar navigation', () => {
}); });
}); });
describe('getHideSubItemsInterval', () => { describe('hideSubLevelItems', () => {
beforeEach(() => { beforeEach(() => {
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: fixed; top: 0; left: 100px; height: 150px;"></div>'; el.innerHTML = '<div class="sidebar-sub-level-items"></div>';
}); });
it('returns 0 if currentOpenMenu is nil', () => { it('hides subitems', () => {
expect( hideSubLevelItems(el);
getHideSubItemsInterval(),
).toBe(0);
});
it('returns 0 when mouse above sub-items', () => {
showSubLevelItems(el);
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top - 50,
});
expect( expect(
getHideSubItemsInterval(), el.querySelector('.sidebar-sub-level-items').style.display,
).toBe(0); ).toBe('');
}); });
it('returns 0 when mouse is below sub-items', () => { it('does not hude subitems on mobile', () => {
const subItems = el.querySelector('.sidebar-sub-level-items'); breakpointSize = 'xs';
showSubLevelItems(el);
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: (el.getBoundingClientRect().top - subItems.getBoundingClientRect().height) + 50,
});
expect(
getHideSubItemsInterval(),
).toBe(0);
});
it('returns 300 when mouse is moved towards sub-items', () => { hideSubLevelItems(el);
documentMouseMove({
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
showSubLevelItems(el);
documentMouseMove({
clientX: el.getBoundingClientRect().left + 20,
clientY: el.getBoundingClientRect().top + 10,
});
console.log(el);
expect( expect(
getHideSubItemsInterval(), el.querySelector('.sidebar-sub-level-items').style.display,
).toBe(300); ).not.toBe('none');
}); });
});
describe('mouseLeaveTopItem', () => { it('removes is-over class', () => {
beforeEach(() => {
spyOn(el.classList, 'remove'); spyOn(el.classList, 'remove');
});
it('removes is-over class if currentOpenMenu is null', () => {
mouseLeaveTopItem(el);
expect(
el.classList.remove,
).toHaveBeenCalledWith('is-over');
});
it('removes is-over class if currentOpenMenu is null & there are sub-items', () => {
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
mouseLeaveTopItem(el); hideSubLevelItems(el);
expect( expect(
el.classList.remove, el.classList.remove,
).toHaveBeenCalledWith('is-over'); ).toHaveBeenCalledWith('is-over');
}); });
it('does not remove is-over class if currentOpenMenu is the passed in sub-items', () => { it('removes is-above class from sub-items', () => {
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>'; const subItems = el.querySelector('.sidebar-sub-level-items');
setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
mouseLeaveTopItem(el);
expect(
el.classList.remove,
).not.toHaveBeenCalled();
});
});
describe('mouseEnterTopItems', () => {
beforeEach(() => {
jasmine.clock().install();
el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute; top: 0; left: 100px; height: 200px;"></div>';
});
afterEach(() => {
jasmine.clock().uninstall();
});
it('shows sub-items after 0ms if no menu is open', () => {
mouseEnterTopItems(el);
expect( spyOn(subItems.classList, 'remove');
getHideSubItemsInterval(),
).toBe(0);
jasmine.clock().tick(0); hideSubLevelItems(el);
expect( expect(
el.querySelector('.sidebar-sub-level-items').style.display, subItems.classList.remove,
).toBe('block'); ).toHaveBeenCalledWith('is-above');
}); });
it('shows sub-items after 300ms if a menu is currently open', () => { it('does nothing if el has no sub-items', () => {
documentMouseMove({ el.innerHTML = '';
clientX: el.getBoundingClientRect().left,
clientY: el.getBoundingClientRect().top,
});
setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
documentMouseMove({ spyOn(el.classList, 'remove');
clientX: el.getBoundingClientRect().left + 20,
clientY: el.getBoundingClientRect().top + 10,
});
mouseEnterTopItems(el);
expect(
getHideSubItemsInterval(),
).toBe(300);
jasmine.clock().tick(300); hideSubLevelItems(el);
expect( expect(
el.querySelector('.sidebar-sub-level-items').style.display, el.classList.remove,
).toBe('block'); ).not.toHaveBeenCalledWith();
}); });
}); });
...@@ -233,7 +133,7 @@ describe('Fly out sidebar navigation', () => { ...@@ -233,7 +133,7 @@ describe('Fly out sidebar navigation', () => {
).not.toBe('block'); ).not.toBe('block');
}); });
it('shows sub-items', () => { it('does not shows sub-items', () => {
showSubLevelItems(el); showSubLevelItems(el);
expect( expect(
...@@ -283,7 +183,7 @@ describe('Fly out sidebar navigation', () => { ...@@ -283,7 +183,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 +192,23 @@ describe('Fly out sidebar navigation', () => { ...@@ -292,36 +192,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');
expect( setSidebar(sidebar);
canShowActiveSubItems(el),
).toBeFalsy();
});
it('returns true when cookie is false & element is active', () => {
Cookies.set('sidebar_collapsed', 'true');
el.classList.add('active');
expect( expect(
canShowActiveSubItems(el), canShowActiveSubItems(el),
).toBeTruthy(); ).toBeFalsy();
}); });
it('returns true when element is active & breakpoint is sm', () => { it('returns true when active & collapsed sidebar', () => {
breakpointSize = 'sm'; 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 md', () => {
breakpointSize = 'md';
el.classList.add('active');
expect( expect(
canShowActiveSubItems(el), canShowActiveSubItems(el),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7