8000 wip: add highlight to lazy loading · rtfpessoa/diff2html@dc3c4be · GitHub
[go: up one dir, main page]
Skip to content

Commit dc3c4be

Browse files
rtfpessoartfpessoa
committed
wip: add highlight to lazy loading
1 parent 3824999 commit dc3c4be

File tree

1 file changed

+53
-37
lines changed

1 file changed

+53
-37
lines changed

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

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,11 @@ export class Diff2HtmlUI {
4444

4545
constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HLJSApi) {
4646
this.config = { ...defaultDiff2HtmlUIConfig, ...config };
47+
48+
if (config.lazy && (config.fileListStartVisible ?? true)) {
49+
this.config.fileListStartVisible = true;
50+
}
51+
4752
this.diffFiles = typeof diffInput === 'string' ? parse(diffInput, this.config) : diffInput ?? [];
4853
this.diffHtml = diffInput !== undefined ? html(this.diffFiles, this.config) : target.innerHTML;
4954
this.targetElement = target;
@@ -85,13 +90,18 @@ export class Diff2HtmlUI {
8590
const fileListItems: NodeListOf<HTMLElement> = this.targetElement.querySelectorAll('.d2h-file-name');
8691
fileListItems.forEach((i, idx) =>
8792
i.addEventListener('click', () => {
88-
console.log('HERE');
93+
const fileId = i.getAttribute('href');
94+
if (fileId && this.targetElement.querySelector(fileId)) {
95+
return;
96+
}
8997

9098
const tmpDiv = document.createElement('div');
9199
tmpDiv.innerHTML = htmlFile(this.diffFiles[idx], this.config);
100+
const fileElem = tmpDiv.querySelector('.d2h-file-wrapper');
92101

93-
if (tmpDiv.firstChild) {
94-
this.targetElement.querySelector('.d2h-wrapper')?.appendChild(tmpDiv.firstChild);
102+
if (fileElem) {
103+
this.targetElement.querySelector('.d2h-wrapper')?.appendChild(fileElem);
104+
this.highlightFile(fileElem);
95105
}
96106
}),
97107
);
@@ -159,43 +169,49 @@ export class Diff2HtmlUI {
159169

160170
// Collect all the diff files and execute the highlight on their lines
161171
const files = this.targetElement.querySelectorAll('.d2h-file-wrapper');
162-
files.forEach(file => {
172+
files.forEach(this.highlightFile);
173+
}
174+
175+
highlightFile(file: Element): void {
176+
if (this.hljs === null) {
177+
throw new Error('Missing a `highlight.js` implementation. Please provide one when instantiating Diff2HtmlUI.');
178+
}
179+
180+
// HACK: help Typescript know that `this.hljs` is defined since we already checked it
181+
if (this.hljs === null) return;
182+
const language = file.getAttribute('data-lang');
183+
const hljsLanguage = language ? getLanguage(language) : 'plaintext';
184+
185+
// Collect all the code lines and execute the highlight on them
186+
const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
187+
codeLines.forEach(line => {
163188
// HACK: help Typescript know that `this.hljs` is defined since we already checked it
164189
if (this.hljs === null) return;
165-
const language = file.getAttribute('data-lang');
166-
const hljsLanguage = language ? getLanguage(language) : 'plaintext';
167-
168-
// Collect all the code lines and execute the highlight on them
169-
const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
170-
codeLines.forEach(line => {
171-
// HACK: help Typescript know that `this.hljs` is defined since we already checked it
172-
if (this.hljs === null) return;
173-
174-
const text = line.textContent;
175-
const lineParent = line.parentNode;
176-
177-
if (text === null || lineParent === null || !this.isElement(lineParent)) return;
178-
179-
const result: HighlightResult = closeTags(
180-
this.hljs.highlight(text, {
181-
language: hljsLanguage,
182-
ignoreIllegals: true,
183-
}),
184-
);
185-
186-
const originalStream = nodeStream(line);
187-
if (originalStream.length) {
188-
const resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
189-
resultNode.innerHTML = result.value;
190-
result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
191-
}
192190

193-
line.classList.add('hljs');
194-
if (result.language) {
195-
line.classList.add(result.language);
196-
}
197-
line.innerHTML = result.value;
198-
});
191+
const text = line.textContent;
192+
const lineParent = line.parentNode;
193+
194+
if (text === null || lineParent === null || !this.isElement(lineParent)) return;
195+
196+
const result: HighlightResult = closeTags(
197+
this.hljs.highlight(text, {
198+
language: hljsLanguage,
199+
ignoreIllegals: true,
200+
}),
201+
);
202+
203+
const originalStream = nodeStream(line);
204+
if (originalStream.length) {
205+
const resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
206+
resultNode.innerHTML = result.value;
207+
result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
208+
}
209+
210+
line.classList.add('hljs');
211+
if (result.language) {
212+
line.classList.add(result.language);
213+
}
214+
line.innerHTML = result.value;
199215
});
200216
}
201217

0 commit comments

Comments
 (0)
0