feature: Hide viewed files

2021-01-23 15:07:14 +00:00 · 2021-01-23 15:07:14 +00:00 · 316803df77
commit 316803df77
parent c178c2e91e
7 changed files with 719 additions and 603 deletions
--- a/README.md
+++ b/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

--- a/src/tests/diff2html-tests.ts
+++ b/src/tests/diff2html-tests.ts
--- a/src/tests/line-by-line-tests.ts
+++ b/src/tests/line-by-line-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\\">
--- a/src/tests/side-by-side-printer-tests.ts
+++ b/src/tests/side-by-side-printer-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\\">
+        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>",
-}
-`);
+            </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\\">
+        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>",
-}
-`);
+            </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\\">
+        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>",
-}
-`);
+            </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\\">
--- a/src/templates/generic-file-path.mustache
+++ b/src/templates/generic-file-path.mustache
@ -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>
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@ -10,6 +10,7 @@
 }

 .d2h-file-header {
+  display: flex;
  height: 35px;
  padding: 5px 10px;
  border-bottom: 1px solid #d8d8d8;
@ -67,6 +68,22 @@
  margin-bottom: 1em;
 }

+.d2h-file-collapse {
+  justify-content: flex-end;
+  display: flex;
+  cursor: pointer;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  align-items: center;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  padding: 4px 8px;
+}
+
+.d2h-file-collapse-input {
+  margin: 0 4px 0 0;
+}
+
 .d2h-diff-table {
  width: 100%;
  border-collapse: collapse;
--- a/src/ui/js/diff2html-ui-base.ts
+++ b/src/ui/js/diff2html-ui-base.ts
@ -15,6 +15,7 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
   * Smart selection is now enabled by default with vanilla CSS
   */
  smartSelection?: boolean;
+  fileContentToggle?: boolean;
 }

 export const defaultDiff2HtmlUIConfig = {
@ -28,6 +29,7 @@ export const defaultDiff2HtmlUIConfig = {
   * Smart selection is now enabled by default with vanilla CSS
   */
  smartSelection: true,
+  fileContentToggle: true,
 };

 export class Diff2HtmlUI {
@ -55,6 +57,7 @@ export class Diff2HtmlUI {
    if (this.config.synchronisedScroll) this.synchronisedScroll();
    if (this.config.highlight) this.highlightCode();
    if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible);
+    if (this.config.fileContentToggle) this.fileContentToggle();
  }

  synchronisedScroll(): void {
@ -108,6 +111,29 @@ export class Diff2HtmlUI {
    else hide();
  }

+  fileContentToggle(): void {
+    this.targetElement.querySelectorAll('.d2h-file-collapse').forEach(fileContentToggleBtn => {
+      const toggle: (e: Event) => void = e => {
+        if (fileContentToggleBtn === e.target) return;
+
+        const fileContentLineByLine: HTMLElement | null | undefined = fileContentToggleBtn
+          .closest('.d2h-file-wrapper')
+          ?.querySelector('.d2h-file-diff');
+        const fileContentSideBySide: HTMLElement | null | undefined = fileContentToggleBtn
+          .closest('.d2h-file-wrapper')
+          ?.querySelector('.d2h-files-diff');
+
+        if (fileContentLineByLine !== null && fileContentLineByLine !== undefined)
+          fileContentLineByLine.style.display = fileContentLineByLine.style.display === 'none' ? '' : 'none';
+
+        if (fileContentSideBySide !== null && fileContentSideBySide !== undefined)
+          fileContentSideBySide.style.display = fileContentSideBySide.style.display === 'none' ? '' : 'none';
+      };
+
+      fileContentToggleBtn.addEventListener('click', e => toggle(e));
+    });
+  }
+
  highlightCode(): void {
    if (this.hljs === null) {
      throw new Error('Missing a `highlight.js` implementation. Please provide one when instantiating Diff2HtmlUI.');