pdfjs-viewer-element 2.6.0 → 2.6.2

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.
Files changed (4) hide show
  1. package/README.md +7 -11
  2. package/dist/pdfjs-viewer-element.js +66 -55
  3. package/package.json +1 -1
  4. package/types/pdfjs-viewer-element.d.ts +2 -2
package/README.md CHANGED
@@ -64,7 +64,7 @@ Using browser:
64
64
  ## Usage
65
65
 
66
66
  ```html
67
- <pdfjs-viewer-element src="/pdf-file.pdf" viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
67
+ <pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
68
68
  ```
69
69
 
70
70
  ## Attributes
@@ -100,21 +100,21 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
100
100
  ```html
101
101
  <pdfjs-viewer-element
102
102
  src="/file.pdf"
103
- viewer-path="/path-to-viewer"
103
+ viewer-path="/pdfjs-4.0.379-dist"
104
104
  viewer-css-theme="DARK">
105
105
  </pdfjs-viewer-element>
106
106
  ```
107
107
 
108
108
  ## Viewer extra styles
109
109
 
110
- You can add your own CSS rules to the viewer application using `viewer-extra-styles` attribute:
110
+ You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
111
111
 
112
112
  ```html
113
- <!-- Remove download button from viewer toolbar -->
114
113
  <pdfjs-viewer-element
115
114
  src="/file.pdf"
116
- viewer-path="/path-to-viewer"
117
- viewer-extra-styles="#download { display: none }">
115
+ viewer-path="/pdfjs-4.0.379-dist"
116
+ viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
117
+ viewer-extra-styles-urls="['/demo/extra-styles-one.css', '/demo/extra-styles-two.css']">
118
118
  </pdfjs-viewer-element>
119
119
  ```
120
120
 
@@ -123,7 +123,7 @@ You can add your own CSS rules to the viewer application using `viewer-extra-sty
123
123
  `initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
124
124
 
125
125
  ```html
126
- <pdfjs-viewer-element viewer-path="/path-to-viewer"></pdfjs-viewer-element>
126
+ <pdfjs-viewer-element viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
127
127
  ```
128
128
 
129
129
  ```javascript
@@ -132,10 +132,6 @@ const viewer = document.querySelector('pdfjs-viewer-element')
132
132
  const viewerApp = await viewer.initialize()
133
133
  // Open PDF file data using Uint8Array instead of URL
134
134
  viewerApp.open({ data: pdfData })
135
- // Use event bus to handle viewer application events
136
- viewerApp.eventBus.on('pagesloaded', () => {
137
- console.log('Viewer pages loaded')
138
- })
139
135
  ```
140
136
 
141
137
  ## License
package/dist/pdfjs-viewer-element.js CHANGED
@@ -1,12 +1,12 @@
1
- const w = (m, e) => new Promise((r) => {
2
- let i = e.querySelector(m);
3
- if (i) {
4
- r(i);
1
+ const w = (m, e) => new Promise((s) => {
2
+ let r = e.querySelector(m);
3
+ if (r) {
4
+ s(r);
5
5
  return;
6
6
  }
7
- new MutationObserver((s, n) => {
8
- Array.from(e.querySelectorAll(m)).forEach((t) => {
9
- r(t), n.disconnect();
7
+ new MutationObserver((n, t) => {
8
+ Array.from(e.querySelectorAll(m)).forEach((i) => {
9
+ s(i), t.disconnect();
10
10
  });
11
11
  }).observe(e, {
12
12
  childList: !0,
@@ -15,31 +15,31 @@ const w = (m, e) => new Promise((r) => {
15
15
  }), g = {
16
16
  trailing: !0
17
17
  };
18
- function b(m, e = 25, r = {}) {
19
- if (r = { ...g, ...r }, !Number.isFinite(e))
18
+ function v(m, e = 25, s = {}) {
19
+ if (s = { ...g, ...s }, !Number.isFinite(e))
20
20
  throw new TypeError("Expected `wait` to be a finite number");
21
- let i, s, n = [], t, o;
22
- const a = (l, h) => (t = v(m, l, h), t.finally(() => {
23
- if (t = null, r.trailing && o && !s) {
24
- const u = a(l, o);
25
- return o = null, u;
21
+ let r, n, t = [], i, a;
22
+ const o = (l, h) => (i = b(m, l, h), i.finally(() => {
23
+ if (i = null, s.trailing && a && !n) {
24
+ const u = o(l, a);
25
+ return a = null, u;
26
26
  }
27
- }), t);
27
+ }), i);
28
28
  return function(...l) {
29
- return t ? (r.trailing && (o = l), t) : new Promise((h) => {
30
- const u = !s && r.leading;
31
- clearTimeout(s), s = setTimeout(() => {
32
- s = null;
33
- const p = r.leading ? i : a(this, l);
34
- for (const y of n)
29
+ return i ? (s.trailing && (a = l), i) : new Promise((h) => {
30
+ const u = !n && s.leading;
31
+ clearTimeout(n), n = setTimeout(() => {
32
+ n = null;
33
+ const p = s.leading ? r : o(this, l);
34
+ for (const y of t)
35
35
  y(p);
36
- n = [];
37
- }, e), u ? (i = a(this, l), h(i)) : n.push(h);
36
+ t = [];
37
+ }, e), u ? (r = o(this, l), h(r)) : t.push(h);
38
38
  });
39
39
  };
40
40
  }
41
- async function v(m, e, r) {
42
- return await m.apply(e, r);
41
+ async function b(m, e, s) {
42
+ return await m.apply(e, s);
43
43
  }
44
44
  const c = {
45
45
  viewerPath: "/pdfjs",
@@ -53,47 +53,58 @@ const c = {
53
53
  locale: "",
54
54
  textLayer: "",
55
55
  viewerCssTheme: "AUTOMATIC",
56
- viewerExtraStyles: ""
56
+ viewerExtraStyles: "",
57
+ viewerExtraStylesUrls: ""
57
58
  }, d = {
58
59
  AUTOMATIC: 0,
59
60
  // Default value.
60
61
  LIGHT: 1,
61
62
  DARK: 2
62
- }, A = ["src", "viewer-path", "locale", "viewer-css-theme", "viewer-extra-styles"];
63
+ }, A = ["src", "viewer-path", "locale", "text-layer", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls"];
63
64
  class f extends HTMLElement {
64
65
  constructor() {
65
- super(), this.onIframeReady = b(async (i) => {
66
- await w("iframe", this.shadowRoot), i();
67
- }, 0, { leading: !0 }), this.setViewerExtraStyles = (i, s = "extra") => {
68
- var t, o, a, l, h;
69
- if (!i) {
70
- (o = (t = this.iframe.contentDocument) == null ? void 0 : t.head.querySelector(`style[${s}]`)) == null || o.remove();
66
+ super(), this.onIframeReady = v(async (r) => {
67
+ await w("iframe", this.shadowRoot), r();
68
+ }, 0, { leading: !0 }), this.setViewerExtraStyles = (r, n = "extra") => {
69
+ var i, a, o, l, h;
70
+ if (!r) {
71
+ (a = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector(`style[${n}]`)) == null || a.remove();
71
72
  return;
72
73
  }
73
- if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${s}]`)) == null ? void 0 : l.innerHTML) === i)
74
+ if (((l = (o = this.iframe.contentDocument) == null ? void 0 : o.head.querySelector(`style[${n}]`)) == null ? void 0 : l.innerHTML) === r)
74
75
  return;
75
- const n = document.createElement("style");
76
- n.innerHTML = i, n.setAttribute(s, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(n);
77
- }, this.initialize = () => new Promise(async (i) => {
78
- var s;
79
- await w("iframe", this.shadowRoot), (s = this.iframe) == null || s.addEventListener("load", async () => {
80
- var n, t, o;
81
- await ((t = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplication) == null ? void 0 : t.initializedPromise), i((o = this.iframe.contentWindow) == null ? void 0 : o.PDFViewerApplication);
76
+ const t = document.createElement("style");
77
+ t.innerHTML = r, t.setAttribute(n, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(t);
78
+ }, this.injectExtraStylesLinks = (r) => {
79
+ if (!r)
80
+ return;
81
+ r.replace(/'|]|\[/g, "").split(",").map((t) => t.trim()).forEach((t) => {
82
+ var o, l;
83
+ if ((o = this.iframe.contentDocument) == null ? void 0 : o.head.querySelector(`link[href="${t}"]`))
84
+ return;
85
+ const a = document.createElement("link");
86
+ a.rel = "stylesheet", a.href = t, (l = this.iframe.contentDocument) == null || l.head.appendChild(a);
87
+ });
88
+ }, this.initialize = () => new Promise(async (r) => {
89
+ var n;
90
+ await w("iframe", this.shadowRoot), (n = this.iframe) == null || n.addEventListener("load", async () => {
91
+ var t, i, a;
92
+ await ((i = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplication) == null ? void 0 : i.initializedPromise), r((a = this.iframe.contentWindow) == null ? void 0 : a.PDFViewerApplication);
82
93
  }, { once: !0 });
83
94
  });
84
- const e = this.attachShadow({ mode: "open" }), r = document.createElement("template");
85
- r.innerHTML = `
95
+ const e = this.attachShadow({ mode: "open" }), s = document.createElement("template");
96
+ s.innerHTML = `
86
97
  <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
87
98
  <iframe frameborder="0" width="100%" loading="lazy"></iframe>
88
- `, e.appendChild(r.content.cloneNode(!0));
99
+ `, e.appendChild(s.content.cloneNode(!0));
89
100
  }
90
101
  static get observedAttributes() {
91
- return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer", "viewer-css-theme", "viewer-extra-styles"];
102
+ return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls"];
92
103
  }
93
104
  connectedCallback() {
94
105
  this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
95
- var e, r, i, s, n, t, o, a;
96
- this.setCssTheme(this.getCssThemeOption()), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles")), this.getAttribute("src") !== c.src && ((r = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplicationOptions) == null || r.set("defaultUrl", "")), (s = (i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplicationOptions) == null || s.set("disablePreferences", !0), (t = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplicationOptions) == null || t.set("pdfBugEnabled", !0), (a = (o = this.iframe.contentWindow) == null ? void 0 : o.PDFViewerApplicationOptions) == null || a.set("eventBusDispatchToDOM", !0);
106
+ var e, s, r, n, t, i, a, o;
107
+ this.setCssTheme(this.getCssThemeOption()), this.injectExtraStylesLinks(this.getAttribute("viewer-extra-styles-urls") ?? c.viewerExtraStylesUrls), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles") ?? c.viewerExtraStyles), this.getAttribute("src") !== c.src && ((s = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplicationOptions) == null || s.set("defaultUrl", "")), (n = (r = this.iframe.contentWindow) == null ? void 0 : r.PDFViewerApplicationOptions) == null || n.set("disablePreferences", !0), (i = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplicationOptions) == null || i.set("pdfBugEnabled", !0), (o = (a = this.iframe.contentWindow) == null ? void 0 : a.PDFViewerApplicationOptions) == null || o.set("eventBusDispatchToDOM", !0);
97
108
  });
98
109
  }
99
110
  attributeChangedCallback(e) {
@@ -106,8 +117,8 @@ class f extends HTMLElement {
106
117
  this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
107
118
  }
108
119
  getIframeSrc() {
109
- const e = this.getFullPath(this.getAttribute("src") || c.src), r = this.getFullPath(this.getAttribute("viewer-path") || c.viewerPath), i = this.getAttribute("page") || c.page, s = this.getAttribute("search") || c.search, n = this.getAttribute("phrase") || c.phrase, t = this.getAttribute("zoom") || c.zoom, o = this.getAttribute("pagemode") || c.pagemode, a = this.getAttribute("locale") || c.locale, l = this.getAttribute("text-layer") || c.textLayer, h = this.getAttribute("viewer-css-theme") || c.viewerCssTheme, u = !!(this.getAttribute("viewer-extra-styles") || c.viewerExtraStyles);
110
- return `${r}${c.viewerEntry}?file=${encodeURIComponent(e)}#page=${i}&zoom=${t}&pagemode=${o}&search=${s}&phrase=${n}&textLayer=${l}${a ? "&locale=" + a : ""}&viewerCssTheme=${h}&viewerExtraStyles=${u}`;
120
+ const e = this.getFullPath(this.getAttribute("src") || c.src), s = this.getFullPath(this.getAttribute("viewer-path") || c.viewerPath), r = this.getAttribute("page") || c.page, n = this.getAttribute("search") || c.search, t = this.getAttribute("phrase") || c.phrase, i = this.getAttribute("zoom") || c.zoom, a = this.getAttribute("pagemode") || c.pagemode, o = this.getAttribute("locale") || c.locale, l = this.getAttribute("text-layer") || c.textLayer, h = this.getAttribute("viewer-css-theme") || c.viewerCssTheme, u = !!(this.getAttribute("viewer-extra-styles") || c.viewerExtraStyles);
121
+ return `${s}${c.viewerEntry}?file=${encodeURIComponent(e)}#page=${r}&zoom=${i}&pagemode=${a}&search=${n}&phrase=${t}&textLayer=${l}${o ? "&locale=" + o : ""}&viewerCssTheme=${h}&viewerExtraStyles=${u}`;
111
122
  }
112
123
  mountViewer(e) {
113
124
  !e || !this.iframe || (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
@@ -120,17 +131,17 @@ class f extends HTMLElement {
120
131
  return Object.keys(d).includes(e) ? d[e] : d[c.viewerCssTheme];
121
132
  }
122
133
  setCssTheme(e) {
123
- var r, i, s;
134
+ var s, r, n;
124
135
  if (e === d.DARK) {
125
- const n = (r = this.iframe.contentDocument) == null ? void 0 : r.styleSheets[0], t = (n == null ? void 0 : n.cssRules) || [], o = Object.keys(t).filter((a) => {
136
+ const t = (s = this.iframe.contentDocument) == null ? void 0 : s.styleSheets[0], i = (t == null ? void 0 : t.cssRules) || [], a = Object.keys(i).filter((o) => {
126
137
  var l;
127
- return ((l = t[Number(a)]) == null ? void 0 : l.conditionText) === "(prefers-color-scheme: dark)";
128
- }).map((a) => t[Number(a)].cssText.split(`@media (prefers-color-scheme: dark) {
138
+ return ((l = i[Number(o)]) == null ? void 0 : l.conditionText) === "(prefers-color-scheme: dark)";
139
+ }).map((o) => i[Number(o)].cssText.split(`@media (prefers-color-scheme: dark) {
129
140
  `)[1].split(`
130
141
  }`)[0]);
131
- this.setViewerExtraStyles(o.join(""), "theme");
142
+ this.setViewerExtraStyles(a.join(""), "theme");
132
143
  } else
133
- (s = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector("style[theme]")) == null || s.remove();
144
+ (n = (r = this.iframe.contentDocument) == null ? void 0 : r.head.querySelector("style[theme]")) == null || n.remove();
134
145
  }
135
146
  }
136
147
  window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = f, window.customElements.define("pdfjs-viewer-element", f));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pdfjs-viewer-element",
3
- "version": "2.6.0",
3
+ "version": "2.6.2",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "Oleksandr Shevchuk",
package/types/pdfjs-viewer-element.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare class PdfjsViewerElement extends HTMLElement {
17
17
  private getCssThemeOption;
18
18
  private setCssTheme;
19
19
  private setViewerExtraStyles;
20
+ private injectExtraStylesLinks;
20
21
  initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
21
22
  }
22
23
  declare global {
@@ -31,9 +32,8 @@ export interface PdfjsViewerElementIframeWindow extends Window {
31
32
  PDFViewerApplication: {
32
33
  initializedPromise: Promise<void>;
33
34
  initialized: boolean;
34
- open: (data: Uint8Array) => void;
35
35
  eventBus: Record<string, any>;
36
- setCssTheme: () => void;
36
+ open: (data: Uint8Array) => void;
37
37
  };
38
38
  PDFViewerApplicationOptions: {
39
39
  set: (name: string, value: string | boolean | number) => void;