pdfjs-viewer-element 2.6.1 → 2.6.3

package/README.md

@@ -7,7 +7,8 @@ The simplest integration of [PDF.js default viewer](https://mozilla.github.io/pd
 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.
+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.
 
 ⚠️ `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.
 
@@ -34,10 +35,12 @@ Then specify the path to the directory with the `viewer-path` property (`/pdfjs`
 
 [Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)
 
-[API](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
+[API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
 
 [Live examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo)
 
+[Demo pages](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
+
 ## Install
 
 Using module bundlers:
@@ -79,6 +82,8 @@ Using browser:
 
 `page` - Page number
 
+`nameddest` -  Go to a named destination
+
 `search` - Search text
 
 `phrase` - Search by phrase
@@ -91,6 +96,8 @@ Using browser:
 
 `viewer-extra-styles` - Add your CSS rules to the viewer application
 
+`viewer-extra-styles-urls` - Add external CSS files to the viewer application
+
 Play with attributes on [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
 ## Viewer CSS theme
@@ -107,16 +114,38 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 
 ## Viewer extra styles 
 
-You can add your own CSS rules to the viewer application using `viewer-extra-styles` attribute:
+You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
 
 ```html
-<!-- Remove download button from viewer toolbar -->
 <pdfjs-viewer-element 
   src="/file.pdf" 
   viewer-path="/pdfjs-4.0.379-dist"
-  viewer-extra-styles="#download { display: none }">
+  viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
+  viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
 </pdfjs-viewer-element>
 ```
+Build your own theme with viewer's custom variables and `viewer-extra-styles-urls` attribute: 
+
+```css
+:root {
+  --main-color: #5755FE;
+  --toolbar-icon-bg-color: #0200a8;
+  --field-color: #5755FE;
+  --separator-color: #5755FE;
+  --toolbar-border-color: #5755FE;
+  --field-border-color: #5755FE;
+  --toolbar-bg-color: rgba(139, 147, 255, .1);
+  --body-bg-color: rgba(255, 247, 252, .7);
+  --button-hover-color: rgba(139, 147, 255, .1);
+  --toolbar-icon-hover-bg-color: #0200a8;
+  --toggled-btn-color: #0200a8;
+  --toggled-btn-bg-color: rgba(139, 147, 255, .1);
+  --toggled-hover-active-btn-color: #5755FE;
+  --doorhanger-hover-bg-color: rgba(139, 147, 255, .1);
+  --doorhanger-hover-color: #0200a8;
+  --dropdown-btn-bg-color: rgba(139, 147, 255, .1);
+}
+```
 
 ## PDF.js Viewer Application
 

package/dist/pdfjs-viewer-element.js

@@ -1,12 +1,12 @@
-const w = (m, e) => new Promise((r) => {
-  let i = e.querySelector(m);
-  if (i) {
-    r(i);
+const f = (m, e) => new Promise((s) => {
+  let r = e.querySelector(m);
+  if (r) {
+    s(r);
     return;
   }
-  new MutationObserver((s, n) => {
-    Array.from(e.querySelectorAll(m)).forEach((t) => {
-      r(t), n.disconnect();
+  new MutationObserver((n, t) => {
+    Array.from(e.querySelectorAll(m)).forEach((i) => {
+      s(i), t.disconnect();
     });
   }).observe(e, {
     childList: !0,
@@ -15,31 +15,31 @@ const w = (m, e) => new Promise((r) => {
 }), g = {
   trailing: !0
 };
-function b(m, e = 25, r = {}) {
-  if (r = { ...g, ...r }, !Number.isFinite(e))
+function v(m, e = 25, s = {}) {
+  if (s = { ...g, ...s }, !Number.isFinite(e))
     throw new TypeError("Expected `wait` to be a finite number");
-  let i, s, n = [], t, o;
-  const a = (l, h) => (t = v(m, l, h), t.finally(() => {
-    if (t = null, r.trailing && o && !s) {
-      const u = a(l, o);
-      return o = null, u;
+  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;
     }
-  }), t);
+  }), i);
   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 p = r.leading ? i : a(this, l);
-        for (const y of n)
-          y(p);
-        n = [];
-      }, e), u ? (i = a(this, l), h(i)) : n.push(h);
+    return i ? (s.trailing && (a = l), i) : new Promise((h) => {
+      const u = !n && s.leading;
+      clearTimeout(n), n = setTimeout(() => {
+        n = null;
+        const w = s.leading ? r : o(this, l);
+        for (const y of t)
+          y(w);
+        t = [];
+      }, e), u ? (r = o(this, l), h(r)) : t.push(h);
     });
   };
 }
-async function v(m, e, r) {
-  return await m.apply(e, r);
+async function b(m, e, s) {
+  return await m.apply(e, s);
 }
 const c = {
   viewerPath: "/pdfjs",
@@ -53,47 +53,59 @@ const c = {
   locale: "",
   textLayer: "",
   viewerCssTheme: "AUTOMATIC",
-  viewerExtraStyles: ""
+  viewerExtraStyles: "",
+  viewerExtraStylesUrls: "",
+  nameddest: ""
 }, d = {
   AUTOMATIC: 0,
   // Default value.
   LIGHT: 1,
   DARK: 2
-}, A = ["src", "viewer-path", "locale", "text-layer", "viewer-css-theme", "viewer-extra-styles"];
-class f extends HTMLElement {
+}, A = ["src", "viewer-path", "locale", "text-layer", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls"];
+class p extends HTMLElement {
   constructor() {
-    super(), this.onIframeReady = b(async (i) => {
-      await w("iframe", this.shadowRoot), i();
-    }, 0, { leading: !0 }), this.setViewerExtraStyles = (i, s = "extra") => {
-      var t, o, a, l, h;
-      if (!i) {
-        (o = (t = this.iframe.contentDocument) == null ? void 0 : t.head.querySelector(`style[${s}]`)) == null || o.remove();
+    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();
         return;
       }
-      if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${s}]`)) == null ? void 0 : l.innerHTML) === i)
+      if (((l = (o = this.iframe.contentDocument) == null ? void 0 : o.head.querySelector(`style[${n}]`)) == null ? void 0 : l.innerHTML) === r)
         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 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);
+      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}"]`))
+          return;
+        const a = document.createElement("link");
+        a.rel = "stylesheet", a.href = t, (l = this.iframe.contentDocument) == null || l.head.appendChild(a);
+      });
+    }, 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);
       }, { once: !0 });
     });
-    const e = this.attachShadow({ mode: "open" }), r = document.createElement("template");
-    r.innerHTML = `
+    const e = this.attachShadow({ mode: "open" }), s = document.createElement("template");
+    s.innerHTML = `
       <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
       <iframe frameborder="0" width="100%" loading="lazy"></iframe>
-    `, e.appendChild(r.content.cloneNode(!0));
+    `, e.appendChild(s.content.cloneNode(!0));
   }
   static get observedAttributes() {
-    return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer", "viewer-css-theme", "viewer-extra-styles"];
+    return ["src", "viewer-path", "locale", "page", "search", "phrase", "zoom", "pagemode", "text-layer", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls", "nameddest"];
   }
   connectedCallback() {
     this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
-      var e, r, i, s, n, t, o, a;
-      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);
+      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);
     });
   }
   attributeChangedCallback(e) {
@@ -106,8 +118,8 @@ class f extends HTMLElement {
     this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
   }
   getIframeSrc() {
-    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}`;
+    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), w = 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}&nameddest=${w}`;
   }
   mountViewer(e) {
     !e || !this.iframe || (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
@@ -120,23 +132,23 @@ class f extends HTMLElement {
     return Object.keys(d).includes(e) ? d[e] : d[c.viewerCssTheme];
   }
   setCssTheme(e) {
-    var r, i, s;
+    var s, r, n;
     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) => {
+      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) => {
         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) {
+        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) {
 `)[1].split(`
 }`)[0]);
-      this.setViewerExtraStyles(o.join(""), "theme");
+      this.setViewerExtraStyles(a.join(""), "theme");
     } else
-      (s = (i = this.iframe.contentDocument) == null ? void 0 : i.head.querySelector("style[theme]")) == null || s.remove();
+      (n = (r = this.iframe.contentDocument) == null ? void 0 : r.head.querySelector("style[theme]")) == null || n.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,
   d as ViewerCssTheme,
-  f as default,
+  p as default,
   A as hardRefreshAttributes
 };

package/package.json

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

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

@@ -17,6 +17,7 @@ export declare class PdfjsViewerElement extends HTMLElement {
     private getCssThemeOption;
     private setCssTheme;
     private setViewerExtraStyles;
+    private injectExtraStylesLinks;
     initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
 }
 declare global {
@@ -42,9 +43,4 @@ export interface PdfjsViewerElementIframeWindow extends Window {
 export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
     contentWindow: PdfjsViewerElementIframeWindow;
 }
-export interface PdfjsViewerLoadedEvent extends Event {
-    detail: {
-        source: PdfjsViewerElementIframeWindow;
-    };
-}
 export default PdfjsViewerElement;