luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #81 from rtfpessoa/improve-file-summary

Browse source 
Improve file summary
This commit is contained in:
Rodrigo Fernandes 2016-05-21 02:12:21 +01:00
commit 0e5c6cd892
32 changed files with 893 additions and 463 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/file-list-printer.js
View file

@ -9,34 +9,34 @@
var printerUtils = require('./printer-utils.js').PrinterUtils; var printerUtils = require('./printer-utils.js').PrinterUtils;
var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
var baseTemplatesPath = 'file-summary';
var iconsBaseTemplatesPath = 'icon';
function FileListPrinter() { function FileListPrinter() {
} }
FileListPrinter.prototype.generateFileList = function(diffFiles) { FileListPrinter.prototype.generateFileList = function(diffFiles) {
return '<div class="d2h-file-list-wrapper">\n' + var lineTemplate = hoganUtils.template(baseTemplatesPath, 'line');
' <div class="d2h-file-list-header">\n' +
' <span class="d2h-file-list-title">Files changed (' + diffFiles.length + ')&nbsp&nbsp</span>\n' +
' <a class="d2h-file-switch d2h-hide">hide</a>\n' +
' <a class="d2h-file-switch d2h-show">show</a>\n' +
' </div>\n' +
' <table class="d2h-file-list">\n' +
diffFiles.map(function(file) { var files = diffFiles.map(function(file) {
return ' <tr class="d2h-file-list-line">\n' + var fileTypeName = printerUtils.getFileTypeIcon(file);
' <td class="d2h-lines-added">\n' + var iconTemplate = hoganUtils.template(iconsBaseTemplatesPath, fileTypeName);
' <span>+' + file.addedLines + '</span>\n' +
' </td>\n' + return lineTemplate.render({
' <td class="d2h-lines-deleted">\n' + fileHtmlId: printerUtils.getHtmlId(file),
' <span>-' + file.deletedLines + '</span>\n' + fileName: printerUtils.getDiffName(file),
' </td>\n' + deletedLines: '-' + file.deletedLines,
' <td class="d2h-file-name-wrapper">\n' + addedLines: '+' + file.addedLines
' <a href="#' + printerUtils.getHtmlId(file) + '" class="d2h-file-name">' + }, {
'&nbsp;' + printerUtils.getDiffName(file) + fileIcon: iconTemplate
' </a>\n' + });
' </td>\n' + }).join('\n');
' </tr>\n';
}).join('\n') + return hoganUtils.render(baseTemplatesPath, 'wrapper', {
'</table></div>\n'; filesNumber: diffFiles.length,
files: files
});
}; };
module.exports.FileListPrinter = new FileListPrinter(); module.exports.FileListPrinter = new FileListPrinter();

12
src/hoganjs-utils.js
View file

@ -20,10 +20,7 @@
} }
HoganJsUtils.prototype.render = function(namespace, view, params, configuration) { HoganJsUtils.prototype.render = function(namespace, view, params, configuration) {
var config = configuration || {}; var template = this.template(namespace, view, configuration);
var templateKey = this._templateKey(namespace, view);
var template = this._getTemplate(templateKey, config);
if (template) { if (template) {
return template.render(params); return template.render(params);
} }
@ -31,6 +28,13 @@
return null; return null;
}; };
HoganJsUtils.prototype.template = function(namespace, view, configuration) {
var config = configuration || {};
var templateKey = this._templateKey(namespace, view);
return this._getTemplate(templateKey, config);
};
HoganJsUtils.prototype._getTemplate = function(templateKey, config) { HoganJsUtils.prototype._getTemplate = function(templateKey, config) {
var template; var template;

44
src/line-by-line-printer.js
View file

@ -13,23 +13,36 @@
var Rematch = require('./rematch.js').Rematch; var Rematch = require('./rematch.js').Rematch;
var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils; var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
var genericTemplatesPath = 'generic';
var baseTemplatesPath = 'line-by-line'; var baseTemplatesPath = 'line-by-line';
var iconsBaseTemplatesPath = 'icon';
var tagsBaseTemplatesPath = 'tag';
function LineByLinePrinter(config) { function LineByLinePrinter(config) {
this.config = config; this.config = config;
} }
LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) { LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
return hoganUtils.render(baseTemplatesPath, 'file-diff', { var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, 'file-diff');
var filePathTemplate = hoganUtils.template(genericTemplatesPath, 'file-path');
var fileIconTemplate = hoganUtils.template(iconsBaseTemplatesPath, 'file');
var fileTagTemplate = hoganUtils.template(tagsBaseTemplatesPath, printerUtils.getFileTypeIcon(file));
return fileDiffTemplate.render({
file: file, file: file,
fileDiffName: printerUtils.getDiffName(file),
fileHtmlId: printerUtils.getHtmlId(file), fileHtmlId: printerUtils.getHtmlId(file),
diffs: diffs diffs: diffs,
filePath: filePathTemplate.render({
fileDiffName: printerUtils.getDiffName(file)
}, {
fileIcon: fileIconTemplate,
fileTag: fileTagTemplate
})
}); });
}; };
LineByLinePrinter.prototype.makeLineByLineHtmlWrapper = function(content) { LineByLinePrinter.prototype.makeLineByLineHtmlWrapper = function(content) {
return hoganUtils.render(baseTemplatesPath, 'wrapper', {'content': content}); return hoganUtils.render(genericTemplatesPath, 'wrapper', {'content': content});
}; };
LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) { LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
@ -55,9 +68,11 @@
}); });
LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) { LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) {
return hoganUtils.render(baseTemplatesPath, 'column-line-number', { return hoganUtils.render(genericTemplatesPath, 'column-line-number', {
diffParser: diffParser, diffParser: diffParser,
block: utils.escape(block.header) blockHeader: block.header,
lineClass: 'd2h-code-linenumber',
contentClass: 'd2h-code-line'
}); });
}; };
@ -170,18 +185,25 @@
}; };
LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) { LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) {
return hoganUtils.render(baseTemplatesPath, 'line', var lineNumberTemplate = hoganUtils.render(baseTemplatesPath, 'numbers', {
oldNumber: utils.valueOrEmpty(oldNumber),
newNumber: utils.valueOrEmpty(newNumber)
});
return hoganUtils.render(genericTemplatesPath, 'line',
{ {
type: type, type: type,
oldNumber: utils.valueOrEmpty(oldNumber), lineClass: 'd2h-code-linenumber',
newNumber: utils.valueOrEmpty(newNumber), contentClass: 'd2h-code-line',
prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix), prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
content: content && utils.convertWhiteSpaceToNonBreakingSpace(content) content: content && utils.convertWhiteSpaceToNonBreakingSpace(content),
lineNumber: lineNumberTemplate
}); });
}; };
LineByLinePrinter.prototype._generateEmptyDiff = function() { LineByLinePrinter.prototype._generateEmptyDiff = function() {
return hoganUtils.render(baseTemplatesPath, 'empty-diff', { return hoganUtils.render(genericTemplatesPath, 'empty-diff', {
contentClass: 'd2h-code-line',
diffParser: diffParser diffParser: diffParser
}); });
}; };

19
src/printer-utils.js
View file

@ -95,6 +95,25 @@
return 'unknown/file/path'; return 'unknown/file/path';
}; };
PrinterUtils.prototype.getFileTypeIcon = function(file) {
var templateName = 'file-changed';
if (file.isRename) {
templateName = 'file-renamed';
} else if (file.isCopy) {
templateName = 'file-renamed';
} else if (file.isNew) {
templateName = 'file-added';
} else if (file.isDeleted) {
templateName = 'file-deleted';
} else if (file.newName !== file.oldName) {
// If file is not Added, not Deleted and the names changed it must be a rename :)
templateName = 'file-renamed';
}
return templateName;
};
PrinterUtils.prototype.diffHighlight = function(diffLine1, diffLine2, config) { PrinterUtils.prototype.diffHighlight = function(diffLine1, diffLine2, config) {
var linePrefix1, linePrefix2, unprefixedLine1, unprefixedLine2; var linePrefix1, linePrefix2, unprefixedLine1, unprefixedLine2;

119
src/side-by-side-printer.js
View file

@ -12,6 +12,12 @@
var utils = require('./utils.js').Utils; var utils = require('./utils.js').Utils;
var Rematch = require('./rematch.js').Rematch; var Rematch = require('./rematch.js').Rematch;
var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
var genericTemplatesPath = 'generic';
var baseTemplatesPath = 'side-by-side';
var iconsBaseTemplatesPath = 'icon';
var tagsBaseTemplatesPath = 'tag';
var matcher = Rematch.rematch(function(a, b) { var matcher = Rematch.rematch(function(a, b) {
var amod = a.content.substr(1); var amod = a.content.substr(1);
var bmod = b.content.substr(1); var bmod = b.content.substr(1);
@ -24,48 +30,28 @@
} }
SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) { SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' + var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, 'file-diff');
' <div class="d2h-file-header">\n' + var filePathTemplate = hoganUtils.template(genericTemplatesPath, 'file-path');
' <span class="d2h-file-stats">\n' + var fileIconTemplate = hoganUtils.template(iconsBaseTemplatesPath, 'file');
' <span class="d2h-lines-added">\n' + var fileTagTemplate = hoganUtils.template(tagsBaseTemplatesPath, printerUtils.getFileTypeIcon(file));
' <span>+' + file.addedLines + '</span>\n' +
' </span>\n' + return fileDiffTemplate.render({
' <span class="d2h-lines-deleted">\n' + file: file,
' <span>-' + file.deletedLines + '</span>\n' + fileHtmlId: printerUtils.getHtmlId(file),
' </span>\n' + diffs: diffs,
' </span>\n' + filePath: filePathTemplate.render({
' <span class="d2h-file-name-wrapper">\n' + fileDiffName: printerUtils.getDiffName(file)
' <span class="d2h-file-name">' + printerUtils.getDiffName(file) + '</span>\n' + }, {
' </span>\n' + fileIcon: fileIconTemplate,
' </div>\n' + fileTag: fileTagTemplate
' <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) { SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles) {
var that = this; var that = this;
return '<div class="d2h-wrapper">\n' +
diffFiles.map(function(file) {
var content = diffFiles.map(function(file) {
var diffs; var diffs;
if (file.blocks.length) { if (file.blocks.length) {
diffs = that.generateSideBySideFileHtml(file); diffs = that.generateSideBySideFileHtml(file);
@ -74,17 +60,18 @@
} }
return that.makeDiffHtml(file, diffs); return that.makeDiffHtml(file, diffs);
}).join('\n') + }).join('\n');
'</div>\n';
return hoganUtils.render(genericTemplatesPath, 'wrapper', {'content': content});
}; };
SideBySidePrinter.prototype.makeSideHtml = function(blockHeader) { SideBySidePrinter.prototype.makeSideHtml = function(blockHeader) {
return '<tr>\n' + return hoganUtils.render(genericTemplatesPath, 'column-line-number', {
' <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' + diffParser: diffParser,
' <td class="' + diffParser.LINE_TYPE.INFO + '">\n' + blockHeader: blockHeader,
' <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' + blockHeader + '</div>\n' + lineClass: 'd2h-code-side-linenumber',
' </td>\n' + contentClass: 'd2h-code-side-line'
'</tr>\n'; });
}; };
SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) { SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) {
@ -95,7 +82,7 @@
file.blocks.forEach(function(block) { file.blocks.forEach(function(block) {
fileHtml.left += that.makeSideHtml(utils.escape(block.header)); fileHtml.left += that.makeSideHtml(block.header);
fileHtml.right += that.makeSideHtml(''); fileHtml.right += that.makeSideHtml('');
var oldLines = []; var oldLines = [];
@ -232,40 +219,26 @@
return fileHtml; 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) { SideBySidePrinter.prototype.generateSingleLineHtml = function(type, number, content, prefix) {
var htmlPrefix = ''; return hoganUtils.render(genericTemplatesPath, 'line',
if (prefix) { {
htmlPrefix = '<span class="d2h-code-line-prefix">' + prefix + '</span>'; type: type,
} lineClass: 'd2h-code-side-linenumber',
contentClass: 'd2h-code-side-line',
var htmlContent = ''; prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
if (content) { content: content && utils.convertWhiteSpaceToNonBreakingSpace(content),
htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>'; lineNumber: number
} });
return this.makeSingleLineHtml(type, number, htmlContent, htmlPrefix);
}; };
SideBySidePrinter.prototype.generateEmptyDiff = function() { SideBySidePrinter.prototype.generateEmptyDiff = function() {
var fileHtml = {}; var fileHtml = {};
fileHtml.right = ''; fileHtml.right = '';
fileHtml.left = '<tr>\n' + fileHtml.left = hoganUtils.render(genericTemplatesPath, 'empty-diff', {
' <td class="' + diffParser.LINE_TYPE.INFO + '">' + contentClass: 'd2h-code-side-line',
' <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' + diffParser: diffParser
'File without changes' + });
' </div>' +
' </td>\n' +
'</tr>\n';
return fileHtml; return fileHtml;
}; };

24
src/templates/diff2html-templates.js
View file

@ -1,9 +1,23 @@
(function() { (function() {
if (!!!global.browserTemplates) global.browserTemplates = {}; if (!!!global.browserTemplates) global.browserTemplates = {};
var Hogan = require("hogan.js");global.browserTemplates["line-by-line-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"d2h-code-linenumber ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }}); var Hogan = require("hogan.js");global.browserTemplates["file-summary-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<li class=\"d2h-file-list-line\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(" <span>");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b(" <a href=\"#");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-name\">");t.b(t.v(t.f("fileName",c,p,0)));t.b("</a>");t.b("\n" + i);t.b(" <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b(" <span class=\"d2h-lines-added\">");t.b(t.v(t.f("addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" <span class=\"d2h-lines-deleted\">");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</li>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: { }}}, subs: { }});
global.browserTemplates["line-by-line-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" File without changes");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["file-summary-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-file-list-wrapper\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-list-header\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-list-title\">Files changed (");t.b(t.v(t.f("filesNumber",c,p,0)));t.b(")</span>");t.b("\n" + i);t.b(" <a class=\"d2h-file-switch d2h-hide\">hide</a>");t.b("\n" + i);t.b(" <a class=\"d2h-file-switch d2h-show\">show</a>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <ol class=\"d2h-file-list\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("files",c,p,0)));t.b("\n" + i);t.b(" </ol>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-header\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b(" <span class=\"d2h-lines-added\">");t.b("\n" + i);t.b(" <span>+");t.b(t.v(t.d("file.addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"d2h-lines-deleted\">");t.b("\n" + i);t.b(" <span>-");t.b(t.v(t.d("file.deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-name\">&nbsp;");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b(" <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b(" <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b(" </tbody>");t.b("\n" + i);t.b(" </table>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["generic-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["line-by-line-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"d2h-code-linenumber ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"line-num1\">");t.b(t.v(t.f("oldNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" <div class=\"line-num2\">");t.b(t.v(t.f("newNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,253,329,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,361,435,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b(" </div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["generic-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" File without changes");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["line-by-line-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["generic-file-path"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(" <span class=\"d2h-icon-wrapper\">");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b(" <span class=\"d2h-file-name\">");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(t.rp("<fileTag1",c,p," "));t.b("</span>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: { }},"<fileTag1":{name:"fileTag", partials: {}, subs: { }}}, subs: { }});
global.browserTemplates["generic-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("lineNumber",c,p,0)));t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,171,247,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,279,353,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b(" </div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["generic-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["icon-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-added\" height=\"16\" title=\"added\" version=\"1.1\" viewBox=\"0 0 14 16\"");t.b("\n" + i);t.b(" width=\"14\">");t.b("\n" + i);t.b(" <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["icon-file-changed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-changed\" height=\"16\" title=\"modified\" version=\"1.1\"");t.b("\n" + i);t.b(" viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b(" <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["icon-file-deleted"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-deleted\" height=\"16\" title=\"removed\" version=\"1.1\"");t.b("\n" + i);t.b(" viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b(" <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["icon-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-moved\" height=\"16\" title=\"renamed\" version=\"1.1\"");t.b("\n" + i);t.b(" viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b(" <path d=\"M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["icon-file"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon\" height=\"16\" version=\"1.1\" viewBox=\"0 0 12 16\" width=\"12\">");t.b("\n" + i);t.b(" <path d=\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-header\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("filePath",c,p,0)));t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b(" <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b(" <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b(" </tbody>");t.b("\n" + i);t.b(" </table>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["line-by-line-numbers"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"line-num1\">");t.b(t.v(t.f("oldNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("<div class=\"line-num2\">");t.b(t.v(t.f("newNumber",c,p,0)));t.b("</div>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["side-by-side-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-header\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("filePath",c,p,0)));t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <div class=\"d2h-files-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-side-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b(" <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b(" <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.d("diffs.left",c,p,0)));t.b("\n" + i);t.b(" </tbody>");t.b("\n" + i);t.b(" </table>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <div class=\"d2h-file-side-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b(" <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b(" <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.d("diffs.right",c,p,0)));t.b("\n" + i);t.b(" </tbody>");t.b("\n" + i);t.b(" </table>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["tag-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-added d2h-added-tag\">ADDED</span>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["tag-file-changed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-changed d2h-changed-tag\">CHANGED</span>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["tag-file-deleted"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-deleted d2h-deleted-tag\">DELETED</span>");return t.fl(); },partials: {}, subs: { }});
global.browserTemplates["tag-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-moved d2h-moved-tag\">RENAMED</span>");return t.fl(); },partials: {}, subs: { }});
module.exports = global.browserTemplates; module.exports = global.browserTemplates;
})(); })();

10
src/templates/file-summary-line.mustache Normal file
View file

@ -0,0 +1,10 @@
<li class="d2h-file-list-line">
<span class="d2h-file-name-wrapper">
<span>{{>fileIcon}}</span>
<a href="#{{fileHtmlId}}" class="d2h-file-name">{{fileName}}</a>
<span class="d2h-file-stats">
<span class="d2h-lines-added">{{addedLines}}</span>
<span class="d2h-lines-deleted">{{deletedLines}}</span>
</span>
</span>
</li>

10
src/templates/file-summary-wrapper.mustache Normal file
View file

@ -0,0 +1,10 @@
<div class="d2h-file-list-wrapper">
<div class="d2h-file-list-header">
<span class="d2h-file-list-title">Files changed ({{filesNumber}})</span>
<a class="d2h-file-switch d2h-hide">hide</a>
<a class="d2h-file-switch d2h-show">show</a>
</div>
<ol class="d2h-file-list">
{{{files}}}
</ol>
</div>

6
src/templates/generic-column-line-number.mustache Normal file
View file

@ -0,0 +1,6 @@
<tr>
<td class="{{lineClass}} {{diffParser.LINE_TYPE.INFO}}"></td>
<td class="{{diffParser.LINE_TYPE.INFO}}">
<div class="{{contentClass}} {{diffParser.LINE_TYPE.INFO}}">{{{blockHeader}}}</div>
</td>
</tr>

2
src/templates/line-by-line-empty-diff.mustache → src/templates/generic-empty-diff.mustache
View file

@ -1,6 +1,6 @@
<tr> <tr>
<td class="{{diffParser.LINE_TYPE.INFO}}"> <td class="{{diffParser.LINE_TYPE.INFO}}">
<div class="d2h-code-line {{diffParser.LINE_TYPE.INFO}}"> <div class="{{contentClass}} {{diffParser.LINE_TYPE.INFO}}">
File without changes File without changes
</div> </div>
</td> </td>

5
src/templates/generic-file-path.mustache Normal file
View file

@ -0,0 +1,5 @@
<span class="d2h-file-name-wrapper">
<span class="d2h-icon-wrapper">{{>fileIcon}}</span>
<span class="d2h-file-name">{{fileDiffName}}</span>
{{>fileTag}}
</span>

7
src/templates/line-by-line-line.mustache → src/templates/generic-line.mustache
View file

@ -1,10 +1,9 @@
<tr> <tr>
<td class="d2h-code-linenumber {{type}}"> <td class="{{lineClass}} {{type}}">
<div class="line-num1">{{oldNumber}}</div> {{{lineNumber}}}
<div class="line-num2">{{newNumber}}</div>
</td> </td>
<td class="{{type}}"> <td class="{{type}}">
<div class="d2h-code-line {{type}}"> <div class="{{contentClass}} {{type}}">
{{#prefix}} {{#prefix}}
<span class="d2h-code-line-prefix">{{{prefix}}}</span> <span class="d2h-code-line-prefix">{{{prefix}}}</span>
{{/prefix}} {{/prefix}}

0
src/templates/line-by-line-wrapper.mustache → src/templates/generic-wrapper.mustache
View file

4
src/templates/icon-file-added.mustache Normal file
View file

@ -0,0 +1,4 @@
<svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"
width="14">
<path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 292 B

4
src/templates/icon-file-changed.mustache Normal file
View file

@ -0,0 +1,4 @@
<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
viewBox="0 0 14 16" width="14">
<path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 324 B

4
src/templates/icon-file-deleted.mustache Normal file
View file

@ -0,0 +1,4 @@
<svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"
viewBox="0 0 14 16" width="14">
<path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 281 B

4
src/templates/icon-file-renamed.mustache Normal file
View file

@ -0,0 +1,4 @@
<svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"
viewBox="0 0 14 16" width="14">
<path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 289 B

3
src/templates/icon-file.mustache Normal file
View file

@ -0,0 +1,3 @@
<svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
<path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 294 B

6
src/templates/line-by-line-column-line-number.mustache
View file

@ -1,6 +0,0 @@
<tr>
<td class="d2h-code-linenumber {{diffParser.LINE_TYPE.INFO}}"></td>
<td class="{{diffParser.LINE_TYPE.INFO}}">
<div class="d2h-code-line {{diffParser.LINE_TYPE.INFO}}">{{{blockHeader}}}</div>
</td>
</tr>

12
src/templates/line-by-line-file-diff.mustache
View file

@ -1,16 +1,6 @@
<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}"> <div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
<div class="d2h-file-header"> <div class="d2h-file-header">
<span class="d2h-file-stats"> {{{filePath}}}
<span class="d2h-lines-added">
<span>+{{file.addedLines}}</span>
</span>
<span class="d2h-lines-deleted">
<span>-{{file.deletedLines}}</span>
</span>
</span>
<span class="d2h-file-name-wrapper">
<span class="d2h-file-name">&nbsp;{{fileDiffName}}</span>
</span>
</div> </div>
<div class="d2h-file-diff"> <div class="d2h-file-diff">
<div class="d2h-code-wrapper"> <div class="d2h-code-wrapper">

2
src/templates/line-by-line-numbers.mustache Normal file
View file

@ -0,0 +1,2 @@
<div class="line-num1">{{oldNumber}}</div>
<div class="line-num2">{{newNumber}}</div>

25
src/templates/side-by-side-file-diff.mustache Normal file
View file

@ -0,0 +1,25 @@
<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
<div class="d2h-file-header">
{{{filePath}}}
</div>
<div class="d2h-files-diff">
<div class="d2h-file-side-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
<tbody class="d2h-diff-tbody">
{{{diffs.left}}}
</tbody>
</table>
</div>
</div>
<div class="d2h-file-side-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
<tbody class="d2h-diff-tbody">
{{{diffs.right}}}
</tbody>
</table>
</div>
</div>
</div>
</div>

1
src/templates/tag-file-added.mustache Normal file
View file

@ -0,0 +1 @@
<span class="d2h-tag d2h-added d2h-added-tag">ADDED</span>

1
src/templates/tag-file-changed.mustache Normal file
View file

@ -0,0 +1 @@
<span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span>

1
src/templates/tag-file-deleted.mustache Normal file
View file

@ -0,0 +1 @@
<span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span>

1
src/templates/tag-file-renamed.mustache Normal file
View file

@ -0,0 +1 @@
<span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span>

97
src/ui/css/diff2html.css
View file

@ -16,39 +16,37 @@
} }
.d2h-file-stats { .d2h-file-stats {
display: inline; display: flex;
text-align: center; margin-left: auto;
font-size: 14px;
} }
.d2h-lines-added { .d2h-lines-added {
text-align: right; text-align: right;
}
.d2h-lines-added > * {
background-color: #ceffce;
border: 1px solid #b4e2b4; border: 1px solid #b4e2b4;
color: #399839;
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
color: #399839;
padding: 2px; padding: 2px;
vertical-align: middle;
} }
.d2h-lines-deleted { .d2h-lines-deleted {
text-align: left; text-align: left;
}
.d2h-lines-deleted > * {
background-color: #f7c8c8;
border: 1px solid #e9aeae; border: 1px solid #e9aeae;
color: #c33;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
color: #c33;
padding: 2px; padding: 2px;
vertical-align: middle;
margin-left: 1px;
} }
.d2h-file-name-wrapper { .d2h-file-name-wrapper {
display: inline-flex; display: flex;
width: 90%; align-items: center;
width: 100%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px; font-size: 15px;
line-height: 15px;
} }
.d2h-file-name { .d2h-file-name {
@ -102,16 +100,11 @@
.d2h-code-side-line { .d2h-code-side-line {
display: block; display: block;
white-space: pre; white-space: nowrap;
padding: 0 10px; padding: 0 10px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
margin-left: 50px; margin-left: 50px;
/* Override HighlightJS */
/*color: inherit;*/
/*overflow-x: inherit;*/
/*background: none;*/
/* ******************** */
} }
.d2h-code-line del, .d2h-code-line del,
@ -249,6 +242,7 @@
} }
.d2h-file-list-line { .d2h-file-list-line {
display: flex;
text-align: left; text-align: left;
} }
@ -258,6 +252,19 @@
.d2h-file-list { .d2h-file-list {
display: block; display: block;
list-style: none;
padding: 0;
margin: 0;
}
.d2h-file-list > li {
border-bottom: #ddd solid 1px;
padding: 5px 10px;
margin: 0;
}
.d2h-file-list > li:last-child {
border-bottom: none;
} }
.d2h-file-switch { .d2h-file-switch {
@ -266,6 +273,56 @@
cursor: pointer; cursor: pointer;
} }
.d2h-icon-wrapper {
line-height: 31px;
}
.d2h-icon {
vertical-align: middle;
margin-right: 10px;
fill: currentColor;
}
.d2h-deleted {
color: #c33;
}
.d2h-added {
color: #399839;
}
.d2h-changed {
color: #d0b44c;
}
.d2h-moved {
color: #3572b0;
}
.d2h-tag {
display: flex;
font-size: 10px;
margin-left: 5px;
padding: 0 2px;
background-color: #fff;
}
.d2h-deleted-tag {
border: #c33 1px solid;
}
.d2h-added-tag {
border: #399839 1px solid;
}
.d2h-changed-tag {
border: #d0b44c 1px solid;
}
.d2h-moved-tag {
border: #3572b0 1px solid;
}
/* /*
* Selection util. * Selection util.
*/ */

100
test/diff2html-tests.js
View file

@ -44,39 +44,38 @@ var jsonExample1 =
var filesExample1 = var filesExample1 =
'<div class="d2h-file-list-wrapper">\n' + '<div class="d2h-file-list-wrapper">\n' +
' <div class="d2h-file-list-header">\n' + ' <div class="d2h-file-list-header">\n' +
' <span class="d2h-file-list-title">Files changed (1)&nbsp&nbsp</span>\n' + ' <span class="d2h-file-list-title">Files changed (1)</span>\n' +
' <a class="d2h-file-switch d2h-hide">hide</a>\n' + ' <a class="d2h-file-switch d2h-hide">hide</a>\n' +
' <a class="d2h-file-switch d2h-show">show</a>\n' + ' <a class="d2h-file-switch d2h-show">show</a>\n' +
' </div>\n' + ' </div>\n' +
' <table class="d2h-file-list">\n' + ' <ol class="d2h-file-list">\n' +
' <tr class="d2h-file-list-line">\n' + ' <li class="d2h-file-list-line">\n' +
' <td class="d2h-lines-added">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span>+1</span>\n' + ' <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
' </td>\n' + ' viewBox="0 0 14 16" width="14">\n' +
' <td class="d2h-lines-deleted">\n' + ' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
' <span>-1</span>\n' + '</svg></span>\n' +
' </td>\n' + ' <a href="#d2h-675094" class="d2h-file-name">sample</a>\n' +
' <td class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-stats">\n' +
' <a href="#d2h-675094" class="d2h-file-name">&nbsp;sample </a>\n' + ' <span class="d2h-lines-added">+1</span>\n' +
' </td>\n' + ' <span class="d2h-lines-deleted">-1</span>\n' +
' </tr>\n' + ' </span>\n' +
'</table></div>\n'; ' </span>\n' +
'</li>\n' +
' </ol>\n' +
'</div>';
var htmlLineExample1 = var htmlLineExample1 =
'<div class="d2h-wrapper">\n' + '<div class="d2h-wrapper">\n' +
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' + ' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+1</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-1</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-file-name">&nbsp;sample</span>\n' + ' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' </span>\n' + ' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">sample</span>\n' +
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-file-diff">\n' + ' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' + ' <div class="d2h-code-wrapper">\n' +
@ -85,12 +84,12 @@ var htmlLineExample1 =
' <tr>\n' + ' <tr>\n' +
' <td class="d2h-code-linenumber d2h-info"></td>\n' + ' <td class="d2h-code-linenumber d2h-info"></td>\n' +
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-line d2h-info"></div>\n' + ' <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-del">\n' + ' <td class="d2h-code-linenumber d2h-del">\n' +
' <div class="line-num1">1</div>\n' + ' <div class="line-num1">1</div>\n' +
' <div class="line-num2"></div>\n' + '<div class="line-num2"></div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-del">\n' + ' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">\n' + ' <div class="d2h-code-line d2h-del">\n' +
@ -101,7 +100,7 @@ var htmlLineExample1 =
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">1</div>\n' + '<div class="line-num2">1</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -121,19 +120,14 @@ var htmlLineExample1WithFilesSummary = filesExample1 + htmlLineExample1;
var htmlSideExample1 = var htmlSideExample1 =
'<div class="d2h-wrapper">\n' + '<div class="d2h-wrapper">\n' +
'<div id="d2h-675094" class="d2h-file-wrapper" data-lang="undefined">\n' + ' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+1</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-1</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">sample</span>\n' + ' <span class="d2h-file-name">sample</span>\n' +
' </span>\n' + ' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-files-diff">\n' + ' <div class="d2h-files-diff">\n' +
' <div class="d2h-file-side-diff">\n' + ' <div class="d2h-file-side-diff">\n' +
@ -145,11 +139,17 @@ var htmlSideExample1 =
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' + ' <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del">\n' +
' 1\n' +
' </td>\n' +
' <td class="d2h-del">\n' +
' <div class="d2h-code-side-line d2h-del">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn"><del>test</del></span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>\n' + '</tr>\n' +
'<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del">1</td>\n' +
' <td class="d2h-del"> <div class="d2h-code-side-line d2h-del"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn"><del>test</del></span></div> </td>\n' +
' </tr>\n' +
' </tbody>\n' + ' </tbody>\n' +
' </table>\n' + ' </table>\n' +
' </div>\n' + ' </div>\n' +
@ -163,18 +163,24 @@ var htmlSideExample1 =
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info"></div>\n' + ' <div class="d2h-code-side-line d2h-info"></div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">\n' +
' 1\n' +
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-side-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"><ins>test1</ins></span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>\n' + '</tr>\n' +
'<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">1</td>\n' +
' <td class="d2h-ins"> <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn"><ins>test1</ins></span></div> </td>\n' +
' </tr>\n' +
' </tbody>\n' + ' </tbody>\n' +
' </table>\n' + ' </table>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + '</div>\n' +
'</div>\n'; '</div>';
var htmlSideExample1WithFilesSummary = filesExample1 + htmlSideExample1; var htmlSideExample1WithFilesSummary = filesExample1 + htmlSideExample1;

105
test/file-list-printer-tests.js Normal file
View file

@ -0,0 +1,105 @@
var assert = require('assert');
var fileListPrinter = require('../src/file-list-printer.js').FileListPrinter;
describe('FileListPrinter', function() {
describe('generateFileList', function() {
it('should work for all kinds of files', function() {
var files = [{
addedLines: 12,
deletedLines: 41,
language: 'js',
oldName: 'my/file/name.js',
newName: 'my/file/name.js'
}, {
addedLines: 12,
deletedLines: 41,
language: 'js',
oldName: 'my/file/name1.js',
newName: 'my/file/name2.js'
}, {
addedLines: 12,
deletedLines: 0,
language: 'js',
oldName: 'dev/null',
newName: 'my/file/name.js',
isNew: true
}, {
addedLines: 0,
deletedLines: 41,
language: 'js',
oldName: 'my/file/name.js',
newName: 'dev/null',
isDeleted: true
}];
var fileHtml = fileListPrinter.generateFileList(files);
var expected =
'<div class="d2h-file-list-wrapper">\n' +
' <div class="d2h-file-list-header">\n' +
' <span class="d2h-file-list-title">Files changed (4)</span>\n' +
' <a class="d2h-file-switch d2h-hide">hide</a>\n' +
' <a class="d2h-file-switch d2h-show">show</a>\n' +
' </div>\n' +
' <ol class="d2h-file-list">\n' +
' <li class="d2h-file-list-line">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
' viewBox="0 0 14 16" width="14">\n' +
' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
'</svg></span>\n' +
' <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">+12</span>\n' +
' <span class="d2h-lines-deleted">-41</span>\n' +
' </span>\n' +
' </span>\n' +
'</li>\n' +
'<li class="d2h-file-list-line">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span><svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"\n' +
' viewBox="0 0 14 16" width="14">\n' +
' <path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>\n' +
'</svg></span>\n' +
' <a href="#d2h-662683" class="d2h-file-name">my/file/{name1.js → name2.js}</a>\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">+12</span>\n' +
' <span class="d2h-lines-deleted">-41</span>\n' +
' </span>\n' +
' </span>\n' +
'</li>\n' +
'<li class="d2h-file-list-line">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span><svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"\n' +
' width="14">\n' +
' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>\n' +
'</svg></span>\n' +
' <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">+12</span>\n' +
' <span class="d2h-lines-deleted">-0</span>\n' +
' </span>\n' +
' </span>\n' +
'</li>\n' +
'<li class="d2h-file-list-line">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span><svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"\n' +
' viewBox="0 0 14 16" width="14">\n' +
' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>\n' +
'</svg></span>\n' +
' <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">+0</span>\n' +
' <span class="d2h-lines-deleted">-41</span>\n' +
' </span>\n' +
' </span>\n' +
'</li>\n' +
' </ol>\n' +
'</div>';
assert.equal(expected, fileHtml);
});
});
});

17
test/hogan-cache-tests.js
View file

@ -1,28 +1,35 @@
var assert = require('assert'); var assert = require('assert');
var HoganJsUtils = require('../src/hoganjs-utils.js').HoganJsUtils; var HoganJsUtils = require('../src/hoganjs-utils.js').HoganJsUtils;
var diffParser = require('../src/diff-parser.js').DiffParser;
describe('HoganJsUtils', function() { describe('HoganJsUtils', function() {
describe('render', function() { describe('render', function() {
var emptyDiffHtml = var emptyDiffHtml =
'<tr>\n' + '<tr>\n' +
' <td class="">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-line ">\n' + ' <div class="d2h-code-line d2h-info">\n' +
' File without changes\n' + ' File without changes\n' +
' </div>\n' + ' </div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>'; '</tr>';
it('should render view', function() { it('should render view', function() {
var result = HoganJsUtils.render('line-by-line', 'empty-diff', {}); var result = HoganJsUtils.render('generic', 'empty-diff', {
contentClass: 'd2h-code-line',
diffParser: diffParser
});
assert.equal(emptyDiffHtml, result); assert.equal(emptyDiffHtml, result);
}); });
it('should render view without cache', function() { it('should render view without cache', function() {
var result = HoganJsUtils.render('line-by-line', 'empty-diff', {}, {noCache: true}); var result = HoganJsUtils.render('generic', 'empty-diff', {
contentClass: 'd2h-code-line',
diffParser: diffParser
}, {noCache: true});
assert.equal(emptyDiffHtml + '\n', result); assert.equal(emptyDiffHtml + '\n', result);
}); });
it('should return null if template is missing', function() { it('should return null if template is missing', function() {
var result = HoganJsUtils.render('line-by-line', 'missing-template', {}, {noCache: true}); var result = HoganJsUtils.render('generic', 'missing-template', {}, {noCache: true});
assert.equal(null, result); assert.equal(null, result);
}); });
}); });

193
test/line-by-line-tests.js
View file

@ -32,7 +32,7 @@ describe('LineByLinePrinter', function() {
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">30</div>\n' + '<div class="line-num2">30</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -54,7 +54,7 @@ describe('LineByLinePrinter', function() {
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-del">\n' + ' <td class="d2h-code-linenumber d2h-del">\n' +
' <div class="line-num1">30</div>\n' + ' <div class="line-num1">30</div>\n' +
' <div class="line-num2"></div>\n' + '<div class="line-num2"></div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-del">\n' + ' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">\n' + ' <div class="d2h-code-line d2h-del">\n' +
@ -76,7 +76,7 @@ describe('LineByLinePrinter', function() {
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">30</div>\n' + '<div class="line-num2">30</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -98,7 +98,7 @@ describe('LineByLinePrinter', function() {
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">30</div>\n' + '<div class="line-num2">30</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -120,7 +120,8 @@ describe('LineByLinePrinter', function() {
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">30</div>\n' + '' +
'<div class="line-num2">30</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -149,19 +150,129 @@ describe('LineByLinePrinter', function() {
var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs); var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
var expected = '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' + var expected =
'<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+12</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-41</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-file-name">&nbsp;my/file/name.js</span>\n' + ' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' </span>\n' + ' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">my/file/name.js</span>\n' +
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' +
' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' +
' <table class="d2h-diff-table">\n' +
' <tbody class="d2h-diff-tbody">\n' +
' <span>Random Html</span>\n' +
' </tbody>\n' +
' </table>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
assert.equal(expected, fileHtml);
});
it('should work for simple added file', function() {
var lineByLinePrinter = new LineByLinePrinter({});
var file = {
addedLines: 12,
deletedLines: 0,
language: 'js',
oldName: 'dev/null',
newName: 'my/file/name.js',
isNew: true
};
var diffs = '<span>Random Html</span>';
var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
var expected =
'<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
' <div class="d2h-file-header">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">my/file/name.js</span>\n' +
' <span class="d2h-tag d2h-added d2h-added-tag">ADDED</span></span>\n' +
' </div>\n' +
' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' +
' <table class="d2h-diff-table">\n' +
' <tbody class="d2h-diff-tbody">\n' +
' <span>Random Html</span>\n' +
' </tbody>\n' +
' </table>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
assert.equal(expected, fileHtml);
});
it('should work for simple deleted file', function() {
var lineByLinePrinter = new LineByLinePrinter({});
var file = {
addedLines: 0,
deletedLines: 41,
language: 'js',
oldName: 'my/file/name.js',
newName: 'dev/null',
isDeleted: true
};
var diffs = '<span>Random Html</span>';
var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
var expected =
'<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
' <div class="d2h-file-header">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">my/file/name.js</span>\n' +
' <span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span></span>\n' +
' </div>\n' +
' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' +
' <table class="d2h-diff-table">\n' +
' <tbody class="d2h-diff-tbody">\n' +
' <span>Random Html</span>\n' +
' </tbody>\n' +
' </table>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
assert.equal(expected, fileHtml);
});
it('should work for simple renamed file', function() {
var lineByLinePrinter = new LineByLinePrinter({});
var file = {
addedLines: 12,
deletedLines: 41,
language: 'js',
oldName: 'my/file/name1.js',
newName: 'my/file/name2.js',
isRename: true
};
var diffs = '<span>Random Html</span>';
var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
var expected =
'<div id="d2h-662683" class="d2h-file-wrapper" data-lang="js">\n' +
' <div class="d2h-file-header">\n' +
' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">my/file/{name1.js → name2.js}</span>\n' +
' <span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-file-diff">\n' + ' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' + ' <div class="d2h-code-wrapper">\n' +
@ -229,17 +340,12 @@ describe('LineByLinePrinter', function() {
'<div class="d2h-wrapper">\n' + '<div class="d2h-wrapper">\n' +
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' + ' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+1</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-1</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-file-name">&nbsp;sample</span>\n' + ' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' </span>\n' + ' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">sample</span>\n' +
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-file-diff">\n' + ' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' + ' <div class="d2h-code-wrapper">\n' +
@ -248,12 +354,12 @@ describe('LineByLinePrinter', function() {
' <tr>\n' + ' <tr>\n' +
' <td class="d2h-code-linenumber d2h-info"></td>\n' + ' <td class="d2h-code-linenumber d2h-info"></td>\n' +
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-line d2h-info"></div>\n' + ' <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-del d2h-change">\n' + ' <td class="d2h-code-linenumber d2h-del d2h-change">\n' +
' <div class="line-num1">1</div>\n' + ' <div class="line-num1">1</div>\n' +
' <div class="line-num2"></div>\n' + '<div class="line-num2"></div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-del d2h-change">\n' + ' <td class="d2h-del d2h-change">\n' +
' <div class="d2h-code-line d2h-del d2h-change">\n' + ' <div class="d2h-code-line d2h-del d2h-change">\n' +
@ -264,7 +370,7 @@ describe('LineByLinePrinter', function() {
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-ins d2h-change">\n' + ' <td class="d2h-code-linenumber d2h-ins d2h-change">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">1</div>\n' + '<div class="line-num2">1</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins d2h-change">\n' + ' <td class="d2h-ins d2h-change">\n' +
' <div class="d2h-code-line d2h-ins d2h-change">\n' + ' <div class="d2h-code-line d2h-ins d2h-change">\n' +
@ -300,17 +406,12 @@ describe('LineByLinePrinter', function() {
'<div class="d2h-wrapper">\n' + '<div class="d2h-wrapper">\n' +
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' + ' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+0</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-0</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-file-name">&nbsp;sample</span>\n' + ' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' </span>\n' + ' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">sample</span>\n' +
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-file-diff">\n' + ' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' + ' <div class="d2h-code-wrapper">\n' +
@ -357,7 +458,7 @@ describe('LineByLinePrinter', function() {
'<tr>\n' + '<tr>\n' +
' <td class="d2h-code-linenumber d2h-del">\n' + ' <td class="d2h-code-linenumber d2h-del">\n' +
' <div class="line-num1">1</div>\n' + ' <div class="line-num1">1</div>\n' +
' <div class="line-num2"></div>\n' + '<div class="line-num2"></div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-del">\n' + ' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">\n' + ' <div class="d2h-code-line d2h-del">\n' +
@ -367,7 +468,7 @@ describe('LineByLinePrinter', function() {
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">1</div>\n' + '<div class="line-num2">1</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -430,12 +531,12 @@ describe('LineByLinePrinter', function() {
'<tr>\n' + '<tr>\n' +
' <td class="d2h-code-linenumber d2h-info"></td>\n' + ' <td class="d2h-code-linenumber d2h-info"></td>\n' +
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-line d2h-info"></div>\n' + ' <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-cntx">\n' + ' <td class="d2h-code-linenumber d2h-cntx">\n' +
' <div class="line-num1">1</div>\n' + ' <div class="line-num1">1</div>\n' +
' <div class="line-num2">1</div>\n' + '<div class="line-num2">1</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-cntx">\n' + ' <td class="d2h-cntx">\n' +
' <div class="d2h-code-line d2h-cntx">\n' + ' <div class="d2h-code-line d2h-cntx">\n' +
@ -445,7 +546,7 @@ describe('LineByLinePrinter', function() {
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-del">\n' + ' <td class="d2h-code-linenumber d2h-del">\n' +
' <div class="line-num1">2</div>\n' + ' <div class="line-num1">2</div>\n' +
' <div class="line-num2"></div>\n' + '<div class="line-num2"></div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-del">\n' + ' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">\n' + ' <div class="d2h-code-line d2h-del">\n' +
@ -456,7 +557,7 @@ describe('LineByLinePrinter', function() {
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">2</div>\n' + '<div class="line-num2">2</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +
@ -467,7 +568,7 @@ describe('LineByLinePrinter', function() {
'</tr><tr>\n' + '</tr><tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>\n' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">3</div>\n' + '<div class="line-num2">3</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">\n' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' + ' <div class="d2h-code-line d2h-ins">\n' +

226
test/side-by-side-printer-tests.js
View file

@ -10,10 +10,10 @@ describe('SideBySidePrinter', function() {
var fileHtml = sideBySidePrinter.generateEmptyDiff(); var fileHtml = sideBySidePrinter.generateEmptyDiff();
var expectedRight = ''; var expectedRight = '';
var expectedLeft = '<tr>\n' + var expectedLeft = '<tr>\n' +
' <td class="d2h-info">' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info">' + ' <div class="d2h-code-side-line d2h-info">\n' +
'File without changes' + ' File without changes\n' +
' </div>' + ' </div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>\n'; '</tr>\n';
@ -77,19 +77,36 @@ describe('SideBySidePrinter', function() {
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info">@@ -19,7 +19,7 @@</div>\n' + ' <div class="d2h-code-side-line d2h-info">@@ -19,7 +19,7 @@</div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>\n' + '</tr><tr>\n' +
'<tr>\n' + ' <td class="d2h-code-side-linenumber d2h-cntx">\n' +
' <td class="d2h-code-side-linenumber d2h-cntx">19</td>\n' + ' 19\n' +
' <td class="d2h-cntx"> <div class="d2h-code-side-line d2h-cntx"><span class="d2h-code-line-prefix"> </span><span class="d2h-code-line-ctn">context</span></div> </td>\n' + ' </td>\n' +
' </tr>\n' + ' <td class="d2h-cntx">\n' +
'<tr>\n' + ' <div class="d2h-code-side-line d2h-cntx">\n' +
' <td class="d2h-code-side-linenumber d2h-del">20</td>\n' + ' <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
' <td class="d2h-del"> <div class="d2h-code-side-line d2h-del"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn"><del>removed</del></span></div> </td>\n' + ' <span class="d2h-code-line-ctn">context</span>\n' +
' </tr>\n' + ' </div>\n' +
'<tr>\n' + ' </td>\n' +
' <td class="d2h-code-side-linenumber d2h-cntx"></td>\n' + '</tr><tr>\n' +
' <td class="d2h-cntx"> <div class="d2h-code-side-line d2h-cntx"></div> </td>\n' + ' <td class="d2h-code-side-linenumber d2h-del">\n' +
' </tr>\n'; ' 20\n' +
' </td>\n' +
' <td class="d2h-del">\n' +
' <div class="d2h-code-side-line d2h-del">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn"><del>removed</del></span>\n' +
' </div>\n' +
' </td>\n' +
'</tr><tr>\n' +
' <td class="d2h-code-side-linenumber d2h-cntx">\n' +
' ' +
'\n' +
' </td>\n' +
' <td class="d2h-cntx">\n' +
' <div class="d2h-code-side-line d2h-cntx">\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
var expectedRight = var expectedRight =
'<tr>\n' + '<tr>\n' +
@ -97,19 +114,37 @@ describe('SideBySidePrinter', function() {
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info"></div>\n' + ' <div class="d2h-code-side-line d2h-info"></div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>\n' + '</tr><tr>\n' +
'<tr>\n' + ' <td class="d2h-code-side-linenumber d2h-cntx">\n' +
' <td class="d2h-code-side-linenumber d2h-cntx">19</td>\n' + ' 19\n' +
' <td class="d2h-cntx"> <div class="d2h-code-side-line d2h-cntx"><span class="d2h-code-line-prefix"> </span><span class="d2h-code-line-ctn">context</span></div> </td>\n' + ' </td>\n' +
' </tr>\n' + ' <td class="d2h-cntx">\n' +
'<tr>\n' + ' <div class="d2h-code-side-line d2h-cntx">\n' +
' <td class="d2h-code-side-linenumber d2h-ins">20</td>\n' + ' <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
' <td class="d2h-ins"> <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn"><ins>added</ins></span></div> </td>\n' + ' <span class="d2h-code-line-ctn">context</span>\n' +
' </tr>\n' + ' </div>\n' +
'<tr>\n' + ' </td>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">21</td>\n' + '</tr><tr>\n' +
' <td class="d2h-ins"> <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn">another added</span></div> </td>\n' + ' <td class="d2h-code-side-linenumber d2h-ins">\n' +
' </tr>\n'; ' 20\n' +
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-side-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"><ins>added</ins></span>\n' +
' </div>\n' +
' </td>\n' +
'</tr><tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">\n' +
' 21\n' +
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-side-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn">another&nbsp;added</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
assert.equal(expectedLeft, fileHtml.left); assert.equal(expectedLeft, fileHtml.left);
assert.equal(expectedRight, fileHtml.right); assert.equal(expectedRight, fileHtml.right);
@ -124,11 +159,16 @@ describe('SideBySidePrinter', function() {
var fileHtml = sideBySidePrinter.generateSingleLineHtml( var fileHtml = sideBySidePrinter.generateSingleLineHtml(
diffParser.LINE_TYPE.INSERTS, 30, 'test', '+'); diffParser.LINE_TYPE.INSERTS, 30, 'test', '+');
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">30</td>\n' + ' <td class="d2h-code-side-linenumber d2h-ins">\n' +
' <td class="d2h-ins">' + ' 30\n' +
' <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn">test</span></div>' +
' </td>\n' + ' </td>\n' +
' </tr>\n'; ' <td class="d2h-ins">\n' +
' <div class="d2h-code-side-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
assert.equal(expected, fileHtml); assert.equal(expected, fileHtml);
}); });
@ -139,11 +179,16 @@ describe('SideBySidePrinter', function() {
var fileHtml = sideBySidePrinter.generateSingleLineHtml( var fileHtml = sideBySidePrinter.generateSingleLineHtml(
diffParser.LINE_TYPE.DELETES, 30, 'test', '-'); diffParser.LINE_TYPE.DELETES, 30, 'test', '-');
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del">30</td>\n' + ' <td class="d2h-code-side-linenumber d2h-del">\n' +
' <td class="d2h-del">' + ' 30\n' +
' <div class="d2h-code-side-line d2h-del"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn">test</span></div>' +
' </td>\n' + ' </td>\n' +
' </tr>\n'; ' <td class="d2h-del">\n' +
' <div class="d2h-code-side-line d2h-del">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
assert.equal(expected, fileHtml); assert.equal(expected, fileHtml);
}); });
@ -184,19 +229,14 @@ describe('SideBySidePrinter', function() {
var html = sideBySidePrinter.generateSideBySideJsonHtml(exampleJson); var html = sideBySidePrinter.generateSideBySideJsonHtml(exampleJson);
var expected = var expected =
'<div class="d2h-wrapper">\n' + '<div class="d2h-wrapper">\n' +
'<div id="d2h-675094" class="d2h-file-wrapper" data-lang="undefined">\n' + ' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+1</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-1</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">sample</span>\n' + ' <span class="d2h-file-name">sample</span>\n' +
' </span>\n' + ' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-files-diff">\n' + ' <div class="d2h-files-diff">\n' +
' <div class="d2h-file-side-diff">\n' + ' <div class="d2h-file-side-diff">\n' +
@ -208,11 +248,17 @@ describe('SideBySidePrinter', function() {
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' + ' <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del d2h-change">\n' +
' 1\n' +
' </td>\n' +
' <td class="d2h-del d2h-change">\n' +
' <div class="d2h-code-side-line d2h-del d2h-change">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn"><del>test</del></span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>\n' + '</tr>\n' +
'<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del d2h-change">1</td>\n' +
' <td class="d2h-del d2h-change"> <div class="d2h-code-side-line d2h-del d2h-change"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn"><del>test</del></span></div> </td>\n' +
' </tr>\n' +
' </tbody>\n' + ' </tbody>\n' +
' </table>\n' + ' </table>\n' +
' </div>\n' + ' </div>\n' +
@ -226,18 +272,24 @@ describe('SideBySidePrinter', function() {
' <td class="d2h-info">\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info"></div>\n' + ' <div class="d2h-code-side-line d2h-info"></div>\n' +
' </td>\n' + ' </td>\n' +
'</tr><tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins d2h-change">\n' +
' 1\n' +
' </td>\n' +
' <td class="d2h-ins d2h-change">\n' +
' <div class="d2h-code-side-line d2h-ins d2h-change">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"><ins>test1r</ins></span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>\n' + '</tr>\n' +
'<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins d2h-change">1</td>\n' +
' <td class="d2h-ins d2h-change"> <div class="d2h-code-side-line d2h-ins d2h-change"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn"><ins>test1r</ins></span></div> </td>\n' +
' </tr>\n' +
' </tbody>\n' + ' </tbody>\n' +
' </table>\n' + ' </table>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + '</div>\n' +
'</div>\n'; '</div>';
assert.equal(expected, html); assert.equal(expected, html);
}); });
@ -254,19 +306,14 @@ describe('SideBySidePrinter', function() {
var html = sideBySidePrinter.generateSideBySideJsonHtml(exampleJson); var html = sideBySidePrinter.generateSideBySideJsonHtml(exampleJson);
var expected = var expected =
'<div class="d2h-wrapper">\n' + '<div class="d2h-wrapper">\n' +
'<div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' + ' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
' <div class="d2h-file-header">\n' + ' <div class="d2h-file-header">\n' +
' <span class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">\n' +
' <span>+undefined</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">\n' +
' <span>-undefined</span>\n' +
' </span>\n' +
' </span>\n' +
' <span class="d2h-file-name-wrapper">\n' + ' <span class="d2h-file-name-wrapper">\n' +
' <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
'</svg></span>\n' +
' <span class="d2h-file-name">sample</span>\n' + ' <span class="d2h-file-name">sample</span>\n' +
' </span>\n' + ' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
' </div>\n' + ' </div>\n' +
' <div class="d2h-files-diff">\n' + ' <div class="d2h-files-diff">\n' +
' <div class="d2h-file-side-diff">\n' + ' <div class="d2h-file-side-diff">\n' +
@ -274,8 +321,13 @@ describe('SideBySidePrinter', function() {
' <table class="d2h-diff-table">\n' + ' <table class="d2h-diff-table">\n' +
' <tbody class="d2h-diff-tbody">\n' + ' <tbody class="d2h-diff-tbody">\n' +
' <tr>\n' + ' <tr>\n' +
' <td class="d2h-info"> <div class="d2h-code-side-line d2h-info">File without changes </div> </td>\n' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-side-line d2h-info">\n' +
' File without changes\n' +
' </div>\n' +
' </td>\n' +
'</tr>\n' + '</tr>\n' +
'\n' +
' </tbody>\n' + ' </tbody>\n' +
' </table>\n' + ' </table>\n' +
' </div>\n' + ' </div>\n' +
@ -284,13 +336,14 @@ describe('SideBySidePrinter', function() {
' <div class="d2h-code-wrapper">\n' + ' <div class="d2h-code-wrapper">\n' +
' <table class="d2h-diff-table">\n' + ' <table class="d2h-diff-table">\n' +
' <tbody class="d2h-diff-tbody">\n' + ' <tbody class="d2h-diff-tbody">\n' +
' \n' +
' </tbody>\n' + ' </tbody>\n' +
' </table>\n' + ' </table>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + ' </div>\n' +
' </div>\n' + '</div>\n' +
'</div>\n'; '</div>';
assert.equal(expected, html); assert.equal(expected, html);
}); });
@ -316,24 +369,29 @@ describe('SideBySidePrinter', function() {
var html = sideBySidePrinter.processLines(oldLines, newLines); var html = sideBySidePrinter.processLines(oldLines, newLines);
var expectedLeft = var expectedLeft =
'<tr>\n' + '<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del">1</td>\n' + ' <td class="d2h-code-side-linenumber d2h-del">\n' +
' <td class="d2h-del">' + ' 1\n' +
' <div class="d2h-code-side-line d2h-del">' +
'<span class="d2h-code-line-prefix">-</span>' +
'<span class="d2h-code-line-ctn">test</span></div>' +
' </td>\n' + ' </td>\n' +
' </tr>\n'; ' <td class="d2h-del">\n' +
' <div class="d2h-code-side-line d2h-del">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
var expectedRight = var expectedRight =
'<tr>\n' + '<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">1</td>\n' + ' <td class="d2h-code-side-linenumber d2h-ins">\n' +
' <td class="d2h-ins">' + ' 1\n' +
' <div class="d2h-code-side-line d2h-ins">' +
'<span class="d2h-code-line-prefix">+</span>' +
'<span class="d2h-code-line-ctn">test1r</span>' +
'</div>' +
' </td>\n' + ' </td>\n' +
' </tr>\n'; ' <td class="d2h-ins">\n' +
' <div class="d2h-code-side-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn">test1r</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
assert.equal(expectedLeft, html.left); assert.equal(expectedLeft, html.left);
assert.equal(expectedRight, html.right); assert.equal(expectedRight, html.right);