From 7d4a5dce6f5e17c6ae2d09f62d503178bfe81d3f Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Sun, 30 Oct 2022 13:05:53 +0100
Subject: [PATCH 1/2] 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.
---
 README.md                      | 2 ++
 src/ui/css/diff2html.css       | 5 +++++
 src/ui/js/diff2html-ui-base.ts | 9 +++++++++
 3 files changed, 16 insertions(+)

diff --git a/README.md b/README.md
index 949e7564..e88da3f1 100644
--- a/README.md
+++ b/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
diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 8d686824..362847ad 100644
--- a/src/ui/css/diff2html.css
+++ b/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;
diff --git a/src/ui/js/diff2html-ui-base.ts b/src/ui/js/diff2html-ui-base.ts
index 9a84326f..a1299a8c 100644
--- a/src/ui/js/diff2html-ui-base.ts
+++ b/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
    */

From 4dae65d5c7e1bc99b7fd04a38f14c91144ee50c6 Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Mon, 31 Oct 2022 09:47:31 +0100
Subject: [PATCH 2/2] feat: enable sticky file headers by default

Update the stickyFileHeaders default value to `true` so that it is
enabled by default. Also correct the name of this option in the
documentation by adding the missing trailing "s".
---
 README.md                      | 4 ++--
 src/ui/js/diff2html-ui-base.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e88da3f1..0319fb17 100644
--- a/README.md
+++ b/README.md
@@ -156,7 +156,7 @@ draw(): void
 synchronisedScroll(): void
 fileListToggle(startVisible: boolean): void
 highlightCode(): void
-stickyFileHeader(): void
+stickyFileHeaders(): void
 ```
 
 ### Diff2HtmlUI Configuration
@@ -166,7 +166,7 @@ stickyFileHeader(): 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`
+- `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
diff --git a/src/ui/js/diff2html-ui-base.ts b/src/ui/js/diff2html-ui-base.ts
index a1299a8c..c81f7130 100644
--- a/src/ui/js/diff2html-ui-base.ts
+++ b/src/ui/js/diff2html-ui-base.ts
@@ -32,7 +32,7 @@ export const defaultDiff2HtmlUIConfig = {
    */
   smartSelection: true,
   fileContentToggle: true,
-  stickyFileHeaders: false,
+  stickyFileHeaders: true,
 };
 
 export class Diff2HtmlUI {