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

254 lines
7.2 KiB
JavaScript
Raw Normal View History

/* eslint-disable func-names, no-var, no-unused-vars, consistent-return, one-var, prefer-template, no-else-return, no-param-reassign */
2017-03-11 01:45:34 -05:00
import $ from 'jquery';
import _ from 'underscore';
2017-03-11 01:45:34 -05:00
import Cookies from 'js-cookie';
import flash from './flash';
import axios from './lib/utils/axios_utils';
import { sprintf, s__, __ } from './locale';
2017-12-15 07:57:08 -05:00
function Sidebar(currentUser) {
this.toggleTodo = this.toggleTodo.bind(this);
this.sidebar = $('aside');
this.removeListeners();
this.addEventListeners();
}
Sidebar.initialize = function(currentUser) {
if (!this.instance) {
this.instance = new Sidebar(currentUser);
}
};
Sidebar.prototype.removeListeners = function() {
2017-12-15 07:57:08 -05:00
this.sidebar.off('click', '.sidebar-collapsed-icon');
this.sidebar.off('hidden.gl.dropdown');
$('.dropdown').off('loading.gl.dropdown');
$('.dropdown').off('loaded.gl.dropdown');
$(document).off('click', '.js-sidebar-toggle');
};
Sidebar.prototype.addEventListeners = function() {
const $document = $(document);
this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
this.sidebar.on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
$('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
$('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
$document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
return $(document)
.off('click', '.js-issuable-todo')
.on('click', '.js-issuable-todo', this.toggleTodo);
2017-12-15 07:57:08 -05:00
};
Sidebar.prototype.sidebarToggleClicked = function(e, triggered) {
var $allGutterToggleIcons, $this, isExpanded, tooltipLabel;
2017-12-15 07:57:08 -05:00
e.preventDefault();
$this = $(this);
isExpanded = $this.find('i').hasClass('fa-angle-double-right');
tooltipLabel = isExpanded ? __('Expand sidebar') : __('Collapse sidebar');
2017-12-15 07:57:08 -05:00
$allGutterToggleIcons = $('.js-sidebar-toggle i');
if (isExpanded) {
2017-12-15 07:57:08 -05:00
$allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
$('aside.right-sidebar')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed');
$('.layout-page')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed');
2017-12-15 07:57:08 -05:00
} else {
$allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
$('aside.right-sidebar')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded');
$('.layout-page')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded');
2017-12-15 07:57:08 -05:00
}
$this.attr('data-original-title', tooltipLabel);
2017-12-15 07:57:08 -05:00
if (!triggered) {
Cookies.set('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
2017-12-15 07:57:08 -05:00
}
};
Sidebar.prototype.toggleTodo = function(e) {
var $btnText, $this, $todoLoading, ajaxType, url;
$this = $(e.currentTarget);
ajaxType = $this.data('deletePath') ? 'delete' : 'post';
if ($this.data('deletePath')) {
url = String($this.data('deletePath'));
2017-12-15 07:57:08 -05:00
} else {
url = String($this.data('createPath'));
2017-12-15 07:57:08 -05:00
}
$this.tooltip('hide');
$('.js-issuable-todo')
.disable()
.addClass('is-loading');
2018-02-02 09:54:18 -05:00
axios[ajaxType](url, {
2018-02-20 17:20:48 -05:00
issuable_id: $this.data('issuableId'),
issuable_type: $this.data('issuableType'),
})
.then(({ data }) => {
this.todoUpdateDone(data);
})
.catch(() =>
2019-08-05 10:31:40 -04:00
flash(
sprintf(__('There was an error %{message} todo.'), {
message:
ajaxType === 'post' ? s__('RightSidebar|adding a') : s__('RightSidebar|deleting the'),
}),
),
);
2017-12-15 07:57:08 -05:00
};
Sidebar.prototype.todoUpdateDone = function(data) {
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');
$el
.removeClass('is-loading')
2017-12-15 07:57:08 -05:00
.enable()
2018-02-20 17:20:48 -05:00
.attr('aria-label', $el.data(`${attrPrefix}Text`))
2018-11-29 23:03:35 -05:00
.attr('title', $el.data(`${attrPrefix}Text`))
.data('deletePath', deletePath);
2017-12-15 07:57:08 -05:00
if ($el.hasClass('has-tooltip')) {
$el.tooltip('_fixTitle');
2016-07-24 16:45:11 -04:00
}
2018-11-29 23:03:35 -05:00
if (typeof $el.data('isCollapsed') !== 'undefined') {
2018-02-20 17:20:48 -05:00
$elText.html($el.data(`${attrPrefix}Icon`));
2017-12-15 07:57:08 -05:00
} else {
2018-02-20 17:20:48 -05:00
$elText.text($el.data(`${attrPrefix}Text`));
2017-12-15 07:57:08 -05:00
}
});
};
Sidebar.prototype.sidebarDropdownLoading = function(e) {
var $loading, $sidebarCollapsedIcon, i, img;
$sidebarCollapsedIcon = $(this)
.closest('.block')
.find('.sidebar-collapsed-icon');
2017-12-15 07:57:08 -05:00
img = $sidebarCollapsedIcon.find('img');
i = $sidebarCollapsedIcon.find('i');
$loading = $('<i class="fa fa-spinner fa-spin"></i>');
if (img.length) {
img.before($loading);
return img.hide();
} else if (i.length) {
i.before($loading);
return i.hide();
}
};
Sidebar.prototype.sidebarDropdownLoaded = function(e) {
var $sidebarCollapsedIcon, i, img;
$sidebarCollapsedIcon = $(this)
.closest('.block')
.find('.sidebar-collapsed-icon');
2017-12-15 07:57:08 -05:00
img = $sidebarCollapsedIcon.find('img');
$sidebarCollapsedIcon.find('i.fa-spin').remove();
i = $sidebarCollapsedIcon.find('i');
if (img.length) {
return img.show();
} else {
return i.show();
}
};
Sidebar.prototype.sidebarCollapseClicked = function(e) {
var $block, sidebar;
if ($(e.currentTarget).hasClass('dont-change-state')) {
return;
}
sidebar = e.data;
e.preventDefault();
$block = $(this).closest('.block');
return sidebar.openDropdown($block);
};
Sidebar.prototype.openDropdown = function(blockOrName) {
var $block;
$block = _.isString(blockOrName) ? this.getBlock(blockOrName) : blockOrName;
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');
});
};
Sidebar.prototype.setCollapseAfterUpdate = function($block) {
$block.addClass('collapse-after-update');
return $('.layout-page').addClass('with-overlay');
};
Sidebar.prototype.onSidebarDropdownHidden = function(e) {
var $block, sidebar;
sidebar = e.data;
e.preventDefault();
$block = $(e.target).closest('.block');
return sidebar.sidebarDropdownHidden($block);
};
Sidebar.prototype.sidebarDropdownHidden = function($block) {
if ($block.hasClass('collapse-after-update')) {
$block.removeClass('collapse-after-update');
$('.layout-page').removeClass('with-overlay');
return this.toggleSidebar('hide');
}
};
Sidebar.prototype.triggerOpenSidebar = function() {
return this.sidebar.find('.js-sidebar-toggle').trigger('click');
};
Sidebar.prototype.toggleSidebar = function(action) {
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 16:45:11 -04:00
2017-12-15 07:57:08 -05:00
Sidebar.prototype.isOpen = function() {
return this.sidebar.is('.right-sidebar-expanded');
};
2016-07-24 16:45:11 -04:00
2017-12-15 07:57:08 -05:00
Sidebar.prototype.getBlock = function(name) {
return this.sidebar.find('.block.' + name);
2017-12-15 07:57:08 -05:00
};
2016-07-24 16:45:11 -04:00
2017-12-15 07:57:08 -05:00
export default Sidebar;