debian-mirror-gitlab/app/assets/javascripts/fly_out_nav.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

206 lines
5.7 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
2019-09-04 21:01:54 +05:30
import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
2017-09-10 17:25:29 +05:30
const HIDE_INTERVAL_TIMEOUT = 300;
2021-09-30 23:02:18 +05:30
const COLLAPSED_PANEL_WIDTH = 48;
2017-09-10 17:25:29 +05:30
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;
let sidebar;
export const mousePos = [];
2021-03-08 18:12:59 +05:30
export const setSidebar = (el) => {
2018-12-13 13:39:08 +05:30
sidebar = el;
};
2017-09-10 17:25:29 +05:30
export const getOpenMenu = () => currentOpenMenu;
2018-12-13 13:39:08 +05:30
export const setOpenMenu = (menu = null) => {
currentOpenMenu = menu;
};
2017-09-10 17:25:29 +05:30
export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
2021-09-04 01:27:46 +05:30
export const getHeaderHeight = () => sidebar?.offsetTop || 0;
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
export const isSidebarCollapsed = () =>
2019-09-04 21:01:54 +05:30
sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
2018-03-17 18:26:18 +05:30
2021-03-08 18:12:59 +05:30
export const canShowActiveSubItems = (el) => {
2018-03-17 18:26:18 +05:30
if (el.classList.contains('active') && !isSidebarCollapsed()) {
2017-09-10 17:25:29 +05:30
return false;
}
return true;
};
2020-03-13 15:44:24 +05:30
export const canShowSubItems = () => ['md', 'lg', 'xl'].includes(bp.getBreakpointSize());
2017-09-10 17:25:29 +05:30
export const getHideSubItemsInterval = () => {
2018-03-17 18:26:18 +05:30
if (!currentOpenMenu || !mousePos.length) return 0;
2017-09-10 17:25:29 +05:30
const currentMousePos = mousePos[mousePos.length - 1];
const prevMousePos = mousePos[0];
const currentMousePosY = currentMousePos.y;
const [menuTop, menuBottom] = menuCornerLocs;
2018-12-13 13:39:08 +05:30
if (currentMousePosY < menuTop.y || currentMousePosY > menuBottom.y) return 0;
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
if (
slope(prevMousePos, menuBottom) < slope(currentMousePos, menuBottom) &&
slope(prevMousePos, menuTop) > slope(currentMousePos, menuTop)
) {
2017-09-10 17:25:29 +05:30
return HIDE_INTERVAL_TIMEOUT;
}
return 0;
};
export const calculateTop = (boundingRect, outerHeight) => {
const windowHeight = window.innerHeight;
const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
2018-12-13 13:39:08 +05:30
return bottomOverflow < 0
? boundingRect.top - outerHeight + boundingRect.height
: boundingRect.top;
2017-09-10 17:25:29 +05:30
};
2021-03-08 18:12:59 +05:30
export const hideMenu = (el) => {
2017-09-10 17:25:29 +05:30
if (!el) return;
const parentEl = el.parentNode;
2018-11-20 20:47:30 +05:30
el.style.display = '';
el.style.transform = '';
2017-09-10 17:25:29 +05:30
el.classList.remove(IS_ABOVE_CLASS);
2021-09-04 01:27:46 +05:30
el.classList.remove('fly-out-list');
2017-09-10 17:25:29 +05:30
parentEl.classList.remove(IS_OVER_CLASS);
parentEl.classList.remove(IS_SHOWING_FLY_OUT_CLASS);
setOpenMenu();
};
export const moveSubItemsToPosition = (el, subItems) => {
2021-09-04 01:27:46 +05:30
const hasSubItems = subItems.parentNode.querySelector('.has-sub-items');
const header = subItems.querySelector('.fly-out-top-item');
2017-09-10 17:25:29 +05:30
const boundingRect = el.getBoundingClientRect();
2021-09-04 01:27:46 +05:30
const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
let top = calculateTop(boundingRect, subItems.offsetHeight);
2021-09-30 23:02:18 +05:30
const isAbove = top < boundingRect.top;
if (hasSubItems) {
top = isAbove ? top : top - header.offsetHeight;
} else {
2021-09-04 01:27:46 +05:30
top = boundingRect.top;
}
2017-09-10 17:25:29 +05:30
subItems.classList.add('fly-out-list');
2021-09-04 01:27:46 +05:30
subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign
2017-09-10 17:25:29 +05:30
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) {
subItems.classList.add(IS_ABOVE_CLASS);
}
};
2021-03-08 18:12:59 +05:30
export const showSubLevelItems = (el) => {
2017-09-10 17:25:29 +05:30
const subItems = el.querySelector('.sidebar-sub-level-items');
2018-03-17 18:26:18 +05:30
const isIconOnly = subItems && subItems.classList.contains('is-fly-out-only');
2017-09-10 17:25:29 +05:30
if (!canShowSubItems() || !canShowActiveSubItems(el)) return;
el.classList.add(IS_OVER_CLASS);
2018-03-17 18:26:18 +05:30
if (!subItems || (!isSidebarCollapsed() && isIconOnly)) return;
2017-09-10 17:25:29 +05:30
subItems.style.display = 'block';
el.classList.add(IS_SHOWING_FLY_OUT_CLASS);
setOpenMenu(subItems);
moveSubItemsToPosition(el, subItems);
};
2018-03-17 18:26:18 +05:30
export const mouseEnterTopItems = (el, timeout = getHideSubItemsInterval()) => {
2017-09-10 17:25:29 +05:30
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
if (currentOpenMenu) hideMenu(currentOpenMenu);
showSubLevelItems(el);
2018-03-17 18:26:18 +05:30
}, timeout);
2017-09-10 17:25:29 +05:30
};
2021-03-08 18:12:59 +05:30
export const mouseLeaveTopItem = (el) => {
2017-09-10 17:25:29 +05:30
const subItems = el.querySelector('.sidebar-sub-level-items');
2018-12-13 13:39:08 +05:30
if (
!canShowSubItems() ||
!canShowActiveSubItems(el) ||
(subItems && subItems === currentOpenMenu)
)
return;
2017-09-10 17:25:29 +05:30
el.classList.remove(IS_OVER_CLASS);
};
2021-03-08 18:12:59 +05:30
export const documentMouseMove = (e) => {
2017-09-10 17:25:29 +05:30
mousePos.push({
x: e.clientX,
y: e.clientY,
});
if (mousePos.length > 6) mousePos.shift();
};
2021-03-08 18:12:59 +05:30
export const subItemsMouseLeave = (relatedTarget) => {
2017-09-10 17:25:29 +05:30
clearTimeout(timeoutId);
2018-03-17 18:26:18 +05:30
if (relatedTarget && !relatedTarget.closest(`.${IS_OVER_CLASS}`)) {
2017-09-10 17:25:29 +05:30
hideMenu(currentOpenMenu);
}
};
export default () => {
sidebar = document.querySelector('.nav-sidebar');
if (!sidebar) return;
const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
2018-03-17 18:26:18 +05:30
const topItems = sidebar.querySelector('.sidebar-top-level-items');
if (topItems) {
sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
clearTimeout(timeoutId);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
timeoutId = setTimeout(() => {
if (currentOpenMenu) hideMenu(currentOpenMenu);
}, getHideSubItemsInterval());
});
}
2017-09-10 17:25:29 +05:30
2021-03-08 18:12:59 +05:30
items.forEach((el) => {
2017-09-10 17:25:29 +05:30
const subItems = el.querySelector('.sidebar-sub-level-items');
if (subItems) {
2021-03-08 18:12:59 +05:30
subItems.addEventListener('mouseleave', (e) => subItemsMouseLeave(e.relatedTarget));
2017-09-10 17:25:29 +05:30
}
2021-03-08 18:12:59 +05:30
el.addEventListener('mouseenter', (e) => mouseEnterTopItems(e.currentTarget));
el.addEventListener('mouseleave', (e) => mouseLeaveTopItem(e.currentTarget));
2017-09-10 17:25:29 +05:30
});
document.addEventListener('mousemove', documentMouseMove);
};