pdfjs-viewer-element 2.7.2 → 2.7.3
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 +4 -4
- package/dist/pdfjs-viewer-element.js +69 -68
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -78,7 +78,7 @@ import 'pdfjs-viewer-element'
|
|
|
78
78
|
## Usage
|
|
79
79
|
|
|
80
80
|
```html
|
|
81
|
-
<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-
|
|
81
|
+
<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-5.3.93-dist"></pdfjs-viewer-element>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
## Attributes
|
|
@@ -130,7 +130,7 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
|
|
|
130
130
|
```html
|
|
131
131
|
<pdfjs-viewer-element
|
|
132
132
|
src="/file.pdf"
|
|
133
|
-
viewer-path="/pdfjs-
|
|
133
|
+
viewer-path="/pdfjs-5.3.93-dist"
|
|
134
134
|
viewer-css-theme="DARK">
|
|
135
135
|
</pdfjs-viewer-element>
|
|
136
136
|
```
|
|
@@ -142,7 +142,7 @@ You can add your own CSS rules to the viewer application using `viewer-extra-sty
|
|
|
142
142
|
```html
|
|
143
143
|
<pdfjs-viewer-element
|
|
144
144
|
src="/file.pdf"
|
|
145
|
-
viewer-path="/pdfjs-
|
|
145
|
+
viewer-path="/pdfjs-5.3.93-dist"
|
|
146
146
|
viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
|
|
147
147
|
viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
|
|
148
148
|
</pdfjs-viewer-element>
|
|
@@ -175,7 +175,7 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
|
|
|
175
175
|
`initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
|
|
176
176
|
|
|
177
177
|
```html
|
|
178
|
-
<pdfjs-viewer-element viewer-path="/pdfjs-
|
|
178
|
+
<pdfjs-viewer-element viewer-path="/pdfjs-5.3.93-dist"></pdfjs-viewer-element>
|
|
179
179
|
```
|
|
180
180
|
|
|
181
181
|
```javascript
|
|
@@ -1,118 +1,119 @@
|
|
|
1
|
-
const y = (p,
|
|
2
|
-
let s =
|
|
3
|
-
s ? o(s) : new MutationObserver((r,
|
|
4
|
-
Array.from(
|
|
5
|
-
o(
|
|
1
|
+
const y = (p, e) => new Promise((o) => {
|
|
2
|
+
let s = e.querySelector(p);
|
|
3
|
+
s ? o(s) : new MutationObserver((r, t) => {
|
|
4
|
+
Array.from(e.querySelectorAll(p)).forEach((n) => {
|
|
5
|
+
o(n), t.disconnect();
|
|
6
6
|
});
|
|
7
|
-
}).observe(
|
|
8
|
-
}),
|
|
7
|
+
}).observe(e, { childList: !0, subtree: !0 });
|
|
8
|
+
}), T = { trailing: !0 }, E = "/pdfjs", D = "/web/viewer.html", A = "", C = "", P = "", k = "", V = "", F = "none", R = "", O = "", L = "", I = "", j = "", W = "", q = "", M = "", v = "AUTOMATIC", $ = "", z = "", H = "", b = { AUTOMATIC: 0, LIGHT: 1, DARK: 2 }, N = ["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
9
|
class x extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(), this.onIframeReady = function(s, r = 25,
|
|
12
|
-
if (
|
|
13
|
-
let
|
|
14
|
-
const
|
|
15
|
-
return await
|
|
16
|
-
}(s,
|
|
17
|
-
if (a = null,
|
|
18
|
-
const
|
|
19
|
-
return
|
|
11
|
+
super(), this.onIframeReady = (function(s, r = 25, t = {}) {
|
|
12
|
+
if (t = { ...T, ...t }, !Number.isFinite(r)) throw new TypeError("Expected `wait` to be a finite number");
|
|
13
|
+
let n, i, a, h, l = [];
|
|
14
|
+
const c = (d, u) => (a = (async function(m, f, w) {
|
|
15
|
+
return await m.apply(f, w);
|
|
16
|
+
})(s, d, u), a.finally(() => {
|
|
17
|
+
if (a = null, t.trailing && h && !i) {
|
|
18
|
+
const m = c(d, h);
|
|
19
|
+
return h = null, m;
|
|
20
20
|
}
|
|
21
21
|
}), a);
|
|
22
|
-
return function(...
|
|
23
|
-
return a ? (
|
|
24
|
-
const
|
|
25
|
-
clearTimeout(
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
for (const w of
|
|
29
|
-
|
|
30
|
-
}, r),
|
|
22
|
+
return function(...d) {
|
|
23
|
+
return a ? (t.trailing && (h = d), a) : new Promise((u) => {
|
|
24
|
+
const m = !i && t.leading;
|
|
25
|
+
clearTimeout(i), i = setTimeout(() => {
|
|
26
|
+
i = null;
|
|
27
|
+
const f = t.leading ? n : c(this, d);
|
|
28
|
+
for (const w of l) w(f);
|
|
29
|
+
l = [];
|
|
30
|
+
}, r), m ? (n = c(this, d), u(n)) : l.push(u);
|
|
31
31
|
});
|
|
32
32
|
};
|
|
33
|
-
}(async (s) => {
|
|
33
|
+
})(async (s) => {
|
|
34
34
|
await y("iframe", this.shadowRoot), s();
|
|
35
35
|
}, 0, { leading: !0 }), this.setViewerExtraStyles = (s, r = "extra") => {
|
|
36
|
-
var
|
|
37
|
-
if (!s) return void ((
|
|
38
|
-
if (((
|
|
39
|
-
const
|
|
40
|
-
|
|
36
|
+
var n, i, a, h, l;
|
|
37
|
+
if (!s) return void ((i = (n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector(`style[${r}]`)) == null ? void 0 : i.remove());
|
|
38
|
+
if (((h = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${r}]`)) == null ? void 0 : h.innerHTML) === s) return;
|
|
39
|
+
const t = document.createElement("style");
|
|
40
|
+
t.innerHTML = s, t.setAttribute(r, ""), (l = this.iframe.contentDocument) == null || l.head.appendChild(t);
|
|
41
41
|
}, this.injectExtraStylesLinks = (s) => {
|
|
42
42
|
s && s.replace(/'|]|\[/g, "").split(",").map((r) => r.trim()).forEach((r) => {
|
|
43
|
-
var
|
|
44
|
-
if ((
|
|
45
|
-
const
|
|
46
|
-
|
|
43
|
+
var i, a;
|
|
44
|
+
if ((i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector(`link[href="${r}"]`)) return;
|
|
45
|
+
const n = document.createElement("link");
|
|
46
|
+
n.rel = "stylesheet", n.href = r, (a = this.iframe.contentDocument) == null || a.head.appendChild(n);
|
|
47
47
|
});
|
|
48
48
|
}, this.initialize = () => new Promise(async (s) => {
|
|
49
49
|
var r;
|
|
50
50
|
await y("iframe", this.shadowRoot), (r = this.iframe) == null || r.addEventListener("load", async () => {
|
|
51
|
-
var
|
|
52
|
-
await ((
|
|
51
|
+
var t, n, i;
|
|
52
|
+
await ((n = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplication) == null ? void 0 : n.initializedPromise), s((i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplication);
|
|
53
53
|
}, { once: !0 });
|
|
54
54
|
});
|
|
55
|
-
const
|
|
55
|
+
const e = 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
58
|
<iframe frameborder="0" width="100%" loading="lazy"></iframe>
|
|
59
|
-
`,
|
|
59
|
+
`, e.appendChild(o.content.cloneNode(!0));
|
|
60
60
|
}
|
|
61
61
|
static get observedAttributes() {
|
|
62
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"];
|
|
63
63
|
}
|
|
64
64
|
connectedCallback() {
|
|
65
65
|
this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
|
|
66
|
-
var
|
|
67
|
-
this.setCssTheme(this.getCssThemeOption()), this.injectExtraStylesLinks(this.getAttribute("viewer-extra-styles-urls") ?? z), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles") ?? $), this.getAttribute("src") !== A && ((o = (
|
|
66
|
+
var e, o, s, r, t, n, i, a;
|
|
67
|
+
this.setCssTheme(this.getCssThemeOption()), this.injectExtraStylesLinks(this.getAttribute("viewer-extra-styles-urls") ?? z), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles") ?? $), this.getAttribute("src") !== A && ((o = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplicationOptions) == null || o.set("defaultUrl", "")), (r = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplicationOptions) == null || r.set("disablePreferences", !0), (n = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplicationOptions) == null || n.set("pdfBugEnabled", !0), (a = (i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplicationOptions) == null || a.set("eventBusDispatchToDOM", !0);
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
|
-
attributeChangedCallback(
|
|
71
|
-
N.includes(
|
|
70
|
+
attributeChangedCallback(e) {
|
|
71
|
+
N.includes(e) ? this.onIframeReady(() => this.mountViewer(this.getIframeSrc())) : this.onIframeReady(() => {
|
|
72
72
|
this.iframe.src = this.getIframeSrc();
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
75
|
getIframeSrc() {
|
|
76
|
-
const
|
|
76
|
+
const e = this.getFullPath(this.getAttribute("src") || A), o = this.getFullPath(this.getAttribute("viewer-path") || E), s = this.getAttribute("page") || C, r = this.getAttribute("search") || P, t = this.getAttribute("phrase") || k, n = this.getAttribute("zoom") || V, i = this.getAttribute("pagemode") || F, a = this.getAttribute("disable-worker") || O, h = this.getAttribute("text-layer") || L, l = this.getAttribute("disable-font-face") || I, c = this.getAttribute("disable-range") || j, d = this.getAttribute("disable-stream") || W, u = this.getAttribute("disable-auto-fetch") || q, m = this.getAttribute("verbosity") || M, f = this.getAttribute("locale") || R, w = this.getAttribute("viewer-css-theme") || v, S = !!(this.getAttribute("viewer-extra-styles") || $), g = this.getAttribute("nameddest") || H;
|
|
77
77
|
return `
|
|
78
78
|
${o}${D}?file=
|
|
79
|
-
${encodeURIComponent(
|
|
80
|
-
${
|
|
79
|
+
${encodeURIComponent(e)}#page=${s}&zoom=${n}&pagemode=${i}&search=${r}&phrase=${t}&textLayer=
|
|
80
|
+
${h}&disableWorker=
|
|
81
81
|
${a}&disableFontFace=
|
|
82
|
-
${
|
|
83
|
-
${
|
|
84
|
-
${
|
|
85
|
-
${
|
|
86
|
-
${
|
|
87
|
-
${
|
|
82
|
+
${l}&disableRange=
|
|
83
|
+
${c}&disableStream=
|
|
84
|
+
${d}&disableAutoFetch=
|
|
85
|
+
${u}&verbosity=
|
|
86
|
+
${m}
|
|
87
|
+
${f ? "&locale=" + f : ""}&viewerCssTheme=
|
|
88
88
|
${w}&viewerExtraStyles=
|
|
89
89
|
${S}
|
|
90
90
|
${g ? "&nameddest=" + g : ""}`;
|
|
91
91
|
}
|
|
92
|
-
mountViewer(
|
|
93
|
-
|
|
92
|
+
mountViewer(e) {
|
|
93
|
+
e && this.iframe && (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
|
|
94
94
|
}
|
|
95
|
-
getFullPath(
|
|
96
|
-
return
|
|
95
|
+
getFullPath(e) {
|
|
96
|
+
return e.startsWith("/") ? `${window.location.origin}${e}` : e;
|
|
97
97
|
}
|
|
98
98
|
getCssThemeOption() {
|
|
99
|
-
const
|
|
100
|
-
return Object.keys(b).includes(
|
|
99
|
+
const e = this.getAttribute("viewer-css-theme");
|
|
100
|
+
return Object.keys(b).includes(e) ? b[e] : b[v];
|
|
101
101
|
}
|
|
102
|
-
setCssTheme(
|
|
103
|
-
var o, s, r,
|
|
104
|
-
if (
|
|
102
|
+
setCssTheme(e) {
|
|
103
|
+
var o, s, r, t, n;
|
|
104
|
+
if (e === b.DARK) {
|
|
105
105
|
if (!((o = this.iframe.contentDocument) != null && o.styleSheets.length)) return;
|
|
106
|
-
for (const
|
|
107
|
-
const
|
|
108
|
-
var
|
|
109
|
-
return ((
|
|
110
|
-
}).map((l) =>
|
|
106
|
+
for (const i of Array.from(this.iframe.contentDocument.styleSheets)) if ((s = i.href) != null && s.includes("/web/viewer.css")) {
|
|
107
|
+
const a = (i == null ? void 0 : i.cssRules) || [], h = Object.keys(a).filter((l) => {
|
|
108
|
+
var c;
|
|
109
|
+
return ((c = a[Number(l)]) == null ? void 0 : c.conditionText) === "(prefers-color-scheme: dark)";
|
|
110
|
+
}).map((l) => a[Number(l)].cssText.split(`@media (prefers-color-scheme: dark) {
|
|
111
111
|
`)[1].split(`
|
|
112
112
|
}`)[0]);
|
|
113
|
-
this.setViewerExtraStyles(
|
|
113
|
+
this.setViewerExtraStyles(h.join(""), "theme");
|
|
114
114
|
}
|
|
115
|
-
} else (
|
|
115
|
+
} else (t = (r = this.iframe.contentDocument) == null ? void 0 : r.head.querySelector("style[theme]")) == null || t.remove();
|
|
116
|
+
(n = this.iframe.contentWindow) == null || n.PDFViewerApplicationOptions.set("viewerCssTheme", e);
|
|
116
117
|
}
|
|
117
118
|
}
|
|
118
119
|
window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = x, window.customElements.define("pdfjs-viewer-element", x));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pdfjs-viewer-element",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Oleksandr Shevchuk",
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@awlsn/pdfjs-full": "^4.3.1",
|
|
36
36
|
"@rollup/plugin-terser": "^0.4.4",
|
|
37
|
-
"@types/node": "^22.
|
|
37
|
+
"@types/node": "^22.18.8",
|
|
38
38
|
"@vitest/browser": "^3.2.4",
|
|
39
39
|
"jsdom": "^26.1.0",
|
|
40
|
-
"typescript": "^5.
|
|
41
|
-
"vite": "^6.3.
|
|
40
|
+
"typescript": "^5.9.3",
|
|
41
|
+
"vite": "^6.3.6",
|
|
42
42
|
"vitest": "^3.2.4",
|
|
43
|
-
"webdriverio": "^9.
|
|
43
|
+
"webdriverio": "^9.20.0"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"perfect-debounce": "^1.0.0"
|