diff --git a/README.md b/README.md index 949e756..0319fb1 100644 --- a/README.md +++ b/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 diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css index e387989..31c0c90 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 e4f9ad5..b25e209 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: 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 */