pdfjs-viewer-element 2.6.5 → 2.7.0

package/README.md

@@ -10,15 +10,22 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 See [demo pages](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo) for various usecases.
 See [live examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage with frameworks.
 
+# Features
+
+- Simple PDF.js viewer integration to any web application
+- PDF.js viewer options and parameters support, access to the viewer application instance
+- Ability to customize viewer styles and themes
+
 ## How it works
 
-**⚠️ This is an important part !!!**
+**⚠️ This is an important part, please read this firstly !!!**
 
  **You should download and place the PDF.js prebuilt files in the project.**
 
 `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.
 
-The prebuilt comes with each PDF.js release. Supported all v4 and v3 [releases](https://github.com/mozilla/pdf.js/releases).
+The prebuilt comes with each PDF.js release. 
+All v4 and v3 [releases](https://github.com/mozilla/pdf.js/releases) are supported.
 
 Then specify the path to the directory with the `viewer-path` property (`/pdfjs` by default) and PDF file URL with `src` property (should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request)).
 
@@ -64,7 +71,7 @@ Using browser:
 ## Usage
 
 ```html
-<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-4.5.136-dist"></pdfjs-viewer-element>
+<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-4.10.38-dist"></pdfjs-viewer-element>
 ```
 
 ## Attributes
@@ -73,27 +80,39 @@ Using browser:
 
 `viewer-path` - Path to PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/)
 
-`locale` -  Specifies which language to use in the viewer UI `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
+`page` - Page number.
+
+`nameddest` -  Go to a named destination.
+
+`search` - Search text.
+
+`phrase` - Search by phrase, `true` to enable.
+
+`zoom` - Zoom level.
+
+`pagemode` - Page mode, `thumbs | bookmarks | attachments | layers | none`.
+
+`disable-worker` - Disables the worker, `true` to enable.
 
-`text-layer` - Text layer, that is used for text selection `off | visible | shadow | hover`
+`text-layer` - Disables or reveals the text layer that is used for text selection, `off | visible | shadow | hover`.
 
-`page` - Page number
+`disable-font-face` - Disables standard `@font-face` font loading and uses the internal font renderer instead, `true` to enable.
 
-`nameddest` -  Go to a named destination
+`disable-range` - Disables HTTP range requests when fetching the document, `true` to enable.
 
-`search` - Search text
+`disable-stream` - Disables streaming when fetching the document, `true` to enable.
 
-`phrase` - Search by phrase
+`disable-auto-fetch`- Disables auto fetching of the document; only gets necessary data to display the current view. Note: streaming also needs to be disabled for this to have any effect, `true` to enable.
 
-`zoom` - Zoom level
+`verbosity`- Specifies the verbosity level of console messages. `0` - only errors, `1` - warnings and errors, `5` - warnings, errors and information messages.
 
-`pagemode` - Page mode `thumbs | bookmarks | attachments | layers | none`
+`locale` -  Specifies which language to use in the viewer UI, `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
 
-`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 the viewer application
+`viewer-extra-styles` - Add your CSS rules to the viewer application, pass a string with styles.
 
-`viewer-extra-styles-urls` - Add external CSS files to the viewer application
+`viewer-extra-styles-urls` - Add external CSS files to the viewer application, pass an array with URLs.
 
 Play with attributes on [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
@@ -104,19 +123,19 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 ```html
 <pdfjs-viewer-element 
   src="/file.pdf" 
-  viewer-path="/pdfjs-4.5.136-dist"
+  viewer-path="/pdfjs-4.10.38-dist"
   viewer-css-theme="DARK">
 </pdfjs-viewer-element>
 ```
 
-## Viewer extra styles 
+## Viewer custom styles 
 
 You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
 
 ```html
 <pdfjs-viewer-element 
   src="/file.pdf" 
-  viewer-path="/pdfjs-4.5.136-dist"
+  viewer-path="/pdfjs-4.10.38-dist"
   viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
   viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
 </pdfjs-viewer-element>
@@ -149,7 +168,7 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
 `initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
 
 ```html
-<pdfjs-viewer-element viewer-path="/pdfjs-4.5.136-dist"></pdfjs-viewer-element>
+<pdfjs-viewer-element viewer-path="/pdfjs-4.10.38-dist"></pdfjs-viewer-element>
 ```
 
 ```javascript

package/dist/pdfjs-viewer-element.js

@@ -1,154 +1,127 @@
-const f = (m, e) => new Promise((s) => {
-  let r = e.querySelector(m);
-  if (r) {
-    s(r);
-    return;
-  }
-  new MutationObserver((n, t) => {
-    Array.from(e.querySelectorAll(m)).forEach((i) => {
-      s(i), t.disconnect();
-    });
-  }).observe(e, {
-    childList: !0,
-    subtree: !0
-  });
-}), g = {
-  trailing: !0
-};
-function v(m, e = 25, s = {}) {
-  if (s = { ...g, ...s }, !Number.isFinite(e))
-    throw new TypeError("Expected `wait` to be a finite number");
-  let r, n, t = [], i, a;
-  const o = (l, h) => (i = b(m, l, h), i.finally(() => {
-    if (i = null, s.trailing && a && !n) {
-      const u = o(l, a);
-      return a = null, u;
-    }
-  }), i);
-  return function(...l) {
-    return i ? (s.trailing && (a = l), i) : new Promise((h) => {
-      const u = !n && s.leading;
-      clearTimeout(n), n = setTimeout(() => {
-        n = null;
-        const d = s.leading ? r : o(this, l);
-        for (const y of t)
-          y(d);
-        t = [];
-      }, e), u ? (r = o(this, l), h(r)) : t.push(h);
+const y = (p, t) => new Promise((o) => {
+  let s = t.querySelector(p);
+  s ? o(s) : new MutationObserver((r, e) => {
+    Array.from(t.querySelectorAll(p)).forEach((i) => {
+      o(i), e.disconnect();
     });
-  };
-}
-async function b(m, e, s) {
-  return await m.apply(e, s);
-}
-const c = {
-  viewerPath: "/pdfjs",
-  viewerEntry: "/web/viewer.html",
-  src: "",
-  page: "",
-  search: "",
-  phrase: "",
-  zoom: "",
-  pagemode: "none",
-  locale: "",
-  textLayer: "",
-  viewerCssTheme: "AUTOMATIC",
-  viewerExtraStyles: "",
-  viewerExtraStylesUrls: "",
-  nameddest: ""
-}, w = {
-  AUTOMATIC: 0,
-  // Default value.
-  LIGHT: 1,
-  DARK: 2
-}, A = ["src", "viewer-path", "locale", "text-layer", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls"];
-class p extends HTMLElement {
+  }).observe(t, { childList: !0, subtree: !0 });
+}), T = { trailing: !0 }, S = "/pdfjs", D = "/web/viewer.html", A = "", C = "", P = "", k = "", R = "", V = "none", F = "", O = "", L = "", I = "", j = "", q = "", M = "", W = "", 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"];
+class x extends HTMLElement {
   constructor() {
-    super(), this.onIframeReady = v(async (r) => {
-      await f("iframe", this.shadowRoot), r();
-    }, 0, { leading: !0 }), this.setViewerExtraStyles = (r, n = "extra") => {
-      var i, a, o, l, h;
-      if (!r) {
-        (a = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector(`style[${n}]`)) == null || a.remove();
+    super(), this.onIframeReady = function(s, r = 25, e = {}) {
+      if (e = { ...T, ...e }, !Number.isFinite(r))
+        throw new TypeError("Expected `wait` to be a finite number");
+      let i, n, a, l, h = [];
+      const f = (c, m) => (a = async function(d, u, w) {
+        return await d.apply(u, w);
+      }(s, c, m), a.finally(() => {
+        if (a = null, e.trailing && l && !n) {
+          const d = f(c, l);
+          return l = null, d;
+        }
+      }), a);
+      return function(...c) {
+        return a ? (e.trailing && (l = c), a) : new Promise((m) => {
+          const d = !n && e.leading;
+          clearTimeout(n), n = setTimeout(() => {
+            n = null;
+            const u = e.leading ? i : f(this, c);
+            for (const w of h)
+              w(u);
+            h = [];
+          }, r), d ? (i = f(this, c), m(i)) : h.push(m);
+        });
+      };
+    }(async (s) => {
+      await y("iframe", this.shadowRoot), s();
+    }, 0, { leading: !0 }), this.setViewerExtraStyles = (s, r = "extra") => {
+      var i, n, a, l, h;
+      if (!s)
+        return void ((n = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector(`style[${r}]`)) == null ? void 0 : n.remove());
+      if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${r}]`)) == null ? void 0 : l.innerHTML) === s)
         return;
-      }
-      if (((l = (o = this.iframe.contentDocument) == null ? void 0 : o.head.querySelector(`style[${n}]`)) == null ? void 0 : l.innerHTML) === r)
-        return;
-      const t = document.createElement("style");
-      t.innerHTML = r, t.setAttribute(n, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(t);
-    }, this.injectExtraStylesLinks = (r) => {
-      if (!r)
-        return;
-      r.replace(/'|]|\[/g, "").split(",").map((t) => t.trim()).forEach((t) => {
-        var o, l;
-        if ((o = this.iframe.contentDocument) == null ? void 0 : o.head.querySelector(`link[href="${t}"]`))
+      const e = document.createElement("style");
+      e.innerHTML = s, e.setAttribute(r, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(e);
+    }, this.injectExtraStylesLinks = (s) => {
+      s && s.replace(/'|]|\[/g, "").split(",").map((r) => r.trim()).forEach((r) => {
+        var n, a;
+        if ((n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector(`link[href="${r}"]`))
           return;
-        const a = document.createElement("link");
-        a.rel = "stylesheet", a.href = t, (l = this.iframe.contentDocument) == null || l.head.appendChild(a);
+        const i = document.createElement("link");
+        i.rel = "stylesheet", i.href = r, (a = this.iframe.contentDocument) == null || a.head.appendChild(i);
       });
-    }, this.initialize = () => new Promise(async (r) => {
-      var n;
-      await f("iframe", this.shadowRoot), (n = this.iframe) == null || n.addEventListener("load", async () => {
-        var t, i, a;
-        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);
+    }, this.initialize = () => new Promise(async (s) => {
+      var r;
+      await y("iframe", this.shadowRoot), (r = this.iframe) == null || r.addEventListener("load", async () => {
+        var e, i, n;
+        await ((i = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplication) == null ? void 0 : i.initializedPromise), s((n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplication);
       }, { once: !0 });
     });
-    const e = this.attachShadow({ mode: "open" }), s = document.createElement("template");
-    s.innerHTML = `
+    const t = this.attachShadow({ mode: "open" }), o = document.createElement("template");
+    o.innerHTML = `
       <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
       <iframe frameborder="0" width="100%" loading="lazy"></iframe>
-    `, e.appendChild(s.content.cloneNode(!0));
+    `, t.appendChild(o.content.cloneNode(!0));
   }
   static get observedAttributes() {
-    return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls", "nameddest"];
+    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"];
   }
   connectedCallback() {
     this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
-      var e, s, r, n, t, i, a, o;
-      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);
+      var t, o, s, r, e, i, n, a;
+      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 = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplicationOptions) == null || o.set("defaultUrl", "")), (r = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplicationOptions) == null || r.set("disablePreferences", !0), (i = (e = this.iframe.contentWindow) == null ? void 0 : e.PDFViewerApplicationOptions) == null || i.set("pdfBugEnabled", !0), (a = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplicationOptions) == null || a.set("eventBusDispatchToDOM", !0);
     });
   }
-  attributeChangedCallback(e) {
-    if (!A.includes(e)) {
-      this.onIframeReady(() => {
-        this.iframe.src = this.getIframeSrc();
-      });
-      return;
-    }
-    this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
+  attributeChangedCallback(t) {
+    N.includes(t) ? this.onIframeReady(() => this.mountViewer(this.getIframeSrc())) : this.onIframeReady(() => {
+      this.iframe.src = this.getIframeSrc();
+    });
   }
   getIframeSrc() {
-    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), d = this.getAttribute("nameddest") || c.nameddest;
-    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}${d ? "&nameddest=" + d : ""}`;
+    const t = this.getFullPath(this.getAttribute("src") || A), o = this.getFullPath(this.getAttribute("viewer-path") || S), s = this.getAttribute("page") || C, r = this.getAttribute("search") || P, e = this.getAttribute("phrase") || k, i = this.getAttribute("zoom") || R, n = this.getAttribute("pagemode") || V, a = this.getAttribute("disable-worker") || O, l = this.getAttribute("text-layer") || L, h = this.getAttribute("disable-font-face") || I, f = this.getAttribute("disable-range") || j, c = this.getAttribute("disable-stream") || q, m = this.getAttribute("disable-auto-fetch") || M, d = this.getAttribute("verbosity") || W, u = this.getAttribute("locale") || F, w = this.getAttribute("viewer-css-theme") || v, E = !!(this.getAttribute("viewer-extra-styles") || $), g = this.getAttribute("nameddest") || H;
+    return `
+${o}${D}?file=
+${encodeURIComponent(t)}#page=${s}&zoom=${i}&pagemode=${n}&search=${r}&phrase=${e}&textLayer=
+${l}&disableWorker=
+${a}&disableFontFace=
+${h}&disableRange=
+${f}&disableStream=
+${c}&disableAutoFetch=
+${m}&verbosity=
+${d}
+${u ? "&locale=" + u : ""}&viewerCssTheme=
+${w}&viewerExtraStyles=
+${E}
+${g ? "&nameddest=" + g : ""}`;
   }
-  mountViewer(e) {
-    !e || !this.iframe || (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
+  mountViewer(t) {
+    t && this.iframe && (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = t);
   }
-  getFullPath(e) {
-    return e.startsWith("/") ? `${window.location.origin}${e}` : e;
+  getFullPath(t) {
+    return t.startsWith("/") ? `${window.location.origin}${t}` : t;
   }
   getCssThemeOption() {
-    const e = this.getAttribute("viewer-css-theme");
-    return Object.keys(w).includes(e) ? w[e] : w[c.viewerCssTheme];
+    const t = this.getAttribute("viewer-css-theme");
+    return Object.keys(b).includes(t) ? b[t] : b[v];
   }
-  setCssTheme(e) {
-    var s, r, n;
-    if (e === w.DARK) {
-      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) => {
+  setCssTheme(t) {
+    var o, s, r;
+    if (t === b.DARK) {
+      const e = (o = this.iframe.contentDocument) == null ? void 0 : o.styleSheets[0], i = (e == null ? void 0 : e.cssRules) || [], n = Object.keys(i).filter((a) => {
         var l;
-        return ((l = i[Number(o)]) == null ? void 0 : l.conditionText) === "(prefers-color-scheme: dark)";
-      }).map((o) => i[Number(o)].cssText.split(`@media (prefers-color-scheme: dark) {
+        return ((l = i[Number(a)]) == null ? void 0 : l.conditionText) === "(prefers-color-scheme: dark)";
+      }).map((a) => i[Number(a)].cssText.split(`@media (prefers-color-scheme: dark) {
 `)[1].split(`
 }`)[0]);
-      this.setViewerExtraStyles(a.join(""), "theme");
+      this.setViewerExtraStyles(n.join(""), "theme");
     } else
-      (n = (r = this.iframe.contentDocument) == null ? void 0 : r.head.querySelector("style[theme]")) == null || n.remove();
+      (r = (s = this.iframe.contentDocument) == null ? void 0 : s.head.querySelector("style[theme]")) == null || r.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 = x, window.customElements.define("pdfjs-viewer-element", x));
 export {
-  p as PdfjsViewerElement,
-  w as ViewerCssTheme,
-  p as default,
-  A as hardRefreshAttributes
+  x as PdfjsViewerElement,
+  b as ViewerCssTheme,
+  x as default,
+  N as hardRefreshAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.6.5",
+  "version": "2.7.0",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
@@ -11,7 +11,9 @@
     "pdfjs",
     "pdf viewer",
     "pdfjs viewer",
-    "web component"
+    "web component",
+    "pdfjs viewer element",
+    "pdf"
   ],
   "main": "./dist/pdfjs-viewer-element.js",
   "module": "./dist/pdfjs-viewer-element.js",
@@ -31,15 +33,18 @@
   ],
   "devDependencies": {
     "@awlsn/pdfjs-full": "^4.2.392",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^18.19.31",
     "@vitest/browser": "^1.5.0",
     "jsdom": "^22.1.0",
-    "perfect-debounce": "^1.0.0",
     "typescript": "^4.9.5",
     "vite": "^5.2.9",
     "vitest": "^1.5.0",
     "webdriverio": "^8.36.1"
   },
+  "dependencies": {
+    "perfect-debounce": "^1.0.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",