Merge pull request #456 from ericcornelissen/455-sticky-file-headers

Implement support for sticky file headers

README.md

@@ -156,6 +156,7 @@ draw(): void
 synchronisedScroll(): void
 fileListToggle(startVisible: boolean): void
 highlightCode(): void
+stickyFileHeaders(): void
 ```
 
 ### Diff2HtmlUI Configuration
@@ -165,6 +166,7 @@ highlightCode(): void
 - `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`
+- `stickyFileHeaders`: make file headers sticky: `true` or `false`, default is `true`
 - [All the options](#diff2html-configuration) from Diff2Html are also valid configurations in Diff2HtmlUI
 
 ### Diff2HtmlUI Browser

src/ui/css/diff2html.css

@@ -17,6 +17,11 @@
   background-color: #f7f7f7;
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+.d2h-file-header.d2h-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
 
 .d2h-file-stats {
   display: -webkit-box;

src/ui/js/diff2html-ui-base.ts

@@ -16,6 +16,7 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
    */
   smartSelection?: boolean;
   fileContentToggle?: boolean;
+  stickyFileHeaders?: boolean;
 }
 
 export const defaultDiff2HtmlUIConfig = {
@@ -31,6 +32,7 @@ export const defaultDiff2HtmlUIConfig = {
    */
   smartSelection: true,
   fileContentToggle: true,
+  stickyFileHeaders: true,
 };
 
 export class Diff2HtmlUI {
@@ -54,6 +56,7 @@ export class Diff2HtmlUI {
     if (this.config.highlight) this.highlightCode();
     if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible);
     if (this.config.fileContentToggle) this.fileContentToggle();
+    if (this.config.stickyFileHeaders) this.stickyFileHeaders();
   }
 
   synchronisedScroll(): void {
@@ -192,6 +195,12 @@ export class Diff2HtmlUI {
     });
   }
 
+  stickyFileHeaders(): void {
+    this.targetElement.querySelectorAll('.d2h-file-header').forEach(header => {
+      header.classList.add('d2h-sticky-header');
+    });
+  }
+
   /**
    * @deprecated since version 3.1.0
    */