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

Author: iamphill

app/assets/javascripts/contextual_sidebar.js

@@ -13,6 +13,9 @@ export default class ContextualSidebar {
   initDomElements() {
     this.$page = $('.layout-page');
     this.$sidebar = $('.nav-sidebar');
+
+    if (!this.$sidebar.length) return;
+
     this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
     this.$overlay = $('.mobile-overlay');
     this.$openSidebar = $('.toggle-mobile-nav');
@@ -21,20 +24,22 @@ export default class ContextualSidebar {
   }
 
   bindEvents() {
+    if (!this.$sidebar.length) return;
+
     document.addEventListener('click', e => {
       if (
         !e.target.closest('.nav-sidebar') &&
         (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
       ) {
-        this.toggleCollapsedSidebar(true);
+        this.toggleCollapsedSidebar(true, true);
       }
     });
     this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
     this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
     this.$overlay.on('click', () => this.toggleSidebarNav(false));
     this.$sidebarToggle.on('click', () => {
       const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
-      this.toggleCollapsedSidebar(value);
+      this.toggleCollapsedSidebar(value, true);
     });
 
     $(window).on('resize', () => _.debounce(this.render(), 100));
@@ -53,16 +58,19 @@ export default class ContextualSidebar {
     this.$sidebar.removeClass('sidebar-collapsed-desktop');
   }
 
-  toggleCollapsedSidebar(collapsed) {
+  toggleCollapsedSidebar(collapsed, saveCookie) {
     const breakpoint = bp.getBreakpointSize();
 
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass('sidebar-collapsed-desktop', 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() {
@@ -74,13 +82,15 @@ export default class ContextualSidebar {
   }
 
   render() {
+    if (!this.$sidebar.length) return;
+
     const breakpoint = bp.getBreakpointSize();
 
     if (breakpoint === 'sm' || breakpoint === 'md') {
-      this.toggleCollapsedSidebar(true);
+      this.toggleCollapsedSidebar(true, false);
     } else if (breakpoint === 'lg') {
       const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
-      this.toggleCollapsedSidebar(collapse);
+      this.toggleCollapsedSidebar(collapse, false);
     }
   }
 }

app/assets/javascripts/fly_out_nav.js

@@ -24,6 +24,9 @@ export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
 let headerHeight = 50;
 
 export const getHeaderHeight = () => headerHeight;
+const setHeaderHeight = () => {
+  headerHeight = sidebar.offsetTop;
+};
 
 export const isSidebarCollapsed = () =>
   sidebar && sidebar.classList.contains('sidebar-collapsed-desktop');
@@ -186,7 +189,7 @@ export default () => {
     });
   }
 
-  headerHeight = document.querySelector('.nav-sidebar').offsetTop;
+  requestIdleCallback(setHeaderHeight);
 
   items.forEach(el => {
     const subItems = el.querySelector('.sidebar-sub-level-items');

app/assets/javascripts/layout_nav.js

@@ -11,48 +11,53 @@ function hideEndFade($scrollingTabs) {
   });
 }
 
+function initDeferred() {
+  $(document).trigger('init.scrolling-tabs');
+}
+
 export default function initLayoutNav() {
   const contextualSidebar = new ContextualSidebar();
   contextualSidebar.bindEvents();
 
   initFlyOutNav();
 
-  $(document)
-    .on('init.scrolling-tabs', () => {
-      const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
-      $scrollingTabs.addClass('is-initialized');
+  // We need to init it on DomContentLoaded as others could also call it
+  $(document).on('init.scrolling-tabs', () => {
+    const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
+    $scrollingTabs.addClass('is-initialized');
 
-      $(window)
-        .on('resize.nav', () => {
-          hideEndFade($scrollingTabs);
-        })
-        .trigger('resize.nav');
+    $(window)
+      .on('resize.nav', () => {
+        hideEndFade($scrollingTabs);
+      })
+      .trigger('resize.nav');
 
-      $scrollingTabs.on('scroll', function tabsScrollEvent() {
-        const $this = $(this);
-        const currentPosition = $this.scrollLeft();
-        const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
+    $scrollingTabs.on('scroll', function tabsScrollEvent() {
+      const $this = $(this);
+      const currentPosition = $this.scrollLeft();
+      const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
 
-        $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
-        $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
-      });
+      $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
+      $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
+    });
 
-      $scrollingTabs.each(function scrollTabsEachLoop() {
-        const $this = $(this);
-        const scrollingTabWidth = $this.width();
-        const $active = $this.find('.active');
-        const activeWidth = $active.width();
+    $scrollingTabs.each(function scrollTabsEachLoop() {
+      const $this = $(this);
+      const scrollingTabWidth = $this.width();
+      const $active = $this.find('.active');
+      const activeWidth = $active.width();
 
-        if ($active.length) {
-          const offset = $active.offset().left + activeWidth;
+      if ($active.length) {
+        const offset = $active.offset().left + activeWidth;
 
-          if (offset > scrollingTabWidth - 30) {
-            const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
+        if (offset > scrollingTabWidth - 30) {
+          const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
 
-            $this.scrollLeft(scrollLeft);
-          }
+          $this.scrollLeft(scrollLeft);
         }
-      });
-    })
-    .trigger('init.scrolling-tabs');
+      }
+    });
+  });
+
+  requestIdleCallback(initDeferred);
 }