Diff2html wrapped side by side and inline view bug fixed

dist/diff2html-ui.js

@@ -1,4 +1,4 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global){
 /*
  *

src/line-by-line-printer.js

@@ -15,6 +15,7 @@
 
   var genericTemplatesPath = 'generic';
   var baseTemplatesPath = 'line-by-line';
+  var wrappedTemplatesPath = 'wrapped';
   var iconsBaseTemplatesPath = 'icon';
   var tagsBaseTemplatesPath = 'tag';
 
@@ -200,12 +201,12 @@
       prefix = lineWithPrefix.prefix;
       lineWithoutPrefix = lineWithPrefix.line;
     }
-
+    var lineFolding = this.config.lineFolding;
-    return hoganUtils.render(genericTemplatesPath, 'line',
+    return hoganUtils.render((lineFolding !== null && lineFolding) ? wrappedTemplatesPath : genericTemplatesPath, 'line',
       {
         type: type,
-        lineClass: 'd2h-code-linenumber',
+        lineClass: (lineFolding !== null && lineFolding) ? 'd2h-wrapped-code-linenumber' : 'd2h-code-linenumber',
-        contentClass: 'd2h-code-line',
+        contentClass: (lineFolding !== null && lineFolding) ? 'd2h-wrapped-code-line' : 'd2h-code-line',
         prefix: prefix,
         content: lineWithoutPrefix,
         lineNumber: lineNumberTemplate

src/side-by-side-printer.js

@@ -15,6 +15,7 @@
 
   var genericTemplatesPath = 'generic';
   var baseTemplatesPath = 'side-by-side';
+  var wrappedTemplatesPath = 'wrapped';
   var iconsBaseTemplatesPath = 'icon';
   var tagsBaseTemplatesPath = 'tag';
 
@@ -33,7 +34,8 @@
   }
 
   SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
-    var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, 'file-diff');
+    var that = this;
+    var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, (that.config.lineFolding) ? 'wrapped-file-diff' : 'file-diff');
     var filePathTemplate = hoganUtils.template(genericTemplatesPath, 'file-path');
     var fileIconTemplate = hoganUtils.template(iconsBaseTemplatesPath, 'file');
     var fileTagTemplate = hoganUtils.template(tagsBaseTemplatesPath, printerUtils.getFileTypeIcon(file));
@@ -53,15 +55,18 @@
 
   SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles) {
     var that = this;
-
+    var lineFolding = that.config.lineFolding;
     var content = diffFiles.map(function(file) {
       var diffs;
       if (file.blocks.length) {
-        diffs = that.generateSideBySideFileHtml(file);
+        if(!lineFolding) {
+            diffs = that.generateSideBySideFileHtml(file);
+        } else {
+            diffs = that.generateSideBySideWrappedFileHtml(file);
+        }
       } else {
         diffs = that.generateEmptyDiff();
       }
-
       return that.makeDiffHtml(file, diffs);
     }).join('\n');
 
@@ -77,12 +82,27 @@
     });
   };
 
+  SideBySidePrinter.prototype.makeWrappedSideHtml = function(left, right) {
+    return hoganUtils.render(wrappedTemplatesPath, 'column-line-number', {
+    left: {
+      diffParser: diffParser,
+      blockHeader: utils.escape(left.content),
+      lineClass: 'd2h-wrapped-code-side-linenumber',
+      contentClass: 'd2h-wrapped-code-side-line'
+    }, 
+    right: {
+      diffParser: diffParser,
+      blockHeader: utils.escape(right.content),
+      lineClass: 'd2h-wrapped-code-side-linenumber',
+      contentClass: 'd2h-wrapped-code-side-line'
+    }});
+  };
+  
   SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) {
     var that = this;
     var fileHtml = {};
     fileHtml.left = '';
     fileHtml.right = '';
-
     file.blocks.forEach(function(block) {
       fileHtml.left += that.makeSideHtml(block.header);
       fileHtml.right += that.makeSideHtml('');
@@ -179,6 +199,132 @@
     return fileHtml;
   };
   
+  SideBySidePrinter.prototype.generateSideBySideWrappedFileHtml = function(file) {
+    var that = this;
+    var fileHtml = {};
+    var lineFolding = that.config.lineFolding;
+    fileHtml = '';
+    file.blocks.forEach(function(block) {
+      fileHtml += that.makeWrappedSideHtml({content: block.header}, {content: ""});
+
+      var oldLines = [];
+      var newLines = [];
+
+      function processChangeBlock() {
+        var matches;
+        var insertType;
+        var deleteType;
+
+        var comparisons = oldLines.length * newLines.length;
+        var maxComparisons = that.config.matchingMaxComparisons || 2500;
+        var doMatching = comparisons < maxComparisons && (that.config.matching === 'lines' ||
+          that.config.matching === 'words');
+
+        if (doMatching) {
+          matches = matcher(oldLines, newLines);
+          insertType = diffParser.LINE_TYPE.INSERT_CHANGES;
+          deleteType = diffParser.LINE_TYPE.DELETE_CHANGES;
+        } else {
+          matches = [[oldLines, newLines]];
+          insertType = diffParser.LINE_TYPE.INSERTS;
+          deleteType = diffParser.LINE_TYPE.DELETES;
+        }
+
+        matches.forEach(function(match) {
+          oldLines = match[0];
+          newLines = match[1];
+
+          var common = Math.min(oldLines.length, newLines.length);
+          var max = Math.max(oldLines.length, newLines.length);
+
+          for (var j = 0; j < common; j++) {
+            var oldLine = oldLines[j];
+            var newLine = newLines[j];
+
+            that.config.isCombined = file.isCombined;
+
+            var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
+            fileHtml += that.generateWrappedSingleLineHtml({
+                isCombined: file.isCombined,
+                type: deleteType,
+                number: oldLine.oldNumber,
+                content: diff.first.line,
+                possiblePrefix: diff.first.prefix
+            }, {
+                isCombined: file.isCombined,
+                type: insertType,
+                number: newLine.newNumber,
+                content: diff.second.line,
+                possiblePrefix: diff.second.prefix
+            });
+          }
+
+          if (max > common) {
+            var oldSlice = oldLines.slice(common);
+            var newSlice = newLines.slice(common);
+
+            var tmpHtml = that.processWrappedLines(file.isCombined, oldSlice, newSlice);
+            fileHtml += tmpHtml;
+          }
+        });
+        oldLines = [];
+        newLines = [];
+      }
+
+      for (var i = 0; i < block.lines.length; i++) {
+        var line = block.lines[i];
+        var prefix = line.content[0];
+        var escapedLine = utils.escape(line.content.substr(1));
+
+        if (line.type !== diffParser.LINE_TYPE.INSERTS &&
+          (newLines.length > 0 || (line.type !== diffParser.LINE_TYPE.DELETES && oldLines.length > 0))) {
+          processChangeBlock();
+        }
+
+        if (line.type === diffParser.LINE_TYPE.CONTEXT) {
+            fileHtml += that.generateWrappedSingleLineHtml({
+                isCombined: file.isCombined,
+                type: line.type,
+                number: line.oldNumber,
+                content: escapedLine,
+                possiblePrefix: prefix  
+            },{
+                isCombined: file.isCombined,
+                type: line.type,
+                number: line.newNumber,
+                content: escapedLine,
+                possiblePrefix: prefix  
+            });
+        } else if (line.type === diffParser.LINE_TYPE.INSERTS && !oldLines.length) {
+            fileHtml += that.generateWrappedSingleLineHtml({
+                isCombined: file.isCombined,
+                type: diffParser.LINE_TYPE.CONTEXT,
+                number: '',
+                content: '',
+                possiblePrefix: ''  
+            },{
+                isCombined: file.isCombined,
+                type: line.type,
+                number: line.newNumber,
+                content: escapedLine,
+                possiblePrefix: prefix  
+            });
+        } else if (line.type === diffParser.LINE_TYPE.DELETES) {
+          oldLines.push(line);
+        } else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
+          newLines.push(line);
+        } else {
+          console.error('unknown state in html side-by-side generator');
+          processChangeBlock();
+        }
+      }
+
+      processChangeBlock();
+    });
+
+    return fileHtml;
+  };
+
   SideBySidePrinter.prototype.processLines = function(isCombined, oldLines, newLines) {
     var that = this;
     var fileHtml = {};
@@ -221,6 +367,80 @@
     return fileHtml;
   };
   
+  SideBySidePrinter.prototype.processWrappedLines = function(isCombined, oldLines, newLines) {
+    var that = this;
+    var fileHtml = {};
+    var lineFolding = that.config.lineFolding;
+    fileHtml = '';
+    var maxLinesNumber = Math.max(oldLines.length, newLines.length);
+    for (var i = 0; i < maxLinesNumber; i++) {
+      var oldLine = oldLines[i];
+      var newLine = newLines[i];
+      var oldContent;
+      var newContent;
+      var oldPrefix;
+      var newPrefix;
+
+      if (oldLine) {
+        oldContent = utils.escape(oldLine.content.substr(1));
+        oldPrefix = oldLine.content[0];
+      }
+
+      if (newLine) {
+        newContent = utils.escape(newLine.content.substr(1));
+        newPrefix = newLine.content[0];
+      }
+
+      if (oldLine && newLine) {
+        fileHtml += that.generateWrappedSingleLineHtml({
+            isCombined: isCombined,
+            type: oldLine.type,
+            number: oldLine.oldNumber,
+            content: oldContent,
+            possiblePrefix: oldPrefix  
+        },{
+            isCombined: isCombined,
+            type: newLine.type,
+            number: newLine.newNumber,
+            content: newContent,
+            possiblePrefix: newPrefix  
+        });
+      } else if (oldLine) {
+        fileHtml += that.generateWrappedSingleLineHtml({
+            isCombined: isCombined,
+            type: oldLine.type,
+            number: oldLine.oldNumber,
+            content: oldContent,
+            possiblePrefix: oldPrefix  
+        },{
+            isCombined: isCombined,
+            type: diffParser.LINE_TYPE.CONTEXT,
+            number: '',
+            content: '',
+            possiblePrefix: ''  
+        });
+      } else if (newLine) {
+        fileHtml += that.generateWrappedSingleLineHtml({
+            isCombined: isCombined,
+            type: diffParser.LINE_TYPE.CONTEXT,
+            number: '',
+            content: '',
+            possiblePrefix: ''  
+        },{
+            isCombined: isCombined,
+            type: newLine.type,
+            number: newLine.newNumber,
+            content: newContent,
+            possiblePrefix: newPrefix  
+        });
+      } else {
+        console.error('How did it get here?');
+      }
+    }
+
+    return fileHtml;
+  };
+
   SideBySidePrinter.prototype.generateSingleLineHtml = function(isCombined, type, number, content, possiblePrefix) {
     var lineWithoutPrefix = content;
     var prefix = possiblePrefix;
@@ -242,6 +462,34 @@
       });
   };
   
+  SideBySidePrinter.prototype.generateFileWrappedTemplateObj = function(side) {
+      var lineWithoutPrefix = side.content;
+    var prefix = side.possiblePrefix;
+
+    if (!prefix) {
+      var lineWithPrefix = printerUtils.separatePrefix(side.isCombined, side.content);
+      prefix = lineWithPrefix.prefix;
+      lineWithoutPrefix = lineWithPrefix.line;
+    }
+    return {
+        type: side.type,
+        lineClass: 'd2h-wrapped-code-side-linenumber',
+        contentClass: 'd2h-wrapped-code-side-line',
+        prefix: prefix,
+        content: lineWithoutPrefix,
+        lineNumber: side.number
+      };
+  };
+
+  SideBySidePrinter.prototype.generateWrappedSingleLineHtml = function(left, right) { //isCombined, type, number, content, possiblePrefix) {
+    var that = this;
+    
+    return hoganUtils.render(wrappedTemplatesPath, 'side-line', {
+          left: that.generateFileWrappedTemplateObj(left),
+          right: that.generateFileWrappedTemplateObj(right)
+      });
+  };
+
   SideBySidePrinter.prototype.generateEmptyDiff = function() {
     var fileHtml = {};
     fileHtml.right = '';

src/templates/diff2html-templates.js

@@ -15,9 +15,13 @@ global.browserTemplates["icon-file"] = new Hogan.Template({code: function (c,p,i
 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: {  }});
+global.browserTemplates["side-by-side-wrapped-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-wrapped-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 fixed-layout\">");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>");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: {  }});
 global.browserTemplates["tag-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-moved d2h-moved-tag\">RENAMED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["wrapped-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.d("left.lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("left.diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("left.diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.d("left.contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("left.diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.d("left.blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("right.lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("right.diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("right.diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.d("right.contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("right.diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.d("right.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["wrapped-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,361,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-wrapped-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["wrapped-side-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.d("left.lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("left.type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("      ");t.b(t.t(t.d("left.lineNumber",c,p,0)));t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("left.type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.d("left.contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("left.type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.d("left.prefix",c,p,1),c,p,0,206,287,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.d("left.prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.d("left.content",c,p,1),c,p,0,329,416,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-wrapped-code-line-ctn\">");t.b(t.t(t.d("left.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("    <td class=\"");t.b(t.v(t.d("right.lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("right.type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("      ");t.b(t.t(t.d("right.lineNumber",c,p,0)));t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("right.type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.d("right.contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("right.type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.d("right.prefix",c,p,1),c,p,0,667,749,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.d("right.prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.d("right.content",c,p,1),c,p,0,793,881,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-wrapped-code-line-ctn\">");t.b(t.t(t.d("right.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: {  }});
 module.exports = global.browserTemplates;
 })();

src/templates/side-by-side-wrapped-file-diff.mustache

@@ -0,0 +1,16 @@
+<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+    <div class="d2h-file-header">
+      {{{filePath}}}
+    </div>
+    <div class="d2h-files-diff">
+        <div class="d2h-wrapped-file-side-diff">
+            <div class="d2h-code-wrapper">
+                <table class="d2h-diff-table fixed-layout">
+                    <tbody class="d2h-diff-tbody">
+                    {{{diffs}}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

src/templates/wrapped-column-line-number.mustache

@@ -0,0 +1,10 @@
+<tr>
+    <td class="{{left.lineClass}} {{left.diffParser.LINE_TYPE.INFO}}"></td>
+    <td class="{{left.diffParser.LINE_TYPE.INFO}}">
+        <div class="{{left.contentClass}} {{left.diffParser.LINE_TYPE.INFO}}">{{{left.blockHeader}}}</div>
+    </td>
+    <td class="{{right.lineClass}} {{right.diffParser.LINE_TYPE.INFO}}"></td>
+    <td class="{{right.diffParser.LINE_TYPE.INFO}}">
+        <div class="{{right.contentClass}} {{right.diffParser.LINE_TYPE.INFO}}">{{{right.blockHeader}}}</div>
+    </td>
+</tr>

src/templates/wrapped-line.mustache

@@ -0,0 +1,15 @@
+<tr>
+    <td class="{{lineClass}} {{type}}">
+      {{{lineNumber}}}
+    </td>
+    <td class="{{type}}">
+        <div class="{{contentClass}} {{type}}">
+        {{#prefix}}
+            <span class="d2h-code-line-prefix">{{{prefix}}}</span>
+        {{/prefix}}
+        {{#content}}
+            <span class="d2h-wrapped-code-line-ctn">{{{content}}}</span>
+        {{/content}}
+        </div>
+    </td>
+</tr>

src/templates/wrapped-side-line.mustache

@@ -0,0 +1,28 @@
+<tr>
+    <td class="{{left.lineClass}} {{left.type}}">
+      {{{left.lineNumber}}}
+    </td>
+    <td class="{{left.type}}">
+        <div class="{{left.contentClass}} {{left.type}}">
+        {{#left.prefix}}
+            <span class="d2h-code-line-prefix">{{{left.prefix}}}</span>
+        {{/left.prefix}}
+        {{#left.content}}
+            <span class="d2h-wrapped-code-line-ctn">{{{left.content}}}</span>
+        {{/left.content}}
+        </div>
+    </td>
+    <td class="{{right.lineClass}} {{right.type}}">
+      {{{right.lineNumber}}}
+    </td>
+    <td class="{{right.type}}">
+        <div class="{{right.contentClass}} {{right.type}}">
+        {{#right.prefix}}
+            <span class="d2h-code-line-prefix">{{{right.prefix}}}</span>
+        {{/right.prefix}}
+        {{#right.content}}
+            <span class="d2h-wrapped-code-line-ctn">{{{right.content}}}</span>
+        {{/right.content}}
+        </div>
+    </td>
+</tr>