269 lines
9.1 KiB
JavaScript
269 lines
9.1 KiB
JavaScript
/*
|
|
*
|
|
* HtmlPrinter (html-printer.js)
|
|
* Author: rtfpessoa
|
|
*
|
|
*/
|
|
|
|
(function() {
|
|
|
|
var diffParser = require('./diff-parser.js').DiffParser;
|
|
var printerUtils = require('./printer-utils.js').PrinterUtils;
|
|
var utils = require('./utils.js').Utils;
|
|
var Rematch = require('./rematch.js').Rematch;
|
|
|
|
var matcher = Rematch.rematch(function(a, b) {
|
|
var amod = a.content.substr(1);
|
|
var bmod = b.content.substr(1);
|
|
|
|
return Rematch.distance(amod, bmod);
|
|
});
|
|
|
|
function SideBySidePrinter(config) {
|
|
this.config = config;
|
|
}
|
|
|
|
SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
|
|
return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
|
|
' <div class="d2h-file-header">\n' +
|
|
' <div class="d2h-file-stats">\n' +
|
|
' <span class="d2h-lines-added">' +
|
|
' <span>+' + file.addedLines + '</span>\n' +
|
|
' </span>\n' +
|
|
' <span class="d2h-lines-deleted">' +
|
|
' <span>-' + file.deletedLines + '</span>\n' +
|
|
' </span>\n' +
|
|
' </div>\n' +
|
|
' <div class="d2h-file-name">' + printerUtils.getDiffName(file) + '</div>\n' +
|
|
' </div>\n' +
|
|
' <div class="d2h-files-diff">\n' +
|
|
' <div class="d2h-file-side-diff">\n' +
|
|
' <div class="d2h-code-wrapper">\n' +
|
|
' <table class="d2h-diff-table">\n' +
|
|
' <tbody class="d2h-diff-tbody">\n' +
|
|
' ' + diffs.left +
|
|
' </tbody>\n' +
|
|
' </table>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' <div class="d2h-file-side-diff">\n' +
|
|
' <div class="d2h-code-wrapper">\n' +
|
|
' <table class="d2h-diff-table">\n' +
|
|
' <tbody class="d2h-diff-tbody">\n' +
|
|
' ' + diffs.right +
|
|
' </tbody>\n' +
|
|
' </table>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' </div>\n';
|
|
};
|
|
|
|
SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles) {
|
|
var that = this;
|
|
return '<div class="d2h-wrapper">\n' +
|
|
diffFiles.map(function(file) {
|
|
|
|
var diffs;
|
|
if (file.blocks.length) {
|
|
diffs = that.generateSideBySideFileHtml(file);
|
|
} else {
|
|
diffs = that.generateEmptyDiff();
|
|
}
|
|
|
|
return that.makeDiffHtml(file, diffs);
|
|
}).join('\n') +
|
|
'</div>\n';
|
|
};
|
|
|
|
SideBySidePrinter.prototype.makeSideHtml = function(blockHeader) {
|
|
return '<tr>\n' +
|
|
' <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
|
|
' <td class="' + diffParser.LINE_TYPE.INFO + '">\n' +
|
|
' <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' + blockHeader + '</div>\n' +
|
|
' </td>\n' +
|
|
'</tr>\n';
|
|
};
|
|
|
|
SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) {
|
|
var that = this;
|
|
var fileHtml = {};
|
|
fileHtml.left = '';
|
|
fileHtml.right = '';
|
|
|
|
file.blocks.forEach(function(block) {
|
|
|
|
fileHtml.left += that.makeSideHtml(utils.escape(block.header));
|
|
fileHtml.right += that.makeSideHtml('');
|
|
|
|
var oldLines = [];
|
|
var newLines = [];
|
|
|
|
function processChangeBlock() {
|
|
var matches;
|
|
var insertType;
|
|
var deleteType;
|
|
var doMatching = that.config.matching === 'lines' || that.config.matching === 'words';
|
|
|
|
if (doMatching) {
|
|
matches = matcher(oldLines, newLines);
|
|
insertType = diffParser.LINE_TYPE.INSERT_CHANGES;
|
|
deleteType = diffParser.LINE_TYPE.DELETE_CHANGES;
|
|
} else {
|
|
matches = [[oldLines, newLines]];
|
|
insertType = diffParser.LINE_TYPE.INSERTS;
|
|
deleteType = diffParser.LINE_TYPE.DELETES;
|
|
}
|
|
|
|
matches.forEach(function(match) {
|
|
oldLines = match[0];
|
|
newLines = match[1];
|
|
|
|
var common = Math.min(oldLines.length, newLines.length);
|
|
var max = Math.max(oldLines.length, newLines.length);
|
|
|
|
for (var j = 0; j < common; j++) {
|
|
var oldLine = oldLines[j];
|
|
var newLine = newLines[j];
|
|
|
|
that.config.isCombined = file.isCombined;
|
|
|
|
var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
|
|
|
|
fileHtml.left +=
|
|
that.generateSingleLineHtml(deleteType, oldLine.oldNumber,
|
|
diff.first.line, diff.first.prefix);
|
|
fileHtml.right +=
|
|
that.generateSingleLineHtml(insertType, newLine.newNumber,
|
|
diff.second.line, diff.second.prefix);
|
|
}
|
|
|
|
if (max > common) {
|
|
var oldSlice = oldLines.slice(common);
|
|
var newSlice = newLines.slice(common);
|
|
|
|
var tmpHtml = that.processLines(oldSlice, newSlice);
|
|
fileHtml.left += tmpHtml.left;
|
|
fileHtml.right += tmpHtml.right;
|
|
}
|
|
});
|
|
|
|
oldLines = [];
|
|
newLines = [];
|
|
}
|
|
|
|
for (var i = 0; i < block.lines.length; i++) {
|
|
var line = block.lines[i];
|
|
var prefix = line.content[0];
|
|
var escapedLine = utils.escape(line.content.substr(1));
|
|
|
|
if (line.type !== diffParser.LINE_TYPE.INSERTS &&
|
|
(newLines.length > 0 || (line.type !== diffParser.LINE_TYPE.DELETES && oldLines.length > 0))) {
|
|
processChangeBlock();
|
|
}
|
|
|
|
if (line.type === diffParser.LINE_TYPE.CONTEXT) {
|
|
fileHtml.left += that.generateSingleLineHtml(line.type, line.oldNumber, escapedLine, prefix);
|
|
fileHtml.right += that.generateSingleLineHtml(line.type, line.newNumber, escapedLine, prefix);
|
|
} else if (line.type === diffParser.LINE_TYPE.INSERTS && !oldLines.length) {
|
|
fileHtml.left += that.generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
|
|
fileHtml.right += that.generateSingleLineHtml(line.type, line.newNumber, escapedLine, prefix);
|
|
} else if (line.type === diffParser.LINE_TYPE.DELETES) {
|
|
oldLines.push(line);
|
|
} else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
|
|
newLines.push(line);
|
|
} else {
|
|
console.error('unknown state in html side-by-side generator');
|
|
processChangeBlock();
|
|
}
|
|
}
|
|
|
|
processChangeBlock();
|
|
});
|
|
|
|
return fileHtml;
|
|
};
|
|
|
|
SideBySidePrinter.prototype.processLines = function(oldLines, newLines) {
|
|
var that = this;
|
|
var fileHtml = {};
|
|
fileHtml.left = '';
|
|
fileHtml.right = '';
|
|
|
|
var maxLinesNumber = Math.max(oldLines.length, newLines.length);
|
|
for (var i = 0; i < maxLinesNumber; i++) {
|
|
var oldLine = oldLines[i];
|
|
var newLine = newLines[i];
|
|
var oldContent;
|
|
var newContent;
|
|
var oldPrefix;
|
|
var newPrefix;
|
|
|
|
if (oldLine) {
|
|
oldContent = utils.escape(oldLine.content.substr(1));
|
|
oldPrefix = oldLine.content[0];
|
|
}
|
|
|
|
if (newLine) {
|
|
newContent = utils.escape(newLine.content.substr(1));
|
|
newPrefix = newLine.content[0];
|
|
}
|
|
|
|
if (oldLine && newLine) {
|
|
fileHtml.left += that.generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
|
|
fileHtml.right += that.generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
|
|
} else if (oldLine) {
|
|
fileHtml.left += that.generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
|
|
fileHtml.right += that.generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
|
|
} else if (newLine) {
|
|
fileHtml.left += that.generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
|
|
fileHtml.right += that.generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
|
|
} else {
|
|
console.error('How did it get here?');
|
|
}
|
|
}
|
|
|
|
return fileHtml;
|
|
};
|
|
|
|
SideBySidePrinter.prototype.makeSingleLineHtml = function(type, number, htmlContent, htmlPrefix) {
|
|
return '<tr>\n' +
|
|
' <td class="d2h-code-side-linenumber ' + type + '">' + number + '</td>\n' +
|
|
' <td class="' + type + '">' +
|
|
' <div class="d2h-code-side-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
|
|
' </td>\n' +
|
|
' </tr>\n';
|
|
};
|
|
|
|
SideBySidePrinter.prototype.generateSingleLineHtml = function(type, number, content, prefix) {
|
|
var htmlPrefix = '';
|
|
if (prefix) {
|
|
htmlPrefix = '<span class="d2h-code-line-prefix">' + prefix + '</span>';
|
|
}
|
|
|
|
var htmlContent = '';
|
|
if (content) {
|
|
htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>';
|
|
}
|
|
|
|
return this.makeSingleLineHtml(type, number, htmlContent, htmlPrefix);
|
|
};
|
|
|
|
SideBySidePrinter.prototype.generateEmptyDiff = function() {
|
|
var fileHtml = {};
|
|
fileHtml.right = '';
|
|
|
|
fileHtml.left = '<tr>\n' +
|
|
' <td class="' + diffParser.LINE_TYPE.INFO + '">' +
|
|
' <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' +
|
|
'File without changes' +
|
|
' </div>' +
|
|
' </td>\n' +
|
|
'</tr>\n';
|
|
|
|
return fileHtml;
|
|
};
|
|
|
|
module.exports.SideBySidePrinter = SideBySidePrinter;
|
|
|
|
})();
|