2018-03-09 15:18:59 -05:00
|
|
|
import $ from 'jquery';
|
2017-08-02 21:19:43 -04:00
|
|
|
import Cookies from 'js-cookie';
|
|
|
|
import _ from 'underscore';
|
2020-01-08 04:07:53 -05:00
|
|
|
import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
|
2018-11-21 10:20:32 -05:00
|
|
|
import { parseBoolean } from '~/lib/utils/common_utils';
|
2017-08-02 21:19:43 -04:00
|
|
|
|
2019-03-11 14:19:34 -04:00
|
|
|
export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
|
|
|
|
|
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() {
|
2017-12-08 16:19:01 -05:00
|
|
|
this.$page = $('.layout-page');
|
2017-07-17 18:33:12 -04:00
|
|
|
this.$sidebar = $('.nav-sidebar');
|
2019-01-15 07:35:16 -05:00
|
|
|
|
|
|
|
if (!this.$sidebar.length) return;
|
|
|
|
|
2017-09-18 07:32:23 -04:00
|
|
|
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() {
|
2019-01-15 07:35:16 -05:00
|
|
|
if (!this.$sidebar.length) return;
|
|
|
|
|
2017-07-19 21:26:18 -04:00
|
|
|
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', () => {
|
2019-03-03 23:49:18 -05:00
|
|
|
if (!ContextualSidebar.isDesktopBreakpoint()) {
|
2019-02-07 02:22:11 -05:00
|
|
|
this.toggleSidebarNav(!this.$sidebar.hasClass('sidebar-expanded-mobile'));
|
2019-03-03 23:49:18 -05:00
|
|
|
} else {
|
2019-01-21 23:47:16 -05:00
|
|
|
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
|
|
|
|
this.toggleCollapsedSidebar(value, true);
|
|
|
|
}
|
2017-08-02 21:19:43 -04:00
|
|
|
});
|
2019-04-05 01:19:23 -04:00
|
|
|
this.$page.on('transitionstart transitionend', () => {
|
|
|
|
$(document).trigger('content.resize');
|
|
|
|
});
|
2017-08-02 21:19:43 -04:00
|
|
|
|
|
|
|
$(window).on('resize', () => _.debounce(this.render(), 100));
|
|
|
|
}
|
|
|
|
|
2019-03-04 03:23:55 -05:00
|
|
|
// See documentation: https://design.gitlab.com/regions/navigation#contextual-navigation
|
2020-01-08 04:07:53 -05:00
|
|
|
// NOTE: at 1200px nav sidebar should not overlap the content
|
|
|
|
// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/24555#note_134136110
|
|
|
|
static isDesktopBreakpoint = () => bp.windowWidth() >= breakpoints.xl;
|
2017-08-02 21:19:43 -04:00
|
|
|
static setCollapsedCookie(value) {
|
2019-03-04 00:57:40 -05:00
|
|
|
if (!ContextualSidebar.isDesktopBreakpoint()) {
|
2017-08-02 21:19:43 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
Cookies.set('sidebar_collapsed', value, { expires: 365 * 10 });
|
2017-07-17 18:33:12 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
toggleSidebarNav(show) {
|
2019-02-07 02:22:11 -05:00
|
|
|
const breakpoint = bp.getBreakpointSize();
|
2019-03-03 23:49:18 -05:00
|
|
|
const dbp = ContextualSidebar.isDesktopBreakpoint();
|
2020-01-08 04:07:53 -05:00
|
|
|
const supportedSizes = ['xs', 'sm', 'md'];
|
2017-08-02 21:19:43 -04:00
|
|
|
|
2019-03-11 14:19:34 -04:00
|
|
|
this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
|
2019-02-07 02:22:11 -05:00
|
|
|
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
|
2019-03-04 03:23:55 -05:00
|
|
|
this.$overlay.toggleClass(
|
|
|
|
'mobile-nav-open',
|
2020-01-08 04:07:53 -05:00
|
|
|
supportedSizes.includes(breakpoint) ? show : false,
|
2019-03-04 03:23:55 -05:00
|
|
|
);
|
2019-01-21 23:47:16 -05:00
|
|
|
this.$sidebar.removeClass('sidebar-collapsed-desktop');
|
|
|
|
}
|
|
|
|
|
2019-01-15 07:35:16 -05:00
|
|
|
toggleCollapsedSidebar(collapsed, saveCookie) {
|
2017-08-15 11:02:10 -04:00
|
|
|
const breakpoint = bp.getBreakpointSize();
|
2019-03-04 03:23:55 -05:00
|
|
|
const dbp = ContextualSidebar.isDesktopBreakpoint();
|
2020-01-08 04:07:53 -05:00
|
|
|
const supportedSizes = ['xs', 'sm', 'md'];
|
2017-08-15 11:02:10 -04:00
|
|
|
|
2017-08-07 13:24:52 -04:00
|
|
|
if (this.$sidebar.length) {
|
2019-06-12 17:26:48 -04:00
|
|
|
this.$sidebar.toggleClass(`sidebar-collapsed-desktop ${SIDEBAR_COLLAPSED_CLASS}`, collapsed);
|
2019-02-07 02:22:11 -05:00
|
|
|
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
|
2019-03-04 03:23:55 -05:00
|
|
|
this.$page.toggleClass(
|
|
|
|
'page-with-icon-sidebar',
|
2020-01-08 04:07:53 -05:00
|
|
|
supportedSizes.includes(breakpoint) ? true : collapsed,
|
2019-03-04 03:23:55 -05:00
|
|
|
);
|
2017-08-07 13:24:52 -04:00
|
|
|
}
|
2017-09-18 07:32:23 -04:00
|
|
|
|
2019-01-15 07:35:16 -05:00
|
|
|
if (saveCookie) {
|
|
|
|
ContextualSidebar.setCollapsedCookie(collapsed);
|
|
|
|
}
|
|
|
|
|
2019-01-15 17:26:29 -05:00
|
|
|
requestIdleCallback(() => this.toggleSidebarOverflow());
|
2017-09-18 07:32:23 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
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() {
|
2019-01-15 07:35:16 -05:00
|
|
|
if (!this.$sidebar.length) return;
|
|
|
|
|
2019-03-03 23:49:18 -05:00
|
|
|
if (!ContextualSidebar.isDesktopBreakpoint()) {
|
2019-02-07 02:22:11 -05:00
|
|
|
this.toggleSidebarNav(false);
|
2019-03-04 00:57:40 -05:00
|
|
|
} else {
|
2018-11-21 10:20:32 -05:00
|
|
|
const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
|
2019-03-04 00:57:40 -05:00
|
|
|
this.toggleCollapsedSidebar(collapse, true);
|
2017-08-02 21:19:43 -04:00
|
|
|
}
|
2017-07-17 18:33:12 -04:00
|
|
|
}
|
|
|
|
}
|