Commit 55a1c6b5 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'tz-improve-navigation-initialisation' into 'master'

Optimization of setup of Main Nav Layout, Contextual Sidebar and Fly Out Nav

Closes #56257

See merge request gitlab-org/gitlab-ce!24362
parents 8b4b7cae 8871dc90
...@@ -13,6 +13,9 @@ export default class ContextualSidebar { ...@@ -13,6 +13,9 @@ export default class ContextualSidebar {
initDomElements() { initDomElements() {
this.$page = $('.layout-page'); this.$page = $('.layout-page');
this.$sidebar = $('.nav-sidebar'); this.$sidebar = $('.nav-sidebar');
if (!this.$sidebar.length) return;
this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar); this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
this.$overlay = $('.mobile-overlay'); this.$overlay = $('.mobile-overlay');
this.$openSidebar = $('.toggle-mobile-nav'); this.$openSidebar = $('.toggle-mobile-nav');
...@@ -21,12 +24,14 @@ export default class ContextualSidebar { ...@@ -21,12 +24,14 @@ export default class ContextualSidebar {
} }
bindEvents() { bindEvents() {
if (!this.$sidebar.length) return;
document.addEventListener('click', e => { document.addEventListener('click', e => {
if ( if (
!e.target.closest('.nav-sidebar') && !e.target.closest('.nav-sidebar') &&
(bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md') (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
) { ) {
this.toggleCollapsedSidebar(true); this.toggleCollapsedSidebar(true, true);
} }
}); });
this.$openSidebar.on('click', () => this.toggleSidebarNav(true)); this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
...@@ -34,7 +39,7 @@ export default class ContextualSidebar { ...@@ -34,7 +39,7 @@ export default class ContextualSidebar {
this.$overlay.on('click', () => this.toggleSidebarNav(false)); this.$overlay.on('click', () => this.toggleSidebarNav(false));
this.$sidebarToggle.on('click', () => { this.$sidebarToggle.on('click', () => {
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop'); const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
this.toggleCollapsedSidebar(value); this.toggleCollapsedSidebar(value, true);
}); });
$(window).on('resize', () => _.debounce(this.render(), 100)); $(window).on('resize', () => _.debounce(this.render(), 100));
...@@ -53,16 +58,19 @@ export default class ContextualSidebar { ...@@ -53,16 +58,19 @@ export default class ContextualSidebar {
this.$sidebar.removeClass('sidebar-collapsed-desktop'); this.$sidebar.removeClass('sidebar-collapsed-desktop');
} }
toggleCollapsedSidebar(collapsed) { toggleCollapsedSidebar(collapsed, saveCookie) {
const breakpoint = bp.getBreakpointSize(); const breakpoint = bp.getBreakpointSize();
if (this.$sidebar.length) { if (this.$sidebar.length) {
this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed); this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed); this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
} }
ContextualSidebar.setCollapsedCookie(collapsed);
this.toggleSidebarOverflow(); if (saveCookie) {
ContextualSidebar.setCollapsedCookie(collapsed);
}
requestIdleCallback(this.toggleSidebarOverflow);
} }
toggleSidebarOverflow() { toggleSidebarOverflow() {
...@@ -74,13 +82,15 @@ export default class ContextualSidebar { ...@@ -74,13 +82,15 @@ export default class ContextualSidebar {
} }
render() { render() {
if (!this.$sidebar.length) return;
const breakpoint = bp.getBreakpointSize(); const breakpoint = bp.getBreakpointSize();
if (breakpoint === 'sm' || breakpoint === 'md') { if (breakpoint === 'sm' || breakpoint === 'md') {
this.toggleCollapsedSidebar(true); this.toggleCollapsedSidebar(true, false);
} else if (breakpoint === 'lg') { } else if (breakpoint === 'lg') {
const collapse = parseBoolean(Cookies.get('sidebar_collapsed')); const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
this.toggleCollapsedSidebar(collapse); this.toggleCollapsedSidebar(collapse, false);
} }
} }
} }
...@@ -24,6 +24,9 @@ export const slope = (a, b) => (b.y - a.y) / (b.x - a.x); ...@@ -24,6 +24,9 @@ export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
let headerHeight = 50; let headerHeight = 50;
export const getHeaderHeight = () => headerHeight; export const getHeaderHeight = () => headerHeight;
const setHeaderHeight = () => {
headerHeight = sidebar.offsetTop;
};
export const isSidebarCollapsed = () => export const isSidebarCollapsed = () =>
sidebar && sidebar.classList.contains('sidebar-collapsed-desktop'); sidebar && sidebar.classList.contains('sidebar-collapsed-desktop');
...@@ -186,7 +189,7 @@ export default () => { ...@@ -186,7 +189,7 @@ export default () => {
}); });
} }
headerHeight = document.querySelector('.nav-sidebar').offsetTop; requestIdleCallback(setHeaderHeight);
items.forEach(el => { items.forEach(el => {
const subItems = el.querySelector('.sidebar-sub-level-items'); const subItems = el.querySelector('.sidebar-sub-level-items');
......
...@@ -11,48 +11,53 @@ function hideEndFade($scrollingTabs) { ...@@ -11,48 +11,53 @@ function hideEndFade($scrollingTabs) {
}); });
} }
function initDeferred() {
$(document).trigger('init.scrolling-tabs');
}
export default function initLayoutNav() { export default function initLayoutNav() {
const contextualSidebar = new ContextualSidebar(); const contextualSidebar = new ContextualSidebar();
contextualSidebar.bindEvents(); contextualSidebar.bindEvents();
initFlyOutNav(); initFlyOutNav();
$(document) // We need to init it on DomContentLoaded as others could also call it
.on('init.scrolling-tabs', () => { $(document).on('init.scrolling-tabs', () => {
const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized'); const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
$scrollingTabs.addClass('is-initialized'); $scrollingTabs.addClass('is-initialized');
$(window) $(window)
.on('resize.nav', () => { .on('resize.nav', () => {
hideEndFade($scrollingTabs); hideEndFade($scrollingTabs);
}) })
.trigger('resize.nav'); .trigger('resize.nav');
$scrollingTabs.on('scroll', function tabsScrollEvent() { $scrollingTabs.on('scroll', function tabsScrollEvent() {
const $this = $(this); const $this = $(this);
const currentPosition = $this.scrollLeft(); const currentPosition = $this.scrollLeft();
const maxPosition = $this.prop('scrollWidth') - $this.outerWidth(); const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
$this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0); $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
$this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1); $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
}); });
$scrollingTabs.each(function scrollTabsEachLoop() { $scrollingTabs.each(function scrollTabsEachLoop() {
const $this = $(this); const $this = $(this);
const scrollingTabWidth = $this.width(); const scrollingTabWidth = $this.width();
const $active = $this.find('.active'); const $active = $this.find('.active');
const activeWidth = $active.width(); const activeWidth = $active.width();
if ($active.length) { if ($active.length) {
const offset = $active.offset().left + activeWidth; const offset = $active.offset().left + activeWidth;
if (offset > scrollingTabWidth - 30) { if (offset > scrollingTabWidth - 30) {
const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2; const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
$this.scrollLeft(scrollLeft); $this.scrollLeft(scrollLeft);
}
} }
}); }
}) });
.trigger('init.scrolling-tabs'); });
requestIdleCallback(initDeferred);
} }
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