pdfjs-viewer-element 2.3.3 → 2.4.1

package/README.md

@@ -1,9 +1,11 @@
 # pdfjs-viewer-element
 
-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/). See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in the different frameworks.
+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/). See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in Vue, React and Svelte or pure HTML.
 
 ⚠️ `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. To use the package you should [download](http://mozilla.github.io/pdf.js/getting_started/) and **place the prebuilt** files to some directory of your project. Then specify the path to this directory with `viewer-path` property (`/pdfjs` by default).
 
+You have full access to PDF.js viewer application using `initialize` method. 
+
 ## Status
 
 [![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
@@ -14,7 +16,7 @@ A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf
 
 [Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)
 
-[Api](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
+[API](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
 
 [Live examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo)
 
@@ -67,5 +69,21 @@ Using browser:
 
 For more clarity, see the [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
+## PDF.js Viewer Application
+
+`initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
+
+```javascript
+const viewer = document.querySelector('pdfjs-viewer-element')
+// Wait for the viewer initialization, receive PDFViewerApplication
+const viewerApp = await viewer.initialize()
+// Open PDF file data using Uint8Array instead of URL
+viewerApp.open(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,12 +1,12 @@
-const w = (l, e) => new Promise((t, n) => {
-  let r = e.querySelector(l);
-  if (r) {
-    t(r);
+const m = (h, e) => new Promise((t, o) => {
+  let i = e.querySelector(h);
+  if (i) {
+    t(i);
     return;
   }
-  new MutationObserver((h, s) => {
-    Array.from(e.querySelectorAll(l)).forEach((o) => {
-      t(o), s.disconnect();
+  new MutationObserver((s, r) => {
+    Array.from(e.querySelectorAll(h)).forEach((n) => {
+      t(n), r.disconnect();
     });
   }).observe(e, {
     childList: !0,
@@ -15,33 +15,33 @@ const w = (l, e) => new Promise((t, n) => {
 }), g = {
   trailing: !0
 };
-function b(l, e = 25, t = {}) {
+function b(h, e = 25, t = {}) {
   if (t = { ...g, ...t }, !Number.isFinite(e))
     throw new TypeError("Expected `wait` to be a finite number");
-  let n, r, h = [], s, o;
-  const d = (a, c) => (s = y(l, a, c), s.finally(() => {
-    if (s = null, t.trailing && o && !r) {
-      const u = d(a, o);
-      return o = null, u;
+  let o, i, s = [], r, n;
+  const l = (c, d) => (r = y(h, c, d), r.finally(() => {
+    if (r = null, t.trailing && n && !i) {
+      const u = l(c, n);
+      return n = null, u;
     }
-  }), s);
-  return function(...a) {
-    return s ? (t.trailing && (o = a), s) : new Promise((c) => {
-      const u = !r && t.leading;
-      clearTimeout(r), r = setTimeout(() => {
-        r = null;
-        const f = t.leading ? n : d(this, a);
-        for (const p of h)
+  }), r);
+  return function(...c) {
+    return r ? (t.trailing && (n = c), r) : new Promise((d) => {
+      const u = !i && t.leading;
+      clearTimeout(i), i = setTimeout(() => {
+        i = null;
+        const f = t.leading ? o : l(this, c);
+        for (const p of s)
           p(f);
-        h = [];
-      }, e), u ? (n = d(this, a), c(n)) : h.push(c);
+        s = [];
+      }, e), u ? (o = l(this, c), d(o)) : s.push(d);
     });
   };
 }
-async function y(l, e, t) {
-  return await l.apply(e, t);
+async function y(h, e, t) {
+  return await h.apply(e, t);
 }
-const i = {
+const a = {
   viewerPath: "/pdfjs",
   viewerEntry: "/web/viewer.html",
   src: "",
@@ -53,11 +53,17 @@ const i = {
   locale: "",
   textLayer: ""
 };
-class m extends HTMLElement {
+class w extends HTMLElement {
   constructor() {
-    super(), this.debouncedRenderIframe = b(async () => {
-      await w("iframe", this.shadowRoot), this.renderViewer(this.getIframeSrc());
-    }, 0, { leading: !0 });
+    super(), this.onIframeReady = b(async (o) => {
+      await m("iframe", this.shadowRoot), o();
+    }, 0, { leading: !0 }), this.initialize = () => new Promise(async (o) => {
+      var i;
+      await m("iframe", this.shadowRoot), (i = this.iframe) == null || i.addEventListener("load", async () => {
+        var s, r, n;
+        await ((r = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplication) == null ? void 0 : r.initializedPromise), o((n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplication);
+      }, { once: !0 });
+    });
     const e = this.attachShadow({ mode: "open" }), t = document.createElement("template");
     t.innerHTML = `
       <iframe frameborder="0" width="100%"></iframe>
@@ -71,27 +77,27 @@ class m extends HTMLElement {
     this.iframe = this.shadowRoot.querySelector("iframe"), this.setEventListeners();
   }
   attributeChangedCallback() {
-    this.debouncedRenderIframe();
+    this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
   }
   getIframeSrc() {
-    const e = this.getFullPath(this.getAttribute("src") || i.src), t = this.getFullPath(this.getAttribute("viewer-path") || i.viewerPath), n = this.getAttribute("page") || i.page, r = this.getAttribute("search") || i.search, h = this.getAttribute("phrase") || i.phrase, s = this.getAttribute("zoom") || i.zoom, o = this.getAttribute("pagemode") || i.pagemode, d = this.getAttribute("locale") || i.locale, a = this.getAttribute("text-layer") || i.textLayer, c = `${t}${i.viewerEntry}?file=${encodeURIComponent(e)}#page=${n}&zoom=${s}&pagemode=${o}&search=${r}&phrase=${h}&textLayer=${a}${d ? "&locale=" + d : ""}`;
-    return c !== this.iframe.getAttribute("src") ? c : "";
+    const e = this.getFullPath(this.getAttribute("src") || a.src), t = this.getFullPath(this.getAttribute("viewer-path") || a.viewerPath), o = this.getAttribute("page") || a.page, i = this.getAttribute("search") || a.search, s = this.getAttribute("phrase") || a.phrase, r = this.getAttribute("zoom") || a.zoom, n = this.getAttribute("pagemode") || a.pagemode, l = this.getAttribute("locale") || a.locale, c = this.getAttribute("text-layer") || a.textLayer, d = `${t}${a.viewerEntry}?file=${encodeURIComponent(e)}#page=${o}&zoom=${r}&pagemode=${n}&search=${i}&phrase=${s}&textLayer=${c}${l ? "&locale=" + l : ""}`;
+    return d !== this.iframe.getAttribute("src") ? d : "";
   }
-  renderViewer(e) {
+  mountViewer(e) {
     !e || !this.iframe || (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
   }
   setEventListeners() {
     document.addEventListener("webviewerloaded", () => {
-      var e, t, n, r;
-      this.getAttribute("src") !== i.src && ((e = this.iframe.contentWindow.PDFViewerApplicationOptions) == null || e.set("defaultUrl", "")), (t = this.iframe.contentWindow.PDFViewerApplicationOptions) == null || t.set("disablePreferences", !0), (n = this.iframe.contentWindow.PDFViewerApplicationOptions) == null || n.set("pdfBugEnabled", !0), (r = this.iframe.contentWindow.PDFViewerApplicationOptions) == null || r.set("eventBusDispatchToDOM", !0);
+      var e, t, o, i, s, r, n, l;
+      this.getAttribute("src") !== a.src && ((t = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplicationOptions) == null || t.set("defaultUrl", "")), (i = (o = this.iframe.contentWindow) == null ? void 0 : o.PDFViewerApplicationOptions) == null || i.set("disablePreferences", !0), (r = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplicationOptions) == null || r.set("pdfBugEnabled", !0), (l = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplicationOptions) == null || l.set("eventBusDispatchToDOM", !0);
     });
   }
   getFullPath(e) {
     return e.startsWith("/") ? `${window.location.origin}${e}` : e;
   }
 }
-window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = m, window.customElements.define("pdfjs-viewer-element", m));
+window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = w, window.customElements.define("pdfjs-viewer-element", w));
 export {
-  m as PdfjsViewerElement,
-  m as default
+  w as PdfjsViewerElement,
+  w as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
@@ -43,6 +43,6 @@
     "typescript": "^4.6.4",
     "vite": "^4.4.9",
     "vitest": "^0.34.3",
-    "webdriverio": "^8.16.4"
+    "webdriverio": "^8.16.7"
   }
 }

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

@@ -4,18 +4,28 @@ export declare class PdfjsViewerElement extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
-    private debouncedRenderIframe;
+    private onIframeReady;
     private getIframeSrc;
-    private renderViewer;
+    private mountViewer;
     private setEventListeners;
     private getFullPath;
+    initialize: () => Promise<unknown>;
 }
 declare global {
     interface Window {
-        'PdfjsViewerElement': typeof PdfjsViewerElement;
+        PdfjsViewerElement: typeof PdfjsViewerElement;
     }
 }
+export interface IPdfjsViewerElement extends HTMLElement {
+    initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
+}
 export interface PdfjsViewerElementIframeWindow extends Window {
+    PDFViewerApplication: {
+        initializedPromise: Promise<void>;
+        initialized: boolean;
+        open: (data: Uint8Array) => void;
+        eventBus: Record<string, any>;
+    };
     PDFViewerApplicationOptions: {
         set: (name: string, value: string | boolean) => void;
     };
@@ -23,4 +33,9 @@ export interface PdfjsViewerElementIframeWindow extends Window {
 export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
     contentWindow: PdfjsViewerElementIframeWindow;
 }
+export interface PdfjsViewerLoadedEvent extends Event {
+    detail: {
+        source: PdfjsViewerElementIframeWindow;
+    };
+}
 export default PdfjsViewerElement;