pdfjs-viewer-element 2.7.3 → 2.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -3
- package/dist/pdfjs-viewer-element.js +85 -83
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -46,9 +46,7 @@ If you find `pdfjs-viewer-element` useful and want to support its development, c
|
|
|
46
46
|
|
|
47
47
|
The prebuilt comes with each PDF.js release. [PDF.JS releases](https://github.com/mozilla/pdf.js/releases)
|
|
48
48
|
|
|
49
|
-
✅ All v4 and
|
|
50
|
-
|
|
51
|
-
🚧 For v5 releases - there are some breaking changes that affects styles injecting, and theme changing not work anymore.
|
|
49
|
+
✅ All v3, v4 and v5 releases are fully supported.
|
|
52
50
|
|
|
53
51
|
After placing the prebuild specify the path to the directory with the `viewer-path` property (`/pdfjs` by default) and PDF file URL with `src` property (should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request)).
|
|
54
52
|
|
|
@@ -87,6 +85,8 @@ import 'pdfjs-viewer-element'
|
|
|
87
85
|
|
|
88
86
|
`viewer-path` - Path to PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/)
|
|
89
87
|
|
|
88
|
+
`iframe-title` - The title of the `iframe` element, required for better accessibility
|
|
89
|
+
|
|
90
90
|
`page` - Page number.
|
|
91
91
|
|
|
92
92
|
`nameddest` - Go to a named destination.
|
|
@@ -186,6 +186,10 @@ const viewerApp = await viewer.initialize()
|
|
|
186
186
|
viewerApp.open({ data: pdfData })
|
|
187
187
|
```
|
|
188
188
|
|
|
189
|
+
## Accessablity
|
|
190
|
+
|
|
191
|
+
Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
|
|
192
|
+
|
|
189
193
|
## Known issues
|
|
190
194
|
|
|
191
195
|
### The `.mjs` files support
|
|
@@ -1,125 +1,127 @@
|
|
|
1
|
-
const y = (p,
|
|
2
|
-
let
|
|
3
|
-
|
|
4
|
-
Array.from(
|
|
5
|
-
o(
|
|
1
|
+
const y = (p, t) => new Promise((o) => {
|
|
2
|
+
let e = t.querySelector(p);
|
|
3
|
+
e ? o(e) : new MutationObserver((s, i) => {
|
|
4
|
+
Array.from(t.querySelectorAll(p)).forEach((r) => {
|
|
5
|
+
o(r), i.disconnect();
|
|
6
6
|
});
|
|
7
|
-
}).observe(
|
|
8
|
-
}),
|
|
9
|
-
class
|
|
7
|
+
}).observe(t, { childList: !0, subtree: !0 });
|
|
8
|
+
}), E = { trailing: !0 }, D = "/pdfjs", P = "/web/viewer.html", A = "", v = "PDF viewer window", C = "", k = "", F = "", V = "", R = "none", O = "", L = "", I = "", j = "", W = "", q = "", M = "", z = "", $ = "AUTOMATIC", x = "", H = "", N = "", b = { AUTOMATIC: 0, LIGHT: 1, DARK: 2 }, U = ["src", "viewer-path", "disable-worker", "text-layer", "disable-font-face", "disable-range", "disable-stream", "disable-auto-fetch", "verbosity", "locale", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls"];
|
|
9
|
+
class T extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(), this.onIframeReady = (function(
|
|
12
|
-
if (
|
|
13
|
-
let
|
|
14
|
-
const
|
|
15
|
-
return await
|
|
16
|
-
})(
|
|
17
|
-
if (a = null,
|
|
18
|
-
const
|
|
19
|
-
return
|
|
11
|
+
super(), this.onIframeReady = (function(e, s = 25, i = {}) {
|
|
12
|
+
if (i = { ...E, ...i }, !Number.isFinite(s)) throw new TypeError("Expected `wait` to be a finite number");
|
|
13
|
+
let r, n, a, l, c = [];
|
|
14
|
+
const m = (h, u) => (a = (async function(d, f, w) {
|
|
15
|
+
return await d.apply(f, w);
|
|
16
|
+
})(e, h, u), a.finally(() => {
|
|
17
|
+
if (a = null, i.trailing && l && !n) {
|
|
18
|
+
const d = m(h, l);
|
|
19
|
+
return l = null, d;
|
|
20
20
|
}
|
|
21
21
|
}), a);
|
|
22
|
-
return function(...
|
|
23
|
-
return a ? (
|
|
24
|
-
const
|
|
25
|
-
clearTimeout(
|
|
26
|
-
|
|
27
|
-
const f =
|
|
28
|
-
for (const w of
|
|
29
|
-
|
|
30
|
-
},
|
|
22
|
+
return function(...h) {
|
|
23
|
+
return a ? (i.trailing && (l = h), a) : new Promise((u) => {
|
|
24
|
+
const d = !n && i.leading;
|
|
25
|
+
clearTimeout(n), n = setTimeout(() => {
|
|
26
|
+
n = null;
|
|
27
|
+
const f = i.leading ? r : m(this, h);
|
|
28
|
+
for (const w of c) w(f);
|
|
29
|
+
c = [];
|
|
30
|
+
}, s), d ? (r = m(this, h), u(r)) : c.push(u);
|
|
31
31
|
});
|
|
32
32
|
};
|
|
33
|
-
})(async (
|
|
34
|
-
await y("iframe", this.shadowRoot),
|
|
35
|
-
}, 0, { leading: !0 }), this.setViewerExtraStyles = (
|
|
36
|
-
var
|
|
37
|
-
if (!
|
|
38
|
-
if (((
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
}, this.injectExtraStylesLinks = (
|
|
42
|
-
|
|
43
|
-
var
|
|
44
|
-
if ((
|
|
45
|
-
const
|
|
46
|
-
|
|
33
|
+
})(async (e) => {
|
|
34
|
+
await y("iframe", this.shadowRoot), e();
|
|
35
|
+
}, 0, { leading: !0 }), this.setViewerExtraStyles = (e, s = "extra") => {
|
|
36
|
+
var r, n, a, l, c;
|
|
37
|
+
if (!e) return void ((n = (r = this.iframe.contentDocument) == null ? void 0 : r.head.querySelector(`style[${s}]`)) == null ? void 0 : n.remove());
|
|
38
|
+
if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${s}]`)) == null ? void 0 : l.innerHTML) === e) return;
|
|
39
|
+
const i = document.createElement("style");
|
|
40
|
+
i.innerHTML = e, i.setAttribute(s, ""), (c = this.iframe.contentDocument) == null || c.head.appendChild(i);
|
|
41
|
+
}, this.injectExtraStylesLinks = (e) => {
|
|
42
|
+
e && e.replace(/'|]|\[/g, "").split(",").map((s) => s.trim()).forEach((s) => {
|
|
43
|
+
var n, a;
|
|
44
|
+
if ((n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector(`link[href="${s}"]`)) return;
|
|
45
|
+
const r = document.createElement("link");
|
|
46
|
+
r.rel = "stylesheet", r.href = s, (a = this.iframe.contentDocument) == null || a.head.appendChild(r);
|
|
47
47
|
});
|
|
48
|
-
}, this.initialize = () => new Promise(async (
|
|
49
|
-
var
|
|
50
|
-
await y("iframe", this.shadowRoot), (
|
|
51
|
-
var
|
|
52
|
-
await ((
|
|
48
|
+
}, this.initialize = () => new Promise(async (e) => {
|
|
49
|
+
var s;
|
|
50
|
+
await y("iframe", this.shadowRoot), (s = this.iframe) == null || s.addEventListener("load", async () => {
|
|
51
|
+
var i, r, n;
|
|
52
|
+
await ((r = (i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplication) == null ? void 0 : r.initializedPromise), e((n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplication);
|
|
53
53
|
}, { once: !0 });
|
|
54
54
|
});
|
|
55
|
-
const
|
|
55
|
+
const t = this.attachShadow({ mode: "open" }), o = document.createElement("template");
|
|
56
56
|
o.innerHTML = `
|
|
57
57
|
<style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
|
|
58
|
-
<iframe frameborder="0" width="100%" loading="lazy"></iframe>
|
|
59
|
-
`,
|
|
58
|
+
<iframe frameborder="0" width="100%" loading="lazy" title="${this.getAttribute("iframe-title") || v}"></iframe>
|
|
59
|
+
`, t.appendChild(o.content.cloneNode(!0));
|
|
60
60
|
}
|
|
61
61
|
static get observedAttributes() {
|
|
62
|
-
return ["src", "viewer-path", "page", "search", "phrase", "zoom", "pagemode", "disable-worker", "text-layer", "disable-font-face", "disable-range", "disable-stream", "disable-auto-fetch", "verbosity", "locale", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls", "nameddest"];
|
|
62
|
+
return ["src", "viewer-path", "page", "search", "phrase", "zoom", "pagemode", "disable-worker", "text-layer", "disable-font-face", "disable-range", "disable-stream", "disable-auto-fetch", "verbosity", "locale", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls", "nameddest", "iframe-title"];
|
|
63
63
|
}
|
|
64
64
|
connectedCallback() {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
var t;
|
|
66
|
+
this.iframe = (t = this.shadowRoot) == null ? void 0 : t.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
|
|
67
|
+
var o, e, s, i, r, n, a, l;
|
|
68
|
+
this.setCssTheme(this.getCssThemeOption()), this.injectExtraStylesLinks(this.getAttribute("viewer-extra-styles-urls") ?? H), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles") ?? x), this.getAttribute("src") !== A && ((e = (o = this.iframe.contentWindow) == null ? void 0 : o.PDFViewerApplicationOptions) == null || e.set("defaultUrl", "")), (i = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplicationOptions) == null || i.set("disablePreferences", !0), (n = (r = this.iframe.contentWindow) == null ? void 0 : r.PDFViewerApplicationOptions) == null || n.set("pdfBugEnabled", !0), (l = (a = this.iframe.contentWindow) == null ? void 0 : a.PDFViewerApplicationOptions) == null || l.set("eventBusDispatchToDOM", !0);
|
|
68
69
|
});
|
|
69
70
|
}
|
|
70
|
-
attributeChangedCallback(
|
|
71
|
-
|
|
71
|
+
attributeChangedCallback(t) {
|
|
72
|
+
U.includes(t) ? this.onIframeReady(() => this.mountViewer(this.getIframeSrc())) : this.onIframeReady(() => {
|
|
72
73
|
this.iframe.src = this.getIframeSrc();
|
|
73
74
|
});
|
|
74
75
|
}
|
|
75
76
|
getIframeSrc() {
|
|
76
|
-
const
|
|
77
|
+
const t = this.getFullPath(this.getAttribute("src") || A), o = this.getFullPath(this.getAttribute("viewer-path") || D), e = this.getAttribute("page") || C, s = this.getAttribute("search") || k, i = this.getAttribute("phrase") || F, r = this.getAttribute("zoom") || V, n = this.getAttribute("pagemode") || R, a = this.getAttribute("disable-worker") || L, l = this.getAttribute("text-layer") || I, c = this.getAttribute("disable-font-face") || j, m = this.getAttribute("disable-range") || W, h = this.getAttribute("disable-stream") || q, u = this.getAttribute("disable-auto-fetch") || M, d = this.getAttribute("verbosity") || z, f = this.getAttribute("locale") || O, w = this.getAttribute("viewer-css-theme") || $, S = !!(this.getAttribute("viewer-extra-styles") || x), g = this.getAttribute("nameddest") || N;
|
|
77
78
|
return `
|
|
78
|
-
${o}${
|
|
79
|
-
${encodeURIComponent(
|
|
80
|
-
${
|
|
79
|
+
${o}${P}?file=
|
|
80
|
+
${encodeURIComponent(t)}#page=${e}&zoom=${r}&pagemode=${n}&search=${s}&phrase=${i}&textLayer=
|
|
81
|
+
${l}&disableWorker=
|
|
81
82
|
${a}&disableFontFace=
|
|
82
|
-
${
|
|
83
|
-
${
|
|
84
|
-
${
|
|
83
|
+
${c}&disableRange=
|
|
84
|
+
${m}&disableStream=
|
|
85
|
+
${h}&disableAutoFetch=
|
|
85
86
|
${u}&verbosity=
|
|
86
|
-
${
|
|
87
|
+
${d}
|
|
87
88
|
${f ? "&locale=" + f : ""}&viewerCssTheme=
|
|
88
89
|
${w}&viewerExtraStyles=
|
|
89
90
|
${S}
|
|
90
91
|
${g ? "&nameddest=" + g : ""}`;
|
|
91
92
|
}
|
|
92
|
-
mountViewer(
|
|
93
|
-
|
|
93
|
+
mountViewer(t) {
|
|
94
|
+
var o, e;
|
|
95
|
+
t && this.iframe && ((o = this.shadowRoot) == null || o.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = (e = this.shadowRoot) == null ? void 0 : e.querySelector("iframe"), this.iframe.src = t, this.iframe.setAttribute("title", this.getAttribute("iframe-title") || v));
|
|
94
96
|
}
|
|
95
|
-
getFullPath(
|
|
96
|
-
return
|
|
97
|
+
getFullPath(t) {
|
|
98
|
+
return t.startsWith("/") ? `${window.location.origin}${t}` : t;
|
|
97
99
|
}
|
|
98
100
|
getCssThemeOption() {
|
|
99
|
-
const
|
|
100
|
-
return Object.keys(b).includes(
|
|
101
|
+
const t = this.getAttribute("viewer-css-theme");
|
|
102
|
+
return Object.keys(b).includes(t) ? b[t] : b[$];
|
|
101
103
|
}
|
|
102
|
-
setCssTheme(
|
|
103
|
-
var o, s,
|
|
104
|
-
if (
|
|
104
|
+
setCssTheme(t) {
|
|
105
|
+
var o, e, s, i, r, n;
|
|
106
|
+
if (t === b.DARK) {
|
|
105
107
|
if (!((o = this.iframe.contentDocument) != null && o.styleSheets.length)) return;
|
|
106
|
-
for (const
|
|
107
|
-
const
|
|
108
|
-
var
|
|
109
|
-
return ((
|
|
110
|
-
}).map((
|
|
108
|
+
for (const a of Array.from(this.iframe.contentDocument.styleSheets)) if ((e = a.href) != null && e.includes("/web/viewer.css")) {
|
|
109
|
+
const l = (a == null ? void 0 : a.cssRules) || [], c = Object.keys(l).filter((m) => {
|
|
110
|
+
var h;
|
|
111
|
+
return ((h = l[Number(m)]) == null ? void 0 : h.conditionText) === "(prefers-color-scheme: dark)";
|
|
112
|
+
}).map((m) => l[Number(m)].cssText.split(`@media (prefers-color-scheme: dark) {
|
|
111
113
|
`)[1].split(`
|
|
112
114
|
}`)[0]);
|
|
113
|
-
this.setViewerExtraStyles(
|
|
115
|
+
this.setViewerExtraStyles(c.join(""), "theme");
|
|
114
116
|
}
|
|
115
|
-
} else (
|
|
116
|
-
(n = this.iframe.contentWindow) == null || n.
|
|
117
|
+
} else (i = (s = this.iframe.contentDocument) == null ? void 0 : s.head.querySelector("style[theme]")) == null || i.remove();
|
|
118
|
+
(n = (r = this.iframe.contentWindow) == null ? void 0 : r.PDFViewerApplicationOptions) == null || n.set("viewerCssTheme", t);
|
|
117
119
|
}
|
|
118
120
|
}
|
|
119
|
-
window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement =
|
|
121
|
+
window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = T, window.customElements.define("pdfjs-viewer-element", T));
|
|
120
122
|
export {
|
|
121
|
-
|
|
123
|
+
T as PdfjsViewerElement,
|
|
122
124
|
b as ViewerCssTheme,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
+
T as default,
|
|
126
|
+
U as hardRefreshAttributes
|
|
125
127
|
};
|