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

@ -448,7 +448,7 @@ class AnnotationElement {
trigger = document.createElement("div");
trigger.style.height = container.style.height;
trigger.style.width = container.style.width;
container.appendChild(trigger);
container.append(trigger);
}
const popupElement = new PopupElement({
@ -466,7 +466,7 @@ class AnnotationElement {
// Position the popup next to the annotation's container.
popup.style.left = container.style.width;
container.appendChild(popup);
container.append(popup);
}
/**
@ -607,7 +607,7 @@ class LinkAnnotationElement extends AnnotationElement {
return this._renderQuadrilaterals("linkAnnotation").map(
(quadrilateral, index) => {
const linkElement = index === 0 ? link : link.cloneNode();
quadrilateral.appendChild(linkElement);
quadrilateral.append(linkElement);
return quadrilateral;
}
);
@ -615,7 +615,7 @@ class LinkAnnotationElement extends AnnotationElement {
this.container.className = "linkAnnotation";
if (isBound) {
this.container.appendChild(link);
this.container.append(link);
}
return this.container;
@ -828,7 +828,7 @@ class TextAnnotationElement extends AnnotationElement {
this._createPopup(image, this.data);
}
this.container.appendChild(image);
this.container.append(image);
return this.container;
}
}
@ -1234,7 +1234,7 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
this._setBackgroundColor(element);
this._setDefaultPropertiesFromJS(element);
this.container.appendChild(element);
this.container.append(element);
return this.container;
}
}
@ -1319,7 +1319,7 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
this._setBackgroundColor(element);
this._setDefaultPropertiesFromJS(element);
this.container.appendChild(element);
this.container.append(element);
return this.container;
}
}
@ -1408,7 +1408,7 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
this._setBackgroundColor(element);
this._setDefaultPropertiesFromJS(element);
this.container.appendChild(element);
this.container.append(element);
return this.container;
}
}
@ -1490,7 +1490,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
optionElement.setAttribute("selected", true);
addAnEmptyEntry = false;
}
selectElement.appendChild(optionElement);
selectElement.append(optionElement);
}
let removeEmptyEntry = null;
@ -1595,7 +1595,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
const optionElement = document.createElement("option");
optionElement.textContent = displayValue;
optionElement.value = exportValue;
selectElement.appendChild(optionElement);
selectElement.append(optionElement);
}
if (selectElement.options.length > 0) {
selectElement.options[0].selected = true;
@ -1668,7 +1668,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
this._setBackgroundColor(selectElement);
this._setDefaultPropertiesFromJS(selectElement);
this.container.appendChild(selectElement);
this.container.append(selectElement);
return this.container;
}
}
@ -1734,7 +1734,7 @@ class PopupAnnotationElement extends AnnotationElement {
this.container.style.left = `${popupLeft}px`;
this.container.style.top = `${popupTop}px`;
this.container.appendChild(popup.render());
this.container.append(popup.render());
return this.container;
}
}
@ -1781,7 +1781,7 @@ class PopupElement {
const title = document.createElement("h1");
title.dir = this.titleObj.dir;
title.textContent = this.titleObj.str;
popup.appendChild(title);
popup.append(title);
// The modification date is shown in the popup instead of the creation
// date if it is available and can be parsed correctly, which is
@ -1796,7 +1796,7 @@ class PopupElement {
date: dateObject.toLocaleDateString(),
time: dateObject.toLocaleTimeString(),
});
popup.appendChild(modificationDate);
popup.append(modificationDate);
}
if (
@ -1811,7 +1811,7 @@ class PopupElement {
popup.lastChild.className = "richText popupContent";
} else {
const contents = this._formatContents(this.contentsObj);
popup.appendChild(contents);
popup.append(contents);
}
if (!Array.isArray(this.trigger)) {
@ -1826,7 +1826,7 @@ class PopupElement {
}
popup.addEventListener("click", this._hide.bind(this, true));
wrapper.appendChild(popup);
wrapper.append(popup);
return wrapper;
}
@ -1845,9 +1845,9 @@ class PopupElement {
const lines = str.split(/(?:\r\n?|\n)/);
for (let i = 0, ii = lines.length; i < ii; ++i) {
const line = lines[i];
p.appendChild(document.createTextNode(line));
p.append(document.createTextNode(line));
if (i < ii - 1) {
p.appendChild(document.createElement("br"));
p.append(document.createElement("br"));
}
}
return p;
@ -1957,7 +1957,7 @@ class LineAnnotationElement extends AnnotationElement {
line.setAttribute("stroke", "transparent");
line.setAttribute("fill", "transparent");
svg.appendChild(line);
svg.append(line);
this.container.append(svg);
// Create the popup ourselves so that we can bind it to the line instead
@ -2004,7 +2004,7 @@ class SquareAnnotationElement extends AnnotationElement {
square.setAttribute("stroke", "transparent");
square.setAttribute("fill", "transparent");
svg.appendChild(square);
svg.append(square);
this.container.append(svg);
// Create the popup ourselves so that we can bind it to the square instead
@ -2051,7 +2051,7 @@ class CircleAnnotationElement extends AnnotationElement {
circle.setAttribute("stroke", "transparent");
circle.setAttribute("fill", "transparent");
svg.appendChild(circle);
svg.append(circle);
this.container.append(svg);
// Create the popup ourselves so that we can bind it to the circle instead
@ -2106,7 +2106,7 @@ class PolylineAnnotationElement extends AnnotationElement {
polyline.setAttribute("stroke", "transparent");
polyline.setAttribute("fill", "transparent");
svg.appendChild(polyline);
svg.append(polyline);
this.container.append(svg);
// Create the popup ourselves so that we can bind it to the polyline
@ -2199,7 +2199,7 @@ class InkAnnotationElement extends AnnotationElement {
// instead of to the entire container (which is the default).
this._createPopup(polyline, data);
svg.appendChild(polyline);
svg.append(polyline);
}
this.container.append(svg);
@ -2376,7 +2376,7 @@ class FileAttachmentAnnotationElement extends AnnotationElement {
this._createPopup(trigger, this.data);
}
this.container.appendChild(trigger);
this.container.append(trigger);
return this.container;
}
@ -2471,7 +2471,7 @@ class AnnotationLayer {
}
if (Array.isArray(rendered)) {
for (const renderedElement of rendered) {
div.appendChild(renderedElement);
div.append(renderedElement);
}
} else {
if (element instanceof PopupAnnotationElement) {
@ -2479,7 +2479,7 @@ class AnnotationLayer {
// annotation elements to prevent interfering with mouse events.
div.prepend(rendered);
} else {
div.appendChild(rendered);
div.append(rendered);
}
}
}
@ -2557,7 +2557,7 @@ class AnnotationLayer {
const { firstChild } = element;
if (!firstChild) {
element.appendChild(canvas);
element.append(canvas);
} else if (firstChild.nodeName === "CANVAS") {
element.replaceChild(canvas, firstChild);
} else {

View file

@ -459,7 +459,7 @@ function loadScript(src, removeScriptElement = false) {
script.onerror = function () {
reject(new Error(`Cannot load script at: ${script.src}`));
};
(document.head || document.documentElement).appendChild(script);
(document.head || document.documentElement).append(script);
});
}

View file

@ -232,7 +232,7 @@ class AnnotationEditorLayer {
editor.parent = this;
if (editor.div && editor.isAttachedToDOM) {
editor.div.remove();
this.div.appendChild(editor.div);
this.div.append(editor.div);
}
}
@ -248,7 +248,7 @@ class AnnotationEditorLayer {
if (!editor.isAttachedToDOM) {
const div = editor.render();
this.div.appendChild(div);
this.div.append(div);
editor.isAttachedToDOM = true;
}

View file

@ -211,11 +211,11 @@ class FreeTextEditor extends AnnotationEditor {
style.fontSize = `calc(${this.#fontSize}px * var(--zoom-factor))`;
style.color = this.#color;
this.div.appendChild(this.editorDiv);
this.div.append(this.editorDiv);
this.overlayDiv = document.createElement("div");
this.overlayDiv.classList.add("overlay", "enabled");
this.div.appendChild(this.overlayDiv);
this.div.append(this.overlayDiv);
// TODO: implement paste callback.
// The goal is to sanitize and have something suitable for this

View file

@ -353,7 +353,7 @@ class InkEditor extends AnnotationEditor {
#createCanvas() {
this.canvas = document.createElement("canvas");
this.canvas.className = "inkEditorCanvas";
this.div.appendChild(this.canvas);
this.div.append(this.canvas);
this.ctx = this.canvas.getContext("2d");
}

View file

@ -58,7 +58,7 @@ class BaseFontLoader {
styleElement.id = `PDFJS_FONT_STYLE_TAG_${this.docId}`;
this._document.documentElement
.getElementsByTagName("head")[0]
.appendChild(styleElement);
.append(styleElement);
}
const styleSheet = styleElement.sheet;
styleSheet.insertRule(rule, styleSheet.cssRules.length);
@ -345,9 +345,9 @@ if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
const span = this._document.createElement("span");
span.textContent = "Hi";
span.style.fontFamily = name;
div.appendChild(span);
div.append(span);
}
this._document.body.appendChild(div);
this._document.body.append(div);
isFontReady(loadTestFontId, () => {
div.remove();

View file

@ -778,7 +778,7 @@ if (
current.tspan.setAttributeNS(null, "y", pf(-current.y));
current.txtElement = this.svgFactory.createElement("svg:text");
current.txtElement.appendChild(current.tspan);
current.txtElement.append(current.tspan);
}
beginText() {
@ -959,10 +959,10 @@ if (
`${pm(textMatrix)} scale(${pf(textHScale)}, -1)`
);
current.txtElement.setAttributeNS(XML_NS, "xml:space", "preserve");
current.txtElement.appendChild(current.tspan);
current.txtgrp.appendChild(current.txtElement);
current.txtElement.append(current.tspan);
current.txtgrp.append(current.txtElement);
this._ensureTransformGroup().appendChild(current.txtElement);
this._ensureTransformGroup().append(current.txtElement);
}
setLeadingMoveText(x, y) {
@ -980,7 +980,7 @@ if (
if (!this.cssStyle) {
this.cssStyle = this.svgFactory.createElement("svg:style");
this.cssStyle.setAttributeNS(null, "type", "text/css");
this.defs.appendChild(this.cssStyle);
this.defs.append(this.cssStyle);
}
const url = createObjectURL(
@ -1115,7 +1115,7 @@ if (
if (this.current.fillAlpha < 1) {
rect.setAttributeNS(null, "fill-opacity", this.current.fillAlpha);
}
this._ensureTransformGroup().appendChild(rect);
this._ensureTransformGroup().append(rect);
}
/**
@ -1179,8 +1179,8 @@ if (
this.current.fillColor = fillColor;
this.current.strokeColor = strokeColor;
tiling.appendChild(bbox.childNodes[0]);
this.defs.appendChild(tiling);
tiling.append(bbox.childNodes[0]);
this.defs.append(tiling);
return `url(#${tilingId})`;
}
@ -1231,9 +1231,9 @@ if (
const stop = this.svgFactory.createElement("svg:stop");
stop.setAttributeNS(null, "offset", colorStop[0]);
stop.setAttributeNS(null, "stop-color", colorStop[1]);
gradient.appendChild(stop);
gradient.append(stop);
}
this.defs.appendChild(gradient);
this.defs.append(gradient);
return `url(#${shadingId})`;
case "Mesh":
warn("Unimplemented pattern Mesh");
@ -1354,7 +1354,7 @@ if (
d = current.path.getAttributeNS(null, "d") + d;
} else {
current.path = this.svgFactory.createElement("svg:path");
this._ensureTransformGroup().appendChild(current.path);
this._ensureTransformGroup().append(current.path);
}
current.path.setAttributeNS(null, "d", d);
@ -1394,8 +1394,8 @@ if (
clipElement.setAttributeNS(null, "clip-rule", "nonzero");
}
this.pendingClip = null;
clipPath.appendChild(clipElement);
this.defs.appendChild(clipPath);
clipPath.append(clipElement);
this.defs.append(clipPath);
if (current.activeClipUrl) {
// The previous clipping group content can go out of order -- resetting
@ -1583,7 +1583,7 @@ if (
rect.setAttributeNS(null, "height", "1px");
rect.setAttributeNS(null, "fill", this.current.fillColor);
this._ensureTransformGroup().appendChild(rect);
this._ensureTransformGroup().append(rect);
}
paintImageXObject(objId) {
@ -1622,9 +1622,9 @@ if (
`scale(${pf(1 / width)} ${pf(-1 / height)})`
);
if (mask) {
mask.appendChild(imgEl);
mask.append(imgEl);
} else {
this._ensureTransformGroup().appendChild(imgEl);
this._ensureTransformGroup().append(imgEl);
}
}
@ -1646,8 +1646,8 @@ if (
rect.setAttributeNS(null, "fill", fillColor);
rect.setAttributeNS(null, "mask", `url(#${current.maskId})`);
this.defs.appendChild(mask);
this._ensureTransformGroup().appendChild(rect);
this.defs.append(mask);
this._ensureTransformGroup().append(rect);
this.paintInlineImageXObject(imgData, mask);
}
@ -1689,14 +1689,14 @@ if (
// Create the definitions element.
const definitions = this.svgFactory.createElement("svg:defs");
svg.appendChild(definitions);
svg.append(definitions);
this.defs = definitions;
// Create the root group element, which acts a container for all other
// groups and applies the viewport transform.
const rootGroup = this.svgFactory.createElement("svg:g");
rootGroup.setAttributeNS(null, "transform", pm(viewport.transform));
svg.appendChild(rootGroup);
svg.append(rootGroup);
// For the construction of the SVG image we are only interested in the
// root group, so we expose it as the entry point of the SVG image for
@ -1713,7 +1713,7 @@ if (
if (!this.current.clipGroup) {
const clipGroup = this.svgFactory.createElement("svg:g");
clipGroup.setAttributeNS(null, "clip-path", this.current.activeClipUrl);
this.svg.appendChild(clipGroup);
this.svg.append(clipGroup);
this.current.clipGroup = clipGroup;
}
return this.current.clipGroup;
@ -1727,9 +1727,9 @@ if (
this.tgrp = this.svgFactory.createElement("svg:g");
this.tgrp.setAttributeNS(null, "transform", pm(this.transformMatrix));
if (this.current.activeClipUrl) {
this._ensureClipGroup().appendChild(this.tgrp);
this._ensureClipGroup().append(this.tgrp);
} else {
this.svg.appendChild(this.tgrp);
this.svg.append(this.tgrp);
}
}
return this.tgrp;

View file

@ -658,7 +658,7 @@ class TextLayerRenderTask {
if (items[i].id !== null) {
this._container.setAttribute("id", `${items[i].id}`);
}
parent.appendChild(this._container);
parent.append(this._container);
} else if (items[i].type === "endMarkedContent") {
this._container = this._container.parentNode;
}
@ -710,12 +710,12 @@ class TextLayerRenderTask {
}
if (textDivProperties.hasText) {
this._container.appendChild(textDiv);
this._container.append(textDiv);
}
if (textDivProperties.hasEOL) {
const br = document.createElement("br");
br.setAttribute("role", "presentation");
this._container.appendChild(br);
this._container.append(br);
}
}

View file

@ -169,7 +169,7 @@ class XfaLayer {
const stack = [[root, -1, rootHtml]];
const rootDiv = parameters.div;
rootDiv.appendChild(rootHtml);
rootDiv.append(rootHtml);
if (parameters.viewport) {
const transform = `matrix(${parameters.viewport.transform.join(",")})`;
@ -200,7 +200,7 @@ class XfaLayer {
if (name === "#text") {
const node = document.createTextNode(child.value);
textDivs.push(node);
html.appendChild(node);
html.append(node);
continue;
}
@ -211,7 +211,7 @@ class XfaLayer {
childHtml = document.createElement(name);
}
html.appendChild(childHtml);
html.append(childHtml);
if (child.attributes) {
this.setAttributes({
html: childHtml,
@ -229,7 +229,7 @@ class XfaLayer {
if (XfaText.shouldBuildText(name)) {
textDivs.push(node);
}
childHtml.appendChild(node);
childHtml.append(node);
}
}