2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2022-02-22 15:18:06 +00:00
|
|
|
import { merge } from 'lodash';
|
2021-06-18 00:10:29 +00:00
|
|
|
import createFlash from '~/flash';
|
2021-02-14 18:09:20 +00:00
|
|
|
import axios from '~/lib/utils/axios_utils';
|
2018-02-08 08:47:31 +00:00
|
|
|
import { __ } from '~/locale';
|
2017-06-12 18:43:21 +00:00
|
|
|
import FilesCommentButton from './files_comment_button';
|
2019-09-18 14:02:45 +00:00
|
|
|
import initImageDiffHelper from './image_diff/helpers/init_image_diff';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { getLocationHash } from './lib/utils/url_utility';
|
|
|
|
import SingleFileDiff from './single_file_diff';
|
2017-01-25 20:34:49 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
const UNFOLD_COUNT = 20;
|
|
|
|
let isBound = false;
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-10-19 09:46:43 +00:00
|
|
|
export default class Diff {
|
2017-03-11 07:30:44 +00:00
|
|
|
constructor() {
|
|
|
|
const $diffFile = $('.files .diff-file');
|
2017-06-12 18:43:21 +00:00
|
|
|
|
2017-07-06 18:39:28 +00:00
|
|
|
$diffFile.each((index, file) => {
|
|
|
|
if (!$.data(file, 'singleFileDiff')) {
|
|
|
|
$.data(file, 'singleFileDiff', new SingleFileDiff(file));
|
|
|
|
}
|
|
|
|
});
|
2017-06-12 18:43:21 +00:00
|
|
|
|
2017-09-14 13:35:57 +00:00
|
|
|
const tab = document.getElementById('diffs');
|
2018-10-24 19:17:03 +00:00
|
|
|
if (!tab || (tab && tab.dataset && tab.dataset.isLocked !== ''))
|
|
|
|
FilesCommentButton.init($diffFile);
|
2016-12-04 11:12:23 +00:00
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
const firstFile = $('.files').first().get(0);
|
2017-10-07 04:25:17 +00:00
|
|
|
const canCreateNote = firstFile && firstFile.hasAttribute('data-can-create-note');
|
2019-09-18 14:02:45 +00:00
|
|
|
$diffFile.each((index, file) => initImageDiffHelper.initImageDiff(file, canCreateNote));
|
2016-10-25 19:25:46 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
if (!isBound) {
|
|
|
|
$(document)
|
|
|
|
.on('click', '.js-unfold', this.handleClickUnfold.bind(this))
|
2017-09-28 14:55:25 +00:00
|
|
|
.on('click', '.diff-line-num a', this.handleClickLineNum.bind(this))
|
|
|
|
.on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this));
|
2017-03-11 07:30:44 +00:00
|
|
|
isBound = true;
|
|
|
|
}
|
2017-03-02 13:43:52 +00:00
|
|
|
|
2017-12-07 12:30:53 +00:00
|
|
|
if (getLocationHash()) {
|
2017-03-11 07:30:44 +00:00
|
|
|
this.highlightSelectedLine();
|
2016-07-24 20:45:11 +00:00
|
|
|
}
|
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
this.openAnchoredDiff();
|
2022-02-22 15:18:06 +00:00
|
|
|
|
|
|
|
this.prepareRenderedDiff();
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
handleClickUnfold(e) {
|
|
|
|
const $target = $(e.target);
|
2017-03-21 17:37:25 +00:00
|
|
|
const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
|
2017-03-11 07:30:44 +00:00
|
|
|
const offset = newLineNumber - oldLineNumber;
|
|
|
|
const bottom = $target.hasClass('js-unfold-bottom');
|
|
|
|
let since;
|
|
|
|
let to;
|
|
|
|
let unfold = true;
|
|
|
|
|
|
|
|
if (bottom) {
|
|
|
|
const lineNumber = newLineNumber + 1;
|
|
|
|
since = lineNumber;
|
|
|
|
to = lineNumber + UNFOLD_COUNT;
|
|
|
|
} else {
|
|
|
|
const lineNumber = newLineNumber - 1;
|
|
|
|
since = lineNumber - UNFOLD_COUNT;
|
|
|
|
to = lineNumber;
|
|
|
|
|
|
|
|
// make sure we aren't loading more than we need
|
|
|
|
const prevNewLine = this.lineNumbers($target.parent().prev())[1];
|
|
|
|
if (since <= prevNewLine + 1) {
|
|
|
|
since = prevNewLine + 1;
|
|
|
|
unfold = false;
|
2016-10-26 01:22:09 +00:00
|
|
|
}
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2016-10-26 01:22:09 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
const file = $target.parents('.diff-file');
|
2018-02-20 22:20:48 +00:00
|
|
|
const link = file.data('blobDiffPath');
|
2017-03-11 07:30:44 +00:00
|
|
|
const view = file.data('view');
|
2016-10-26 01:22:09 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
const params = { since, to, bottom, offset, unfold, view };
|
2018-10-24 19:17:03 +00:00
|
|
|
axios
|
|
|
|
.get(link, { params })
|
|
|
|
.then(({ data }) => $target.parent().replaceWith(data))
|
2021-06-18 00:10:29 +00:00
|
|
|
.catch(() =>
|
|
|
|
createFlash({
|
|
|
|
message: __('An error occurred while loading diff'),
|
|
|
|
}),
|
|
|
|
);
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2016-10-26 01:22:09 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
openAnchoredDiff(cb) {
|
2017-12-07 12:30:53 +00:00
|
|
|
const locationHash = getLocationHash();
|
2017-03-11 07:30:44 +00:00
|
|
|
const anchoredDiff = locationHash && locationHash.split('_')[0];
|
2016-09-09 15:47:43 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
if (!anchoredDiff) return;
|
|
|
|
|
|
|
|
const diffTitle = $(`#${anchoredDiff}`);
|
|
|
|
const diffFile = diffTitle.closest('.diff-file');
|
|
|
|
const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
|
|
|
|
if (nothingHereBlock.length) {
|
|
|
|
const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
|
|
|
|
diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
|
|
|
|
this.highlightSelectedLine();
|
|
|
|
if (cb) cb();
|
|
|
|
});
|
|
|
|
} else if (cb) {
|
|
|
|
cb();
|
2016-10-27 20:32:30 +00:00
|
|
|
}
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2016-10-26 01:22:09 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
handleClickLineNum(e) {
|
|
|
|
const hash = $(e.currentTarget).attr('href');
|
|
|
|
e.preventDefault();
|
|
|
|
if (window.history.pushState) {
|
|
|
|
window.history.pushState(null, null, hash);
|
|
|
|
} else {
|
|
|
|
window.location.hash = hash;
|
2016-09-19 23:02:52 +00:00
|
|
|
}
|
2017-03-11 07:30:44 +00:00
|
|
|
this.highlightSelectedLine();
|
|
|
|
}
|
2017-10-19 09:46:43 +00:00
|
|
|
// eslint-disable-next-line class-methods-use-this
|
2017-09-28 14:55:25 +00:00
|
|
|
handleParallelLineDown(e) {
|
|
|
|
const line = $(e.currentTarget);
|
|
|
|
const table = line.closest('table');
|
|
|
|
|
|
|
|
table.removeClass('left-side-selected right-side-selected');
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
const lineClass = ['left-side', 'right-side'].filter((name) => line.hasClass(name))[0];
|
2017-09-28 14:55:25 +00:00
|
|
|
if (lineClass) {
|
|
|
|
table.addClass(`${lineClass}-selected`);
|
|
|
|
}
|
|
|
|
}
|
2017-10-19 09:46:43 +00:00
|
|
|
// eslint-disable-next-line class-methods-use-this
|
2017-03-11 07:30:44 +00:00
|
|
|
diffViewType() {
|
2018-02-20 22:20:48 +00:00
|
|
|
return $('.inline-parallel-buttons a.active').data('viewType');
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2017-10-19 09:46:43 +00:00
|
|
|
// eslint-disable-next-line class-methods-use-this
|
2017-03-11 07:30:44 +00:00
|
|
|
lineNumbers(line) {
|
2017-03-22 07:57:31 +00:00
|
|
|
const children = line.find('.diff-line-num').toArray();
|
|
|
|
if (children.length !== 2) {
|
2017-03-11 07:30:44 +00:00
|
|
|
return [0, 0];
|
2016-10-25 19:25:46 +00:00
|
|
|
}
|
2020-12-23 21:10:24 +00:00
|
|
|
return children.map((elm) => parseInt($(elm).data('linenumber'), 10) || 0);
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2017-10-19 09:46:43 +00:00
|
|
|
// eslint-disable-next-line class-methods-use-this
|
2017-03-11 07:30:44 +00:00
|
|
|
highlightSelectedLine() {
|
2017-12-07 12:30:53 +00:00
|
|
|
const hash = getLocationHash();
|
2017-03-11 07:30:44 +00:00
|
|
|
const $diffFiles = $('.diff-file');
|
|
|
|
$diffFiles.find('.hll').removeClass('hll');
|
2016-10-25 06:27:21 +00:00
|
|
|
|
2017-03-11 07:30:44 +00:00
|
|
|
if (hash) {
|
|
|
|
$diffFiles
|
|
|
|
.find(`tr#${hash}:not(.match) td, td#${hash}, td[data-line-code="${hash}"]`)
|
|
|
|
.addClass('hll');
|
2016-10-25 19:25:46 +00:00
|
|
|
}
|
|
|
|
}
|
2022-02-22 15:18:06 +00:00
|
|
|
|
|
|
|
prepareRenderedDiff() {
|
|
|
|
const $elements = $('[data-diff-toggle-entity]');
|
|
|
|
|
|
|
|
if ($elements.length === 0) return;
|
|
|
|
|
|
|
|
const diff = this;
|
|
|
|
|
|
|
|
const elements = $elements.toArray().map(this.formatElementToObject).reduce(merge);
|
|
|
|
|
|
|
|
Object.values(elements).forEach((e) => {
|
|
|
|
e.toShowBtn.onclick = () => diff.showOneHideAnother('rendered', e); // eslint-disable-line no-param-reassign
|
|
|
|
e.toHideBtn.onclick = () => diff.showOneHideAnother('raw', e); // eslint-disable-line no-param-reassign
|
|
|
|
|
2022-02-23 09:12:16 +00:00
|
|
|
diff.showOneHideAnother('rendered', e);
|
2022-02-22 15:18:06 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
formatElementToObject = (element) => {
|
|
|
|
const key = element.attributes['data-file-hash'].value;
|
|
|
|
const name = element.attributes['data-diff-toggle-entity'].value;
|
|
|
|
|
|
|
|
return { [key]: { [name]: element } };
|
|
|
|
};
|
|
|
|
|
|
|
|
showOneHideAnother = (mode, elements) => {
|
|
|
|
let { toShowBtn, toHideBtn, toShow, toHide } = elements;
|
|
|
|
|
|
|
|
if (mode === 'raw') {
|
|
|
|
[toShowBtn, toHideBtn] = [toHideBtn, toShowBtn];
|
|
|
|
[toShow, toHide] = [toHide, toShow];
|
|
|
|
}
|
|
|
|
|
|
|
|
toShowBtn.classList.add('selected');
|
|
|
|
toHideBtn.classList.remove('selected');
|
|
|
|
|
|
|
|
toHide.classList.add('hidden');
|
|
|
|
toShow.classList.remove('hidden');
|
|
|
|
};
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|