Merge pull request #23 from nmatpt/add_file_list

Show the list of changed files
rtfpessoa · Oct 19, 2015 · 440a9a4 · 440a9a4
2 parents 0bb7341 + c2fb4bf
commit 440a9a4
Show file tree

Hide file tree

Showing 13 changed files with 548 additions and 234 deletions.
diff --git a/README.md b/README.md
@@ -32,29 +32,25 @@ Diff to Html generates pretty HTML diffs from git diff output.
 
 ## How to use
 
-> Pretty Line-by-Line Html From Git Word Diff Output
+> Pretty HTML diff
 
-    Diff2Html.getPrettyHtmlFromDiff(exInput)
-
-> Pretty Side-by-Side Html From Git Word Diff Output
-
-    Diff2Html.getPrettySideBySideHtmlFromDiff(exInput)
+    Diff2Html.getPrettyHtml(exInput, configuration)
 
 > Intermediate Json From Git Word Diff Output
 
     Diff2Html.getJsonFromDiff(exInput)
 
-> Pretty Line-by-Line Html From Json
-
-    Diff2Html.getPrettyHtmlFromJson(exInput)
+> Check out the `index.html` for a complete example.
 
-> Pretty Side-by-Side Html From Json
+## Configuration
+The HTML output accepts a Javascript object with configuration. Possible options:
 
-    Diff2Html.getPrettySideBySideHtmlFromJson(exInput)
+  - `inputFormat`: the format of the input data: `'diff'` or `'json'`, default is `'diff'`
+  - `outputFormat`: the format of the output data: `'line-by-line'` or `'side-by-side'`, default is `'line-by-line'`
+  - `showFiles`: show a file list before the diff: `true` or `false`, default is `false`
 
-> Check out the `index.html` for a complete example.
 
-## Sintax Hightlight
+## Syntax Highlight
 
 > Add the dependencies.
 Choose one color scheme, and add the main highlight code.
@@ -90,8 +86,8 @@ document.addEventListener("DOMContentLoaded", function () {
     hljs.configure({languages: distinctLanguages});
 
     // generate and inject the diff HTML into the desired place
-    document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
-    document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
+    document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json' });
+    document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json', outputFormat: 'side-by-side' });
 
     // collect all the code lines and execute the highlight on them
     var codeLines = document.getElementsByClassName("d2h-code-line-ctn");

diff --git a/css/diff2html.css b/css/diff2html.css
@@ -207,3 +207,61 @@
     color: rgba(0, 0, 0, 0.3);
     border-color: #d5e4f2;
 }
+
+.d2h-file-list-wrapper {
+    margin-bottom: 10px;
+    padding: 0 10px;
+}
+
+.d2h-file-list-wrapper a {
+    text-decoration: none;
+    color: #3572b0;
+}
+
+.d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+}
+
+.d2h-file-list-header {
+    font-weight: bold;
+    margin-bottom: 5px;
+    text-align: left;
+    display: inline;
+    float:left;
+}
+
+.d2h-file-list-line {
+    text-align: left;
+    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.d2h-file-list-line .d2h-file-name  {
+    line-height: 21px;
+}
+
+.d2h-file-list {
+    display:none;
+}
+
+.d2h-clear {
+    display:block;
+    clear: both;
+}
+
+/* CSS only show/hide */
+.d2h-show {
+    display: none;
+    float:left;
+}
+.d2h-hide {
+    float:left;
+}
+.d2h-hide:target + .d2h-show {
+    display: inline;
+}
+.d2h-hide:target {
+    display: none;
+}
+.d2h-hide:target ~ .d2h-file-list {
+    display:block;
+}
diff --git a/dist/diff2html.css b/dist/diff2html.css
@@ -207,3 +207,61 @@
     color: rgba(0, 0, 0, 0.3);
     border-color: #d5e4f2;
 }
+
+.d2h-file-list-wrapper {
+    margin-bottom: 10px;
+    padding: 0 10px;
+}
+
+.d2h-file-list-wrapper a {
+    text-decoration: none;
+    color: #3572b0;
+}
+
+.d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+}
+
+.d2h-file-list-header {
+    font-weight: bold;
+    margin-bottom: 5px;
+    text-align: left;
+    display: inline;
+    float:left;
+}
+
+.d2h-file-list-line {
+    text-align: left;
+    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.d2h-file-list-line .d2h-file-name  {
+    line-height: 21px;
+}
+
+.d2h-file-list {
+    display:none;
+}
+
+.d2h-clear {
+    display:block;
+    clear: both;
+}
+
+/* CSS only show/hide */
+.d2h-show {
+    display: none;
+    float:left;
+}
+.d2h-hide {
+    float:left;
+}
+.d2h-hide:target + .d2h-show {
+    display: inline;
+}
+.d2h-hide:target {
+    display: none;
+}
+.d2h-hide:target ~ .d2h-file-list {
+    display:block;
+}