2020-02-21 09:09:01 +00:00
|
|
|
/* eslint-disable func-names, consistent-return, no-param-reassign */
|
2017-03-11 06:45:34 +00:00
|
|
|
|
2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2022-02-01 21:12:02 +00:00
|
|
|
import { setCookie } from '~/lib/utils/common_utils';
|
2021-08-21 00:11:06 +00:00
|
|
|
import { hide, fixTitle } from '~/tooltips';
|
2021-06-21 03:10:27 +00:00
|
|
|
import createFlash from './flash';
|
2018-02-02 11:16:57 +00:00
|
|
|
import axios from './lib/utils/axios_utils';
|
2019-05-07 06:24:27 +00:00
|
|
|
import { sprintf, s__, __ } from './locale';
|
2016-12-14 05:26:26 +00:00
|
|
|
|
2022-05-16 21:09:09 +00:00
|
|
|
const updateSidebarClasses = (layoutPage, rightSidebar) => {
|
|
|
|
if (window.innerWidth >= 768) {
|
|
|
|
layoutPage.classList.remove('right-sidebar-expanded', 'right-sidebar-collapsed');
|
|
|
|
rightSidebar.classList.remove('right-sidebar-collapsed');
|
|
|
|
rightSidebar.classList.add('right-sidebar-expanded');
|
|
|
|
} else {
|
|
|
|
layoutPage.classList.add('right-sidebar-collapsed', 'is-merge-request');
|
|
|
|
rightSidebar.classList.add('right-sidebar-collapsed');
|
|
|
|
rightSidebar.classList.remove('right-sidebar-expanded');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-09-16 12:06:26 +00:00
|
|
|
function Sidebar() {
|
2017-12-15 12:57:08 +00:00
|
|
|
this.toggleTodo = this.toggleTodo.bind(this);
|
|
|
|
this.sidebar = $('aside');
|
|
|
|
|
|
|
|
this.removeListeners();
|
|
|
|
this.addEventListeners();
|
|
|
|
}
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.initialize = function () {
|
2017-12-15 12:57:08 +00:00
|
|
|
if (!this.instance) {
|
2019-09-16 12:06:26 +00:00
|
|
|
this.instance = new Sidebar();
|
2017-12-15 12:57:08 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.removeListeners = function () {
|
2017-12-15 12:57:08 +00:00
|
|
|
this.sidebar.off('click', '.sidebar-collapsed-icon');
|
2020-12-08 21:10:06 +00:00
|
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
2017-12-15 12:57:08 +00:00
|
|
|
this.sidebar.off('hidden.gl.dropdown');
|
2020-12-08 21:10:06 +00:00
|
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
2021-02-25 12:11:01 +00:00
|
|
|
this.sidebar.off('hiddenGlDropdown');
|
|
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
2017-12-15 12:57:08 +00:00
|
|
|
$('.dropdown').off('loading.gl.dropdown');
|
2020-12-08 21:10:06 +00:00
|
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
2017-12-15 12:57:08 +00:00
|
|
|
$('.dropdown').off('loaded.gl.dropdown');
|
|
|
|
$(document).off('click', '.js-sidebar-toggle');
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.addEventListeners = function () {
|
2017-12-15 12:57:08 +00:00
|
|
|
const $document = $(document);
|
|
|
|
|
|
|
|
this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
|
|
|
|
this.sidebar.on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
|
2021-02-25 12:11:01 +00:00
|
|
|
this.sidebar.on('hiddenGlDropdown', this, this.onSidebarDropdownHidden);
|
2017-12-15 12:57:08 +00:00
|
|
|
|
|
|
|
$document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
|
2022-05-16 21:09:09 +00:00
|
|
|
$(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
|
|
|
|
|
|
|
|
if (window.gon?.features?.movedMrSidebar) {
|
|
|
|
const layoutPage = document.querySelector('.layout-page');
|
|
|
|
const rightSidebar = document.querySelector('.js-right-sidebar');
|
|
|
|
|
|
|
|
updateSidebarClasses(layoutPage, rightSidebar);
|
|
|
|
window.addEventListener('resize', () => updateSidebarClasses(layoutPage, rightSidebar));
|
|
|
|
}
|
2017-12-15 12:57:08 +00:00
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
|
2019-11-16 06:06:30 +00:00
|
|
|
const $this = $(this);
|
2022-05-16 21:09:09 +00:00
|
|
|
|
|
|
|
if ($this.hasClass('right-sidebar-merge-requests')) return;
|
|
|
|
|
2020-10-03 03:08:48 +00:00
|
|
|
const $collapseIcon = $('.js-sidebar-collapse');
|
|
|
|
const $expandIcon = $('.js-sidebar-expand');
|
|
|
|
const $toggleContainer = $('.js-sidebar-toggle-container');
|
|
|
|
const isExpanded = $toggleContainer.data('is-expanded');
|
2019-11-16 06:06:30 +00:00
|
|
|
const tooltipLabel = isExpanded ? __('Expand sidebar') : __('Collapse sidebar');
|
2017-12-15 12:57:08 +00:00
|
|
|
e.preventDefault();
|
2018-04-19 14:43:20 +00:00
|
|
|
|
|
|
|
if (isExpanded) {
|
2020-10-03 03:08:48 +00:00
|
|
|
$toggleContainer.data('is-expanded', false);
|
|
|
|
$collapseIcon.addClass('hidden');
|
|
|
|
$expandIcon.removeClass('hidden');
|
2018-10-30 20:28:31 +00:00
|
|
|
$('aside.right-sidebar')
|
|
|
|
.removeClass('right-sidebar-expanded')
|
|
|
|
.addClass('right-sidebar-collapsed');
|
2020-12-23 12:10:26 +00:00
|
|
|
$('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
|
2017-12-15 12:57:08 +00:00
|
|
|
} else {
|
2020-10-03 03:08:48 +00:00
|
|
|
$toggleContainer.data('is-expanded', true);
|
|
|
|
$expandIcon.addClass('hidden');
|
|
|
|
$collapseIcon.removeClass('hidden');
|
2018-10-30 20:28:31 +00:00
|
|
|
$('aside.right-sidebar')
|
|
|
|
.removeClass('right-sidebar-collapsed')
|
|
|
|
.addClass('right-sidebar-expanded');
|
2020-12-23 12:10:26 +00:00
|
|
|
$('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
|
2017-12-15 12:57:08 +00:00
|
|
|
}
|
2018-04-19 14:43:20 +00:00
|
|
|
|
|
|
|
$this.attr('data-original-title', tooltipLabel);
|
2021-08-21 00:11:06 +00:00
|
|
|
$this.attr('title', tooltipLabel);
|
|
|
|
fixTitle($this);
|
|
|
|
hide($this);
|
2018-04-19 14:43:20 +00:00
|
|
|
|
2017-12-15 12:57:08 +00:00
|
|
|
if (!triggered) {
|
2022-02-01 21:12:02 +00:00
|
|
|
setCookie('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
|
2017-12-15 12:57:08 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.toggleTodo = function (e) {
|
2019-11-16 06:06:30 +00:00
|
|
|
const $this = $(e.currentTarget);
|
|
|
|
const ajaxType = $this.data('deletePath') ? 'delete' : 'post';
|
|
|
|
const url = String($this.data('deletePath') || $this.data('createPath'));
|
2017-12-15 12:57:08 +00:00
|
|
|
|
2020-10-02 18:08:56 +00:00
|
|
|
hide($this);
|
2017-12-15 12:57:08 +00:00
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
$('.js-issuable-todo').disable().addClass('is-loading');
|
2018-02-02 11:16:57 +00:00
|
|
|
|
2018-02-02 14:54:18 +00:00
|
|
|
axios[ajaxType](url, {
|
2018-02-20 22:20:48 +00:00
|
|
|
issuable_id: $this.data('issuableId'),
|
|
|
|
issuable_type: $this.data('issuableType'),
|
2018-10-30 20:28:31 +00:00
|
|
|
})
|
|
|
|
.then(({ data }) => {
|
|
|
|
this.todoUpdateDone(data);
|
|
|
|
})
|
|
|
|
.catch(() =>
|
2021-06-21 03:10:27 +00:00
|
|
|
createFlash({
|
2021-09-13 06:11:29 +00:00
|
|
|
message: sprintf(__('There was an error %{message} to-do item.'), {
|
2019-08-05 14:31:40 +00:00
|
|
|
message:
|
|
|
|
ajaxType === 'post' ? s__('RightSidebar|adding a') : s__('RightSidebar|deleting the'),
|
|
|
|
}),
|
2021-06-21 03:10:27 +00:00
|
|
|
}),
|
2018-10-30 20:28:31 +00:00
|
|
|
);
|
2017-12-15 12:57:08 +00:00
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.sidebarCollapseClicked = function (e) {
|
2021-10-08 12:11:10 +00:00
|
|
|
if ($(e.currentTarget).hasClass('js-dont-change-state')) {
|
2017-12-15 12:57:08 +00:00
|
|
|
return;
|
|
|
|
}
|
2019-11-16 06:06:30 +00:00
|
|
|
const sidebar = e.data;
|
2017-12-15 12:57:08 +00:00
|
|
|
e.preventDefault();
|
2019-11-16 06:06:30 +00:00
|
|
|
const $block = $(this).closest('.block');
|
2017-12-15 12:57:08 +00:00
|
|
|
return sidebar.openDropdown($block);
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.openDropdown = function (blockOrName) {
|
2020-04-21 15:21:10 +00:00
|
|
|
const $block = typeof blockOrName === 'string' ? this.getBlock(blockOrName) : blockOrName;
|
2017-12-15 12:57:08 +00:00
|
|
|
if (!this.isOpen()) {
|
|
|
|
this.setCollapseAfterUpdate($block);
|
|
|
|
this.toggleSidebar('open');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.setCollapseAfterUpdate = function ($block) {
|
2017-12-15 12:57:08 +00:00
|
|
|
$block.addClass('collapse-after-update');
|
|
|
|
return $('.layout-page').addClass('with-overlay');
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.onSidebarDropdownHidden = function (e) {
|
2019-11-16 06:06:30 +00:00
|
|
|
const sidebar = e.data;
|
2017-12-15 12:57:08 +00:00
|
|
|
e.preventDefault();
|
2019-11-16 06:06:30 +00:00
|
|
|
const $block = $(e.target).closest('.block');
|
2017-12-15 12:57:08 +00:00
|
|
|
return sidebar.sidebarDropdownHidden($block);
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.sidebarDropdownHidden = function ($block) {
|
2017-12-15 12:57:08 +00:00
|
|
|
if ($block.hasClass('collapse-after-update')) {
|
|
|
|
$block.removeClass('collapse-after-update');
|
|
|
|
$('.layout-page').removeClass('with-overlay');
|
|
|
|
return this.toggleSidebar('hide');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.triggerOpenSidebar = function () {
|
2017-12-15 12:57:08 +00:00
|
|
|
return this.sidebar.find('.js-sidebar-toggle').trigger('click');
|
|
|
|
};
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.toggleSidebar = function (action) {
|
2017-12-15 12:57:08 +00:00
|
|
|
if (action == null) {
|
|
|
|
action = 'toggle';
|
|
|
|
}
|
|
|
|
if (action === 'toggle') {
|
|
|
|
this.triggerOpenSidebar();
|
|
|
|
}
|
|
|
|
if (action === 'open') {
|
|
|
|
if (!this.isOpen()) {
|
|
|
|
this.triggerOpenSidebar();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (action === 'hide') {
|
|
|
|
if (this.isOpen()) {
|
|
|
|
return this.triggerOpenSidebar();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.isOpen = function () {
|
2017-12-15 12:57:08 +00:00
|
|
|
return this.sidebar.is('.right-sidebar-expanded');
|
|
|
|
};
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Sidebar.prototype.getBlock = function (name) {
|
2019-09-24 12:06:20 +00:00
|
|
|
return this.sidebar.find(`.block.${name}`);
|
2017-12-15 12:57:08 +00:00
|
|
|
};
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-12-15 12:57:08 +00:00
|
|
|
export default Sidebar;
|