Update to newest diff2html using the UI lib

rtfpessoa · rtfpessoa · commit 5c5c60569e29 · 2016-02-09T21:28:01.000Z
diff --git a/dist/template.html b/dist/template.html
@@ -9,35 +9,30 @@
         Author: rtfpessoa
     -->
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css">
-    <!--css-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
+
+    <!--diff2html-css-->
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/languages/scala.min.js"></script>
+
+    <!--diff2html-js-ui-->
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
     <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            // collect all the distinct languages in the HTML
-            var distinctLanguages = [];
-            [].forEach.call(document.getElementsByClassName("d2h-file-wrapper"), function(file) {
-                distinctLanguages.indexOf(file.dataset.lang) === -1 && distinctLanguages.push(file.dataset.lang);
-            });
-
-            // pass the languages to the highlightjs plugin
-            hljs.configure({languages: distinctLanguages});
-
-            // collect all the code lines and execute the highlight on them
-            var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
-            [].forEach.call(codeLines, function(line) {
-                hljs.highlightBlock(line);
-            });
+        $(document).ready(function() {
+            var diff2htmlUi = new Diff2HtmlUI();
+            diff2htmlUi.fileListCloseable('#diff', false);
+            diff2htmlUi.highlightCode('#diff');
         });
     </script>
 </head>
 <body style="text-align: center; font-family: 'Source Sans Pro',sans-serif;">
 <h1>Diff to HTML by <a href="https://github.com/rtfpessoa">rtfpessoa</a></h1>
 
-<div>
-    <!--diff-->
+<div id="diff">
+    <!--diff2html-diff-->
 </div>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "diff2html-cli",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "homepage": "https://www.github.com/rtfpessoa/diff2html-cli",
   "description": "Fast Diff to colorized HTML",
   "keywords": [
@@ -46,7 +46,7 @@
   "main": "./src/main.js",
   "dependencies": {
     "copy-paste": "^1.1.4",
-    "diff2html": "~1.3.0",
+    "diff2html": "~1.3.1",
     "extend": "^3.0.0",
     "open": "^0.0.5",
     "request": "^2.69.0",
diff --git a/src/cli.js b/src/cli.js
@@ -92,16 +92,16 @@
     var templatePath = path.resolve(__dirname, '..', 'dist', 'template.html');
     var template = utils.readFileSync(templatePath);
 
-    var cssFilePath = path.resolve(__dirname, '..', 'node_modules', 'diff2html', 'css', 'diff2html.css');
-    var cssFallbackPath = path.resolve(__dirname, '..', 'dist', 'diff2html.css');
-
-    if (!utils.existsSync(cssFilePath)) cssFilePath = cssFallbackPath;
-
+    var cssFilePath = path.resolve(__dirname, '..', 'node_modules', 'diff2html', 'dist', 'diff2html.min.css');
     var cssContent = utils.readFileSync(cssFilePath);
 
+    var jsUiFilePath = path.resolve(__dirname, '..', 'node_modules', 'diff2html', 'dist', 'diff2html-ui.min.js');
+    var jsUiContent = utils.readFileSync(jsUiFilePath);
+
     return template
-      .replace('<!--css-->', '<style>\n' + cssContent + '\n</style>')
-      .replace('<!--diff-->', content);
+      .replace('<!--diff2html-css-->', '<style>\n' + cssContent + '\n</style>')
+      .replace('<!--diff2html-js-ui-->', '<script>\n' + jsUiContent + '\n</script>')
+      .replace('<!--diff2html-diff-->', content);
   };
 
   /*
