improve block selection to diffs & fix white spaces on the highlighted parts
This commit is contained in:
Rodrigo Fernandes
parent
f4dc516c25
commit
73c44bf6f3
6 changed files with 138 additions and 65 deletions
|
|
@ -110,7 +110,6 @@
|
|||
margin-top: -1px;
|
||||
text-decoration: none;
|
||||
background-color: #ffb6ba;
|
||||
font-weight: 700;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +119,6 @@
|
|||
margin-top: -1px;
|
||||
text-decoration: none;
|
||||
background-color: #97f295;
|
||||
font-weight: 700;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
67
diff2html.js
67
diff2html.js
|
|
@ -218,24 +218,29 @@
|
|||
"</tr>\n";
|
||||
|
||||
for (var i = 0; i < block.lines.length; i++) {
|
||||
var prevLine = block.lines[i - 1];
|
||||
var line = block.lines[i];
|
||||
var newLine = block.lines[i + 1];
|
||||
var nextNewLine = block.lines[i + 2];
|
||||
|
||||
if (line.type == LINE_TYPE.DELETES &&
|
||||
newLine && newLine.type == LINE_TYPE.INSERTS) {
|
||||
i++;
|
||||
var isOppositeTypeTwoLineBlock =
|
||||
line.type == LINE_TYPE.DELETES &&
|
||||
newLine && newLine.type == LINE_TYPE.INSERTS &&
|
||||
(!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) &&
|
||||
(!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES);
|
||||
|
||||
if (isOppositeTypeTwoLineBlock) {
|
||||
var escapedLine = escape(line.content);
|
||||
var nextEscapedLine = escape(newLine.content);
|
||||
|
||||
var diff = diffString(escapedLine, nextEscapedLine);
|
||||
var diff = diffHighlight(escapedLine, nextEscapedLine);
|
||||
|
||||
lines = lines +
|
||||
generateLineHtml(line.type, line.oldNumber, line.newNumber, removeIns(diff)) +
|
||||
generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, removeDel(diff));
|
||||
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, diff.o) +
|
||||
generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);
|
||||
|
||||
i++;
|
||||
} else {
|
||||
lines = lines +
|
||||
generateLineHtml(line.type, line.oldNumber, line.newNumber, line.content);
|
||||
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, line.content);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -319,24 +324,25 @@
|
|||
"</tr>\n";
|
||||
|
||||
for (var i = 0; i < block.lines.length; i++) {
|
||||
|
||||
fileHtml.left += "<tr>\n";
|
||||
fileHtml.right += "<tr>\n";
|
||||
|
||||
var prevLine = block.lines[i - 1];
|
||||
var line = block.lines[i];
|
||||
var newLine = block.lines[i + 1];
|
||||
var nextNewLine = block.lines[i + 2];
|
||||
|
||||
if (line.type == LINE_TYPE.DELETES &&
|
||||
newLine && newLine.type == LINE_TYPE.INSERTS) {
|
||||
i++;
|
||||
var isOpositeTypeTwoLineBlock = line.type == LINE_TYPE.DELETES && newLine && newLine.type == LINE_TYPE.INSERTS &&
|
||||
(!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) &&
|
||||
(!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES);
|
||||
|
||||
if (isOpositeTypeTwoLineBlock) {
|
||||
var escapedLine = escape(line.content);
|
||||
var nextEscapedLine = escape(newLine.content);
|
||||
|
||||
var diff = diffString(escapedLine, nextEscapedLine);
|
||||
var diff = diffHighlight(escapedLine, nextEscapedLine);
|
||||
|
||||
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, removeIns(diff));
|
||||
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, removeDel(diff));
|
||||
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, diff.o);
|
||||
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);
|
||||
|
||||
i++;
|
||||
} else if (line.type == LINE_TYPE.DELETES) {
|
||||
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, line.content);
|
||||
fileHtml.right += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", "");
|
||||
|
|
@ -347,9 +353,6 @@
|
|||
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, line.content);
|
||||
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, line.content);
|
||||
}
|
||||
|
||||
fileHtml.left += "</tr>\n";
|
||||
fileHtml.right += "</tr>\n";
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -358,10 +361,12 @@
|
|||
};
|
||||
|
||||
var generateSingleLineHtml = function (type, number, content) {
|
||||
return "<td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
|
||||
return"<tr>\n" +
|
||||
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
|
||||
" <td class=\"" + type + "\">" +
|
||||
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
|
||||
" </td>\n";
|
||||
" </td>\n" +
|
||||
" </tr>\n";
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -373,11 +378,11 @@
|
|||
};
|
||||
|
||||
var removeIns = function (line) {
|
||||
return line.replace(/(<ins>(.*?)<\/ins>)/g, "");
|
||||
return line.replace(/(<ins>((.|\n)*?)<\/ins>)/g, "");
|
||||
};
|
||||
|
||||
var removeDel = function (line) {
|
||||
return line.replace(/(<del>(.*?)<\/del>)/g, "");
|
||||
return line.replace(/(<del>((.|\n)*?)<\/del>)/g, "");
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -400,6 +405,16 @@
|
|||
return value ? value : "";
|
||||
}
|
||||
|
||||
function diffHighlight(diffLine1, diffLine2) {
|
||||
/* remove the initial -/+ to avoid always having diff in the first char */
|
||||
var highlightedLine = diffString(diffLine1.substr(1), diffLine2.substr(1));
|
||||
|
||||
return {
|
||||
o: diffLine1.charAt(0) + removeIns(highlightedLine),
|
||||
n: diffLine2.charAt(0) + removeDel(highlightedLine)
|
||||
}
|
||||
}
|
||||
|
||||
/* singleton pattern */
|
||||
var instance;
|
||||
return {
|
||||
|
|
|
|||
2
diff2html.min.css
vendored
2
diff2html.min.css
vendored
|
|
@ -1 +1 @@
|
|||
.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-side-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;font-weight:700;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}
|
||||
.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-side-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,0.3);border-color:#d5e4f2}
|
||||
2
diff2html.min.js
vendored
2
diff2html.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -176,10 +176,8 @@
|
|||
|
||||
document.onreadystatechange = function () {
|
||||
var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
|
||||
var lineByLineDiffHtml = Diff2Html.getPrettyHtmlFromJson(diffJson);
|
||||
document.getElementById('line-by-line').innerHTML = lineByLineDiffHtml;
|
||||
var sideBySideDiffHtml = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
|
||||
document.getElementById('side-by-side').innerHTML = sideBySideDiffHtml;
|
||||
document.getElementById('line-by-line').innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
|
||||
document.getElementById('side-by-side').innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
120
jsdiff.js
120
jsdiff.js
|
|
@ -2,7 +2,6 @@
|
|||
* Javascript Diff Algorithm
|
||||
* By John Resig (http://ejohn.org/)
|
||||
* Modified by Chu Alan "sprite"
|
||||
* Modified by Rodrigo Fernandes (rtfpessoa)
|
||||
*
|
||||
* Released under the MIT license.
|
||||
*
|
||||
|
|
@ -20,34 +19,47 @@ function escape(s) {
|
|||
return n;
|
||||
}
|
||||
|
||||
function diffString(o, n) {
|
||||
function diffString( o, n ) {
|
||||
o = o.replace(/\s+$/, '');
|
||||
n = n.replace(/\s+$/, '');
|
||||
|
||||
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/));
|
||||
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
|
||||
var str = "";
|
||||
|
||||
var oSpace = o.match(/\s+/g);
|
||||
if (oSpace == null) {
|
||||
oSpace = ["\n"];
|
||||
} else {
|
||||
oSpace.push("\n");
|
||||
}
|
||||
var nSpace = n.match(/\s+/g);
|
||||
if (nSpace == null) {
|
||||
nSpace = ["\n"];
|
||||
} else {
|
||||
nSpace.push("\n");
|
||||
}
|
||||
|
||||
if (out.n.length == 0) {
|
||||
for (var i = 0; i < out.o.length; i++) {
|
||||
str += '<del>' + escape(out.o[i]) + "</del>";
|
||||
str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
|
||||
}
|
||||
} else {
|
||||
if (out.n[0].text == null) {
|
||||
for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
|
||||
str += '<del>' + escape(out.o[n]) + "</del>";
|
||||
str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < out.n.length; i++) {
|
||||
for ( var i = 0; i < out.n.length; i++ ) {
|
||||
if (out.n[i].text == null) {
|
||||
str += '<ins>' + escape(out.n[i]) + "</ins>";
|
||||
str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
|
||||
} else {
|
||||
var pre = "";
|
||||
|
||||
for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) {
|
||||
pre += '<del>' + escape(out.o[n]) + "</del>";
|
||||
for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
|
||||
pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
|
||||
}
|
||||
str += " " + out.n[i].text + pre;
|
||||
str += " " + out.n[i].text + nSpace[i] + pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,42 +67,92 @@ function diffString(o, n) {
|
|||
return str;
|
||||
}
|
||||
|
||||
function diff(o, n) {
|
||||
function randomColor() {
|
||||
return "rgb(" + (Math.random() * 100) + "%, " +
|
||||
(Math.random() * 100) + "%, " +
|
||||
(Math.random() * 100) + "%)";
|
||||
}
|
||||
function diffString2( o, n ) {
|
||||
o = o.replace(/\s+$/, '');
|
||||
n = n.replace(/\s+$/, '');
|
||||
|
||||
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
|
||||
|
||||
var oSpace = o.match(/\s+/g);
|
||||
if (oSpace == null) {
|
||||
oSpace = ["\n"];
|
||||
} else {
|
||||
oSpace.push("\n");
|
||||
}
|
||||
var nSpace = n.match(/\s+/g);
|
||||
if (nSpace == null) {
|
||||
nSpace = ["\n"];
|
||||
} else {
|
||||
nSpace.push("\n");
|
||||
}
|
||||
|
||||
var os = "";
|
||||
var colors = new Array();
|
||||
for (var i = 0; i < out.o.length; i++) {
|
||||
colors[i] = randomColor();
|
||||
|
||||
if (out.o[i].text != null) {
|
||||
os += '<span style="background-color: ' +colors[i]+ '">' +
|
||||
escape(out.o[i].text) + oSpace[i] + "</span>";
|
||||
} else {
|
||||
os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
|
||||
}
|
||||
}
|
||||
|
||||
var ns = "";
|
||||
for (var i = 0; i < out.n.length; i++) {
|
||||
if (out.n[i].text != null) {
|
||||
ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' +
|
||||
escape(out.n[i].text) + nSpace[i] + "</span>";
|
||||
} else {
|
||||
ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
|
||||
}
|
||||
}
|
||||
|
||||
return { o : os , n : ns };
|
||||
}
|
||||
|
||||
function diff( o, n ) {
|
||||
var ns = new Object();
|
||||
var os = new Object();
|
||||
|
||||
for (var i = 0; i < n.length; i++) {
|
||||
if (ns[ n[i] ] == null)
|
||||
for ( var i = 0; i < n.length; i++ ) {
|
||||
if ( ns[ n[i] ] == null )
|
||||
ns[ n[i] ] = { rows: new Array(), o: null };
|
||||
ns[ n[i] ].rows.push(i);
|
||||
ns[ n[i] ].rows.push( i );
|
||||
}
|
||||
|
||||
for (var i = 0; i < o.length; i++) {
|
||||
if (os[ o[i] ] == null)
|
||||
for ( var i = 0; i < o.length; i++ ) {
|
||||
if ( os[ o[i] ] == null )
|
||||
os[ o[i] ] = { rows: new Array(), n: null };
|
||||
os[ o[i] ].rows.push(i);
|
||||
os[ o[i] ].rows.push( i );
|
||||
}
|
||||
|
||||
for (var i in ns) {
|
||||
if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) {
|
||||
for ( var i in ns ) {
|
||||
if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
|
||||
n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
|
||||
o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < n.length - 1; i++) {
|
||||
if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null &&
|
||||
n[i + 1] == o[ n[i].row + 1 ]) {
|
||||
n[i + 1] = { text: n[i + 1], row: n[i].row + 1 };
|
||||
o[n[i].row + 1] = { text: o[n[i].row + 1], row: i + 1 };
|
||||
for ( var i = 0; i < n.length - 1; i++ ) {
|
||||
if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null &&
|
||||
n[i+1] == o[ n[i].row + 1 ] ) {
|
||||
n[i+1] = { text: n[i+1], row: n[i].row + 1 };
|
||||
o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = n.length - 1; i > 0; i--) {
|
||||
if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null &&
|
||||
n[i - 1] == o[ n[i].row - 1 ]) {
|
||||
n[i - 1] = { text: n[i - 1], row: n[i].row - 1 };
|
||||
o[n[i].row - 1] = { text: o[n[i].row - 1], row: i - 1 };
|
||||
for ( var i = n.length - 1; i > 0; i-- ) {
|
||||
if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null &&
|
||||
n[i-1] == o[ n[i].row - 1 ] ) {
|
||||
n[i-1] = { text: n[i-1], row: n[i].row - 1 };
|
||||
o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue