From dc3c4be2b2352e471ab9048252d1656cce26874a Mon Sep 17 00:00:00 2001
From: Rodrigo Fernandes <rtfrodrigo@gmail.com>
Date: Fri, 15 Oct 2021 22:36:23 +0100
Subject: [PATCH] wip: add highlight to lazy loading

---
 src/ui/js/diff2html-ui-base.ts | 82 ++++++++++++++++++++--------------
 1 file changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/ui/js/diff2html-ui-base.ts b/src/ui/js/diff2html-ui-base.ts
index 35c3f31..2de5ff4 100644
--- a/src/ui/js/diff2html-ui-base.ts
+++ b/src/ui/js/diff2html-ui-base.ts
@@ -44,6 +44,11 @@ export class Diff2HtmlUI {
 
   constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HLJSApi) {
     this.config = { ...defaultDiff2HtmlUIConfig, ...config };
+
+    if (config.lazy && (config.fileListStartVisible ?? true)) {
+      this.config.fileListStartVisible = true;
+    }
+
     this.diffFiles = typeof diffInput === 'string' ? parse(diffInput, this.config) : diffInput ?? [];
     this.diffHtml = diffInput !== undefined ? html(this.diffFiles, this.config) : target.innerHTML;
     this.targetElement = target;
@@ -85,13 +90,18 @@ export class Diff2HtmlUI {
     const fileListItems: NodeListOf<HTMLElement> = this.targetElement.querySelectorAll('.d2h-file-name');
     fileListItems.forEach((i, idx) =>
       i.addEventListener('click', () => {
-        console.log('HERE');
+        const fileId = i.getAttribute('href');
+        if (fileId && this.targetElement.querySelector(fileId)) {
+          return;
+        }
 
         const tmpDiv = document.createElement('div');
         tmpDiv.innerHTML = htmlFile(this.diffFiles[idx], this.config);
+        const fileElem = tmpDiv.querySelector('.d2h-file-wrapper');
 
-        if (tmpDiv.firstChild) {
-          this.targetElement.querySelector('.d2h-wrapper')?.appendChild(tmpDiv.firstChild);
+        if (fileElem) {
+          this.targetElement.querySelector('.d2h-wrapper')?.appendChild(fileElem);
+          this.highlightFile(fileElem);
         }
       }),
     );
@@ -159,43 +169,49 @@ export class Diff2HtmlUI {
 
     // Collect all the diff files and execute the highlight on their lines
     const files = this.targetElement.querySelectorAll('.d2h-file-wrapper');
-    files.forEach(file => {
+    files.forEach(this.highlightFile);
+  }
+
+  highlightFile(file: Element): void {
+    if (this.hljs === null) {
+      throw new Error('Missing a `highlight.js` implementation. Please provide one when instantiating Diff2HtmlUI.');
+    }
+
+    // HACK: help Typescript know that `this.hljs` is defined since we already checked it
+    if (this.hljs === null) return;
+    const language = file.getAttribute('data-lang');
+    const hljsLanguage = language ? getLanguage(language) : 'plaintext';
+
+    // Collect all the code lines and execute the highlight on them
+    const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
+    codeLines.forEach(line => {
       // HACK: help Typescript know that `this.hljs` is defined since we already checked it
       if (this.hljs === null) return;
-      const language = file.getAttribute('data-lang');
-      const hljsLanguage = language ? getLanguage(language) : 'plaintext';
 
-      // Collect all the code lines and execute the highlight on them
-      const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
-      codeLines.forEach(line => {
-        // HACK: help Typescript know that `this.hljs` is defined since we already checked it
-        if (this.hljs === null) return;
+      const text = line.textContent;
+      const lineParent = line.parentNode;
 
-        const text = line.textContent;
-        const lineParent = line.parentNode;
+      if (text === null || lineParent === null || !this.isElement(lineParent)) return;
 
-        if (text === null || lineParent === null || !this.isElement(lineParent)) return;
+      const result: HighlightResult = closeTags(
+        this.hljs.highlight(text, {
+          language: hljsLanguage,
+          ignoreIllegals: true,
+        }),
+      );
 
-        const result: HighlightResult = closeTags(
-          this.hljs.highlight(text, {
-            language: hljsLanguage,
-            ignoreIllegals: true,
-          }),
-        );
+      const originalStream = nodeStream(line);
+      if (originalStream.length) {
+        const resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
+        resultNode.innerHTML = result.value;
+        result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
+      }
 
-        const originalStream = nodeStream(line);
-        if (originalStream.length) {
-          const resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
-          resultNode.innerHTML = result.value;
-          result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
-        }
-
-        line.classList.add('hljs');
-        if (result.language) {
-          line.classList.add(result.language);
-        }
-        line.innerHTML = result.value;
-      });
+      line.classList.add('hljs');
+      if (result.language) {
+        line.classList.add(result.language);
+      }
+      line.innerHTML = result.value;
     });
   }