pdfjs-viewer-element - npm Package Compare versions

Comparing version 2.5.2 to 2.5.3

dist/pdfjs-viewer-element.js

@@ -1,10 +0,10 @@
-const p = (m, e) => new Promise((t) => {
+const f = (m, e) => new Promise((r) => {
   let i = e.querySelector(m);
   if (i) {
-    t(i);
+    r(i);
     return;
   }
   new MutationObserver((s, n) => {
-    Array.from(e.querySelectorAll(m)).forEach((r) => {
-      t(r), n.disconnect();
+    Array.from(e.querySelectorAll(m)).forEach((t) => {
+      r(t), n.disconnect();
     });
@@ -18,27 +18,27 @@ }).observe(e, {
 };
-function v(m, e = 25, t = {}) {
-  if (t = { ...y, ...t }, !Number.isFinite(e))
+function b(m, e = 25, r = {}) {
+  if (r = { ...y, ...r }, !Number.isFinite(e))
     throw new TypeError("Expected `wait` to be a finite number");
-  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;
+  let i, s, n = [], t, o;
+  const a = (c, h) => (t = v(m, c, h), t.finally(() => {
+    if (t = null, r.trailing && o && !s) {
+      const u = a(c, o);
+      return o = null, u;
     }
-  }), r);
-  return function(...o) {
-    return r ? (t.trailing && (a = o), r) : new Promise((h) => {
-      const u = !s && t.leading;
+  }), t);
+  return function(...c) {
+    return t ? (r.trailing && (o = c), t) : new Promise((h) => {
+      const u = !s && r.leading;
       clearTimeout(s), s = setTimeout(() => {
         s = null;
-        const d = t.leading ? i : c(this, o);
+        const d = r.leading ? i : a(this, c);
         for (const g of n)
           g(d);
         n = [];
-      }, e), u ? (i = c(this, o), h(i)) : n.push(h);
+      }, e), u ? (i = a(this, c), h(i)) : n.push(h);
     });
   };
 }
-async function b(m, e, t) {
-  return await m.apply(e, t);
+async function v(m, e, r) {
+  return await m.apply(e, r);
 }
@@ -64,28 +64,28 @@ const l = {
 };
-class f extends HTMLElement {
+class p extends HTMLElement {
   constructor() {
-    super(), this.onIframeReady = v(async (i) => {
-      await p("iframe", this.shadowRoot), i();
-    }, 0, { leading: !0 }), this.setViewerExtraStyles = (i) => {
-      var n, r, a, c, o;
+    super(), this.onIframeReady = b(async (i) => {
+      await f("iframe", this.shadowRoot), i();
+    }, 0, { leading: !0 }), this.setViewerExtraStyles = (i, s = "extra") => {
+      var t, o, a, c, h;
       if (!i) {
-        (r = (n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector("style[extra]")) == null || r.remove();
+        (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[extra]")) == null ? void 0 : c.innerHTML) === i)
+      if (((c = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${s}]`)) == 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);
+      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 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);
+      await f("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 });
     });
-    const e = this.attachShadow({ mode: "open" }), t = document.createElement("template");
-    t.innerHTML = `
+    const e = this.attachShadow({ mode: "open" }), r = document.createElement("template");
+    r.innerHTML = `
       <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));
+    `, e.appendChild(r.content.cloneNode(!0));
   }
@@ -97,4 +97,4 @@ static get observedAttributes() {
     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);
+      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);
     });
@@ -106,3 +106,3 @@ }
   getIframeSrc() {
-    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}`;
+    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 : "";
@@ -120,8 +120,21 @@ }
   }
+  setCssTheme() {
+    var r, i, s;
+    if (this.getCssThemeOption() === w.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)";
+      }).map((a) => t[Number(a)].cssText.split(`@media (prefers-color-scheme: dark) {
+`)[1].split(`
+}`)[0]);
+      this.setViewerExtraStyles(o.join(""), "theme");
+    } else
+      (s = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector("style[theme]")) == null || s.remove();
+  }
 }
-window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = f, window.customElements.define("pdfjs-viewer-element", f));
+window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = p, window.customElements.define("pdfjs-viewer-element", p));
 export {
-  f as PdfjsViewerElement,
+  p as PdfjsViewerElement,
   w as ViewerCssTheme,
-  f as default
+  p as default
 };

package.json

 {
   "name": "pdfjs-viewer-element",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": {

README.md

 # pdfjs-viewer-element
 
-A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) and . 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.
+A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) and supported in all [major browsers](https://caniuse.com/custom-elementsv1), works with most used [JS frameworks](https://custom-elements-everywhere.com/). 
 
-⚠️ `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).
+See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in Vue, React and Svelte or static HTML page.
 
-You have full access to PDF.js viewer application using `initialize` method. 
+⚠️ `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 3 latest releases:
+
+✅ [v4.0.189](https://github.com/mozilla/pdf.js/releases/tag/v4.0.189)
+
+✅ [v3.11.174](https://github.com/mozilla/pdf.js/releases/tag/v3.11.174)
+
+✅ [v3.10.111](https://github.com/mozilla/pdf.js/releases/tag/v3.10.111)
+
+To use the package you should download 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).
+
 ## Status
@@ -68,5 +80,5 @@
 
-`pagemode` - Page mode
+`pagemode` - Page mode `thumbs | bookmarks | attachments | layers | none`
 
-`viewer-css-theme` - Apply automatic, light or dark theme `AUTOMATIC | LIGHT | DARK`. Default is `AUTOMATIC`
+`viewer-css-theme` - Apply automatic, light or dark theme `AUTOMATIC | LIGHT | DARK`
 
@@ -77,2 +89,14 @@ `viewer-extra-styles` - Add your CSS rules to viewer application
 
+## Viewer CSS theme
+
+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-css-theme="DARK">
+</pdfjs-viewer-element>
+```
+
 ## Viewer extra styles 
@@ -104,3 +128,3 @@
 // Open PDF file data using Uint8Array instead of URL
-viewerApp.open(pdfData)
+viewerApp.open({ data: pdfData })
 // Use event bus to handle viewer application events
@@ -107,0 +131,0 @@ viewerApp.eventBus.on('pagesloaded', () => {

types/pdfjs-viewer-element.d.ts

@@ -17,2 +17,3 @@ export declare const ViewerCssTheme: {
     private getCssThemeOption;
+    setCssTheme(): void;
     private setViewerExtraStyles;
@@ -35,2 +36,3 @@ initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
         eventBus: Record<string, any>;
+        setCssTheme: () => void;
     };
@@ -37,0 +39,0 @@ PDFViewerApplicationOptions: {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62880356

increased by105.26%

Number of package files

1116

increased by196.81%

Lines of code

286282

increased by199.97%

Number of lines in readme file

134

increased by21.82%

Worsened metrics

Number of low supply chain risk alerts

6

increased by100%

Number of medium supply chain risk alerts

41

increased by173.33%

No dependency changes