side by side diff

README.md

@@ -4,7 +4,7 @@ Diff to Html generates pretty HTML diffs from git word diff output.
 
 ## Features
 
-* line-by-line` diff
+* `line-by-line` and `side-by-side` diff
 
 * char-by-char highlight
 
@@ -14,7 +14,7 @@ Diff to Html generates pretty HTML diffs from git word diff output.
 
 * GitHub like style
 
-## Real Example
+## Online Example
 
 > Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/)
 
@@ -30,15 +30,23 @@ Diff to Html generates pretty HTML diffs from git word diff output.
 
 > Pretty Line-by-Line Html From Git Word Diff Output
 
-    Diff2Html.getPrettyHtmlFromDiff(exInput);
+    Diff2Html.getPrettyHtmlFromDiff(exInput)
+
+> Pretty Side-by-Side Html From Git Word Diff Output
+
+    Diff2Html.getPrettySideBySideHtmlFromDiff(exInput)
 
 > Intermediate Json From Git Word Diff Output
 
-    Diff2Html.getJsonFromDiff(exInput);
+    Diff2Html.getJsonFromDiff(exInput)
 
 > Pretty Line-by-Line Html From Json
 
-    Diff2Html.getPrettyHtmlFromJson(exInput);
+    Diff2Html.getPrettyHtmlFromJson(exInput)
+
+> Pretty Side-by-Side Html From Json
+
+    Diff2Html.getPrettySideBySideHtmlFromJson(exInput)
 
 > Check out the `index.html` for a complete example.
 

diff2html.css

@@ -3,7 +3,7 @@
  * Diff to HTML (diff2html.css)
  * Author: rtfpessoa
  * Date: Friday 29 August 2014
- * Last Update: Saturday 6 September 2014
+ * Last Update: Sunday 14 September 2014
  *
  */
 
@@ -71,10 +71,21 @@
     width: 100%;
 }
 
+.d2h-files-diff {
+    width: 100%;
+}
+
 .d2h-file-diff {
     overflow-x: scroll;
 }
 
+.d2h-file-side-diff {
+    display: inline-block;
+    overflow-x: scroll;
+    width: 50%;
+    margin-right: -4px;
+}
+
 .d2h-code-line {
     white-space: pre;
     padding-left: 10px;
@@ -84,7 +95,17 @@
     margin-left: 80px;
 }
 
-.d2h-code-line del {
+.d2h-code-side-line {
+    white-space: pre;
+    padding-left: 10px;
+    padding-right: 10px;
+    height: 18px;
+    line-height: 18px;
+    margin-left: 50px;
+}
+
+.d2h-code-line del,
+.d2h-code-side-line del {
     display: inline-block;
     margin-top: -1px;
     text-decoration: none;
@@ -93,7 +114,8 @@
     border-radius: 0.2em;
 }
 
-.d2h-code-line ins {
+.d2h-code-line ins,
+.d2h-code-side-line ins {
     display: inline-block;
     margin-top: -1px;
     text-decoration: none;
@@ -106,12 +128,16 @@
     display: inline-block;
     float: left;
     width: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .line-num2 {
     display: inline-block;
     float: right;
     width: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .d2h-code-linenumber {
@@ -126,12 +152,25 @@
     color: rgba(0, 0, 0, 0.3);
     text-align: right;
     border: solid #eeeeee;
-    border-width: 0 1px 0 0;
+    border-width: 0 1px 0 1px;
     cursor: pointer;
 }
 
-.d2h-code-linenumber:not(:first-child) {
+.d2h-code-side-linenumber {
+    position: absolute;
+    width: 35px;
+    padding-left: 10px;
+    padding-right: 10px;
+    height: 18px;
+    line-height: 18px;
+    background-color: #fff;
+    color: rgba(0, 0, 0, 0.3);
+    text-align: right;
+    border: solid #eeeeee;
     border-width: 0 1px 0 1px;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .d2h-del {

diff2html.js

@@ -3,7 +3,7 @@
  * Diff to HTML (diff2html.js)
  * Author: rtfpessoa
  * Date: Friday 29 August 2014
- * Last Update: Saturday 6 September 2014
+ * Last Update: Sunday 14 September 2014
  *
  * Diff command:
  *   git diff --word-diff-regex=. HEAD~1
@@ -35,7 +35,7 @@
          */
         Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
             var diffJson = generateDiffJson(diffInput);
-            return generateJsonHtml(diffJson, generateFileHtml);
+            return generateJsonHtml(diffJson);
         };
 
         /*
@@ -49,7 +49,22 @@
          * Generates pretty html from a json object
          */
         Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
-            return generateJsonHtml(diffJson, generateFileHtml);
+            return generateJsonHtml(diffJson);
+        };
+
+        /*
+         * Generates pretty side by side html from string diff input
+         */
+        Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) {
+            var diffJson = generateDiffJson(diffInput);
+            return generateSideBySideJsonHtml(diffJson);
+        };
+
+        /*
+         * Generates pretty side by side html from a json object
+         */
+        Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) {
+            return generateSideBySideJsonHtml(diffJson);
         };
 
         var generateDiffJson = function (diffInput) {
@@ -213,7 +228,7 @@
          * Line By Line HTML
          */
 
-        var generateJsonHtml = function (diffFiles, htmlTypeFunction) {
+        var generateJsonHtml = function (diffFiles) {
             return "<div class=\"d2h-wrapper\">\n" +
                 diffFiles.map(function (file) {
                     return "<div class=\"d2h-file-wrapper\">\n" +
@@ -228,7 +243,7 @@
                         "       <div class=\"d2h-code-wrapper\">\n" +
                         "         <table class=\"d2h-diff-table\">\n" +
                         "           <tbody class=\"d2h-diff-tbody\">\n" +
-                        "         " + htmlTypeFunction(file) +
+                        "         " + generateFileHtml(file) +
                         "           </tbody>\n" +
                         "         </table>\n" +
                         "       </div>\n" +
@@ -314,6 +329,197 @@
                 "</tr>\n";
         };
 
+        /*
+         * Side By Side HTML (work in progress)
+         */
+
+        var generateSideBySideJsonHtml = function (diffFiles) {
+            return "<div class=\"d2h-wrapper\">\n" +
+                diffFiles.map(function (file) {
+                    return "<div class=\"d2h-file-wrapper\">\n" +
+                        "     <div class=\"d2h-file-header\">\n" +
+                        "       <div class=\"d2h-file-stats\">\n" +
+                        "         <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
+                        "         <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
+                        "       </div>\n" +
+                        "       <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
+                        "     </div>\n" +
+                        "     <div class=\"d2h-files-diff\">\n" +
+                        "       <div class=\"d2h-file-side-diff\">\n" +
+                        "         <div class=\"d2h-code-wrapper\">\n" +
+                        "           <table class=\"d2h-diff-table\">\n" +
+                        "             <tbody class=\"d2h-diff-tbody\">\n" +
+                        "           " + generateLeftSideFileHtml(file) +
+                        "             </tbody>\n" +
+                        "           </table>\n" +
+                        "         </div>\n" +
+                        "       </div>\n" +
+                        "       <div class=\"d2h-file-side-diff\">\n" +
+                        "         <div class=\"d2h-code-wrapper\">\n" +
+                        "           <table class=\"d2h-diff-table\">\n" +
+                        "             <tbody class=\"d2h-diff-tbody\">\n" +
+                        "           " + generateRightSideFileHtml(file) +
+                        "             </tbody>\n" +
+                        "           </table>\n" +
+                        "         </div>\n" +
+                        "       </div>\n" +
+                        "     </div>\n" +
+                        "   </div>\n";
+                }).join("\n") +
+                "</div>\n";
+        };
+
+        var generateLeftSideFileHtml = function (file) {
+            return file.blocks.map(function (block) {
+
+                return "<tr>\n" +
+                    "  <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
+                    "  <td class=\"" + LINE_TYPE.INFO + "\" colspan=\"3\">" +
+                    "    <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
+                    "  </td>\n" +
+                    "</tr>\n" +
+
+                    block.lines.map(function (line) {
+
+                        var emptyLine = function () {
+                            var lineData = {};
+                            lineData.number = "";
+                            lineData.content = "";
+                            lineData.type = LINE_TYPE.CONTEXT;
+
+                            return lineData;
+                        };
+
+                        var escapedLine = escape(line.content);
+
+                        var lines = [];
+                        var lineData = {};
+
+                        switch (line.type) {
+                            case LINE_TYPE.INSERTS:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.oldNumber);
+                                lineData.content = removeInserts(escapedLine);
+                                lineData.type = LINE_TYPE.CONTEXT;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.ALL_NEW:
+                                lines.push(new emptyLine());
+                                break;
+                            case LINE_TYPE.DELETES:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.oldNumber);
+                                lineData.content = generateLineDeletions(escapedLine);
+                                lineData.type = LINE_TYPE.DELETES;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.ALL_DELETED:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.oldNumber);
+                                lineData.content = generateLineDeletions(escapedLine);
+                                lineData.type = LINE_TYPE.DELETES;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.INSERTS_AND_DELETES:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.oldNumber);
+                                lineData.content = generateLineDeletions(escapedLine);
+                                lineData.type = LINE_TYPE.DELETES;
+                                lines.push(lineData);
+                                break;
+                            default:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.oldNumber);
+                                lineData.content = escapedLine;
+                                lineData.type = LINE_TYPE.CONTEXT;
+                                lines.push(lineData);
+                                break;
+                        }
+
+                        return "<tr>\n" + lines.map(generateSingleLineHtml).join("\n") + "</tr>\n";
+                    }).join("\n");
+            }).join("\n");
+        };
+
+        var generateRightSideFileHtml = function (file) {
+            return file.blocks.map(function (block) {
+
+                return "<tr>\n" +
+                    "  <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
+                    "  <td class=\"" + LINE_TYPE.INFO + "\" colspan=\"3\">" +
+                    "    <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\"></div>" +
+                    "  </td>\n" +
+                    "</tr>\n" +
+
+                    block.lines.map(function (line) {
+
+                        var emptyLine = function () {
+                            var lineData = {};
+                            lineData.number = "";
+                            lineData.content = "";
+                            lineData.type = LINE_TYPE.CONTEXT;
+
+                            return lineData;
+                        };
+
+                        var escapedLine = escape(line.content);
+
+                        var lines = [];
+                        var lineData = {};
+
+                        switch (line.type) {
+                            case LINE_TYPE.INSERTS:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.newNumber);
+                                lineData.content = generateLineInsertions(escapedLine);
+                                lineData.type = LINE_TYPE.INSERTS;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.ALL_NEW:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.newNumber);
+                                lineData.content = generateLineInsertions(escapedLine);
+                                lineData.type = LINE_TYPE.INSERTS;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.DELETES:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.newNumber);
+                                lineData.content = removeDeletes(escapedLine);
+                                lineData.type = LINE_TYPE.CONTEXT;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.ALL_DELETED:
+                                lines.push(new emptyLine());
+                                break;
+                            case LINE_TYPE.INSERTS_AND_DELETES:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.newNumber);
+                                lineData.content = generateLineInsertions(escapedLine);
+                                lineData.type = LINE_TYPE.INSERTS;
+                                lines.push(lineData);
+                                break;
+                            default:
+                                lineData = {};
+                                lineData.number = valueOrEmpty(line.newNumber);
+                                lineData.content = escapedLine;
+                                lineData.type = LINE_TYPE.CONTEXT;
+                                lines.push(lineData);
+                                break;
+                        }
+
+                        return "<tr>\n" + lines.map(generateSingleLineHtml).join("\n") + "</tr>\n";
+                    }).join("\n");
+            }).join("\n");
+        };
+
+        var generateSingleLineHtml = function (line) {
+            return "<td class=\"d2h-code-side-linenumber " + line.type + "\">" + line.number + "</td>\n" +
+                "   <td class=\"" + line.type + "\">" +
+                "     <div class=\"d2h-code-side-line " + line.type + "\">" + line.content + "</div>" +
+                "   </td>\n";
+        };
+
         /*
          * HTML Helpers
          */
@@ -342,11 +548,6 @@
                 replace(/(\[-.*?-\])/g, "");
         };
 
-        var cleanLine = function (line) {
-            return line.slice(0).replace(/({\+(.*?)\+})/g, "$2").
-                replace(/(\[-(.*?)-\])/g, "$2");
-        };
-
         /*
          * Utils
          */

diff2html.min.css

@@ -1 +1 @@
-.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#f99;font-weight:700;border-radius:.2em}.d2h-code-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#6f7;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px}.line-num2{display:inline-block;float:right;width:30px}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px 0 0;cursor:pointer}.d2h-code-linenumber:not(:first-child){border-width:0 1px}.d2h-del{background-color:#f7c8c8;border-color:#e9aeae}.d2h-ins{background-color:#ceffce;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}
+.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;width:50%;margin-right:-4px}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-side-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:50px}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#f99;font-weight:700;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#6f7;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px;overflow:hidden;text-overflow:ellipsis}.line-num2{display:inline-block;float:right;width:30px;overflow:hidden;text-overflow:ellipsis}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer}.d2h-code-side-linenumber{position:absolute;width:35px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#f7c8c8;border-color:#e9aeae}.d2h-ins{background-color:#ceffce;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}

index.html

@@ -8,7 +8,7 @@
         Diff to HTML (template.html)
         Author: rtfpessoa
         Date: Friday 29 August 2014
-        Last Update: Saturday 6 September 2014
+        Last Update: Sunday 14 September 2014
     -->
 
     <!--<link rel="stylesheet" type="text/css" href="diff2html.css">-->
@@ -63,6 +63,8 @@
             var diffJson = Diff2Html.getJsonFromDiff(exInput);
             var lineByLineDiffHtml = Diff2Html.getPrettyHtmlFromJson(diffJson);
             document.getElementById('line-by-line').innerHTML = lineByLineDiffHtml;
+            var sideBySideDiffHtml = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
+            document.getElementById('side-by-side').innerHTML = sideBySideDiffHtml;
         }
     </script>
 
@@ -72,7 +74,12 @@
 
 <h2>Line by Line</h2>
 
-<div id="line-by-line" style="margin: 0 auto; width: 900px;">
+<div id="line-by-line" style="margin: 0 auto; max-width: 900px;">
+</div>
+
+<h2>Side by Side</h2>
+
+<div id="side-by-side" style="margin: 0 auto;">
 </div>
 </body>
 </html>