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

216 lines
6.5 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
/* eslint-disable func-names, consistent-return, no-param-reassign */
2017-08-17 22:00:37 +05:30
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-08-17 22:00:37 +05:30
import Cookies from 'js-cookie';
2021-03-11 19:13:27 +05:30
import { fixTitle, hide } from '~/tooltips';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as flash } from './flash';
2018-03-17 18:26:18 +05:30
import axios from './lib/utils/axios_utils';
2019-09-04 21:01:54 +05:30
import { sprintf, s__, __ } from './locale';
2018-03-17 18:26:18 +05:30
2019-12-04 20:38:33 +05:30
function Sidebar() {
2018-03-17 18:26:18 +05:30
this.toggleTodo = this.toggleTodo.bind(this);
this.sidebar = $('aside');
this.removeListeners();
this.addEventListeners();
}
2021-03-08 18:12:59 +05:30
Sidebar.initialize = function () {
2018-03-17 18:26:18 +05:30
if (!this.instance) {
2019-12-04 20:38:33 +05:30
this.instance = new Sidebar();
2018-03-17 18:26:18 +05:30
}
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.removeListeners = function () {
2018-03-17 18:26:18 +05:30
this.sidebar.off('click', '.sidebar-collapsed-icon');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2018-03-17 18:26:18 +05:30
this.sidebar.off('hidden.gl.dropdown');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2021-04-17 20:07:23 +05:30
this.sidebar.off('hiddenGlDropdown');
// eslint-disable-next-line @gitlab/no-global-event-off
2018-03-17 18:26:18 +05:30
$('.dropdown').off('loading.gl.dropdown');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2018-03-17 18:26:18 +05:30
$('.dropdown').off('loaded.gl.dropdown');
$(document).off('click', '.js-sidebar-toggle');
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.addEventListeners = function () {
2018-03-17 18:26:18 +05:30
const $document = $(document);
this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
this.sidebar.on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
2021-04-17 20:07:23 +05:30
this.sidebar.on('hiddenGlDropdown', this, this.onSidebarDropdownHidden);
2018-03-17 18:26:18 +05:30
$document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
2018-12-13 13:39:08 +05:30
return $(document)
.off('click', '.js-issuable-todo')
.on('click', '.js-issuable-todo', this.toggleTodo);
2018-03-17 18:26:18 +05:30
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
2019-12-26 22:10:19 +05:30
const $this = $(this);
2021-01-03 14:25:43 +05:30
const $collapseIcon = $('.js-sidebar-collapse');
const $expandIcon = $('.js-sidebar-expand');
const $toggleContainer = $('.js-sidebar-toggle-container');
const isExpanded = $toggleContainer.data('is-expanded');
2019-12-26 22:10:19 +05:30
const tooltipLabel = isExpanded ? __('Expand sidebar') : __('Collapse sidebar');
2018-03-17 18:26:18 +05:30
e.preventDefault();
2018-10-15 14:42:47 +05:30
if (isExpanded) {
2021-01-03 14:25:43 +05:30
$toggleContainer.data('is-expanded', false);
$collapseIcon.addClass('hidden');
$expandIcon.removeClass('hidden');
2018-12-13 13:39:08 +05:30
$('aside.right-sidebar')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed');
2021-03-08 18:12:59 +05:30
$('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
2018-03-17 18:26:18 +05:30
} else {
2021-01-03 14:25:43 +05:30
$toggleContainer.data('is-expanded', true);
$expandIcon.addClass('hidden');
$collapseIcon.removeClass('hidden');
2018-12-13 13:39:08 +05:30
$('aside.right-sidebar')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded');
2021-03-08 18:12:59 +05:30
$('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
2018-03-17 18:26:18 +05:30
}
2018-10-15 14:42:47 +05:30
$this.attr('data-original-title', tooltipLabel);
2018-03-17 18:26:18 +05:30
if (!triggered) {
2018-12-13 13:39:08 +05:30
Cookies.set('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
2018-03-17 18:26:18 +05:30
}
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.toggleTodo = function (e) {
2019-12-26 22:10:19 +05:30
const $this = $(e.currentTarget);
const ajaxType = $this.data('deletePath') ? 'delete' : 'post';
const url = String($this.data('deletePath') || $this.data('createPath'));
2018-03-17 18:26:18 +05:30
2021-01-03 14:25:43 +05:30
hide($this);
2018-03-17 18:26:18 +05:30
2021-03-08 18:12:59 +05:30
$('.js-issuable-todo').disable().addClass('is-loading');
2018-03-17 18:26:18 +05:30
axios[ajaxType](url, {
2018-03-27 19:54:05 +05:30
issuable_id: $this.data('issuableId'),
issuable_type: $this.data('issuableType'),
2018-12-13 13:39:08 +05:30
})
.then(({ data }) => {
this.todoUpdateDone(data);
})
.catch(() =>
2019-10-12 21:52:04 +05:30
flash(
sprintf(__('There was an error %{message} todo.'), {
message:
ajaxType === 'post' ? s__('RightSidebar|adding a') : s__('RightSidebar|deleting the'),
}),
),
2018-12-13 13:39:08 +05:30
);
2018-03-17 18:26:18 +05:30
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.todoUpdateDone = function (data) {
2018-03-17 18:26:18 +05:30
const deletePath = data.delete_path ? data.delete_path : null;
const attrPrefix = deletePath ? 'mark' : 'todo';
const $todoBtns = $('.js-issuable-todo');
$(document).trigger('todo:toggle', data.count);
$todoBtns.each((i, el) => {
const $el = $(el);
const $elText = $el.find('.js-issuable-todo-inner');
2018-12-13 13:39:08 +05:30
$el
.removeClass('is-loading')
2018-03-17 18:26:18 +05:30
.enable()
2018-03-27 19:54:05 +05:30
.attr('aria-label', $el.data(`${attrPrefix}Text`))
2019-02-15 15:39:39 +05:30
.attr('title', $el.data(`${attrPrefix}Text`))
.data('deletePath', deletePath);
2018-03-17 18:26:18 +05:30
if ($el.hasClass('has-tooltip')) {
2021-03-11 19:13:27 +05:30
fixTitle(el);
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2019-02-15 15:39:39 +05:30
if (typeof $el.data('isCollapsed') !== 'undefined') {
2018-03-27 19:54:05 +05:30
$elText.html($el.data(`${attrPrefix}Icon`));
2018-03-17 18:26:18 +05:30
} else {
2018-03-27 19:54:05 +05:30
$elText.text($el.data(`${attrPrefix}Text`));
2018-03-17 18:26:18 +05:30
}
});
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.sidebarCollapseClicked = function (e) {
2018-03-17 18:26:18 +05:30
if ($(e.currentTarget).hasClass('dont-change-state')) {
return;
}
2019-12-26 22:10:19 +05:30
const sidebar = e.data;
2018-03-17 18:26:18 +05:30
e.preventDefault();
2019-12-26 22:10:19 +05:30
const $block = $(this).closest('.block');
2018-03-17 18:26:18 +05:30
return sidebar.openDropdown($block);
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.openDropdown = function (blockOrName) {
2020-05-24 23:13:21 +05:30
const $block = typeof blockOrName === 'string' ? this.getBlock(blockOrName) : blockOrName;
2018-03-17 18:26:18 +05:30
if (!this.isOpen()) {
this.setCollapseAfterUpdate($block);
this.toggleSidebar('open');
}
// Wait for the sidebar to trigger('click') open
// so it doesn't cause our dropdown to close preemptively
setTimeout(() => {
$block.find('.js-sidebar-dropdown-toggle').trigger('click');
});
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.setCollapseAfterUpdate = function ($block) {
2018-03-17 18:26:18 +05:30
$block.addClass('collapse-after-update');
return $('.layout-page').addClass('with-overlay');
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.onSidebarDropdownHidden = function (e) {
2019-12-26 22:10:19 +05:30
const sidebar = e.data;
2018-03-17 18:26:18 +05:30
e.preventDefault();
2019-12-26 22:10:19 +05:30
const $block = $(e.target).closest('.block');
2018-03-17 18:26:18 +05:30
return sidebar.sidebarDropdownHidden($block);
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.sidebarDropdownHidden = function ($block) {
2018-03-17 18:26:18 +05:30
if ($block.hasClass('collapse-after-update')) {
$block.removeClass('collapse-after-update');
$('.layout-page').removeClass('with-overlay');
return this.toggleSidebar('hide');
}
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.triggerOpenSidebar = function () {
2018-03-17 18:26:18 +05:30
return this.sidebar.find('.js-sidebar-toggle').trigger('click');
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.toggleSidebar = function (action) {
2018-03-17 18:26:18 +05:30
if (action == null) {
action = 'toggle';
}
if (action === 'toggle') {
this.triggerOpenSidebar();
}
if (action === 'open') {
if (!this.isOpen()) {
this.triggerOpenSidebar();
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
}
if (action === 'hide') {
if (this.isOpen()) {
return this.triggerOpenSidebar();
}
}
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.isOpen = function () {
2018-03-17 18:26:18 +05:30
return this.sidebar.is('.right-sidebar-expanded');
};
2021-03-08 18:12:59 +05:30
Sidebar.prototype.getBlock = function (name) {
2019-12-21 20:55:43 +05:30
return this.sidebar.find(`.block.${name}`);
2018-03-17 18:26:18 +05:30
};
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
export default Sidebar;