refactor code to side by side diff

diff2html.css

@@ -3,18 +3,15 @@
  * Diff to HTML (diff2html.css)
  * Author: rtfpessoa
  * Date: Friday 29 August 2014
- * Last Update: Friday 6 September 2014
+ * Last Update: Saturday 6 September 2014
  *
  */
 
-body {
-    text-align: center;
-}
-
 #d2h-wrapper {
-    display: inline-block;
+    display: block;
+    margin: 0 auto;
     text-align: left;
-    width: 920px;
+    width: 900px;
 }
 
 .d2h-file-wrapper {
@@ -27,50 +24,47 @@ body {
     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-block;
-    font-family: monospace, monospace;
     font-size: 12px;
+    text-align: center;
+    width: 70px;
 }
 
 .d2h-lines-added {
+    display: inline-block;
     background-color: #ceffce;
     border: 1px solid #b4e2b4;
     color: #399839;
     border-radius: 5px 0 0 5px;
-    padding: 5px;
+    padding: 2px;
+    width: 25px;
 }
 
 .d2h-lines-deleted {
+    display: inline-block;
     background-color: #f7c8c8;
     border: 1px solid #e9aeae;
     color: #c33;
     border-radius: 0 5px 5px 0;
-    padding: 5px;
+    padding: 2px;
+    width: 25px;
 }
 
 .d2h-file-name {
     display: inline-block;
-    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
     height: 33px;
     line-height: 33px;
-}
+    width: 750px;
-
-.d2h-file-diff {
-    overflow: auto;
 }
 
 .d2h-file-diff > div {
     width: 100%;
 }
 
-.d2h-code-wrapper {
-    overflow-x: auto;
-    overflow-y: hidden;
-}
-
 .d2h-diff-table {
     border-collapse: collapse;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -80,33 +74,41 @@ body {
 }
 
 .d2h-code-line {
-    overflow: scroll;
     white-space: pre;
     padding-left: 10px;
     padding-right: 10px;
+    height: 18px;
+    line-height: 18px;
+
+    width: 776px;
+    overflow: hidden;
 }
 
 .d2h-code-line del {
     display: inline-block;
     margin-top: -1px;
     text-decoration: none;
-    background-color: #ffb6ba;
+    background-color: #f99;
     font-weight: 700;
+    border-radius: 0.2em;
 }
 
 .d2h-code-line ins {
     display: inline-block;
     margin-top: -1px;
     text-decoration: none;
-    background-color: #97f295;
+    background-color: #6f7;
     font-weight: 700;
+    border-radius: 0.2em;
 }
 
 .d2h-code-linenumber {
     width: 1%;
-    min-width: 25px;
+    min-width: 30px;
     padding-left: 10px;
     padding-right: 10px;
+    height: 18px;
+    line-height: 18px;
     color: rgba(0, 0, 0, 0.3);
     text-align: right;
     border: solid #eeeeee;
@@ -114,22 +116,18 @@ body {
     cursor: pointer;
 }
 
-
+.d2h-del {
-.d2h-delete {
-    vertical-align: middle;
     background-color: #f7c8c8;
     border-color: #e9aeae;
 }
 
-.d2h-insert {
+.d2h-ins {
-    vertical-align: middle;
     background-color: #ceffce;
     border-color: #b4e2b4;
 }
 
 .d2h-info {
     background-color: #f8fafd;
-    vertical-align: middle;
     color: rgba(0, 0, 0, 0.3);
     border-color: #d5e4f2;
 }

diff2html.js

@@ -3,7 +3,7 @@
  * Diff to HTML (diff2html.js)
  * Author: rtfpessoa
  * Date: Friday 29 August 2014
- * Last Update: Friday 6 September 2014
+ * Last Update: Saturday 6 September 2014
  *
  * Diff command:
  *   git diff --word-diff-regex=. HEAD~1
@@ -14,14 +14,18 @@
 
     ClassVariable = (function () {
 
-        var CSS_STYLES = {
+        var LINE_TYPE = {
-            INFO: "d2h-info",
+            INSERTS: "d2h-ins",
-            CONTEXT: "d2h-context",
+            ALL_NEW: "d2h-all-ins",
-            NEW: "d2h-insert",
-            DELETED: "d2h-delete"
-        };
 
-        var BLOCK_HEADER_LINE = "...";
+            DELETES: "d2h-del",
+            ALL_DELETED: "d2h-all-del",
+
+            INSERTS_AND_DELETES: "d2h-ins-and-del",
+            CONTEXT: "d2h-cntx",
+
+            INFO: "d2h-info"
+        };
 
         function Diff2Html() {
         }
@@ -97,67 +101,77 @@
                 currentBlock.lines = [];
                 currentBlock.oldStartLine = oldLine = values[2];
                 currentBlock.newStartLine = newLine = values[4];
-
+                currentBlock.header = line;
-                /* create block header line */
-                var currentLine = {};
-                currentLine.type = CSS_STYLES.INFO;
-                currentLine.content = line;
-                currentLine.oldNumber = BLOCK_HEADER_LINE;
-                currentLine.newNumber = BLOCK_HEADER_LINE;
-
-                /* add line to block */
-                currentBlock.lines.push(currentLine);
             };
 
             var createLine = function (line) {
+                /* Line Types */
                 var isLineWithInserts = /{\+.*?\+}/.exec(line);
-                var isLineWithDeletes = /\[-.*?-\]/.exec(line);
                 var isNewLine = /^{\+.*?\+}$/.exec(line);
+
+                var isLineWithDeletes = /\[-.*?-\]/.exec(line);
+                var isRemovedLine = /^\[-.*?-\]$/.exec(line);
+
+                var isLineWithBoth = isLineWithInserts && isLineWithDeletes;
                 var isContextLine = !isLineWithInserts && !isLineWithDeletes;
 
                 var currentLine = {};
-
-                if (isContextLine) {
-                    currentLine = {};
-                    currentLine.type = CSS_STYLES.CONTEXT;
-                    currentLine.oldNumber = oldLine++;
-                    currentLine.newNumber = newLine++;
                 currentLine.content = line;
 
-                    currentBlock.lines.push(currentLine);
+                /* fill the line data */
-                } else {
+                if (isLineWithBoth) {
-
-                    if (isLineWithDeletes) {
                     currentFile.deletedLines++;
-
-                        currentLine = {};
-                        currentLine.type = CSS_STYLES.DELETED;
-                        currentLine.oldNumber = oldLine++;
-                        currentLine.newNumber = null;
-                        currentLine.content = line;
-
-                        currentBlock.lines.push(currentLine);
-
-                    }
-
-                    if (isLineWithInserts) {
                     currentFile.addedLines++;
 
-                        currentLine = {};
+                    currentLine.type = LINE_TYPE.INSERTS_AND_DELETES;
-                        currentLine.type = CSS_STYLES.NEW;
-                        currentLine.oldNumber = null;
-                        currentLine.newNumber = newLine++;
-                        currentLine.content = line;
-
-                        /* fix line numbers when new chars but no deletes and no whole new line  */
-                        if (isLineWithInserts && !isLineWithDeletes && !isNewLine) {
-                            currentFile.deletedLines++;
-
                     currentLine.oldNumber = oldLine++;
-                        }
+                    currentLine.newNumber = newLine++;
+
+                    currentBlock.lines.push(currentLine);
+
+                } else if (isContextLine) {
+
+                    currentLine.type = LINE_TYPE.CONTEXT;
+                    currentLine.oldNumber = oldLine++;
+                    currentLine.newNumber = newLine++;
+
+                    currentBlock.lines.push(currentLine);
+
+                } else if (isNewLine) {
+                    currentFile.addedLines++;
+
+                    currentLine.type = LINE_TYPE.ALL_NEW;
+                    currentLine.oldNumber = null;
+                    currentLine.newNumber = newLine++;
+
+                    currentBlock.lines.push(currentLine);
+
+                } else if (isRemovedLine) {
+                    currentFile.deletedLines++;
+
+                    currentLine.type = LINE_TYPE.ALL_DELETED;
+                    currentLine.oldNumber = oldLine++;
+                    currentLine.newNumber = null;
+
+                    currentBlock.lines.push(currentLine);
+
+                } else if (isLineWithInserts) {
+                    currentFile.addedLines++;
+
+                    currentLine.type = LINE_TYPE.INSERTS;
+                    currentLine.oldNumber = oldLine++;
+                    currentLine.newNumber = newLine++;
+
+                    currentBlock.lines.push(currentLine);
+
+                } else if (isLineWithDeletes) {
+                    currentFile.deletedLines++;
+
+                    currentLine.type = LINE_TYPE.DELETES;
+                    currentLine.oldNumber = oldLine++;
+                    currentLine.newNumber = newLine++;
 
                     currentBlock.lines.push(currentLine);
-                    }
 
                 }
             };
@@ -188,6 +202,10 @@
             return files;
         };
 
+        /*
+         * Line By Line HTML
+         */
+
         var generateJsonHtml = function (diffFiles) {
             return "<div id=\"d2h-wrapper\">\n" +
                 diffFiles.map(function (file) {
@@ -213,50 +231,123 @@
                 "</div>\n";
         };
 
+        var generateFileHtml = function (file) {
+            return file.blocks.map(function (block) {
+
+                return "<tr>\n" +
+                    "  <td class=\"d2h-code-linenumber " + LINE_TYPE.INFO + "\" colspan=\"2\"></td>\n" +
+                    "  <td class=\"" + LINE_TYPE.INFO + "\">" +
+                    "    <div class=\"d2h-code-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
+                    "  </td>\n" +
+                    "</tr>\n" +
+
+                    block.lines.map(function (line) {
+
+                        var newLine = function () {
+                            var lineData = {};
+                            lineData.oldLine = valueOrEmpty(line.oldNumber);
+                            lineData.newLine = valueOrEmpty(line.newNumber);
+
+                            return lineData;
+                        };
+
+                        var escapedLine = escape(line.content);
+
+                        var lines = [];
+                        var lineData = {};
+
+                        switch (line.type) {
+                            case LINE_TYPE.INSERTS:
+                            case LINE_TYPE.ALL_NEW:
+                                lineData = newLine();
+                                lineData.content = generateLineInsertions(escapedLine);
+                                lineData.type = LINE_TYPE.INSERTS;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.DELETES:
+                            case LINE_TYPE.ALL_DELETED:
+                                lineData = newLine();
+                                lineData.content = generateLineDeletions(escapedLine);
+                                lineData.type = LINE_TYPE.DELETES;
+                                lines.push(lineData);
+                                break;
+                            case LINE_TYPE.INSERTS_AND_DELETES:
+                                lineData = newLine();
+                                lineData.content = generateLineDeletions(escapedLine);
+                                lineData.type = LINE_TYPE.DELETES;
+                                lines.push(lineData);
+
+                                lineData = newLine();
+                                lineData.content = generateLineInsertions(escapedLine);
+                                lineData.type = LINE_TYPE.INSERTS;
+                                lines.push(lineData);
+                                break;
+                            default:
+                                lineData = newLine();
+                                lineData.content = escapedLine;
+                                lineData.type = LINE_TYPE.CONTEXT;
+                                lines.push(lineData);
+                                break;
+                        }
+
+                        return lines.map(generateLineHtml).join("\n");
+                    }).join("\n");
+            }).join("\n");
+        };
+
+        var generateLineHtml = function (line) {
+            return "<tr>\n" +
+                "  <td class=\"d2h-code-linenumber " + line.type + "\">" + line.oldLine + "</td>\n" +
+                "  <td class=\"d2h-code-linenumber " + line.type + "\">" + line.newLine + "</td>\n" +
+                "  <td class=\"" + line.type + "\">" +
+                "    <div class=\"d2h-code-line " + line.type + "\">" + line.content + "</div>" +
+                "  </td>\n" +
+                "</tr>\n";
+        };
+
+        /*
+         * Side By Side HTML (work in progress)
+         */
+
+        /*
+         * HTML Helpers
+         */
+
         var getDiffName = function (oldFilename, newFilename) {
             return oldFilename === newFilename ? newFilename : oldFilename + " -> " + newFilename;
         };
 
-        var generateFileHtml = function (file) {
-            return file.blocks.map(function (block) {
-                return block.lines.map(function (line) {
-
-                    var oldLine = valueOrEmpty(line.oldNumber);
-                    var newLine = valueOrEmpty(line.newNumber);
-
-                    var escapedLine = escape(line.content);
-
-                    if (line.type === CSS_STYLES.NEW) {
-                        escapedLine = generateLineInsertions(escapedLine);
-                    } else if (line.type === CSS_STYLES.DELETED) {
-                        escapedLine = generateLineDeletions(escapedLine);
-                    }
-
-                    return "<tr>\n" +
-                        "  <td class=\"d2h-code-linenumber " + line.type + "\">" + oldLine + "</td>\n" +
-                        "  <td class=\"d2h-code-linenumber " + line.type + "\">" + newLine + "</td>\n" +
-                        "  <td class=\"d2h-code-line " + line.type + "\"><div class=\"" + line.type + "\">" + escapedLine + "</pre></td>\n" +
-                        "</tr>\n";
-                }).join("\n");
-            }).join("\n");
-        };
-
         var generateLineInsertions = function (line) {
-            return line.replace(/(\[-.*?-\])/g, "").
+            return line.slice(0).replace(/(\[-.*?-\])/g, "").
                 replace(/({\+(.*?)\+})/g, "<ins>$2</ins>");
         };
 
         var generateLineDeletions = function (line) {
-            return line.replace(/({\+.*?\+})/g, "").
+            return line.slice(0).replace(/({\+.*?\+})/g, "").
                 replace(/(\[-(.*?)-\])/g, "<del>$2</del>");
         };
 
+        var removeDeletes = function (line) {
+            return line.slice(0).replace(/({\+.*?\+})/g, "").
+                replace(/(\[-.*?-\])/g, "");
+        };
+
+        var removeInserts = function (line) {
+            return line.slice(0).replace(/({\+.*?\+})/g, "").
+                replace(/(\[-.*?-\])/g, "");
+        };
+
+        var cleanLine = function (line) {
+            return line.slice(0).replace(/({\+(.*?)\+})/g, "$2").
+                replace(/(\[-(.*?)-\])/g, "$2");
+        };
+
         /*
          * Utils
          */
 
         function escape(str) {
-            return str
+            return str.slice(0)
                 .replace(/&/g, "&amp;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;")

index.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Diff to HTML by rtfpessoa</title>
+
+    <!--
+        Diff to HTML (template.html)
+        Author: rtfpessoa
+        Date: Friday 29 August 2014
+        Last Update: Saturday 6 September 2014
+    -->
+
+    <link rel="stylesheet" type="text/css" href="diff2html.css">
+
+    <script type="text/javascript" src="diff2html.js"></script>
+    <script>
+        var exInput = 'diff --git a/src/app/language/en.json b/src/app/language/en.json\n' +
+                'index ccf92c9..68b8345 100644\n' +
+                '--- a/src/app/language/en.json\n' +
+                '+++ b/src/app/language/en.json\n' +
+                '@@ -270,5 +270,6 @@\n' +
+                '    "Open Item Details": "Open Item Details",\n' +
+                '    "Add Item to Favorites": "Add Item to Favorites",\n' +
+                '    "Mark as Seen": "Mark as Seen",\n' +
+                '    "Open Settings": "Open Settings"{+,+}\n' +
+                '{+  "Custom...": "Custom..."+}\n' +
+                '}\n' +
+                'diff --git a/src/app/language/fr.json b/src/app/language/fr.json\n' +
+                'index 9c773c5..8fb637a 100644\n' +
+                '--- a/src/app/language/fr.json\n' +
+                '+++ b/src/app/language/fr.json\n' +
+                '@@ -266,5 +266,6 @@\n' +
+                '    "Add Item to Favorites": "Ajouter aux favoris",\n' +
+                '    "Mark as Seen": "Marquer comme vu",\n' +
+                '    "Open this screen": "Afficher cette page",\n' +
+                '    "Open Settings": "Ouvrir les Réglages"{+,+}\n' +
+                '{+  "Custom...": "Ajouter un fichier..."+}\n' +
+                '}\n' +
+                'diff --git a/src/app/vendor/videojsplugins.js b/src/app/vendor/videojsplugins.js\n' +
+                'index 10856e3..892b7ca 100644\n' +
+                '--- a/src/app/vendor/videojsplugins.js\n' +
+                '+++ b/src/app/vendor/videojsplugins.js\n' +
+                '@@ -83,7 +83,7 @@ videojs.plugin(\'customSubtitles\', function() {\n' +
+                '      options[\'track\'] = {\n' +
+                '        kind: function() { return \'subtitles\'; },\n' +
+                '        player: player,\n' +
+                '        label: function(){ return [-\'-]{+i18n.__("+}Custom...[-\'-]{+")+} },\n' +
+                '        dflt: function(){ return false; },\n' +
+                '        mode: function(){ return false; }\n' +
+                '      };\n' +
+                '@@ -107,7 +107,7 @@ videojs.plugin(\'customSubtitles\', function() {\n' +
+                '\n' +
+                '  CustomTrackMenuItem.prototype.loadSubtitle = function(filePath) {\n' +
+                '    // TODO Delete old track\n' +
+                '    this.track = this.player_.addTextTrack(\'subtitles\', [-\'-]{+i18n.__("+}Custom...[-\'-]{+")+}, \'00\', { src: filePath });\n' +
+                '    vjs.TextTrackMenuItem.prototype.onClick.call(this); // redirect to TextTrackMenuItem.onClick\n' +
+                '  }\n';
+
+        document.onreadystatechange = function () {
+            var diffHtml = Diff2Html.getPrettyHtmlFromDiff(exInput);
+            document.getElementsByTagName('body')[0].innerHTML = diffHtml;
+        }
+    </script>
+
+</head>
+<body>
+</body>
+</html>

template.html

@@ -1,69 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>Diff to HTML by rtfpessoa</title>
-
-    <!--
-        Diff to HTML (template.html)
-        Author: rtfpessoa
-        Date: Friday 29 August 2014
-        Last Update: Friday 6 September 2014
-    -->
-
-    <link rel="stylesheet" type="text/css" href="diff2html.css">
-
-    <script type="text/javascript" src="diff2html.min.js"></script>
-    <script>
-        var exInput = 'diff --git a/src/app/language/en.json b/src/app/language/en.json\n' +
-        'index ccf92c9..68b8345 100644\n' +
-        '--- a/src/app/language/en.json\n' +
-        '+++ b/src/app/language/en.json\n' +
-        '@@ -270,5 +270,6 @@\n' +
-        '    "Open Item Details": "Open Item Details",\n' +
-        '    "Add Item to Favorites": "Add Item to Favorites",\n' +
-        '    "Mark as Seen": "Mark as Seen",\n' +
-        '    "Open Settings": "Open Settings"{+,+}\n' +
-        '{+  "Custom...": "Custom..."+}\n' +
-        '}\n' +
-        'diff --git a/src/app/language/fr.json b/src/app/language/fr.json\n' +
-        'index 9c773c5..8fb637a 100644\n' +
-        '--- a/src/app/language/fr.json\n' +
-        '+++ b/src/app/language/fr.json\n' +
-        '@@ -266,5 +266,6 @@\n' +
-        '    "Add Item to Favorites": "Ajouter aux favoris",\n' +
-        '    "Mark as Seen": "Marquer comme vu",\n' +
-        '    "Open this screen": "Afficher cette page",\n' +
-        '    "Open Settings": "Ouvrir les Réglages"{+,+}\n' +
-        '{+  "Custom...": "Ajouter un fichier..."+}\n' +
-        '}\n' +
-        'diff --git a/src/app/vendor/videojsplugins.js b/src/app/vendor/videojsplugins.js\n' +
-        'index 10856e3..892b7ca 100644\n' +
-        '--- a/src/app/vendor/videojsplugins.js\n' +
-        '+++ b/src/app/vendor/videojsplugins.js\n' +
-        '@@ -83,7 +83,7 @@ videojs.plugin(\'customSubtitles\', function() {\n' +
-        '      options[\'track\'] = {\n' +
-        '        kind: function() { return \'subtitles\'; },\n' +
-        '        player: player,\n' +
-        '        label: function(){ return [-\'-]{+i18n.__("+}Custom...[-\'-]{+")+} },\n' +
-        '        dflt: function(){ return false; },\n' +
-        '        mode: function(){ return false; }\n' +
-        '      };\n' +
-        '@@ -107,7 +107,7 @@ videojs.plugin(\'customSubtitles\', function() {\n' +
-        '\n' +
-        '  CustomTrackMenuItem.prototype.loadSubtitle = function(filePath) {\n' +
-        '    // TODO Delete old track\n' +
-        '    this.track = this.player_.addTextTrack(\'subtitles\', [-\'-]{+i18n.__("+}Custom...[-\'-]{+")+}, \'00\', { src: filePath });\n' +
-        '    vjs.TextTrackMenuItem.prototype.onClick.call(this); // redirect to TextTrackMenuItem.onClick\n' +
-        '  }\n';
-
-        document.onreadystatechange = function () {
-          var content = Diff2Html.getPrettyHtmlFromDiff(exInput);
-          document.getElementsByTagName('body')[0].innerHTML = content;
-        }
-    </script>
-
-</head>
-<body>
-</body>
-</html>