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

Fix convert &nbps; to proper white spaces with white-space wrap

Browse source
This commit is contained in:
Rodrigo Fernandes 2016-09-05 22:13:51 +01:00
parent 5303b2ff24
commit 6a47f8f3a5
No known key found for this signature in database
GPG key ID: 08E3C5F38969078E
8 changed files with 114 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -120,15 +120,15 @@
var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
processedOldLines +=
that.makeLineHtml(deleteType, oldLine.oldNumber, oldLine.newNumber,
that.makeLineHtml(file.isCombined, deleteType, oldLine.oldNumber, oldLine.newNumber,
diff.first.line, diff.first.prefix);
processedNewLines +=
that.makeLineHtml(insertType, newLine.oldNumber, newLine.newNumber,
that.makeLineHtml(file.isCombined, insertType, newLine.oldNumber, newLine.newNumber,
diff.second.line, diff.second.prefix);
}
lines += processedOldLines + processedNewLines;
lines += that._processLines(oldLines.slice(common), newLines.slice(common));
lines += that._processLines(file.isCombined, oldLines.slice(common), newLines.slice(common));
});
oldLines = [];
@ -145,9 +145,9 @@
}
if (line.type === diffParser.LINE_TYPE.CONTEXT) {
lines += that.makeLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
lines += that.makeLineHtml(file.isCombined, line.type, line.oldNumber, line.newNumber, escapedLine);
} else if (line.type === diffParser.LINE_TYPE.INSERTS && !oldLines.length) {
lines += that.makeLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
lines += that.makeLineHtml(file.isCombined, line.type, line.oldNumber, line.newNumber, escapedLine);
} else if (line.type === diffParser.LINE_TYPE.DELETES) {
oldLines.push(line);
} else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
@ -164,37 +164,46 @@
}).join('\n');
};
LineByLinePrinter.prototype._processLines = function(oldLines, newLines) {
LineByLinePrinter.prototype._processLines = function(isCombined, oldLines, newLines) {
var lines = '';
for (var i = 0; i < oldLines.length; i++) {
var oldLine = oldLines[i];
var oldEscapedLine = utils.escape(oldLine.content);
lines += this.makeLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine);
lines += this.makeLineHtml(isCombined, oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine);
}
for (var j = 0; j < newLines.length; j++) {
var newLine = newLines[j];
var newEscapedLine = utils.escape(newLine.content);
lines += this.makeLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine);
lines += this.makeLineHtml(isCombined, newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine);
}
return lines;
};
LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) {
LineByLinePrinter.prototype.makeLineHtml = function(isCombined, type, oldNumber, newNumber, content, possiblePrefix) {
var lineNumberTemplate = hoganUtils.render(baseTemplatesPath, 'numbers', {
oldNumber: utils.valueOrEmpty(oldNumber),
newNumber: utils.valueOrEmpty(newNumber)
});
var lineWithoutPrefix = content;
var prefix = possiblePrefix;
if (!prefix) {
var lineWithPrefix = printerUtils.separatePrefix(isCombined, content);
prefix = lineWithPrefix.prefix;
lineWithoutPrefix = lineWithPrefix.line;
}
return hoganUtils.render(genericTemplatesPath, 'line',
{
type: type,
lineClass: 'd2h-code-linenumber',
contentClass: 'd2h-code-line',
prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
content: content && utils.convertWhiteSpaceToNonBreakingSpace(content),
prefix: prefix,
content: lineWithoutPrefix,
lineNumber: lineNumberTemplate
});
};

18
src/printer-utils.js
View file

@ -15,6 +15,24 @@
function PrinterUtils() {
}
PrinterUtils.prototype.separatePrefix = function(isCombined, line) {
var prefix;
var lineWithoutPrefix;
if (isCombined) {
prefix = line.substring(0, 2);
lineWithoutPrefix = line.substring(2);
} else {
prefix = line.substring(0, 1);
lineWithoutPrefix = line.substring(1);
}
return {
'prefix': prefix,
'line': lineWithoutPrefix
};
};
PrinterUtils.prototype.getHtmlId = function(file) {
var hashCode = function(text) {
var i, chr, len;

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

@ -122,10 +122,10 @@
var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
fileHtml.left +=
that.generateSingleLineHtml(deleteType, oldLine.oldNumber,
that.generateSingleLineHtml(file.isCombined, deleteType, oldLine.oldNumber,
diff.first.line, diff.first.prefix);
fileHtml.right +=
that.generateSingleLineHtml(insertType, newLine.newNumber,
that.generateSingleLineHtml(file.isCombined, insertType, newLine.newNumber,
diff.second.line, diff.second.prefix);
}
@ -133,7 +133,7 @@
var oldSlice = oldLines.slice(common);
var newSlice = newLines.slice(common);
var tmpHtml = that.processLines(oldSlice, newSlice);
var tmpHtml = that.processLines(file.isCombined, oldSlice, newSlice);
fileHtml.left += tmpHtml.left;
fileHtml.right += tmpHtml.right;
}
@ -154,11 +154,11 @@
}
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);
fileHtml.left += that.generateSingleLineHtml(file.isCombined, line.type, line.oldNumber, escapedLine, prefix);
fileHtml.right += that.generateSingleLineHtml(file.isCombined, 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);
fileHtml.left += that.generateSingleLineHtml(file.isCombined, diffParser.LINE_TYPE.CONTEXT, '', '', '');
fileHtml.right += that.generateSingleLineHtml(file.isCombined, 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)) {
@ -175,7 +175,7 @@
return fileHtml;
};
SideBySidePrinter.prototype.processLines = function(oldLines, newLines) {
SideBySidePrinter.prototype.processLines = function(isCombined, oldLines, newLines) {
var that = this;
var fileHtml = {};
fileHtml.left = '';
@ -201,14 +201,14 @@
}
if (oldLine && newLine) {
fileHtml.left += that.generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
fileHtml.right += that.generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
fileHtml.left += that.generateSingleLineHtml(isCombined, oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
fileHtml.right += that.generateSingleLineHtml(isCombined, 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, '', '', '');
fileHtml.left += that.generateSingleLineHtml(isCombined, oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
fileHtml.right += that.generateSingleLineHtml(isCombined, 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);
fileHtml.left += that.generateSingleLineHtml(isCombined, diffParser.LINE_TYPE.CONTEXT, '', '', '');
fileHtml.right += that.generateSingleLineHtml(isCombined, newLine.type, newLine.newNumber, newContent, newPrefix);
} else {
console.error('How did it get here?');
}
@ -217,14 +217,23 @@
return fileHtml;
};
SideBySidePrinter.prototype.generateSingleLineHtml = function(type, number, content, prefix) {
SideBySidePrinter.prototype.generateSingleLineHtml = function(isCombined, type, number, content, possiblePrefix) {
var lineWithoutPrefix = content;
var prefix = possiblePrefix;
if (!prefix) {
var lineWithPrefix = printerUtils.separatePrefix(isCombined, content);
prefix = lineWithPrefix.prefix;
lineWithoutPrefix = lineWithPrefix.line;
}
return hoganUtils.render(genericTemplatesPath, 'line',
{
type: type,
lineClass: 'd2h-code-side-linenumber',
contentClass: 'd2h-code-side-line',
prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
content: content && utils.convertWhiteSpaceToNonBreakingSpace(content),
prefix: prefix,
content: lineWithoutPrefix,
lineNumber: number
});
};

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

@ -98,18 +98,20 @@
}
.d2h-code-line {
display: block;
display: inline-block;
white-space: nowrap;
padding: 0 10px;
margin-left: 80px;
height: 20px;
line-height: 20px;
}
.d2h-code-side-line {
display: block;
display: inline-block;
white-space: nowrap;
padding: 0 10px;
height: 18px;
line-height: 18px;
height: 20px;
line-height: 20px;
margin-left: 50px;
}
@ -129,17 +131,23 @@
text-decoration: none;
background-color: #97f295;
border-radius: 0.2em;
text-align: left;
}
.d2h-code-line-prefix {
float: left;
display: inline;
background: none;
padding: 0;
word-wrap: normal;
white-space: pre;
}
.d2h-code-line-ctn {
display: inline;
background: none;
padding: 0;
word-wrap: normal;
white-space: pre;
}
.line-num1 {

4
src/utils.js
View file

@ -9,10 +9,6 @@
function Utils() {
}
Utils.prototype.convertWhiteSpaceToNonBreakingSpace = function(str) {
return str.slice(0).replace(/ /g, '&nbsp;');
};
Utils.prototype.escape = function(str) {
return str.slice(0)
.replace(/&/g, '&amp;')

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

@ -26,8 +26,8 @@ describe('LineByLinePrinter', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.INSERTS, '', 30, '+', 'test');
var fileHtml = lineByLinePrinter.makeLineHtml(false,
diffParser.LINE_TYPE.INSERTS, '', 30, 'test', '+');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' +
@ -36,8 +36,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">test</span>\n' +
' <span class="d2h-code-line-ctn">+</span>\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -48,8 +48,8 @@ describe('LineByLinePrinter', function() {
it('should work for deletions', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.DELETES, 30, '', '-', 'test');
var fileHtml = lineByLinePrinter.makeLineHtml(false,
diffParser.LINE_TYPE.DELETES, 30, '', 'test', '-');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-del">\n' +
@ -58,8 +58,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">\n' +
' <span class="d2h-code-line-prefix">test</span>\n' +
' <span class="d2h-code-line-ctn">-</span>\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -70,8 +70,8 @@ describe('LineByLinePrinter', function() {
it('should convert indents into non breakin spaces (2 white spaces)', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.INSERTS, '', 30, '+', ' test');
var fileHtml = lineByLinePrinter.makeLineHtml(false,
diffParser.LINE_TYPE.INSERTS, '', 30, ' test', '+');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' +
@ -80,8 +80,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">&nbsp;&nbsp;test</span>\n' +
' <span class="d2h-code-line-ctn">+</span>\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"> test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -92,8 +92,8 @@ describe('LineByLinePrinter', function() {
it('should convert indents into non breakin spaces (4 white spaces)', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.INSERTS, '', 30, '+', ' test');
var fileHtml = lineByLinePrinter.makeLineHtml(false,
diffParser.LINE_TYPE.INSERTS, '', 30, ' test', '+');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' +
@ -102,8 +102,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">&nbsp;&nbsp;&nbsp;&nbsp;test</span>\n' +
' <span class="d2h-code-line-ctn">+</span>\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"> test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -114,8 +114,8 @@ describe('LineByLinePrinter', function() {
it('should convert indents into non breakin spaces (one tab)', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.INSERTS, '', 30, '+', Utils.escape('\ttest'));
var fileHtml = lineByLinePrinter.makeLineHtml(false,
diffParser.LINE_TYPE.INSERTS, '', 30, Utils.escape('\ttest'), '+');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">\n' +
@ -125,8 +125,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' +
' <span class="d2h-code-line-prefix">&nbsp;&nbsp;&nbsp;&nbsp;test</span>\n' +
' <span class="d2h-code-line-ctn">+</span>\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"> test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -452,7 +452,7 @@ describe('LineByLinePrinter', function() {
newNumber: 1
}];
var html = lineByLinePrinter._processLines(oldLines, newLines);
var html = lineByLinePrinter._processLines(false, oldLines, newLines);
var expected =
'<tr>\n' +
@ -462,7 +462,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">\n' +
' <span class="d2h-code-line-ctn">-test</span>\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr><tr>\n' +
@ -472,7 +473,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' +
' <span class="d2h-code-line-ctn">+test1r</span>\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn">test1r</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -540,7 +542,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-cntx">\n' +
' <div class="d2h-code-line d2h-cntx">\n' +
' <span class="d2h-code-line-ctn">&nbsp;one&nbsp;context&nbsp;line</span>\n' +
' <span class="d2h-code-line-prefix"> </span>\n' +
' <span class="d2h-code-line-ctn">one context line</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr><tr>\n' +
@ -572,7 +575,8 @@ describe('LineByLinePrinter', function() {
' </td>\n' +
' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">\n' +
' <span class="d2h-code-line-ctn">+test2r</span>\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn">test2r</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';

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

@ -83,7 +83,7 @@ describe('SideBySidePrinter', function() {
' </td>\n' +
' <td class="d2h-cntx">\n' +
' <div class="d2h-code-side-line d2h-cntx">\n' +
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
' <span class="d2h-code-line-prefix"> </span>\n' +
' <span class="d2h-code-line-ctn">context</span>\n' +
' </div>\n' +
' </td>\n' +
@ -120,7 +120,7 @@ describe('SideBySidePrinter', function() {
' </td>\n' +
' <td class="d2h-cntx">\n' +
' <div class="d2h-code-side-line d2h-cntx">\n' +
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
' <span class="d2h-code-line-prefix"> </span>\n' +
' <span class="d2h-code-line-ctn">context</span>\n' +
' </div>\n' +
' </td>\n' +
@ -141,7 +141,7 @@ describe('SideBySidePrinter', function() {
' <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' +
' <span class="d2h-code-line-ctn">another added</span>\n' +
' </div>\n' +
' </td>\n' +
'</tr>';
@ -156,7 +156,7 @@ describe('SideBySidePrinter', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var sideBySidePrinter = new SideBySidePrinter({});
var fileHtml = sideBySidePrinter.generateSingleLineHtml(
var fileHtml = sideBySidePrinter.generateSingleLineHtml(false,
diffParser.LINE_TYPE.INSERTS, 30, 'test', '+');
var expected = '<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-ins">\n' +
@ -176,7 +176,7 @@ describe('SideBySidePrinter', function() {
var diffParser = require('../src/diff-parser.js').DiffParser;
var sideBySidePrinter = new SideBySidePrinter({});
var fileHtml = sideBySidePrinter.generateSingleLineHtml(
var fileHtml = sideBySidePrinter.generateSingleLineHtml(false,
diffParser.LINE_TYPE.DELETES, 30, 'test', '-');
var expected = '<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del">\n' +
@ -366,7 +366,7 @@ describe('SideBySidePrinter', function() {
}];
var sideBySidePrinter = new SideBySidePrinter({matching: 'lines'});
var html = sideBySidePrinter.processLines(oldLines, newLines);
var html = sideBySidePrinter.processLines(false, oldLines, newLines);
var expectedLeft =
'<tr>\n' +
' <td class="d2h-code-side-linenumber d2h-del">\n' +

14
test/utils-tests.js
View file

@ -22,18 +22,4 @@ describe('Utils', function() {
assert.equal(expected, result);
});
});
describe('convertWhiteSpaceToNonBreakingSpace', function() {
it('should escape 1 whitespaces with &nbsp;', function() {
var result = Utils.convertWhiteSpaceToNonBreakingSpace(' ');
assert.equal('&nbsp;', result);
});
it('should escape 2 whitespaces with &nbsp;', function() {
var result = Utils.convertWhiteSpaceToNonBreakingSpace(' ');
assert.equal('&nbsp;&nbsp;', result);
});
it('should escape 4 whitespaces with &nbsp;', function() {
var result = Utils.convertWhiteSpaceToNonBreakingSpace(' ');
assert.equal('&nbsp;&nbsp;&nbsp;&nbsp;', result);
});
});
});