debian-mirror-gitlab/app/assets/javascripts/contextual_sidebar.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

138 lines
4.5 KiB
JavaScript
Raw Normal View History

2021-03-11 19:13:27 +05:30
import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2021-03-11 19:13:27 +05:30
import { debounce } from 'lodash';
2022-04-04 11:22:00 +05:30
import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
2017-09-10 17:25:29 +05:30
2019-09-04 21:01:54 +05:30
export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
2018-03-17 18:26:18 +05:30
export default class ContextualSidebar {
2017-09-10 17:25:29 +05:30
constructor() {
this.initDomElements();
this.render();
}
initDomElements() {
2018-03-17 18:26:18 +05:30
this.$page = $('.layout-page');
2017-09-10 17:25:29 +05:30
this.$sidebar = $('.nav-sidebar');
2019-03-02 22:35:43 +05:30
if (!this.$sidebar.length) return;
2018-03-17 18:26:18 +05:30
this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
2017-09-10 17:25:29 +05:30
this.$overlay = $('.mobile-overlay');
this.$openSidebar = $('.toggle-mobile-nav');
this.$closeSidebar = $('.close-nav-button');
this.$sidebarToggle = $('.js-toggle-sidebar');
}
bindEvents() {
2019-03-02 22:35:43 +05:30
if (!this.$sidebar.length) return;
2017-09-10 17:25:29 +05:30
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', () => {
2019-07-07 11:18:12 +05:30
if (!ContextualSidebar.isDesktopBreakpoint()) {
this.toggleSidebarNav(!this.$sidebar.hasClass('sidebar-expanded-mobile'));
} else {
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
this.toggleCollapsedSidebar(value, true);
}
});
this.$page.on('transitionstart transitionend', () => {
$(document).trigger('content.resize');
2017-09-10 17:25:29 +05:30
});
2021-03-08 18:12:59 +05:30
$(window).on(
'resize',
debounce(() => this.render(), 100),
);
2017-09-10 17:25:29 +05:30
}
2019-07-07 11:18:12 +05:30
// See documentation: https://design.gitlab.com/regions/navigation#contextual-navigation
2020-03-13 15:44:24 +05:30
// 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-09-10 17:25:29 +05:30
static setCollapsedCookie(value) {
2019-07-07 11:18:12 +05:30
if (!ContextualSidebar.isDesktopBreakpoint()) {
2017-09-10 17:25:29 +05:30
return;
}
2022-04-04 11:22:00 +05:30
setCookie('sidebar_collapsed', value, { expires: 365 * 10 });
2017-09-10 17:25:29 +05:30
}
toggleSidebarNav(show) {
2019-07-07 11:18:12 +05:30
const breakpoint = bp.getBreakpointSize();
const dbp = ContextualSidebar.isDesktopBreakpoint();
2020-03-13 15:44:24 +05:30
const supportedSizes = ['xs', 'sm', 'md'];
2019-07-07 11:18:12 +05:30
2019-09-04 21:01:54 +05:30
this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
2019-07-07 11:18:12 +05:30
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
this.$overlay.toggleClass(
'mobile-nav-open',
2020-03-13 15:44:24 +05:30
supportedSizes.includes(breakpoint) ? show : false,
2019-07-07 11:18:12 +05:30
);
2018-03-17 18:26:18 +05:30
this.$sidebar.removeClass('sidebar-collapsed-desktop');
2017-09-10 17:25:29 +05:30
}
2019-03-02 22:35:43 +05:30
toggleCollapsedSidebar(collapsed, saveCookie) {
2017-09-10 17:25:29 +05:30
const breakpoint = bp.getBreakpointSize();
2019-07-07 11:18:12 +05:30
const dbp = ContextualSidebar.isDesktopBreakpoint();
2020-03-13 15:44:24 +05:30
const supportedSizes = ['xs', 'sm', 'md'];
2017-09-10 17:25:29 +05:30
if (this.$sidebar.length) {
2019-09-04 21:01:54 +05:30
this.$sidebar.toggleClass(`sidebar-collapsed-desktop ${SIDEBAR_COLLAPSED_CLASS}`, collapsed);
2019-07-07 11:18:12 +05:30
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
this.$page.toggleClass(
'page-with-icon-sidebar',
2020-03-13 15:44:24 +05:30
supportedSizes.includes(breakpoint) ? true : collapsed,
2019-07-07 11:18:12 +05:30
);
2017-09-10 17:25:29 +05:30
}
2018-03-17 18:26:18 +05:30
2019-03-02 22:35:43 +05:30
if (saveCookie) {
ContextualSidebar.setCollapsedCookie(collapsed);
}
requestIdleCallback(() => this.toggleSidebarOverflow());
2018-03-17 18:26:18 +05:30
}
toggleSidebarOverflow() {
if (this.$innerScroll.prop('scrollHeight') > this.$innerScroll.prop('offsetHeight')) {
this.$innerScroll.css('overflow-y', 'scroll');
} else {
this.$innerScroll.css('overflow-y', '');
}
2017-09-10 17:25:29 +05:30
}
render() {
2019-03-02 22:35:43 +05:30
if (!this.$sidebar.length) return;
2019-07-07 11:18:12 +05:30
if (!ContextualSidebar.isDesktopBreakpoint()) {
this.toggleSidebarNav(false);
} else {
2022-04-04 11:22:00 +05:30
const collapse = parseBoolean(getCookie('sidebar_collapsed'));
2019-07-07 11:18:12 +05:30
this.toggleCollapsedSidebar(collapse, true);
2017-09-10 17:25:29 +05:30
}
2021-12-11 22:18:48 +05:30
2022-06-21 17:19:12 +05:30
const modalEl = document.querySelector('.js-invite-members-modal');
if (modalEl) {
import(
/* webpackChunkName: 'initInviteMembersModal' */ '~/invite_members/init_invite_members_modal'
)
.then(({ default: initInviteMembersModal }) => {
initInviteMembersModal();
})
.catch(() => {});
const inviteTriggers = document.querySelectorAll('.js-invite-members-trigger');
if (inviteTriggers) {
import(
/* webpackChunkName: 'initInviteMembersTrigger' */ '~/invite_members/init_invite_members_trigger'
)
.then(({ default: initInviteMembersTrigger }) => {
initInviteMembersTrigger();
})
.catch(() => {});
}
}
2017-09-10 17:25:29 +05:30
}
}