diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2019-01-15 12:35:16 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-01-15 12:35:16 +0000 |
commit | 8871dc9077506218cfd4b73040b8b2b95cf5e67c (patch) | |
tree | f54c1dda8b156022ff7e45bdcf13ab966a4d3ec7 /app/assets/javascripts/contextual_sidebar.js | |
parent | 8b4b7caefa7fba49a8b199edfde8315a4c897a68 (diff) | |
download | gitlab-ce-8871dc9077506218cfd4b73040b8b2b95cf5e67c.tar.gz |
Optimization of setup of Main Nav Layout, Contextual Sidebar and Fly Out Nav
Diffstat (limited to 'app/assets/javascripts/contextual_sidebar.js')
-rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 24 |
1 files changed, 17 insertions, 7 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index 10f02739ec8..42c3542b50b 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/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,12 +24,14 @@ 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)); @@ -34,7 +39,7 @@ export default class ContextualSidebar { 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); } } } |