gitlab-org--gitlab-foss/app/assets/javascripts/contextual_sidebar.js

82 lines
2.5 KiB
JavaScript
Raw Normal View History

2017-08-02 21:19:43 -04:00
import Cookies from 'js-cookie';
import _ from 'underscore';
import bp from './breakpoints';
2017-08-02 21:19:43 -04:00
2017-10-20 19:14:55 -04:00
export default class ContextualSidebar {
2017-07-17 18:33:12 -04:00
constructor() {
this.initDomElements();
2017-08-02 21:19:43 -04:00
this.render();
2017-07-17 18:33:12 -04:00
}
initDomElements() {
this.$page = $('.layout-page');
2017-07-17 18:33:12 -04:00
this.$sidebar = $('.nav-sidebar');
this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
2017-07-18 12:40:42 -04:00
this.$overlay = $('.mobile-overlay');
2017-07-17 18:33:12 -04:00
this.$openSidebar = $('.toggle-mobile-nav');
this.$closeSidebar = $('.close-nav-button');
2017-08-02 21:19:43 -04:00
this.$sidebarToggle = $('.js-toggle-sidebar');
2017-07-17 18:33:12 -04:00
}
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));
2017-08-02 21:19:43 -04:00
this.$sidebarToggle.on('click', () => {
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
2017-08-02 21:19:43 -04:00
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 });
2017-07-17 18:33:12 -04:00
}
toggleSidebarNav(show) {
this.$sidebar.toggleClass('sidebar-expanded-mobile', show);
2017-07-18 12:40:42 -04:00
this.$overlay.toggleClass('mobile-nav-open', show);
this.$sidebar.removeClass('sidebar-collapsed-desktop');
2017-08-02 21:19:43 -04:00
}
toggleCollapsedSidebar(collapsed) {
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);
}
2017-10-20 19:14:55 -04:00
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', '');
}
2017-08-02 21:19:43 -04:00
}
render() {
const breakpoint = bp.getBreakpointSize();
if (breakpoint === 'sm' || breakpoint === 'md') {
this.toggleCollapsedSidebar(true);
} else if (breakpoint === 'lg') {
const collapse = Cookies.get('sidebar_collapsed') === 'true';
2017-08-02 21:19:43 -04:00
this.toggleCollapsedSidebar(collapse);
}
2017-07-17 18:33:12 -04:00
}
}