pdfjs-viewer-element 2.5.6 → 2.6.1

package/README.md

@@ -3,8 +3,11 @@
 </p>
 <h1 align="center">pdfjs-viewer-element</h1>
 
-Probably the simplest integration of PDF.js viewer. 
-The package provide a custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html), supported in all [major browsers](https://caniuse.com/custom-elementsv1), and works with most [JS frameworks](https://custom-elements-everywhere.com/). 
+The simplest integration of [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe` element and web component. 
+The package provides a custom element, based on PDF.js [viewer options](https://github.com/mozilla/pdf.js/wiki/Viewer-options) and [URL parameters](https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js#url-parameters) API. 
+Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and works with most [JS frameworks](https://custom-elements-everywhere.com/).
+
+See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in Vue, React, Svelte, or simple HTML pages.
 
 ⚠️ `pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer.
 
@@ -17,11 +20,9 @@ The prebuilt comes with each PDF.js release. Supported releases:
 ✅ [v4.0.189](https://github.com/mozilla/pdf.js/releases/tag/v4.0.189)
 
 
-To use the package you should download and **place the prebuilt** files to some directory of your project.
-
-Then specify the path to the directory with `viewer-path` property (`/pdfjs` by default).
+To use the package you should download and **place the prebuilt** files in the project.
 
-See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in Vue, React, Svelte or simple HTML page.
+Then specify the path to the directory with the `viewer-path` property (`/pdfjs` by default).
 
 ## Status
 
@@ -63,7 +64,7 @@ Using browser:
 ## Usage
 
 ```html
-<pdfjs-viewer-element src="/pdf-file.pdf" viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
+<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
 ```
 
 ## Attributes
@@ -86,9 +87,9 @@ Using browser:
 
 `pagemode` - Page mode `thumbs | bookmarks | attachments | layers | none`
 
-`viewer-css-theme` - Apply automatic, light or dark theme `AUTOMATIC | LIGHT | DARK`
+`viewer-css-theme` - Apply automatic, light, or dark theme `AUTOMATIC | LIGHT | DARK`
 
-`viewer-extra-styles` - Add your CSS rules to viewer application
+`viewer-extra-styles` - Add your CSS rules to the viewer application
 
 Play with attributes on [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
@@ -99,7 +100,7 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 ```html
 <pdfjs-viewer-element 
   src="/file.pdf" 
-  viewer-path="/path-to-viewer"
+  viewer-path="/pdfjs-4.0.379-dist"
   viewer-css-theme="DARK">
 </pdfjs-viewer-element>
 ```
@@ -112,7 +113,7 @@ You can add your own CSS rules to the viewer application using `viewer-extra-sty
 <!-- Remove download button from viewer toolbar -->
 <pdfjs-viewer-element 
   src="/file.pdf" 
-  viewer-path="/path-to-viewer"
+  viewer-path="/pdfjs-4.0.379-dist"
   viewer-extra-styles="#download { display: none }">
 </pdfjs-viewer-element>
 ```
@@ -122,7 +123,7 @@ You can add your own CSS rules to the viewer application using `viewer-extra-sty
 `initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
 
 ```html
-<pdfjs-viewer-element viewer-path="/path-to-viewer"></pdfjs-viewer-element>
+<pdfjs-viewer-element viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
 ```
 
 ```javascript
@@ -131,11 +132,7 @@ const viewer = document.querySelector('pdfjs-viewer-element')
 const viewerApp = await viewer.initialize()
 // Open PDF file data using Uint8Array instead of URL
 viewerApp.open({ data: pdfData })
-// Use event bus to handle viewer application events
-viewerApp.eventBus.on('pagesloaded', () => {
-  console.log('Viewer pages loaded')
-})
 ```
 
 ## License
-[MIT](http://opensource.org/licenses/MIT)
+[MIT](http://opensource.org/licenses/MIT)

package/dist/pdfjs-viewer-element.js

@@ -1,4 +1,4 @@
-const f = (m, e) => new Promise((r) => {
+const w = (m, e) => new Promise((r) => {
   let i = e.querySelector(m);
   if (i) {
     r(i);
@@ -12,71 +12,71 @@ const f = (m, e) => new Promise((r) => {
     childList: !0,
     subtree: !0
   });
-}), y = {
+}), g = {
   trailing: !0
 };
 function b(m, e = 25, r = {}) {
-  if (r = { ...y, ...r }, !Number.isFinite(e))
+  if (r = { ...g, ...r }, !Number.isFinite(e))
     throw new TypeError("Expected `wait` to be a finite number");
   let i, s, n = [], t, o;
-  const a = (c, h) => (t = v(m, c, h), t.finally(() => {
+  const a = (l, h) => (t = v(m, l, h), t.finally(() => {
     if (t = null, r.trailing && o && !s) {
-      const u = a(c, o);
+      const u = a(l, o);
       return o = null, u;
     }
   }), t);
-  return function(...c) {
-    return t ? (r.trailing && (o = c), t) : new Promise((h) => {
+  return function(...l) {
+    return t ? (r.trailing && (o = l), t) : new Promise((h) => {
       const u = !s && r.leading;
       clearTimeout(s), s = setTimeout(() => {
         s = null;
-        const d = r.leading ? i : a(this, c);
-        for (const g of n)
-          g(d);
+        const p = r.leading ? i : a(this, l);
+        for (const y of n)
+          y(p);
         n = [];
-      }, e), u ? (i = a(this, c), h(i)) : n.push(h);
+      }, e), u ? (i = a(this, l), h(i)) : n.push(h);
     });
   };
 }
 async function v(m, e, r) {
   return await m.apply(e, r);
 }
-const l = {
+const c = {
   viewerPath: "/pdfjs",
   viewerEntry: "/web/viewer.html",
   src: "",
   page: "",
   search: "",
   phrase: "",
-  zoom: "auto",
+  zoom: "",
   pagemode: "none",
   locale: "",
   textLayer: "",
   viewerCssTheme: "AUTOMATIC",
   viewerExtraStyles: ""
-}, w = {
+}, d = {
   AUTOMATIC: 0,
   // Default value.
   LIGHT: 1,
   DARK: 2
-};
-class p extends HTMLElement {
+}, A = ["src", "viewer-path", "locale", "text-layer", "viewer-css-theme", "viewer-extra-styles"];
+class f extends HTMLElement {
   constructor() {
     super(), this.onIframeReady = b(async (i) => {
-      await f("iframe", this.shadowRoot), i();
+      await w("iframe", this.shadowRoot), i();
     }, 0, { leading: !0 }), this.setViewerExtraStyles = (i, s = "extra") => {
-      var t, o, a, c, h;
+      var t, o, a, l, h;
       if (!i) {
         (o = (t = this.iframe.contentDocument) == null ? void 0 : t.head.querySelector(`style[${s}]`)) == null || o.remove();
         return;
       }
-      if (((c = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${s}]`)) == null ? void 0 : c.innerHTML) === i)
+      if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${s}]`)) == null ? void 0 : l.innerHTML) === i)
         return;
       const n = document.createElement("style");
       n.innerHTML = i, n.setAttribute(s, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(n);
     }, this.initialize = () => new Promise(async (i) => {
       var s;
-      await f("iframe", this.shadowRoot), (s = this.iframe) == null || s.addEventListener("load", async () => {
+      await w("iframe", this.shadowRoot), (s = this.iframe) == null || s.addEventListener("load", async () => {
         var n, t, o;
         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);
       }, { once: !0 });
@@ -91,17 +91,23 @@ class p extends HTMLElement {
     return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer", "viewer-css-theme", "viewer-extra-styles"];
   }
   connectedCallback() {
-    this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", () => {
+    this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
       var e, r, i, s, n, t, o, a;
-      this.setCssTheme(), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles")), this.getAttribute("src") !== l.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);
+      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);
     });
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(e) {
+    if (!A.includes(e)) {
+      this.onIframeReady(() => {
+        this.iframe.src = this.getIframeSrc();
+      });
+      return;
+    }
     this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
   }
   getIframeSrc() {
-    const e = this.getFullPath(this.getAttribute("src") || l.src), r = this.getFullPath(this.getAttribute("viewer-path") || l.viewerPath), i = this.getAttribute("page") || l.page, s = this.getAttribute("search") || l.search, n = this.getAttribute("phrase") || l.phrase, t = this.getAttribute("zoom") || l.zoom, o = this.getAttribute("pagemode") || l.pagemode, a = this.getAttribute("locale") || l.locale, c = this.getAttribute("text-layer") || l.textLayer, h = this.getAttribute("viewer-css-theme") || l.viewerCssTheme, u = !!(this.getAttribute("viewer-extra-styles") || l.viewerExtraStyles), d = `${r}${l.viewerEntry}?file=${encodeURIComponent(e)}#page=${i}&zoom=${t}&pagemode=${o}&search=${s}&phrase=${n}&textLayer=${c}${a ? "&locale=" + a : ""}&viewerCssTheme=${h}&viewerExtraStyles=${u}`;
-    return d !== this.iframe.getAttribute("src") ? d : "";
+    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);
+    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}`;
   }
   mountViewer(e) {
     !e || !this.iframe || (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
@@ -111,14 +117,14 @@ class p extends HTMLElement {
   }
   getCssThemeOption() {
     const e = this.getAttribute("viewer-css-theme");
-    return Object.keys(w).includes(e) ? w[e] : w[l.viewerCssTheme];
+    return Object.keys(d).includes(e) ? d[e] : d[c.viewerCssTheme];
   }
-  setCssTheme() {
+  setCssTheme(e) {
     var r, i, s;
-    if (this.getCssThemeOption() === w.DARK) {
+    if (e === d.DARK) {
       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) => {
-        var c;
-        return ((c = t[Number(a)]) == null ? void 0 : c.conditionText) === "(prefers-color-scheme: dark)";
+        var l;
+        return ((l = t[Number(a)]) == null ? void 0 : l.conditionText) === "(prefers-color-scheme: dark)";
       }).map((a) => t[Number(a)].cssText.split(`@media (prefers-color-scheme: dark) {
 `)[1].split(`
 }`)[0]);
@@ -127,9 +133,10 @@ class p extends HTMLElement {
       (s = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector("style[theme]")) == null || s.remove();
   }
 }
-window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = p, window.customElements.define("pdfjs-viewer-element", p));
+window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = f, window.customElements.define("pdfjs-viewer-element", f));
 export {
-  p as PdfjsViewerElement,
-  w as ViewerCssTheme,
-  p as default
+  f as PdfjsViewerElement,
+  d as ViewerCssTheme,
+  f as default,
+  A as hardRefreshAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.5.6",
+  "version": "2.6.1",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",

package/types/pdfjs-viewer-element.d.ts

@@ -3,18 +3,19 @@ export declare const ViewerCssTheme: {
     readonly LIGHT: 1;
     readonly DARK: 2;
 };
+export declare const hardRefreshAttributes: string[];
 export declare class PdfjsViewerElement extends HTMLElement {
     constructor();
     iframe: PdfjsViewerElementIframe;
     static get observedAttributes(): string[];
     connectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string): void;
     private onIframeReady;
     private getIframeSrc;
     private mountViewer;
     private getFullPath;
     private getCssThemeOption;
-    setCssTheme(): void;
+    private setCssTheme;
     private setViewerExtraStyles;
     initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
 }
@@ -30,9 +31,8 @@ export interface PdfjsViewerElementIframeWindow extends Window {
     PDFViewerApplication: {
         initializedPromise: Promise<void>;
         initialized: boolean;
-        open: (data: Uint8Array) => void;
         eventBus: Record<string, any>;
-        setCssTheme: () => void;
+        open: (data: Uint8Array) => void;
     };
     PDFViewerApplicationOptions: {
         set: (name: string, value: string | boolean | number) => void;