From c35ccbc770eb68715bd6b92b36a1fbcc89391a52 Mon Sep 17 00:00:00 2001
From: Aaron Romel <aromel@forbes.com>
Date: Mon, 4 Feb 2019 16:31:47 -0500
Subject: [PATCH] template: Conditionally hide diffs with many lines

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
---
 src/diff-parser.js                            |  4 +++
 src/diff2html.js                              |  3 +-
 src/templates/diff2html-templates.js          |  4 +--
 src/templates/line-by-line-file-diff.mustache |  7 ++++
 src/templates/side-by-side-file-diff.mustache |  7 ++++
 src/ui/css/diff2html.css                      | 18 +++++++++-
 src/ui/js/diff2html-ui.js                     | 35 +++++++++++++++++++
 7 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/diff-parser.js b/src/diff-parser.js
index 57892cb..0439780 100644
--- a/src/diff-parser.js
+++ b/src/diff-parser.js
@@ -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) {
diff --git a/src/diff2html.js b/src/diff2html.js
index 7931496..e060544 100644
--- a/src/diff2html.js
+++ b/src/diff2html.js
@@ -19,7 +19,8 @@
     matching: 'none',
     matchWordsThreshold: 0.25,
     matchingMaxComparisons: 2500,
-    maxLineLengthHighlight: 10000
+    maxLineLengthHighlight: 10000,
+    maxLinesShowing: 0
   };
 
   /*
diff --git a/src/templates/diff2html-templates.js b/src/templates/diff2html-templates.js
index 945a9f2..a3bf18b 100644
--- a/src/templates/diff2html-templates.js
+++ b/src/templates/diff2html-templates.js
@@ -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: {  }});
diff --git a/src/templates/line-by-line-file-diff.mustache b/src/templates/line-by-line-file-diff.mustache
index 8af1ccd..f557340 100644
--- a/src/templates/line-by-line-file-diff.mustache
+++ b/src/templates/line-by-line-file-diff.mustache
@@ -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">
diff --git a/src/templates/side-by-side-file-diff.mustache b/src/templates/side-by-side-file-diff.mustache
index 3f3e5d3..68ccbe2 100644
--- a/src/templates/side-by-side-file-diff.mustache
+++ b/src/templates/side-by-side-file-diff.mustache
@@ -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">
diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index b3cacb1..460bcaa 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -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;
diff --git a/src/ui/js/diff2html-ui.js b/src/ui/js/diff2html-ui.js
index 979939b..3ef83a8 100644
--- a/src/ui/js/diff2html-ui.js
+++ b/src/ui/js/diff2html-ui.js
@@ -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;