pdfjs-viewer-element 2.5.1 → 2.5.2

package/dist/pdfjs-viewer-element.js

@@ -1,47 +1,47 @@
-const m = (h, e) => new Promise((t, o) => {
-  let i = e.querySelector(h);
+const p = (m, e) => new Promise((t) => {
+  let i = e.querySelector(m);
   if (i) {
     t(i);
     return;
   }
-  new MutationObserver((s, r) => {
-    Array.from(e.querySelectorAll(h)).forEach((n) => {
-      t(n), r.disconnect();
+  new MutationObserver((s, n) => {
+    Array.from(e.querySelectorAll(m)).forEach((r) => {
+      t(r), n.disconnect();
     });
   }).observe(e, {
     childList: !0,
     subtree: !0
   });
-}), g = {
+}), y = {
   trailing: !0
 };
-function b(h, e = 25, t = {}) {
-  if (t = { ...g, ...t }, !Number.isFinite(e))
+function v(m, e = 25, t = {}) {
+  if (t = { ...y, ...t }, !Number.isFinite(e))
     throw new TypeError("Expected `wait` to be a finite number");
-  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;
+  let i, s, n = [], r, a;
+  const c = (o, h) => (r = b(m, o, h), r.finally(() => {
+    if (r = null, t.trailing && a && !s) {
+      const u = c(o, a);
+      return a = null, u;
     }
   }), 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);
-        s = [];
-      }, e), u ? (o = l(this, c), d(o)) : s.push(d);
+  return function(...o) {
+    return r ? (t.trailing && (a = o), r) : new Promise((h) => {
+      const u = !s && t.leading;
+      clearTimeout(s), s = setTimeout(() => {
+        s = null;
+        const d = t.leading ? i : c(this, o);
+        for (const g of n)
+          g(d);
+        n = [];
+      }, e), u ? (i = c(this, o), h(i)) : n.push(h);
     });
   };
 }
-async function y(h, e, t) {
-  return await h.apply(e, t);
+async function b(m, e, t) {
+  return await m.apply(e, t);
 }
-const a = {
+const l = {
   viewerPath: "/pdfjs",
   viewerEntry: "/web/viewer.html",
   src: "",
@@ -51,53 +51,72 @@ const a = {
   zoom: "auto",
   pagemode: "none",
   locale: "",
-  textLayer: ""
+  textLayer: "",
+  viewerCssTheme: "AUTOMATIC",
+  viewerExtraStyles: ""
+}, w = {
+  AUTOMATIC: 0,
+  // Default value.
+  LIGHT: 1,
+  DARK: 2
 };
-class w extends HTMLElement {
+class f extends HTMLElement {
   constructor() {
-    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);
+    super(), this.onIframeReady = v(async (i) => {
+      await p("iframe", this.shadowRoot), i();
+    }, 0, { leading: !0 }), this.setViewerExtraStyles = (i) => {
+      var n, r, a, c, o;
+      if (!i) {
+        (r = (n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector("style[extra]")) == null || r.remove();
+        return;
+      }
+      if (((c = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector("style[extra]")) == null ? void 0 : c.innerHTML) === i)
+        return;
+      const s = document.createElement("style");
+      s.innerHTML = i, s.setAttribute("extra", ""), (o = this.iframe.contentDocument) == null || o.head.appendChild(s);
+    }, this.initialize = () => new Promise(async (i) => {
+      var s;
+      await p("iframe", this.shadowRoot), (s = this.iframe) == null || s.addEventListener("load", async () => {
+        var n, r, a;
+        await ((r = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplication) == null ? void 0 : r.initializedPromise), i((a = this.iframe.contentWindow) == null ? void 0 : a.PDFViewerApplication);
       }, { once: !0 });
     });
     const e = this.attachShadow({ mode: "open" }), t = document.createElement("template");
     t.innerHTML = `
-      <iframe frameborder="0" width="100%"></iframe>
       <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
+      <iframe frameborder="0" width="100%" loading="lazy"></iframe>
     `, e.appendChild(t.content.cloneNode(!0));
   }
   static get observedAttributes() {
-    return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer"];
+    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"), this.setEventListeners();
+    this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", () => {
+      var e, t, i, s, n, r, a, c, o, h;
+      this.dispatchEvent(new Event("loaded")), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles")), this.getAttribute("src") !== l.src && ((t = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplicationOptions) == null || t.set("defaultUrl", "")), (s = (i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplicationOptions) == null || s.set("viewerCssTheme", this.getCssThemeOption()), (r = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplicationOptions) == null || r.set("disablePreferences", !0), (c = (a = this.iframe.contentWindow) == null ? void 0 : a.PDFViewerApplicationOptions) == null || c.set("pdfBugEnabled", !0), (h = (o = this.iframe.contentWindow) == null ? void 0 : o.PDFViewerApplicationOptions) == null || h.set("eventBusDispatchToDOM", !0);
+    });
   }
   attributeChangedCallback() {
     this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
   }
   getIframeSrc() {
-    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 : ""}`;
+    const e = this.getFullPath(this.getAttribute("src") || l.src), t = 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, r = this.getAttribute("zoom") || l.zoom, a = this.getAttribute("pagemode") || l.pagemode, c = this.getAttribute("locale") || l.locale, o = this.getAttribute("text-layer") || l.textLayer, h = this.getAttribute("viewer-css-theme") || l.viewerCssTheme, u = !!(this.getAttribute("viewer-extra-styles") || l.viewerExtraStyles), d = `${t}${l.viewerEntry}?file=${encodeURIComponent(e)}#page=${i}&zoom=${r}&pagemode=${a}&search=${s}&phrase=${n}&textLayer=${o}${c ? "&locale=" + c : ""}&viewerCssTheme=${h}&viewerExtraStyles=${u}`;
     return d !== this.iframe.getAttribute("src") ? d : "";
   }
   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, 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;
   }
+  getCssThemeOption() {
+    const e = this.getAttribute("viewer-css-theme");
+    return Object.keys(w).includes(e) ? w[e] : w[l.viewerCssTheme];
+  }
 }
-window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = w, window.customElements.define("pdfjs-viewer-element", w));
+window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = f, window.customElements.define("pdfjs-viewer-element", f));
 export {
-  w as PdfjsViewerElement,
-  w as default
+  f as PdfjsViewerElement,
+  w as ViewerCssTheme,
+  f as default
 };

package/package.json

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

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

@@ -1,15 +1,21 @@
+export declare const ViewerCssTheme: {
+    readonly AUTOMATIC: 0;
+    readonly LIGHT: 1;
+    readonly DARK: 2;
+};
 export declare class PdfjsViewerElement extends HTMLElement {
     constructor();
-    private iframe;
+    iframe: PdfjsViewerElementIframe;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private onIframeReady;
     private getIframeSrc;
     private mountViewer;
-    private setEventListeners;
     private getFullPath;
-    initialize: () => Promise<unknown>;
+    private getCssThemeOption;
+    private setViewerExtraStyles;
+    initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
 }
 declare global {
     interface Window {
@@ -27,7 +33,8 @@ export interface PdfjsViewerElementIframeWindow extends Window {
         eventBus: Record<string, any>;
     };
     PDFViewerApplicationOptions: {
-        set: (name: string, value: string | boolean) => void;
+        set: (name: string, value: string | boolean | number) => void;
+        getAll: () => Record<string, any>;
     };
 }
 export interface PdfjsViewerElementIframe extends HTMLIFrameElement {