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

77 lines
2.8 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
/* Developer beware! Do not add logic to showButton or hideButton
2019-02-15 15:39:39 +05:30
* that will force a reflow. Doing so will create a significant performance
2017-09-10 17:25:29 +05:30
* bottleneck for pages with large diffs. For a comprehensive list of what
* causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
*/
2018-03-17 18:26:18 +05:30
import Cookies from 'js-cookie';
2017-09-10 17:25:29 +05:30
const LINE_NUMBER_CLASS = 'diff-line-num';
const UNFOLDABLE_LINE_CLASS = 'js-unfold';
const NO_COMMENT_CLASS = 'no-comment-btn';
const EMPTY_CELL_CLASS = 'empty-cell';
const OLD_LINE_CLASS = 'old_line';
const LINE_COLUMN_CLASSES = `.${LINE_NUMBER_CLASS}, .line_content`;
const DIFF_CONTAINER_SELECTOR = '.files';
const DIFF_EXPANDED_CLASS = 'diff-expanded';
export default {
init($diffFile) {
2018-03-17 18:26:18 +05:30
/* Caching is used only when the following members are *true*.
* This is because there are likely to be
* differently configured versions of diffs in the same session.
* However if these values are true, they
2017-09-10 17:25:29 +05:30
* will be true in all cases */
if (!this.userCanCreateNote) {
// data-can-create-note is an empty string when true, otherwise undefined
2018-12-13 13:39:08 +05:30
this.userCanCreateNote =
$diffFile.closest(DIFF_CONTAINER_SELECTOR).data('canCreateNote') === '';
2016-09-13 17:45:13 +05:30
}
2018-03-17 18:26:18 +05:30
this.isParallelView = Cookies.get('diff_view') === 'parallel';
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
if (this.userCanCreateNote) {
2018-12-13 13:39:08 +05:30
$diffFile
2021-03-08 18:12:59 +05:30
.on('mouseover', LINE_COLUMN_CLASSES, (e) => this.showButton(this.isParallelView, e))
.on('mouseleave', LINE_COLUMN_CLASSES, (e) => this.hideButton(this.isParallelView, e));
2017-08-17 22:00:37 +05:30
}
2017-09-10 17:25:29 +05:30
},
2016-09-13 17:45:13 +05:30
2017-09-10 17:25:29 +05:30
showButton(isParallelView, e) {
const buttonParentElement = this.getButtonParent(e.currentTarget, isParallelView);
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
if (!this.validateButtonParent(buttonParentElement)) return;
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
buttonParentElement.classList.add('is-over');
buttonParentElement.nextElementSibling.classList.add('is-over');
},
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
hideButton(isParallelView, e) {
const buttonParentElement = this.getButtonParent(e.currentTarget, isParallelView);
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
buttonParentElement.classList.remove('is-over');
buttonParentElement.nextElementSibling.classList.remove('is-over');
},
getButtonParent(hoveredElement, isParallelView) {
if (isParallelView) {
if (!hoveredElement.classList.contains(LINE_NUMBER_CLASS)) {
return hoveredElement.previousElementSibling;
}
} else if (!hoveredElement.classList.contains(OLD_LINE_CLASS)) {
return hoveredElement.parentNode.querySelector(`.${OLD_LINE_CLASS}`);
2017-08-17 22:00:37 +05:30
}
2017-09-10 17:25:29 +05:30
return hoveredElement;
},
validateButtonParent(buttonParentElement) {
2018-12-13 13:39:08 +05:30
return (
!buttonParentElement.classList.contains(EMPTY_CELL_CLASS) &&
2017-09-10 17:25:29 +05:30
!buttonParentElement.classList.contains(UNFOLDABLE_LINE_CLASS) &&
!buttonParentElement.classList.contains(NO_COMMENT_CLASS) &&
2018-12-13 13:39:08 +05:30
!buttonParentElement.parentNode.classList.contains(DIFF_EXPANDED_CLASS)
);
2017-09-10 17:25:29 +05:30
},
2017-08-17 22:00:37 +05:30
};