feat: sticky file headers

Add support for sticky file headers by adding a `stickyFileHeaders`
option to the `Diff2HtmlUI`. By default this feature is disabled. Also
document this option in the README.

The feature is implemented through an optional CSS class on top of the
pre-existing `.d2h-file-header` class. The new class is added on all
file headers if the option is set to `true` (or the `stickyFileHeaders`
method is called).

This class, `.d2h-sticky-header`, has the minimum amount of styling to
get the desired effect. The `position` and `top` values make the headers
stick to the top as long as the wrapper is in the view. The `z-index`
value is needed to ensure the header is displayed over all other content
in the wrapper. In particular, from my testing in Firefox (106.0.2), the
line numbers would display over the header if the `z-index` value isn't
set.

Author: ericcornelissen

README.md

@@ -156,6 +156,7 @@ draw(): void
 synchronisedScroll(): void
 fileListToggle(startVisible: boolean): void
 highlightCode(): void
+stickyFileHeader(): 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`
+- `stickyFileHeader`: make file headers sticky: `true` or `false`, default is `false`
 - [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: false,
 };
 
 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 {
@@ -188,6 +191,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
    */