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

Merge pull request #76 from rtfpessoa/improve-highlight

Browse source 
Improve highlight
This commit is contained in:
Rodrigo Fernandes 2016-05-14 11:33:44 +01:00
commit 07abb77208
4 changed files with 335 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
sample/index.html
View file

@ -24,6 +24,20 @@
<script> <script>
var lineDiffExample = var lineDiffExample =
'diff --git a/src/core/init.java b/src/core/init.java\n' +
'index e49196a..50f310c 100644\n' +
'--- a/src/core/init.java\n' +
'+++ b/src/core/init.java\n' +
'@@ -101,7 +101,7 @@\n' +
' /**\n' +
' * Setter for property filesize.\n' +
' *\n' +
" * @param filesize value of property 'filesize'.\n" +
' */\n' +
' public void setFilesize(int filesize) {\n' +
'- this.filesizeOld = filesizeOld;\n' +
'+ this.filesizeNew = filesizeNew;\n' +
' }\n' +
'diff --git a/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init b/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' + 'diff --git a/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init b/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' +
'index fc56817..e8e7e49 100644\n' + 'index fc56817..e8e7e49 100644\n' +
'--- a/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' + '--- a/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/src/very/long/file/path/coverage.init\n' +

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

@ -6,193 +6,193 @@
*/ */
.d2h-wrapper { .d2h-wrapper {
text-align: left; text-align: left;
} }
.d2h-file-header { .d2h-file-header {
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
background-color: #f7f7f7; background-color: #f7f7f7;
font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
} }
.d2h-file-stats { .d2h-file-stats {
display: inline; display: inline;
font-size: 12px; text-align: center;
text-align: center;
} }
.d2h-lines-added { .d2h-lines-added {
text-align: right; text-align: right;
} }
.d2h-lines-added > * { .d2h-lines-added > * {
background-color: #ceffce; background-color: #ceffce;
border: 1px solid #b4e2b4; border: 1px solid #b4e2b4;
color: #399839; color: #399839;
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
padding: 2px; padding: 2px;
} }
.d2h-lines-deleted { .d2h-lines-deleted {
text-align: left; text-align: left;
} }
.d2h-lines-deleted > * { .d2h-lines-deleted > * {
background-color: #f7c8c8; background-color: #f7c8c8;
border: 1px solid #e9aeae; border: 1px solid #e9aeae;
color: #c33; color: #c33;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
padding: 2px; padding: 2px;
} }
.d2h-file-name-wrapper { .d2h-file-name-wrapper {
display: inline-flex; display: inline-flex;
width: 90%; width: 90%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
} }
.d2h-file-name { .d2h-file-name {
line-height: 33px; line-height: 33px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.d2h-file-wrapper { .d2h-file-wrapper {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
margin-bottom: 1em; margin-bottom: 1em;
} }
.d2h-diff-table { .d2h-diff-table {
border-collapse: collapse; width: 100%;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; border-collapse: collapse;
font-size: 12px; font-family: "Menlo", "Consolas", monospace;
width: 100%; font-size: 13px;
} }
.d2h-diff-tbody > tr > td > div { .d2h-diff-tbody > tr > td > div {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
} }
.d2h-files-diff { .d2h-files-diff {
width: 100%; width: 100%;
} }
.d2h-file-diff { .d2h-file-diff {
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
} }
.d2h-file-side-diff { .d2h-file-side-diff {
display: inline-block; display: inline-block;
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
width: 50%; width: 50%;
margin-right: -4px; margin-right: -4px;
} }
.d2h-code-line { .d2h-code-line {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
padding: 0 10px; padding: 0 10px;
margin-left: 80px; margin-left: 80px;
} }
.d2h-code-side-line { .d2h-code-side-line {
display: block; display: block;
white-space: pre; white-space: pre;
padding: 0 10px; padding: 0 10px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
margin-left: 50px; margin-left: 50px;
/* Override HighlightJS */ /* Override HighlightJS */
color: inherit; color: inherit;
overflow-x: inherit; overflow-x: inherit;
background: none; background: none;
/* ******************** */ /* ******************** */
} }
.d2h-code-line del, .d2h-code-line del,
.d2h-code-side-line del { .d2h-code-side-line del {
display: inline-block; display: inline-block;
margin-top: -1px; margin-top: -1px;
text-decoration: none; text-decoration: none;
background-color: #ffb6ba; background-color: #ffb6ba;
border-radius: 0.2em; border-radius: 0.2em;
} }
.d2h-code-line ins, .d2h-code-line ins,
.d2h-code-side-line ins { .d2h-code-side-line ins {
display: inline-block; display: inline-block;
margin-top: -1px; margin-top: -1px;
text-decoration: none; text-decoration: none;
background-color: #97f295; background-color: #97f295;
border-radius: 0.2em; border-radius: 0.2em;
} }
.d2h-code-line-prefix { .d2h-code-line-prefix {
float: left; float: left;
background: none; background: none;
padding: 0; padding: 0;
} }
.d2h-code-line-ctn { .d2h-code-line-ctn {
background: none; background: none;
padding: 0; padding: 0;
} }
.line-num1 { .line-num1 {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
width: 40px; width: 40px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 3px; padding-left: 3px;
} }
.line-num2 { .line-num2 {
box-sizing: border-box; box-sizing: border-box;
float: right; float: right;
width: 40px; width: 40px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 3px; padding-left: 3px;
} }
.d2h-code-linenumber { .d2h-code-linenumber {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
width: 86px; width: 86px;
height: 18px; height: 18px;
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
line-height: 18px; line-height: 18px;
background-color: #fff; background-color: #fff;
color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3);
text-align: right; text-align: right;
border: solid #eeeeee; border: solid #eeeeee;
border-width: 0 1px 0 1px; border-width: 0 1px 0 1px;
cursor: pointer; cursor: pointer;
} }
.d2h-code-side-linenumber { .d2h-code-side-linenumber {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
width: 56px; width: 56px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
background-color: #fff; background-color: #fff;
color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3);
text-align: right; text-align: right;
border: solid #eeeeee; border: solid #eeeeee;
border-width: 0 1px 0 1px; border-width: 0 1px 0 1px;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* /*
@ -200,35 +200,35 @@
*/ */
.d2h-del { .d2h-del {
background-color: #fee8e9; background-color: #fee8e9;
border-color: #e9aeae; border-color: #e9aeae;
} }
.d2h-ins { .d2h-ins {
background-color: #dfd; background-color: #dfd;
border-color: #b4e2b4; border-color: #b4e2b4;
} }
.d2h-info { .d2h-info {
background-color: #f8fafd; background-color: #f8fafd;
color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3);
border-color: #d5e4f2; border-color: #d5e4f2;
} }
.d2h-del.d2h-change, .d2h-ins.d2h-change { .d2h-del.d2h-change, .d2h-ins.d2h-change {
background-color: #ffc; background-color: #ffc;
} }
ins.d2h-change, del.d2h-change { ins.d2h-change, del.d2h-change {
background-color: #fad771; background-color: #fad771;
} }
.d2h-file-diff .d2h-del.d2h-change { .d2h-file-diff .d2h-del.d2h-change {
background-color: #fae1af; background-color: #fae1af;
} }
.d2h-file-diff .d2h-ins.d2h-change { .d2h-file-diff .d2h-ins.d2h-change {
background-color: #ded; background-color: #ded;
} }
/* /*
@ -236,43 +236,42 @@ ins.d2h-change, del.d2h-change {
*/ */
.d2h-file-list-wrapper { .d2h-file-list-wrapper {
margin-bottom: 10px; margin-bottom: 10px;
} }
.d2h-file-list-wrapper a { .d2h-file-list-wrapper a {
text-decoration: none; text-decoration: none;
color: #3572b0; color: #3572b0;
} }
.d2h-file-list-wrapper a:visited { .d2h-file-list-wrapper a:visited {
color: #3572b0; color: #3572b0;
} }
.d2h-file-list-header { .d2h-file-list-header {
text-align: left; text-align: left;
} }
.d2h-file-list-title { .d2h-file-list-title {
font-weight: bold; font-weight: bold;
} }
.d2h-file-list-line { .d2h-file-list-line {
text-align: left; text-align: left;
font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
} }
.d2h-file-list-line .d2h-file-name { .d2h-file-list-line .d2h-file-name {
line-height: 21px; line-height: 21px;
} }
.d2h-file-list { .d2h-file-list {
display: block; display: block;
} }
.d2h-file-switch { .d2h-file-switch {
display: none; display: none;
font-size: 10px; font-size: 10px;
cursor: pointer; cursor: pointer;
} }
/* /*
@ -286,7 +285,7 @@ ins.d2h-change, del.d2h-change {
.selecting-left .d2h-code-side-line, .selecting-left .d2h-code-side-line,
.selecting-left .d2h-code-side-line *, .selecting-left .d2h-code-side-line *,
.selecting-right td.d2h-code-side-linenumber, .selecting-right td.d2h-code-side-linenumber,
.selecting-right td.d2h-code-side-linenumber *{ .selecting-right td.d2h-code-side-linenumber * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;

71
src/ui/js/diff2html-ui.js
View file

@ -8,10 +8,12 @@
* *
*/ */
/*global $, hljs*/ /*global $, hljs, Diff2Html*/
(function() { (function() {
var highlightJS = require('./highlight.js-internals.js').HighlightJS;
var diffJson = null; var diffJson = null;
var defaultTarget = "body"; var defaultTarget = "body";
var currentSelectionColumnId = -1; var currentSelectionColumnId = -1;
@ -69,15 +71,50 @@
var $target = that._getTarget(targetId); var $target = that._getTarget(targetId);
var languages = that._getLanguages($target); // collect all the diff files and execute the highlight on their lines
var $files = $target.find(".d2h-file-wrapper");
$files.map(function(_i, file) {
var oldLinesState;
var newLinesState;
var $file = $(file);
var language = $file.data("lang");
// pass the languages to the highlightjs plugin // collect all the code lines and execute the highlight on them
hljs.configure({languages: languages}); var $codeLines = $file.find(".d2h-code-line-ctn");
$codeLines.map(function(_j, line) {
var $line = $(line);
var text = line.textContent;
var lineParent = line.parentNode;
// collect all the code lines and execute the highlight on them var lineState;
var $codeLines = $target.find(".d2h-code-line-ctn"); if (lineParent.className.indexOf("d2h-del") !== -1) {
$codeLines.map(function(i, line) { lineState = oldLinesState;
hljs.highlightBlock(line); } else {
lineState = newLinesState;
}
var result = hljs.getLanguage(language) ? hljs.highlight(language, text, true, lineState) : hljs.highlightAuto(text);
if (lineParent.className.indexOf("d2h-del") !== -1) {
oldLinesState = result.top;
} else if (lineParent.className.indexOf("d2h-ins") !== -1) {
newLinesState = result.top;
} else {
oldLinesState = result.top;
newLinesState = result.top;
}
var originalStream = highlightJS.nodeStream(line);
if (originalStream.length) {
var resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
resultNode.innerHTML = result.value;
result.value = highlightJS.mergeStreams(originalStream, highlightJS.nodeStream(resultNode), text);
}
$line.addClass("hljs");
$line.addClass(result.language);
$line.html(result.value);
});
}); });
}; };
@ -97,24 +134,6 @@
return $target; return $target;
}; };
Diff2HtmlUI.prototype._getLanguages = function($target) {
var allFileLanguages = [];
if (diffJson) {
// collect all the file extensions in the json
allFileLanguages = diffJson.map(function(line) {
return line.language;
});
} else {
$target.find(".d2h-file-wrapper").map(function(i, file) {
allFileLanguages.push($(file).data("lang"));
});
}
// return only distinct languages
return this._distinct(allFileLanguages);
};
Diff2HtmlUI.prototype._getHashTag = function() { Diff2HtmlUI.prototype._getHashTag = function() {
var docUrl = document.URL; var docUrl = document.URL;
var hashTagIndex = docUrl.indexOf('#'); var hashTagIndex = docUrl.indexOf('#');

139
src/ui/js/highlight.js-internals.js Normal file
View file

@ -0,0 +1,139 @@
/*
*
* highlight.js
* Author: isagalaev
*
*/
(function() {
function HighlightJS() {
}
/*
* Copied from Highlight.js Private API
* Will be removed when this part of the API is exposed
*/
/* Utility functions */
function escape(value) {
return value.replace(/&/gm, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
}
function tag(node) {
return node.nodeName.toLowerCase();
}
/* Stream merging */
HighlightJS.prototype.nodeStream = function(node) {
var result = [];
(function _nodeStream(node, offset) {
for (var child = node.firstChild; child; child = child.nextSibling) {
if (child.nodeType == 3)
offset += child.nodeValue.length;
else if (child.nodeType == 1) {
result.push({
event: 'start',
offset: offset,
node: child
});
offset = _nodeStream(child, offset);
// Prevent void elements from having an end tag that would actually
// double them in the output. There are more void elements in HTML
// but we list only those realistically expected in code display.
if (!tag(child).match(/br|hr|img|input/)) {
result.push({
event: 'stop',
offset: offset,
node: child
});
}
}
}
return offset;
})(node, 0);
return result;
};
HighlightJS.prototype.mergeStreams = function(original, highlighted, value) {
var processed = 0;
var result = '';
var nodeStack = [];
function selectStream() {
if (!original.length || !highlighted.length) {
return original.length ? original : highlighted;
}
if (original[0].offset != highlighted[0].offset) {
return (original[0].offset < highlighted[0].offset) ? original : highlighted;
}
/*
To avoid starting the stream just before it should stop the order is
ensured that original always starts first and closes last:
if (event1 == 'start' && event2 == 'start')
return original;
if (event1 == 'start' && event2 == 'stop')
return highlighted;
if (event1 == 'stop' && event2 == 'start')
return original;
if (event1 == 'stop' && event2 == 'stop')
return highlighted;
... which is collapsed to:
*/
return highlighted[0].event == 'start' ? original : highlighted;
}
function open(node) {
function attrStr(a) {
return ' ' + a.nodeName + '="' + escape(a.value) + '"';
}
result += '<' + tag(node) + Array.prototype.map.call(node.attributes, attrStr).join('') + '>';
}
function close(node) {
result += '</' + tag(node) + '>';
}
function render(event) {
(event.event == 'start' ? open : close)(event.node);
}
while (original.length || highlighted.length) {
var stream = selectStream();
result += escape(value.substr(processed, stream[0].offset - processed));
processed = stream[0].offset;
if (stream == original) {
/*
On any opening or closing tag of the original markup we first close
the entire highlighted node stack, then render the original tag along
with all the following original tags at the same offset and then
reopen all the tags on the highlighted stack.
*/
nodeStack.reverse().forEach(close);
do {
render(stream.splice(0, 1)[0]);
stream = selectStream();
} while (stream == original && stream.length && stream[0].offset == processed);
nodeStack.reverse().forEach(open);
} else {
if (stream[0].event == 'start') {
nodeStack.push(stream[0].node);
} else {
nodeStack.pop();
}
render(stream.splice(0, 1)[0]);
}
}
return result + escape(value.substr(processed));
};
/* **** Highlight.js Private API **** */
module.exports.HighlightJS = new HighlightJS();
})();