devops-diff
Version:
devops-diff
274 lines • 14.1 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { nodeStream, mergeStreams } from './highlight.js-helpers';
import { html, defaultDiff2HtmlConfig } from '../../diff2html';
export var defaultDiff2HtmlUIConfig = __assign(__assign({}, defaultDiff2HtmlConfig), { synchronisedScroll: true, highlight: true, fileListToggle: true, fileListStartVisible: false, smartSelection: true });
var Diff2HtmlUI = (function () {
function Diff2HtmlUI(target, diffInput, config, hljs) {
if (config === void 0) { config = {}; }
this.hljs = null;
this.currentSelectionColumnId = -1;
this.config = __assign(__assign({}, defaultDiff2HtmlUIConfig), config);
this.diffHtml = diffInput !== undefined ? html(diffInput, this.config) : target.innerHTML;
this.targetElement = target;
if (hljs !== undefined)
this.hljs = hljs;
}
Diff2HtmlUI.prototype.mergeLine = function () {
var d2hFileWrappers = this.targetElement.querySelectorAll('.d2h-file-wrapper');
d2hFileWrappers.forEach(function (d2hFileWrapper) {
var _a = Array().slice.call(d2hFileWrapper.querySelectorAll('.d2h-file-side-diff')), left = _a[0], right = _a[1];
var leftNums = getDiffNums(left);
var rightNums = getDiffNums(right);
var commonNums = [];
for (var i = 0, len = leftNums.length; i < len; i++) {
commonNums.push(leftNums[i] == rightNums[i] ? leftNums[i] : 0);
}
var diffBodyLeft = left.querySelector(".d2h-diff-tbody");
var diffBodyLeftLine = diffBodyLeft.querySelectorAll('tr');
var diffBodyRight = right.querySelector(".d2h-diff-tbody");
var diffBodyRightLine = diffBodyRight.querySelectorAll('tr');
if (diffBodyLeftLine == null || diffBodyRightLine == null)
return;
var num = 20, ctxNum = 5, lastNums = [], closeNums = [], hasDiffNum = 0;
for (var i = 0, len = commonNums.length; i < len; i++) {
if (commonNums[i] == 0) {
hasDiffNum = 1;
if (lastNums.length >= num) {
lastNums = lastNums.slice(hasDiffNum != 0 ? ctxNum : 0, lastNums.length - ctxNum);
closeNums.push(lastNums);
}
lastNums = [];
}
else {
lastNums.push(i);
}
}
if (lastNums.length >= num) {
lastNums = lastNums.slice(hasDiffNum != 0 ? ctxNum : 0, lastNums.length);
closeNums.push(lastNums);
}
if (closeNums.length != 0) {
closeNums.forEach(function (nums) {
var _a, _b;
nums.forEach(function (i) {
diffBodyLeftLine[i].style.display = 'none';
diffBodyRightLine[i].style.display = 'none';
});
var tdHtml = '<td class="d2h-code-side-linenumber d2h-ctnx">..</td>' + '<td class="d2h-ctnx">' + '<div class="d2h-code-side-line d2h-cntx d2h-expand-cntx">' + '<span class="d2h-code-line-ctn d2h-expand-cntx-btn">**************隐藏' + nums.length + '行，单击展开***************</span>' + '</div>' + '</td>';
var leftTrHtml = document.createElement('tr');
leftTrHtml.innerHTML = tdHtml;
var d2hExpandLeftBtn = leftTrHtml.querySelector('.d2h-expand-cntx-btn');
d2hExpandLeftBtn.addEventListener('click', function () {
var _a, _b;
(_a = diffBodyLeftLine[nums[0]].parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(leftTrHtml);
(_b = diffBodyRightLine[nums[0]].parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(rightTrHtml);
nums.forEach(function (i) {
diffBodyLeftLine[i].style.display = 'table-row';
diffBodyRightLine[i].style.display = 'table-row';
});
});
var rightTrHtml = document.createElement('tr');
rightTrHtml.innerHTML = tdHtml;
var d2hExpandRightBtn = rightTrHtml.querySelector('.d2h-expand-cntx-btn');
;
d2hExpandRightBtn.addEventListener('click', function () {
var _a, _b;
(_a = diffBodyLeftLine[nums[0]].parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(leftTrHtml);
(_b = diffBodyRightLine[nums[0]].parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(rightTrHtml);
nums.forEach(function (i) {
diffBodyLeftLine[i].style.display = 'table-row';
diffBodyRightLine[i].style.display = 'table-row';
});
});
(_a = diffBodyLeftLine[nums[0]].parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(leftTrHtml, diffBodyLeftLine[nums[0]]);
(_b = diffBodyRightLine[nums[0]].parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(rightTrHtml, diffBodyRightLine[nums[0]]);
});
}
});
function getDiffNums(d2hFileSideDiff) {
var diffBody = d2hFileSideDiff.querySelectorAll(".d2h-diff-tbody");
var diffBodyLine = diffBody[0].querySelectorAll('tr');
var result = [];
for (var i = 0, len = diffBodyLine.length; i < len; i++) {
var d2hCntxTd = diffBodyLine[i].querySelectorAll(".d2h-cntx");
result.push(d2hCntxTd.length != 0 ? 1 : 0);
}
return result;
}
};
Diff2HtmlUI.prototype.showWrapper = function () {
var targetElement = this.targetElement;
var d2hFileWrappers = this.targetElement.querySelectorAll('.d2h-file-wrapper');
var d2hFileNameList = this.targetElement.querySelectorAll('.d2h-file-name');
var d2hFileListWrapper = this.targetElement.querySelector('.d2h-file-list-wrapper');
if (d2hFileNameList == null)
return;
d2hFileNameList.forEach(function (fileName) {
fileName.addEventListener('click', function () {
var href = fileName.getAttribute('href');
var targetId = href === null || href === void 0 ? void 0 : href.substring(href.lastIndexOf('#'));
if (targetId == undefined)
return;
var d2hFileName = targetElement.querySelector(targetId);
if (d2hFileName == null)
return;
d2hFileWrappers.forEach(function (fileNameWrapper) {
fileNameWrapper.style.display = fileNameWrapper == d2hFileName ? 'block' : 'none';
});
var button = document.getElementById('btn-push-right');
if (button == null)
return;
d2hFileListWrapper.style.width = '0';
button.style.width = '20px';
d2hFileListWrapper.style.overflow = 'hidden';
});
});
var button = document.getElementById('btn-push-right');
if (button == null)
return;
button.addEventListener('click', function () {
d2hFileListWrapper.style.width = '20%';
button.style.width = '0';
d2hFileListWrapper.style.overflow = 'inherit';
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
};
Diff2HtmlUI.prototype.draw = function () {
this.targetElement.innerHTML = this.diffHtml;
if (this.config.synchronisedScroll)
this.synchronisedScroll();
if (this.config.highlight)
this.highlightCode();
if (this.config.fileListToggle)
this.fileListToggle(this.config.fileListStartVisible);
};
Diff2HtmlUI.prototype.synchronisedScroll = function () {
this.targetElement.querySelectorAll('.d2h-file-wrapper').forEach(function (wrapper) {
var _a = Array().slice.call(wrapper.querySelectorAll('.d2h-file-side-diff')), left = _a[0], right = _a[1];
if (left === undefined || right === undefined)
return;
var onScroll = function (event) {
if (event === null || event.target === null)
return;
if (event.target === left) {
right.scrollTop = left.scrollTop;
right.scrollLeft = left.scrollLeft;
}
else {
left.scrollTop = right.scrollTop;
left.scrollLeft = right.scrollLeft;
}
};
left.addEventListener('scroll', onScroll);
right.addEventListener('scroll', onScroll);
});
};
Diff2HtmlUI.prototype.fileListToggle = function (startVisible) {
var showBtn = this.targetElement.querySelector('.d2h-show');
var hideBtn = this.targetElement.querySelector('.d2h-hide');
var fileList = this.targetElement.querySelector('.d2h-file-list');
if (showBtn === null || hideBtn === null || fileList === null)
return;
var show = function () {
showBtn.style.display = 'none';
hideBtn.style.display = 'none';
fileList.style.display = 'block';
};
var hide = function () {
showBtn.style.display = 'none';
hideBtn.style.display = 'none';
fileList.style.display = 'block';
};
showBtn.addEventListener('click', function () { return show(); });
hideBtn.addEventListener('click', function () { return hide(); });
var hashTag = this.getHashTag();
if (hashTag === 'files-summary-show')
show();
else if (hashTag === 'files-summary-hide')
hide();
else if (startVisible)
show();
else
hide();
};
Diff2HtmlUI.prototype.highlightCode = function () {
var _this = this;
if (this.hljs === null) {
throw new Error('Missing a `highlight.js` implementation. Please provide one when instantiating Diff2HtmlUI.');
}
var files = this.targetElement.querySelectorAll('.d2h-file-wrapper');
files.forEach(function (file) {
var oldLinesState;
var newLinesState;
var codeLines = file.querySelectorAll('.d2h-code-line-ctn');
codeLines.forEach(function (line) {
if (_this.hljs === null)
return;
var text = line.textContent;
var lineParent = line.parentNode;
if (text === null || lineParent === null || !_this.isElement(lineParent))
return;
var lineState = lineParent.classList.contains('d2h-del') ? oldLinesState : newLinesState;
var language = file.getAttribute('data-lang');
var result = language && _this.hljs.getLanguage(language) ? _this.hljs.highlight(language, text, true, lineState) : _this.hljs.highlightAuto(text);
if (_this.instanceOfHighlightResult(result)) {
if (lineParent.classList.contains('d2h-del')) {
oldLinesState = result.top;
}
else if (lineParent.classList.contains('d2h-ins')) {
newLinesState = result.top;
}
else {
oldLinesState = result.top;
newLinesState = result.top;
}
}
var originalStream = nodeStream(line);
if (originalStream.length) {
var resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
resultNode.innerHTML = result.value;
result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
}
line.classList.add('hljs');
if (result.language) {
line.classList.add(result.language);
}
line.innerHTML = result.value;
});
});
this.showWrapper();
this.mergeLine();
};
Diff2HtmlUI.prototype.smartSelection = function () {
console.warn('Smart selection is now enabled by default with CSS. No need to call this method anymore.');
};
Diff2HtmlUI.prototype.instanceOfHighlightResult = function (object) {
return 'top' in object;
};
Diff2HtmlUI.prototype.getHashTag = function () {
var docUrl = document.URL;
var hashTagIndex = docUrl.indexOf('#');
var hashTag = null;
if (hashTagIndex !== -1) {
hashTag = docUrl.substr(hashTagIndex + 1);
}
return hashTag;
};
Diff2HtmlUI.prototype.isElement = function (arg) {
var _a;
return arg !== null && ((_a = arg) === null || _a === void 0 ? void 0 : _a.classList) !== undefined;
};
return Diff2HtmlUI;
}());
export { Diff2HtmlUI };
//# sourceMappingURL=diff2html-ui-base.js.map