diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-10-21 02:14:55 +0300 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-10-21 02:14:55 +0300 |
commit | 58af2647dc6a5bd7805e703a32fe45190d62c7d3 (patch) | |
tree | 4bd52c699a8fed36e2502ca94ce7246d447e03ca /app/assets/javascripts/contextual_sidebar.js | |
parent | 33380f811e85b71f95a18e4a200b0cf09d452928 (diff) |
Rename new_sidebar in JS
Diffstat (limited to 'app/assets/javascripts/contextual_sidebar.js')
-rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js new file mode 100644 index 00000000000..46b68ebe158 --- /dev/null +++ b/app/assets/javascripts/contextual_sidebar.js @@ -0,0 +1,81 @@ +import Cookies from 'js-cookie'; +import _ from 'underscore'; +import bp from './breakpoints'; + +export default class ContextualSidebar { + constructor() { + this.initDomElements(); + this.render(); + } + + initDomElements() { + this.$page = $('.page-with-sidebar'); + this.$sidebar = $('.nav-sidebar'); + this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar); + this.$overlay = $('.mobile-overlay'); + this.$openSidebar = $('.toggle-mobile-nav'); + this.$closeSidebar = $('.close-nav-button'); + this.$sidebarToggle = $('.js-toggle-sidebar'); + } + + bindEvents() { + document.addEventListener('click', (e) => { + if (!e.target.closest('.nav-sidebar') && (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')) { + this.toggleCollapsedSidebar(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-icons-only'); + this.toggleCollapsedSidebar(value); + }); + + $(window).on('resize', () => _.debounce(this.render(), 100)); + } + + static setCollapsedCookie(value) { + if (bp.getBreakpointSize() !== 'lg') { + return; + } + Cookies.set('sidebar_collapsed', value, { expires: 365 * 10 }); + } + + toggleSidebarNav(show) { + this.$sidebar.toggleClass('nav-sidebar-expanded', show); + this.$overlay.toggleClass('mobile-nav-open', show); + this.$sidebar.removeClass('sidebar-icons-only'); + } + + toggleCollapsedSidebar(collapsed) { + const breakpoint = bp.getBreakpointSize(); + + if (this.$sidebar.length) { + this.$sidebar.toggleClass('sidebar-icons-only', collapsed); + this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed); + } + ContextualSidebar.setCollapsedCookie(collapsed); + + this.toggleSidebarOverflow(); + } + + toggleSidebarOverflow() { + if (this.$innerScroll.prop('scrollHeight') > this.$innerScroll.prop('offsetHeight')) { + this.$innerScroll.css('overflow-y', 'scroll'); + } else { + this.$innerScroll.css('overflow-y', ''); + } + } + + render() { + const breakpoint = bp.getBreakpointSize(); + + if (breakpoint === 'sm' || breakpoint === 'md') { + this.toggleCollapsedSidebar(true); + } else if (breakpoint === 'lg') { + const collapse = Cookies.get('sidebar_collapsed') === 'true'; + this.toggleCollapsedSidebar(collapse); + } + } +} |