Move to PDF.js v5.5.207

Author: alekswebnet

README.md

@@ -31,11 +31,11 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 
 [CodePen demo](https://codepen.io/redrobot753/pen/bNwVVvp)
 
-[React integration CodePen](https://codepen.io/redrobot753/pen/xbEwNrO)
+[CodePen demo with React](https://codepen.io/redrobot753/pen/xbEwNrO)
 
-[Vue integration CodePen](https://codepen.io/redrobot753/pen/JoRYqwN)
+[CodePen demo with Vue](https://codepen.io/redrobot753/pen/JoRYqwN)
 
-[Various use cases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
+[Usage examples](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
 
 ## Install
 
@@ -62,7 +62,7 @@ import 'pdfjs-viewer-element'
 
 ```html
 <pdfjs-viewer-element
-  src="/sample.pdf"
+  src="https://alekswebnet.github.io/sample-pdf-with-images.pdf"
   style="height: 100dvh">
 </pdfjs-viewer-element>
 ```
@@ -115,9 +115,10 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 Runtime example:
 
 ```javascript
-const viewer = document.querySelector('pdfjs-viewer-element')
-viewer.setAttribute('viewer-css-theme', 'DARK')
-viewer.setAttribute('viewer-css-theme', 'AUTOMATIC')
+const viewerElement = document.querySelector('pdfjs-viewer-element')
+viewerElement.setAttribute('viewer-css-theme', 'DARK')
+viewerElement.setAttribute('viewer-css-theme', 'LIGHT')
+viewerElement.setAttribute('viewer-css-theme', 'AUTOMATIC')
 ```
 
 ## Viewer custom styles
@@ -130,8 +131,8 @@ You can add your own CSS rules to the viewer application using `injectViewerStyl
 ```
 
 ```javascript
-const viewer = document.querySelector('#viewer')
-viewer.injectViewerStyles(`
+const viewerElement = document.querySelector('#viewer')
+viewerElement.injectViewerStyles(`
   #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
 `)
 ```
@@ -161,89 +162,63 @@ Build your own theme with viewer custom variables and inject it via `injectViewe
 }
 ```
 
-## Methods
+## Methods and Public properties
 
-`injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
+Methods:
 
-## Programmatic access to PDF.js
+`injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
 
-```html
-<pdfjs-viewer-element></pdfjs-viewer-element>
-```
+Example (`injectViewerStyles`):
 
 ```javascript
-// Open PDF file programmatically accessing the viewer application
-document.addEventListener('DOMContentLoaded', async () => {
-  document.querySelector('pdfjs-viewer-element').addEventListener('initialized', (event) => {
-    const { viewerApp, viewerOptions } = event.detail
-    viewerApp.open({ data: pdfData })
-  })
-})
-```
-
-You can also react to source changes dynamically:
+const viewerElement = document.querySelector('pdfjs-viewer-element')
 
-```javascript
-const viewer = document.querySelector('pdfjs-viewer-element')
-viewer.setAttribute('src', '/another-file.pdf')
+await viewerElement.injectViewerStyles(`
+  #toolbarViewerRight { display: none; }
+  #findbar { border-top: 2px solid #0200a8; }
+`)
 ```
 
-## Events
-
-`initialized` - Fired after the PDF.js viewer is ready (after `PDFViewerApplication.initializedPromise` resolves). The event `detail` contains:
-
-- `viewerApp` (`PDFViewerApplication`)
-- `viewerOptions` (`PDFViewerApplicationOptions`)
-
-The event is emitted each time the internal viewer is rebuilt (for example after changing `locale`).
-
-## Migration notes
+Public properties:
 
-If you are upgrading from an older version:
+`initPromise: Promise<InitializationData>` - Resolves after internal viewer is completely loaded and initialized, returning `{ viewerApp }`, that gives a programmatic access to PDF.js viewer app (PDFViewerApplication).
 
-- `viewer-extra-styles` and `viewer-extra-styles-urls` attributes are removed.
-- Use `injectViewerStyles(styles)` instead of style attributes.
-- Use the `initialized` event for `viewerApp` / `viewerOptions` access.
-- Runtime `src` updates are supported with `setAttribute('src', ...)`.
+Example (`initPromise`):
 
-## Accessibility
+```javascript
+const viewerElement = document.querySelector('pdfjs-viewer-element')
+const { viewerApp } = await viewerElement.initPromise
 
-Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
+viewerApp.open({ url: '/sample.pdf' })
+```
 
-## Known issues
+`iframe: PdfjsViewerElementIframe` - Public reference to the internal `iframe` element. Useful when you need direct access to `contentWindow`/`contentDocument`.
 
-### The `.mjs` files support
+Example (`iframe`):
 
-Since v4 PDF.js requires `.mjs` files support, make sure your server has it.
+```javascript
+const viewerElement = document.querySelector('pdfjs-viewer-element')
 
-In case of `nginx` this may cause errors, see https://github.com/mozilla/pdf.js/issues/17296
+// Access iframe window directly when needed.
+const iframeWindow = viewerElement.iframe.contentWindow
 
-Add `.mjs` files support for `nginx` example:
+// Read current location hash applied to the viewer.
+console.log(iframeWindow.location.hash)
 
-```bash
-server {
-    # ...
-
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html;
-
-        location ~* \.mjs$ {
-            types {
-                text/javascript mjs;
-            }
-        }
-    }
-}
+// Inspect iframe document title.
+console.log(viewerElement.iframe.contentDocument.title)
 ```
 
-## Support via Ko-fi
+You can also react to source changes dynamically:
 
-If you find `pdfjs-viewer-element` useful and want to support its development, consider making a donation via Ko-fi:
+```javascript
+const viewerElement = document.querySelector('pdfjs-viewer-element')
+viewer.setAttribute('src', '/another-file.pdf')
+```
 
-[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/oleksandrshevchuk)
+## Accessibility
 
-> ❤️ Your support helps with maintenance, bug fixes, and long-term improvements.
+Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
 
 ## License
 [MIT](http://opensource.org/licenses/MIT)

demo/extra-styles-urls.html

@@ -22,27 +22,10 @@
 
     <script>
     document.addEventListener('DOMContentLoaded', async () => {
-      // Create a very simple toolbar by hiding the middle and right toolbar parts.
-      document.querySelector('pdfjs-viewer-element').injectViewerStyles(`
-       :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);
-        }
-      `)
+      // Load some extra styles from an external CSS file and inject them into the viewer.
+      const styles = await fetch('./viewer-custom-theme.css').then((res) => res.text())
+      const viewerElement = document.querySelector('pdfjs-viewer-element')
+      viewerElement.injectViewerStyles(styles)
     })
   </script>
   </body>

demo/extra-styles.html

@@ -22,8 +22,10 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', async () => {
+      const viewerElement = document.querySelector('pdfjs-viewer-element')
+      await viewerElement.initPromise
       // Create a very simple toolbar by hiding the middle and right toolbar parts.
-      document.querySelector('pdfjs-viewer-element').injectViewerStyles(`
+      viewerElement.injectViewerStyles(`
         #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
       `)
     })

demo/iframe-access.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pdfjs-viewer-element | Iframe access demo</title>
+    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <pdfjs-viewer-element
+      src="/public/sample-pdf-with-images.pdf" 
+      style="height: 100dvh">
+    </pdfjs-viewer-element>
+  </body>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      const viewerElement = document.querySelector('pdfjs-viewer-element')
+      await viewerElement.initPromise
+      // Access iframe window directly when needed.
+      const iframeWindow = viewerElement.iframe.contentWindow
+
+      // Read current location hash applied to the viewer.
+      console.log(iframeWindow.location.hash)
+
+      // Inspect iframe document title.
+      console.log(viewerElement.iframe.contentDocument.title)
+    })
+  </script>
+</html>

demo/opened-findbar.html

@@ -22,15 +22,14 @@
 
     <script>
       document.addEventListener('DOMContentLoaded', async () => {
-        document.querySelector('#viewer').addEventListener('initialized', (event) => {
-          const { viewerApp } = event.detail
+        const viewerElement = document.querySelector('#viewer')
+        const { viewerApp } = await viewerElement.initPromise
           viewerApp.eventBus.on('pagesloaded', () => {
             viewerApp.findBar.open()
             viewerApp.findBar.findField.value = 'and' 
             viewerApp.findBar.highlightAll.checked = true
             viewerApp.findBar.findNextButton.click()
           })
-        })
       })
     </script>
   </body>

demo/pdf-data-load.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>pdfjs-viewer-element | Basic demo</title>
+    <title>pdfjs-viewer-element | PDF data load demo</title>
    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
@@ -36,10 +36,9 @@
 
 
       document.addEventListener('DOMContentLoaded', async () => {
-        document.querySelector('pdfjs-viewer-element').addEventListener('initialized', (event) => {
-          const { viewerApp } = event.detail
-          viewerApp.open({ data: pdfData })
-        })
+        const viewerElement = document.querySelector('pdfjs-viewer-element')
+        const { viewerApp } = await viewerElement.initPromise
+        viewerApp.open({ data: pdfData })
       })
     </script>
   </body>

index.js

@@ -14,17 +14,14 @@ const pdfData = Uint8Array.from(atob(
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
 
 document.addEventListener('DOMContentLoaded', async () => {
-  document.querySelector('#base-viewer').addEventListener('initialized', (event) => {
-    const { viewerApp } = event.detail
-    viewerApp.open({ data: pdfData })
-  })
+  const viewerElement = document.querySelector('#base-viewer')
+  const { viewerApp } = await viewerElement.initPromise
+  viewerApp.open({ data: pdfData })
 })
 
 const toggleDownloadButton = async (viewerElement) => {
-  viewerElement.addEventListener('initialized', (event) => {
-    const { viewerApp } = event.detail
-    viewerApp.appConfig.toolbar.download.classList.toggle('hidden')
-  })
+  const { viewerApp } = await viewerElement.initPromise
+  viewerApp.appConfig.toolbar.download.classList.toggle('hidden')
 }
 
 window.toggleDownloadButton = toggleDownloadButton

package.json

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