float button discovering the next and previous diff

src/diff2html.js

@@ -20,7 +20,8 @@
     matchWordsThreshold: 0.25,
     matchingMaxComparisons: 2500,
     maxLineLengthHighlight: 10000,
-    renderNothingWhenEmpty: false
+    renderNothingWhenEmpty: false,
+    showButton: true
   };
 
   /*
@@ -42,6 +43,11 @@
       diffJson = diffParser.generateDiffJson(diffInput, cfg);
     }
 
+    var floatButton = '';
+    if (cfg.showButton === true) {
+      floatButton = htmlPrinter.generateFloatButton();
+    }
+
     var fileList = '';
     if (cfg.showFiles === true) {
       fileList = htmlPrinter.generateFileListSummary(diffJson, cfg);
@@ -54,7 +60,7 @@
       diffOutput = htmlPrinter.generateLineByLineJsonHtml(diffJson, cfg);
     }
 
-    return fileList + diffOutput;
+    return floatButton + fileList + diffOutput;
   };
 
   /*

src/float-button-printer.js

@@ -0,0 +1,25 @@
+/*
+ *
+ * FloatButtonPrinter (float-button-printer.js)
+ * Author: PhoebeWho
+ *
+ */
+
+(function() {
+  var hoganUtils;
+
+  var genericTemplatesPath = 'generic';
+
+  function FloatButtonPrinter(config) {
+    this.config = config;
+
+    var HoganJsUtils = require('./hoganjs-utils.js').HoganJsUtils;
+    hoganUtils = new HoganJsUtils(config);
+  }
+
+  FloatButtonPrinter.prototype.generateFloatButton = function() {
+    return hoganUtils.render(genericTemplatesPath, 'float-button', {});
+  };
+
+  module.exports.FloatButtonPrinter = FloatButtonPrinter;
+})();

src/html-printer.js

@@ -9,6 +9,7 @@
   var LineByLinePrinter = require('./line-by-line-printer.js').LineByLinePrinter;
   var SideBySidePrinter = require('./side-by-side-printer.js').SideBySidePrinter;
   var FileListPrinter = require('./file-list-printer.js').FileListPrinter;
+  var FloatButtonPrinter = require('./float-button-printer.js').FloatButtonPrinter;
 
   function HtmlPrinter() {
   }
@@ -28,5 +29,10 @@
     return fileListPrinter.generateFileList(diffJson);
   };
 
+  HtmlPrinter.prototype.generateFloatButton = function() {
+    var floatButtonPrinter = new FloatButtonPrinter();
+    return floatButtonPrinter.generateFloatButton();
+  };
+
   module.exports.HtmlPrinter = new HtmlPrinter();
 })();

src/line-by-line-printer.js

@@ -10,6 +10,8 @@
   var printerUtils = require('./printer-utils.js').PrinterUtils;
   var utils = require('./utils.js').Utils;
   var Rematch = require('./rematch.js').Rematch;
+  var diffBlockIdx = 0;
+  var blockFlag = true;
 
   var hoganUtils;
 
@@ -87,6 +89,7 @@
       var lines = that.makeColumnLineNumberHtml(block);
       var oldLines = [];
       var newLines = [];
+      blockFlag = true;
 
       function processChangeBlock() {
         var matches;
@@ -124,10 +127,15 @@
 
             that.config.isCombined = file.isCombined;
             var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
-
+            var tid = '';
+            if (blockFlag && oldLines.length && newLines.length) {
+              tid = 'diff-block-' + diffBlockIdx;
+              diffBlockIdx += 1;
+              blockFlag = false;
+            }
             processedOldLines +=
               that.makeLineHtml(file.isCombined, deleteType, oldLine.oldNumber, oldLine.newNumber,
-                diff.first.line, diff.first.prefix);
+                diff.first.line, diff.first.prefix, tid);
             processedNewLines +=
               that.makeLineHtml(file.isCombined, insertType, newLine.oldNumber, newLine.newNumber,
                 diff.second.line, diff.second.prefix);
@@ -151,9 +159,16 @@
         }
 
         if (line.type === diffParser.LINE_TYPE.CONTEXT) {
+          blockFlag = true;
           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(file.isCombined, line.type, line.oldNumber, line.newNumber, escapedLine);
+          var tid = '';
+          if (blockFlag) {
+            tid = 'diff-block-' + diffBlockIdx;
+            diffBlockIdx += 1;
+            blockFlag = false;
+          }
+          lines += that.makeLineHtml(file.isCombined, line.type, line.oldNumber, line.newNumber, escapedLine, '', tid);
         } else if (line.type === diffParser.LINE_TYPE.DELETES) {
           oldLines.push(line);
         } else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
@@ -172,23 +187,36 @@
 
   LineByLinePrinter.prototype._processLines = function(isCombined, oldLines, newLines) {
     var lines = '';
-
+    var LineBlockFlag = true;
+    var tid;
     for (var i = 0; i < oldLines.length; i++) {
       var oldLine = oldLines[i];
       var oldEscapedLine = utils.escape(oldLine.content);
-      lines += this.makeLineHtml(isCombined, oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine);
+      if (LineBlockFlag && blockFlag) {
+        tid = 'diff-block-' + diffBlockIdx;
+        diffBlockIdx += 1;
+        blockFlag = false;
+        LineBlockFlag = false;
+      }
+      lines += this.makeLineHtml(isCombined, oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine, '', tid);
     }
 
     for (var j = 0; j < newLines.length; j++) {
       var newLine = newLines[j];
       var newEscapedLine = utils.escape(newLine.content);
-      lines += this.makeLineHtml(isCombined, newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine);
+      if (LineBlockFlag && blockFlag) {
+        tid = 'diff-block-' + diffBlockIdx;
+        diffBlockIdx += 1;
+        blockFlag = false;
+        LineBlockFlag = false;
+      }
+      lines += this.makeLineHtml(isCombined, newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine, '', tid);
     }
 
     return lines;
   };
 
-  LineByLinePrinter.prototype.makeLineHtml = function(isCombined, type, oldNumber, newNumber, content, possiblePrefix) {
+  LineByLinePrinter.prototype.makeLineHtml = function(isCombined, type, oldNumber, newNumber, content, possiblePrefix, tid) {
     var lineNumberTemplate = hoganUtils.render(baseTemplatesPath, 'numbers', {
       oldNumber: utils.valueOrEmpty(oldNumber),
       newNumber: utils.valueOrEmpty(newNumber)
@@ -196,6 +224,11 @@
 
     var lineWithoutPrefix = content;
     var prefix = possiblePrefix;
+    var idxStr = '';
+
+    if (tid) {
+      idxStr += tid;
+    }
 
     if (!prefix) {
       var lineWithPrefix = printerUtils.separatePrefix(isCombined, content);
@@ -210,7 +243,8 @@
         contentClass: 'd2h-code-line',
         prefix: prefix,
         content: lineWithoutPrefix,
-        lineNumber: lineNumberTemplate
+        lineNumber: lineNumberTemplate,
+        eleID: idxStr
       });
   };
 

src/side-by-side-printer.js

@@ -10,6 +10,8 @@
   var printerUtils = require('./printer-utils.js').PrinterUtils;
   var utils = require('./utils.js').Utils;
   var Rematch = require('./rematch.js').Rematch;
+  var diffBlockIdx = 0;
+  var blockFlag = true;
 
   var hoganUtils;
 
@@ -89,6 +91,7 @@
 
       var oldLines = [];
       var newLines = [];
+      blockFlag = true;
 
       function processChangeBlock() {
         var matches;
@@ -124,10 +127,15 @@
             that.config.isCombined = file.isCombined;
 
             var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
-
+            var tid = '';
+            if (blockFlag && oldLines.length && newLines.length) {
+              tid = 'diff-block-' + diffBlockIdx;
+              diffBlockIdx += 1;
+              blockFlag = false;
+            }
             fileHtml.left +=
               that.generateSingleLineHtml(file.isCombined, deleteType, oldLine.oldNumber,
-                diff.first.line, diff.first.prefix);
+                diff.first.line, diff.first.prefix, tid);
             fileHtml.right +=
               that.generateSingleLineHtml(file.isCombined, insertType, newLine.newNumber,
                 diff.second.line, diff.second.prefix);
@@ -158,10 +166,17 @@
         }
 
         if (line.type === diffParser.LINE_TYPE.CONTEXT) {
+          blockFlag = true;
           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(file.isCombined, diffParser.LINE_TYPE.CONTEXT, '', '', '');
+          var tid = '';
+          if (blockFlag) {
+            tid = 'diff-block-' + diffBlockIdx;
+            diffBlockIdx += 1;
+            blockFlag = false;
+          }
+          fileHtml.left += that.generateSingleLineHtml(file.isCombined, diffParser.LINE_TYPE.CONTEXT, '', '', '', tid);
           fileHtml.right += that.generateSingleLineHtml(file.isCombined, line.type, line.newNumber, escapedLine, prefix);
         } else if (line.type === diffParser.LINE_TYPE.DELETES) {
           oldLines.push(line);
@@ -184,6 +199,7 @@
     var fileHtml = {};
     fileHtml.left = '';
     fileHtml.right = '';
+    var LineBlockFlag = true;
 
     var maxLinesNumber = Math.max(oldLines.length, newLines.length);
     for (var i = 0; i < maxLinesNumber; i++) {
@@ -208,7 +224,15 @@
         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(isCombined, oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
+        var tid = '';
+        if (LineBlockFlag && blockFlag) {
+          tid = 'diff-block-' + diffBlockIdx;
+          diffBlockIdx += 1;
+          blockFlag = false;
+          LineBlockFlag = false;
+        } else {
+        }
+        fileHtml.left += that.generateSingleLineHtml(isCombined, oldLine.type, oldLine.oldNumber, oldContent, oldPrefix, tid);
         fileHtml.right += that.generateSingleLineHtml(isCombined, diffParser.LINE_TYPE.CONTEXT, '', '', '');
       } else if (newLine) {
         fileHtml.left += that.generateSingleLineHtml(isCombined, diffParser.LINE_TYPE.CONTEXT, '', '', '');
@@ -221,11 +245,12 @@
     return fileHtml;
   };
 
-  SideBySidePrinter.prototype.generateSingleLineHtml = function(isCombined, type, number, content, possiblePrefix) {
+  SideBySidePrinter.prototype.generateSingleLineHtml = function(isCombined, type, number, content, possiblePrefix, tid) {
     var lineWithoutPrefix = content;
     var prefix = possiblePrefix;
     var lineClass = 'd2h-code-side-linenumber';
     var contentClass = 'd2h-code-side-line';
+    var idxStr = '';
 
     if (!number && !content) {
       lineClass += ' d2h-code-side-emptyplaceholder';
@@ -233,6 +258,10 @@
       type += ' d2h-emptyplaceholder';
     }
 
+    if (tid) {
+      idxStr += tid;
+    }
+
     if (!prefix) {
       var lineWithPrefix = printerUtils.separatePrefix(isCombined, content);
       prefix = lineWithPrefix.prefix;
@@ -246,7 +275,8 @@
         contentClass: contentClass,
         prefix: prefix,
         content: lineWithoutPrefix,
-        lineNumber: number
+        lineNumber: number,
+        eleID: idxStr
       });
   };
 

src/templates/diff2html-templates.js

@@ -5,13 +5,14 @@ global.browserTemplates["file-summary-wrapper"] = new Hogan.Template({code: func
 global.browserTemplates["generic-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("            File without changes");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-file-path"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(t.rp("<fileIcon0",c,p,"    "));t.b("    <span class=\"d2h-file-name\">");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(t.rp("<fileTag1",c,p,"    "));t.b("</span>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }},"<fileTag1":{name:"fileTag", partials: {}, subs: {  }}}, subs: {  }});
+global.browserTemplates["generic-float-button"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"btn-group-vertical\" role=\"group\" style=\"position: fixed;left: 100px;\">\r");t.b("\n" + i);t.b("    <span class=\"glyphicon glyphicon-chevron-up\" aria-hidden=\"true\"></span>\r");t.b("\n" + i);t.b("    <button type=\"button\" class=\"btn btn-danger\">Previous</button>\r");t.b("\n" + i);t.b("    <button type=\"button\" class=\"btn btn-danger\">Next</button>\r");t.b("\n" + i);t.b("    <span class=\"glyphicon glyphicon-chevron-down\" aria-hidden=\"true\"></span>\r");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("      ");t.b(t.t(t.f("lineNumber",c,p,0)));t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,171,247,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,279,353,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["icon-file-added"] = 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-added\" height=\"16\" title=\"added\" version=\"1.1\" viewBox=\"0 0 14 16\"");t.b("\n" + i);t.b("     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 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["icon-file-changed"] = 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-changed\" height=\"16\" title=\"modified\" 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 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
 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["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["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-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: {  }});

src/templates/generic-float-button.mustache

@@ -0,0 +1,6 @@
+<div class="btn-group-vertical" role="group" style="position: fixed;left: 100px;">
+    <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
+    <button type="button" class="btn btn-danger btn-previous">Previous</button>
+    <button type="button" class="btn btn-danger btn-next">Next</button>
+    <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
+</div>

src/templates/generic-line.mustache

@@ -1,5 +1,5 @@
 <tr>
-    <td class="{{lineClass}} {{type}}">
+    <td class="{{lineClass}} {{type}}" id="{{eleID}}">
       {{{lineNumber}}}
     </td>
     <td class="{{type}}">

src/ui/js/diff2html-ui.js

@@ -16,6 +16,7 @@
   var diffJson = null;
   var defaultTarget = 'body';
   var currentSelectionColumnId = -1;
+  var currentDiffBlockIdx = -1;
 
   function Diff2HtmlUI(config) {
     var cfg = config || {};
@@ -190,6 +191,33 @@
       clipboardData.setData('text', text);
       event.preventDefault();
     });
+
+    body.on('mousedown', '.btn-previous', function() {
+      if (currentDiffBlockIdx === -1){
+        return;
+      }
+      currentDiffBlockIdx -= 1;
+      var target = document.getElementById('diff-block-' + currentDiffBlockIdx);
+      if (target) {
+        var top = target.offsetTop + 200;
+        window.scrollTo(0, top);
+      } else {
+        currentDiffBlockIdx = 0;
+        alert('already first');
+      }
+    });
+
+    body.on('mousedown', '.btn-next', function() {
+      currentDiffBlockIdx += 1;
+      var target = document.getElementById('diff-block-' + currentDiffBlockIdx);
+      if (target) {
+        var top = target.offsetTop + 200;
+        window.scrollTo(0, top);
+      } else {
+        currentDiffBlockIdx -= 1;
+        alert('already last');
+      }
+    });
   };
 
   Diff2HtmlUI.prototype._getSelectedText = function() {