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:
parent
d7122becaf
commit
8129815538
39 changed files with 200 additions and 202 deletions
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue