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

template: Conditionally hide diffs with many lines

Browse source 
Added maxLinesShowing to configuration, which can be used to collapse
files that exceed that number of changed lines. Also adds collapse/expand
feature to files in all cases
This commit is contained in:
Aaron Romel 2019-02-04 16:31:47 -05:00
parent 2512e72f32
commit c35ccbc770
7 changed files with 74 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/diff-parser.js
View file

@ -63,6 +63,9 @@
}
if (currentFile.newName) {
if (configuration.maxLinesShowing && currentFile.deletedLines + currentFile.addedLines > configuration.maxLinesShowing) {
currentFile.shouldCollapse = true;
}
files.push(currentFile);
currentFile = null;
}
@ -81,6 +84,7 @@
currentFile.blocks = [];
currentFile.deletedLines = 0;
currentFile.addedLines = 0;
currentFile.shouldCollapse = false;
}
function startBlock(line) {

3
src/diff2html.js
View file

@ -19,7 +19,8 @@
matching: 'none',
matchWordsThreshold: 0.25,
matchingMaxComparisons: 2500,
maxLineLengthHighlight: 10000
maxLineLengthHighlight: 10000,
maxLinesShowing: 0
};
/*

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

@ -12,9 +12,9 @@ global.browserTemplates["icon-file-changed"] = new Hogan.Template({code: functio
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-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");if(t.s(t.d("file.shouldCollapse",c,p,1),c,p,0,24,125,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper d2h-file-collapsed\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);});c.pop();}if(!t.s(t.d("file.shouldCollapse",c,p,1),c,p,1,0,0,"")){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(" <a class=\"d2h-file-collapse-switch d2h-collapse\">collapse</a>");t.b("\n" + i);t.b(" <a class=\"d2h-file-collapse-switch d2h-expand\">expand</a>");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["side-by-side-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");if(t.s(t.d("file.shouldCollapse",c,p,1),c,p,0,24,125,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper d2h-file-collapsed\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);});c.pop();}if(!t.s(t.d("file.shouldCollapse",c,p,1),c,p,1,0,0,"")){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(" <a class=\"d2h-file-collapse-switch d2h-collapse\">collapse</a>");t.b("\n" + i);t.b(" <a class=\"d2h-file-collapse-switch d2h-expand\">expand</a>");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: { }});

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

@ -1,6 +1,13 @@
{{#file.shouldCollapse}}
<div id="{{fileHtmlId}}" class="d2h-file-wrapper d2h-file-collapsed" data-lang="{{file.language}}">
{{/file.shouldCollapse}}
{{^file.shouldCollapse}}
<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
{{/file.shouldCollapse}}
<div class="d2h-file-header">
{{{filePath}}}
<a class="d2h-file-collapse-switch d2h-collapse">collapse</a>
<a class="d2h-file-collapse-switch d2h-expand">expand</a>
</div>
<div class="d2h-file-diff">
<div class="d2h-code-wrapper">

7
src/templates/side-by-side-file-diff.mustache
View file

@ -1,6 +1,13 @@
{{#file.shouldCollapse}}
<div id="{{fileHtmlId}}" class="d2h-file-wrapper d2h-file-collapsed" data-lang="{{file.language}}">
{{/file.shouldCollapse}}
{{^file.shouldCollapse}}
<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
{{/file.shouldCollapse}}
<div class="d2h-file-header">
{{{filePath}}}
<a class="d2h-file-collapse-switch d2h-collapse">collapse</a>
<a class="d2h-file-collapse-switch d2h-expand">expand</a>
</div>
<div class="d2h-files-diff">
<div class="d2h-file-side-diff">

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

@ -16,6 +16,11 @@
background-color: #f7f7f7;
}
.d2h-file-header a {
color: #3572b0;
text-decoration: none;
}
.d2h-file-stats {
display: -webkit-box;
display: -ms-flexbox;
@ -65,6 +70,7 @@
border: 1px solid #ddd;
border-radius: 3px;
margin-bottom: 1em;
overflow: hidden;
}
.d2h-diff-table {
@ -90,6 +96,11 @@
overflow-y: hidden;
}
.d2h-file-collapsed .d2h-file-diff,
.d2h-file-collapsed .d2h-files-diff {
height: 0;
}
.d2h-file-side-diff {
display: inline-block;
overflow-x: scroll;
@ -275,12 +286,17 @@
border-bottom: none;
}
.d2h-file-switch {
.d2h-file-switch,
.d2h-file-collapse-switch {
display: none;
font-size: 10px;
cursor: pointer;
}
.d2h-file-collapse-switch {
float: right;
}
.d2h-icon {
vertical-align: middle;
margin-right: 10px;

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

@ -79,6 +79,41 @@
}
};
Diff2HtmlUI.prototype.collapseAndExpand = function() {
function expand(targetId) {
var $target = $(targetId);
$target.removeClass('d2h-file-collapsed');
$target.find('.d2h-expand').hide();
$target.find('.d2h-collapse').show();
}
function collapse(targetId) {
var $target = $(targetId);
$target.addClass('d2h-file-collapsed');
$target.find('.d2h-collapse').hide();
$target.find('.d2h-expand').show();
}
$('body').find('.d2h-file-wrapper').map(function(_i, file) {
$file = $(file);
$expand = $file.find('.d2h-expand');
$collapse = $file.find('.d2h-collapse');
var id = '#' + $file.attr('id');
if ($file.hasClass('d2h-file-collapsed')) {
$expand.show();
} else {
$collapse.show();
}
$expand.click(function() {
expand(id);
});
$collapse.click(function() {
collapse(id);
});
});
}
Diff2HtmlUI.prototype.highlightCode = function(targetId) {
var that = this;