Merge pull request #358 from mrfyda/feature/collapse-viewed

feature: Hide viewed files

Author: rtfpessoa

README.md

@@ -316,6 +316,7 @@ highlightCode(): void
 - `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true`
 - `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true`
 - `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false`
+- `fileContentToggle`: allow each file contents to be toggled: `true` or `false`, default is `true`
 
 > NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
 

src/__tests__/diff2html-tests.ts

@@ -180,6 +180,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/name.js</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -220,6 +224,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/name.js</span>
             <span class=\\"d2h-tag d2h-added d2h-added-tag\\">ADDED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -260,6 +268,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/name.js</span>
             <span class=\\"d2h-tag d2h-deleted d2h-deleted-tag\\">DELETED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -300,6 +312,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/{name1.js → name2.js}</span>
             <span class=\\"d2h-tag d2h-moved d2h-moved-tag\\">RENAMED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -391,6 +407,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -461,6 +481,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">

src/__tests__/line-by-line-tests.ts

@@ -78,81 +78,81 @@ describe('SideBySideRenderer', () => {
       const fileHtml = sideBySideRenderer.generateFileHtml(file);
 
       expect(fileHtml).toMatchInlineSnapshot(`
-Object {
-  "left": "<tr>
-    <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
-    <td class=\\"d2h-info\\">
-        <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
-    </td>
-</tr><tr>
-    <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
-      19
-    </td>
-    <td class=\\"d2h-cntx\\">
-        <div class=\\"d2h-code-side-line d2h-cntx\\">
-            <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-            <span class=\\"d2h-code-line-ctn\\">context</span>
-        </div>
-    </td>
-</tr><tr>
-    <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
-      20
-    </td>
-    <td class=\\"d2h-del d2h-change\\">
-        <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
-            <span class=\\"d2h-code-line-prefix\\">-</span>
-            <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
-        </div>
-    </td>
-</tr><tr>
-    <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
-      
-    </td>
-    <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
-        <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
-            <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-            <span class=\\"d2h-code-line-ctn\\"><br></span>
-        </div>
-    </td>
-</tr>",
-  "right": "<tr>
-    <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
-    <td class=\\"d2h-info\\">
-        <div class=\\"d2h-code-side-line d2h-info\\"></div>
-    </td>
-</tr><tr>
-    <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
-      19
-    </td>
-    <td class=\\"d2h-cntx\\">
-        <div class=\\"d2h-code-side-line d2h-cntx\\">
-            <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-            <span class=\\"d2h-code-line-ctn\\">context</span>
-        </div>
-    </td>
-</tr><tr>
-    <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
-      20
-    </td>
-    <td class=\\"d2h-ins d2h-change\\">
-        <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
-            <span class=\\"d2h-code-line-prefix\\">+</span>
-            <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
-        </div>
-    </td>
-</tr><tr>
-    <td class=\\"d2h-code-side-linenumber d2h-ins\\">
-      21
-    </td>
-    <td class=\\"d2h-ins\\">
-        <div class=\\"d2h-code-side-line d2h-ins\\">
-            <span class=\\"d2h-code-line-prefix\\">+</span>
-            <span class=\\"d2h-code-line-ctn\\">another added</span>
-        </div>
-    </td>
-</tr>",
-}
-`);
+        Object {
+          "left": "<tr>
+            <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
+            <td class=\\"d2h-info\\">
+                <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
+            </td>
+        </tr><tr>
+            <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
+              19
+            </td>
+            <td class=\\"d2h-cntx\\">
+                <div class=\\"d2h-code-side-line d2h-cntx\\">
+                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
+                    <span class=\\"d2h-code-line-ctn\\">context</span>
+                </div>
+            </td>
+        </tr><tr>
+            <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
+              20
+            </td>
+            <td class=\\"d2h-del d2h-change\\">
+                <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
+                    <span class=\\"d2h-code-line-prefix\\">-</span>
+                    <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
+                </div>
+            </td>
+        </tr><tr>
+            <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
+              
+            </td>
+            <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
+                <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
+                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
+                    <span class=\\"d2h-code-line-ctn\\"><br></span>
+                </div>
+            </td>
+        </tr>",
+          "right": "<tr>
+            <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
+            <td class=\\"d2h-info\\">
+                <div class=\\"d2h-code-side-line d2h-info\\"></div>
+            </td>
+        </tr><tr>
+            <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
+              19
+            </td>
+            <td class=\\"d2h-cntx\\">
+                <div class=\\"d2h-code-side-line d2h-cntx\\">
+                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
+                    <span class=\\"d2h-code-line-ctn\\">context</span>
+                </div>
+            </td>
+        </tr><tr>
+            <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
+              20
+            </td>
+            <td class=\\"d2h-ins d2h-change\\">
+                <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
+                    <span class=\\"d2h-code-line-prefix\\">+</span>
+                    <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
+                </div>
+            </td>
+        </tr><tr>
+            <td class=\\"d2h-code-side-linenumber d2h-ins\\">
+              21
+            </td>
+            <td class=\\"d2h-ins\\">
+                <div class=\\"d2h-code-side-line d2h-ins\\">
+                    <span class=\\"d2h-code-line-prefix\\">+</span>
+                    <span class=\\"d2h-code-line-ctn\\">another added</span>
+                </div>
+            </td>
+        </tr>",
+        }
+      `);
     });
   });
 
@@ -168,31 +168,31 @@ Object {
       });
 
       expect(fileHtml).toMatchInlineSnapshot(`
-Object {
-  "left": "<tr>
-    <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
-      
-    </td>
-    <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
-        <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
-            <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-            <span class=\\"d2h-code-line-ctn\\"><br></span>
-        </div>
-    </td>
-</tr>",
-  "right": "<tr>
-    <td class=\\"d2h-code-side-linenumber d2h-ins\\">
-      30
-    </td>
-    <td class=\\"d2h-ins\\">
-        <div class=\\"d2h-code-side-line d2h-ins\\">
-            <span class=\\"d2h-code-line-prefix\\">+</span>
-            <span class=\\"d2h-code-line-ctn\\">test</span>
-        </div>
-    </td>
-</tr>",
-}
-`);
+        Object {
+          "left": "<tr>
+            <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
+              
+            </td>
+            <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
+                <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
+                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
+                    <span class=\\"d2h-code-line-ctn\\"><br></span>
+                </div>
+            </td>
+        </tr>",
+          "right": "<tr>
+            <td class=\\"d2h-code-side-linenumber d2h-ins\\">
+              30
+            </td>
+            <td class=\\"d2h-ins\\">
+                <div class=\\"d2h-code-side-line d2h-ins\\">
+                    <span class=\\"d2h-code-line-prefix\\">+</span>
+                    <span class=\\"d2h-code-line-ctn\\">test</span>
+                </div>
+            </td>
+        </tr>",
+        }
+      `);
     });
     it('should work for deletions', () => {
       const hoganUtils = new HoganJsUtils({});
@@ -208,31 +208,31 @@ Object {
       );
 
       expect(fileHtml).toMatchInlineSnapshot(`
-Object {
-  "left": "<tr>
-    <td class=\\"d2h-code-side-linenumber d2h-del\\">
-      30
-    </td>
-    <td class=\\"d2h-del\\">
-        <div class=\\"d2h-code-side-line d2h-del\\">
-            <span class=\\"d2h-code-line-prefix\\">-</span>
-            <span class=\\"d2h-code-line-ctn\\">test</span>
-        </div>
-    </td>
-</tr>",
-  "right": "<tr>
-    <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
-      
-    </td>
-    <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
-        <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
-            <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-            <span class=\\"d2h-code-line-ctn\\"><br></span>
-        </div>
-    </td>
-</tr>",
-}
-`);
+        Object {
+          "left": "<tr>
+            <td class=\\"d2h-code-side-linenumber d2h-del\\">
+              30
+            </td>
+            <td class=\\"d2h-del\\">
+                <div class=\\"d2h-code-side-line d2h-del\\">
+                    <span class=\\"d2h-code-line-prefix\\">-</span>
+                    <span class=\\"d2h-code-line-ctn\\">test</span>
+                </div>
+            </td>
+        </tr>",
+          "right": "<tr>
+            <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
+              
+            </td>
+            <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
+                <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
+                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
+                    <span class=\\"d2h-code-line-ctn\\"><br></span>
+                </div>
+            </td>
+        </tr>",
+        }
+      `);
     });
   });
 
@@ -286,6 +286,10 @@ Object {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">
@@ -367,6 +371,10 @@ Object {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">

src/__tests__/side-by-side-printer-tests.ts

@@ -3,3 +3,7 @@
     <span class="d2h-file-name">{{fileDiffName}}</span>
     {{>fileTag}}
 </span>
+<label class="d2h-file-collapse">
+    <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+    Viewed
+</label>