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

82
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,43 +169,49 @@ 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
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 // 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 hljsLanguage = language ? getLanguage(language) : 'plaintext';
// Collect all the code lines and execute the highlight on them const text = line.textContent;
const codeLines = file.querySelectorAll('.d2h-code-line-ctn'); const lineParent = line.parentNode;
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; if (text === null || lineParent === null || !this.isElement(lineParent)) return;
const lineParent = line.parentNode;
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( const originalStream = nodeStream(line);
this.hljs.highlight(text, { if (originalStream.length) {
language: hljsLanguage, const resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
ignoreIllegals: true, resultNode.innerHTML = result.value;
}), result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
); }
const originalStream = nodeStream(line); line.classList.add('hljs');
if (originalStream.length) { if (result.language) {
const resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); line.classList.add(result.language);
resultNode.innerHTML = result.value; }
result.value = mergeStreams(originalStream, nodeStream(resultNode), text); line.innerHTML = result.value;
}
line.classList.add('hljs');
if (result.language) {
line.classList.add(result.language);
}
line.innerHTML = result.value;
});
}); });
} }