1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-22 16:18:08 +02:00

Enable the unicorn/prefer-dom-node-append ESLint plugin rule

This rule will help enforce slightly shorter code, especially since you can insert multiple elements at once, and according to MDN `Element.append()` is available in all browsers that we currently support.

Please find additional information here:
 - https://developer.mozilla.org/en-US/docs/Web/API/Element/append
 - https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-dom-node-append.md
This commit is contained in:
Jonas Jenwald 2022-06-12 12:20:25 +02:00
parent d7122becaf
commit 8129815538
39 changed files with 200 additions and 202 deletions

View file

@ -94,7 +94,7 @@ class AnnotationEditorLayerBuilder {
this.annotationEditorLayer.render(parameters);
this.pageDiv.appendChild(this.div);
this.pageDiv.append(this.div);
}
cancel() {

View file

@ -123,7 +123,7 @@ class AnnotationLayerBuilder {
// if there is at least one annotation.
this.div = document.createElement("div");
this.div.className = "annotationLayer";
this.pageDiv.appendChild(this.div);
this.pageDiv.append(this.div);
parameters.div = this.div;
AnnotationLayer.render(parameters);

View file

@ -122,7 +122,7 @@ class BaseTreeViewer {
this._lastToggleIsShow = !fragment.querySelector(".treeItemsHidden");
}
this.container.appendChild(fragment);
this.container.append(fragment);
this._dispatchEvent(count);
}

View file

@ -941,7 +941,7 @@ class BaseViewer {
if (this._spreadMode === SpreadMode.NONE && !this.isInPresentationMode) {
// Finally, append the new page to the viewer.
const pageView = this._pages[pageNumber - 1];
viewer.appendChild(pageView.div);
viewer.append(pageView.div);
state.pages.push(pageView);
} else {
@ -969,7 +969,7 @@ class BaseViewer {
if (this.isInPresentationMode) {
const dummyPage = document.createElement("div");
dummyPage.className = "dummyPage";
spread.appendChild(dummyPage);
spread.append(dummyPage);
}
for (const i of pageIndexSet) {
@ -977,11 +977,11 @@ class BaseViewer {
if (!pageView) {
continue;
}
spread.appendChild(pageView.div);
spread.append(pageView.div);
state.pages.push(pageView);
}
viewer.appendChild(spread);
viewer.append(spread);
}
state.scrollDown = pageNumber >= state.previousPageNumber;
@ -1925,7 +1925,7 @@ class BaseViewer {
if (this._spreadMode === SpreadMode.NONE) {
for (const pageView of this._pages) {
viewer.appendChild(pageView.div);
viewer.append(pageView.div);
}
} else {
const parity = this._spreadMode - 1;
@ -1934,12 +1934,12 @@ class BaseViewer {
if (spread === null) {
spread = document.createElement("div");
spread.className = "spread";
viewer.appendChild(spread);
viewer.append(spread);
} else if (i % 2 === parity) {
spread = spread.cloneNode(false);
viewer.appendChild(spread);
viewer.append(spread);
}
spread.appendChild(pages[i].div);
spread.append(pages[i].div);
}
}
}

View file

@ -68,10 +68,10 @@ const FontInspector = (function FontInspectorClosure() {
const tmp = document.createElement("button");
tmp.addEventListener("click", resetSelection);
tmp.textContent = "Refresh";
panel.appendChild(tmp);
panel.append(tmp);
fonts = document.createElement("div");
panel.appendChild(fonts);
panel.append(fonts);
},
cleanup() {
fonts.textContent = "";
@ -98,11 +98,11 @@ const FontInspector = (function FontInspectorClosure() {
const tr = document.createElement("tr");
const td1 = document.createElement("td");
td1.textContent = entry;
tr.appendChild(td1);
tr.append(td1);
const td2 = document.createElement("td");
td2.textContent = obj[entry].toString();
tr.appendChild(td2);
moreInfo.appendChild(tr);
tr.append(td2);
moreInfo.append(tr);
}
return moreInfo;
}
@ -134,14 +134,8 @@ const FontInspector = (function FontInspectorClosure() {
select.addEventListener("click", function () {
selectFont(fontName, select.checked);
});
font.appendChild(select);
font.appendChild(name);
font.appendChild(document.createTextNode(" "));
font.appendChild(download);
font.appendChild(document.createTextNode(" "));
font.appendChild(logIt);
font.appendChild(moreInfo);
fonts.appendChild(font);
font.append(select, name, " ", download, " ", logIt, moreInfo);
fonts.append(font);
// Somewhat of a hack, should probably add a hook for when the text layer
// is done rendering.
setTimeout(() => {
@ -173,10 +167,9 @@ const StepperManager = (function StepperManagerClosure() {
stepperChooser.addEventListener("change", function (event) {
self.selectStepper(this.value);
});
stepperControls.appendChild(stepperChooser);
stepperControls.append(stepperChooser);
stepperDiv = document.createElement("div");
this.panel.appendChild(stepperControls);
this.panel.appendChild(stepperDiv);
this.panel.append(stepperControls, stepperDiv);
if (sessionStorage.getItem("pdfjsBreakPoints")) {
breakPoints = JSON.parse(sessionStorage.getItem("pdfjsBreakPoints"));
}
@ -199,11 +192,11 @@ const StepperManager = (function StepperManagerClosure() {
debug.id = "stepper" + pageIndex;
debug.hidden = true;
debug.className = "stepper";
stepperDiv.appendChild(debug);
stepperDiv.append(debug);
const b = document.createElement("option");
b.textContent = "Page " + (pageIndex + 1);
b.value = pageIndex;
stepperChooser.appendChild(b);
stepperChooser.append(b);
const initBreakPoints = breakPoints[pageIndex] || [];
const stepper = new Stepper(debug, pageIndex, initBreakPoints);
steppers.push(stepper);
@ -289,15 +282,17 @@ const Stepper = (function StepperClosure() {
const panel = this.panel;
const content = c("div", "c=continue, s=step");
const table = c("table");
content.appendChild(table);
content.append(table);
table.cellSpacing = 0;
const headerRow = c("tr");
table.appendChild(headerRow);
headerRow.appendChild(c("th", "Break"));
headerRow.appendChild(c("th", "Idx"));
headerRow.appendChild(c("th", "fn"));
headerRow.appendChild(c("th", "args"));
panel.appendChild(content);
table.append(headerRow);
headerRow.append(
c("th", "Break"),
c("th", "Idx"),
c("th", "fn"),
c("th", "args")
);
panel.append(content);
this.table = table;
this.updateOperatorList(operatorList);
}
@ -329,7 +324,7 @@ const Stepper = (function StepperClosure() {
const line = c("tr");
line.className = "line";
line.dataset.idx = i;
chunk.appendChild(line);
chunk.append(line);
const checked = this.breakPoints.includes(i);
const args = operatorList.argsArray[i] || [];
@ -341,9 +336,8 @@ const Stepper = (function StepperClosure() {
cbox.dataset.idx = i;
cbox.onclick = cboxOnClick;
breakCell.appendChild(cbox);
line.appendChild(breakCell);
line.appendChild(c("td", i.toString()));
breakCell.append(cbox);
line.append(breakCell, c("td", i.toString()));
const fn = opMap[operatorList.fnArray[i]];
let decArgs = args;
if (fn === "showText") {
@ -353,46 +347,44 @@ const Stepper = (function StepperClosure() {
const unicodeRow = c("tr");
for (const glyph of glyphs) {
if (typeof glyph === "object" && glyph !== null) {
charCodeRow.appendChild(c("td", glyph.originalCharCode));
fontCharRow.appendChild(c("td", glyph.fontChar));
unicodeRow.appendChild(c("td", glyph.unicode));
charCodeRow.append(c("td", glyph.originalCharCode));
fontCharRow.append(c("td", glyph.fontChar));
unicodeRow.append(c("td", glyph.unicode));
} else {
// null or number
const advanceEl = c("td", glyph);
advanceEl.classList.add("advance");
charCodeRow.appendChild(advanceEl);
fontCharRow.appendChild(c("td"));
unicodeRow.appendChild(c("td"));
charCodeRow.append(advanceEl);
fontCharRow.append(c("td"));
unicodeRow.append(c("td"));
}
}
decArgs = c("td");
const table = c("table");
table.classList.add("showText");
decArgs.appendChild(table);
table.appendChild(charCodeRow);
table.appendChild(fontCharRow);
table.appendChild(unicodeRow);
decArgs.append(table);
table.append(charCodeRow, fontCharRow, unicodeRow);
} else if (fn === "restore") {
this.indentLevel--;
}
line.appendChild(c("td", " ".repeat(this.indentLevel * 2) + fn));
line.append(c("td", " ".repeat(this.indentLevel * 2) + fn));
if (fn === "save") {
this.indentLevel++;
}
if (decArgs instanceof HTMLElement) {
line.appendChild(decArgs);
line.append(decArgs);
} else {
line.appendChild(c("td", JSON.stringify(simplifyArgs(decArgs))));
line.append(c("td", JSON.stringify(simplifyArgs(decArgs))));
}
}
if (operatorsToDisplay < operatorList.fnArray.length) {
const lastCell = c("td", "...");
lastCell.colspan = 4;
chunk.appendChild(lastCell);
chunk.append(lastCell);
}
this.operatorListIdx = operatorList.fnArray.length;
this.table.appendChild(chunk);
this.table.append(chunk);
}
getNextBreakPoint() {
@ -485,15 +477,14 @@ const Stats = (function Stats() {
title.textContent = "Page: " + pageNumber;
const statsDiv = document.createElement("div");
statsDiv.textContent = stat.toString();
wrapper.appendChild(title);
wrapper.appendChild(statsDiv);
wrapper.append(title, statsDiv);
stats.push({ pageNumber, div: wrapper });
stats.sort(function (a, b) {
return a.pageNumber - b.pageNumber;
});
clear(this.panel);
for (const entry of stats) {
this.panel.appendChild(entry.div);
this.panel.append(entry.div);
}
},
cleanup() {
@ -547,13 +538,13 @@ const PDFBug = (function PDFBugClosure() {
const controls = document.createElement("div");
controls.setAttribute("class", "controls");
ui.appendChild(controls);
ui.append(controls);
const panels = document.createElement("div");
panels.setAttribute("class", "panels");
ui.appendChild(panels);
ui.append(panels);
container.appendChild(ui);
container.append(ui);
container.style.right = panelWidth + "px";
// Initialize all the debugging tools.
@ -565,8 +556,8 @@ const PDFBug = (function PDFBugClosure() {
event.preventDefault();
this.selectPanel(tool);
});
controls.appendChild(panelButton);
panels.appendChild(panel);
controls.append(panelButton);
panels.append(panel);
tool.panel = panel;
tool.manager = this;
if (tool.enabled) {
@ -587,7 +578,7 @@ const PDFBug = (function PDFBugClosure() {
link.rel = "stylesheet";
link.href = url.replace(/.js$/, ".css");
document.head.appendChild(link);
document.head.append(link);
},
cleanup() {
for (const tool of this.tools) {

View file

@ -38,7 +38,7 @@ function download(blobUrl, filename) {
}
// <a> must be in the document for recent Firefox versions,
// otherwise .click() is ignored.
(document.body || document.documentElement).appendChild(a);
(document.body || document.documentElement).append(a);
a.click();
a.remove();
}

View file

@ -40,8 +40,8 @@ function composePage(
const canvasWrapper = document.createElement("div");
canvasWrapper.className = "printedPage";
canvasWrapper.appendChild(canvas);
printContainer.appendChild(canvasWrapper);
canvasWrapper.append(canvas);
printContainer.append(canvasWrapper);
// A callback for a given page may be executed multiple times for different
// print operations (think of changing the print settings in the browser).

View file

@ -38,7 +38,7 @@ class FirefoxCom {
*/
static requestSync(action, data) {
const request = document.createTextNode("");
document.documentElement.appendChild(request);
document.documentElement.append(request);
const sender = document.createEvent("CustomEvent");
sender.initCustomEvent("pdf.js.message", true, false, {
@ -86,7 +86,7 @@ class FirefoxCom {
{ once: true }
);
}
document.documentElement.appendChild(request);
document.documentElement.append(request);
const sender = document.createEvent("CustomEvent");
sender.initCustomEvent("pdf.js.message", true, false, {

View file

@ -153,7 +153,7 @@ class GrabToPan {
this.element.scrollLeft = scrollLeft;
}
if (!this.overlay.parentNode) {
document.body.appendChild(this.overlay);
document.body.append(this.overlay);
}
}

View file

@ -127,9 +127,9 @@ class PDFAttachmentViewer extends BaseTreeViewer {
this._bindLink(element, { content, filename });
element.textContent = this._normalizeTextContent(filename);
div.appendChild(element);
div.append(element);
fragment.appendChild(div);
fragment.append(div);
attachmentsCount++;
}

View file

@ -135,7 +135,7 @@ class PDFLayerViewer extends BaseTreeViewer {
div.className = "treeItem";
const element = document.createElement("a");
div.appendChild(element);
div.append(element);
if (typeof groupId === "object") {
hasAnyNesting = true;
@ -144,7 +144,7 @@ class PDFLayerViewer extends BaseTreeViewer {
const itemsDiv = document.createElement("div");
itemsDiv.className = "treeItems";
div.appendChild(itemsDiv);
div.append(itemsDiv);
queue.push({ parent: itemsDiv, groups: groupId.order });
} else {
@ -160,13 +160,11 @@ class PDFLayerViewer extends BaseTreeViewer {
label.setAttribute("for", groupId);
label.textContent = this._normalizeTextContent(group.name);
element.appendChild(input);
element.appendChild(label);
element.append(input, label);
layersCount++;
}
levelData.parent.appendChild(div);
levelData.parent.append(div);
}
}

View file

@ -204,7 +204,7 @@ class PDFOutlineViewer extends BaseTreeViewer {
this._setStyles(element, item);
element.textContent = this._normalizeTextContent(item.title);
div.appendChild(element);
div.append(element);
if (item.items.length > 0) {
hasAnyNesting = true;
@ -212,12 +212,12 @@ class PDFOutlineViewer extends BaseTreeViewer {
const itemsDiv = document.createElement("div");
itemsDiv.className = "treeItems";
div.appendChild(itemsDiv);
div.append(itemsDiv);
queue.push({ parent: itemsDiv, items: item.items });
}
levelData.parent.appendChild(div);
levelData.parent.append(div);
outlineCount++;
}
}

View file

@ -169,7 +169,7 @@ class PDFPageView {
});
this.div = div;
container?.appendChild(div);
container?.append(div);
}
setPdfPage(pdfPage) {
@ -358,7 +358,7 @@ class PDFPageView {
this.l10n.get("loading").then(msg => {
this.loadingIconDiv?.setAttribute("aria-label", msg);
});
div.appendChild(this.loadingIconDiv);
div.append(this.loadingIconDiv);
}
update({ scale = 0, rotation = null, optionalContentConfigPromise = null }) {
@ -629,7 +629,7 @@ class PDFPageView {
// The annotation layer needs to stay on top.
div.insertBefore(canvasWrapper, lastDivBeforeTextDiv);
} else {
div.appendChild(canvasWrapper);
div.append(canvasWrapper);
}
let textLayer = null;
@ -642,7 +642,7 @@ class PDFPageView {
// The annotation layer needs to stay on top.
div.insertBefore(textLayerDiv, lastDivBeforeTextDiv);
} else {
div.appendChild(textLayerDiv);
div.append(textLayerDiv);
}
textLayer = this.textLayerFactory.createTextLayerBuilder(
@ -679,7 +679,7 @@ class PDFPageView {
if (this.xfaLayer?.div) {
// The xfa layer needs to stay on top.
div.appendChild(this.xfaLayer.div);
div.append(this.xfaLayer.div);
}
let renderContinueCallback = null;
@ -806,7 +806,7 @@ class PDFPageView {
}
const treeDom = this.structTreeLayer.render(tree);
treeDom.classList.add("structTree");
this.canvas.appendChild(treeDom);
this.canvas.append(treeDom);
});
};
this.eventBus._on("textlayerrendered", this._onTextLayerRendered);
@ -850,7 +850,7 @@ class PDFPageView {
}
};
canvasWrapper.appendChild(canvas);
canvasWrapper.append(canvas);
this.canvas = canvas;
const ctx = canvas.getContext("2d", { alpha: false });
@ -967,7 +967,7 @@ class PDFPageView {
svg.style.width = wrapper.style.width;
svg.style.height = wrapper.style.height;
this.renderingState = RenderingStates.FINISHED;
wrapper.appendChild(svg);
wrapper.append(svg);
});
});

View file

@ -110,7 +110,7 @@ PDFPrintService.prototype = {
const pageSize = this.pagesOverview[0];
this.pageStyleSheet.textContent =
"@page { size: " + pageSize.width + "pt " + pageSize.height + "pt;}";
body.appendChild(this.pageStyleSheet);
body.append(this.pageStyleSheet);
},
destroy() {
@ -184,8 +184,8 @@ PDFPrintService.prototype = {
const wrapper = document.createElement("div");
wrapper.className = "printedPage";
wrapper.appendChild(img);
this.printContainer.appendChild(wrapper);
wrapper.append(img);
this.printContainer.append(wrapper);
return new Promise(function (resolve, reject) {
img.onload = resolve;

View file

@ -148,9 +148,9 @@ class PDFThumbnailView {
ring.style.height = this.canvasHeight + borderAdjustment + "px";
this.ring = ring;
div.appendChild(ring);
anchor.appendChild(div);
container.appendChild(anchor);
div.append(ring);
anchor.append(div);
container.append(anchor);
}
setPdfPage(pdfPage) {
@ -257,7 +257,7 @@ class PDFThumbnailView {
this.image = image;
this.div.setAttribute("data-loaded", true);
this.ring.appendChild(image);
this.ring.append(image);
// Zeroing the width and height causes Firefox to release graphics
// resources immediately, which can greatly reduce memory consumption.

View file

@ -25,7 +25,7 @@ function getXfaHtmlForPrinting(printContainer, pdfDocument) {
for (const xfaPage of xfaHtml.children) {
const page = document.createElement("div");
page.className = "xfaPrintedPage";
printContainer.appendChild(page);
printContainer.append(page);
const builder = new XfaLayerBuilder({
pageDiv: page,

View file

@ -128,7 +128,7 @@ class StructTreeLayerBuilder {
this._setAttributes(node.children[0], element);
} else {
for (const kid of node.children) {
element.appendChild(this._walk(kid));
element.append(this._walk(kid));
}
}
}

View file

@ -177,7 +177,7 @@ class TextHighlighter {
if (div.nodeType === Node.TEXT_NODE) {
const span = document.createElement("span");
div.parentNode.insertBefore(span, div);
span.appendChild(div);
span.append(div);
textDivs[divIdx] = span;
div = span;
}
@ -189,11 +189,11 @@ class TextHighlighter {
if (className) {
const span = document.createElement("span");
span.className = `${className} appended`;
span.appendChild(node);
div.appendChild(span);
span.append(node);
div.append(span);
return className.includes("selected") ? span.offsetLeft : 0;
}
div.appendChild(node);
div.append(node);
return 0;
}

View file

@ -73,7 +73,7 @@ class TextLayerBuilder {
if (!this.enhanceTextSelection) {
const endOfContent = document.createElement("div");
endOfContent.className = "endOfContent";
this.textLayerDiv.appendChild(endOfContent);
this.textLayerDiv.append(endOfContent);
}
this.eventBus.dispatch("textlayerrendered", {
@ -111,7 +111,7 @@ class TextLayerBuilder {
});
this.textLayerRenderTask.promise.then(
() => {
this.textLayerDiv.appendChild(textLayerFrag);
this.textLayerDiv.append(textLayerFrag);
this._finishRendering();
this.highlighter?.enable();
},

View file

@ -212,7 +212,7 @@ function webViewerLoad() {
link.rel = "stylesheet";
link.href = "../build/dev-css/viewer.css";
document.head.appendChild(link);
document.head.append(link);
}
Promise.all([

View file

@ -70,7 +70,7 @@ class XfaLayerBuilder {
// Create an xfa layer div and render the form
const div = document.createElement("div");
this.pageDiv.appendChild(div);
this.pageDiv.append(div);
parameters.div = div;
const result = XfaLayer.render(parameters);
@ -99,7 +99,7 @@ class XfaLayerBuilder {
}
// Create an xfa layer div and render the form
this.div = document.createElement("div");
this.pageDiv.appendChild(this.div);
this.pageDiv.append(this.div);
parameters.div = this.div;
return XfaLayer.render(parameters);
})