feature: Hide viewed files

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

@@ -211,6 +211,10 @@ describe('Diff2Html', () => {
                 <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\\">
@@ -264,6 +268,10 @@ describe('Diff2Html', () => {
                 <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\\">
@@ -337,6 +345,10 @@ describe('Diff2Html', () => {
                 <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\\">
@@ -390,6 +402,10 @@ describe('Diff2Html', () => {
                 <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\\">
@@ -457,6 +473,10 @@ describe('Diff2Html', () => {
                 <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\\">
@@ -544,6 +564,10 @@ describe('Diff2Html', () => {
                 <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\\">
@@ -634,6 +658,10 @@ describe('Diff2Html', () => {
                 <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\\">CHANGELOG.md</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\\">
@@ -876,6 +904,10 @@ describe('Diff2Html', () => {
                 <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\\">src/index.html</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\\">
@@ -974,6 +1006,10 @@ describe('Diff2Html', () => {
                 <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\\">web/assets/javascripts/application.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\\">

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\\">

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

@@ -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/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>

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;

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.');