luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip: add highlight to lazy loading

Browse source
This commit is contained in:
Rodrigo Fernandes 2021-10-15 22:36:23 +01:00
parent 3824999a16
commit dc3c4be2b2
No known key found for this signature in database
GPG key ID: 8F7402FE36207E5C
1 changed files with 49 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/ui/js/diff2html-ui-base.ts
View file

@ -44,6 +44,11 @@ export class Diff2HtmlUI {
constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HLJSApi) { constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HLJSApi) {
this.config = { ...defaultDiff2HtmlUIConfig, ...config }; 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.diffFiles = typeof diffInput === 'string' ? parse(diffInput, this.config) : diffInput ?? [];
this.diffHtml = diffInput !== undefined ? html(this.diffFiles, this.config) : target.innerHTML; this.diffHtml = diffInput !== undefined ? html(this.diffFiles, this.config) : target.innerHTML;
this.targetElement = target; this.targetElement = target;
@ -85,13 +90,18 @@ export class Diff2HtmlUI {
const fileListItems: NodeListOf<HTMLElement> = this.targetElement.querySelectorAll('.d2h-file-name'); const fileListItems: NodeListOf<HTMLElement> = this.targetElement.querySelectorAll('.d2h-file-name');
fileListItems.forEach((i, idx) => fileListItems.forEach((i, idx) =>
i.addEventListener('click', () => { i.addEventListener('click', () => {
console.log('HERE'); const fileId = i.getAttribute('href');
if (fileId && this.targetElement.querySelector(fileId)) {
return;
}
const tmpDiv = document.createElement('div'); const tmpDiv = document.createElement('div');
tmpDiv.innerHTML = htmlFile(this.diffFiles[idx], this.config); tmpDiv.innerHTML = htmlFile(this.diffFiles[idx], this.config);
const fileElem = tmpDiv.querySelector('.d2h-file-wrapper');
if (tmpDiv.firstChild) { if (fileElem) {
this.targetElement.querySelector('.d2h-wrapper')?.appendChild(tmpDiv.firstChild); this.targetElement.querySelector('.d2h-wrapper')?.appendChild(fileElem);
this.highlightFile(fileElem);
} }
}), }),
); );
@ -159,7 +169,14 @@ export class Diff2HtmlUI {
// Collect all the diff files and execute the highlight on their lines // Collect all the diff files and execute the highlight on their lines
const files = this.targetElement.querySelectorAll('.d2h-file-wrapper'); 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 // HACK: help Typescript know that `this.hljs` is defined since we already checked it
if (this.hljs === null) return; if (this.hljs === null) return;
const language = file.getAttribute('data-lang'); const language = file.getAttribute('data-lang');
@ -196,7 +213,6 @@ export class Diff2HtmlUI {
} }
line.innerHTML = result.value; line.innerHTML = result.value;
}); });
});
} }
/** /**