Merge pull request #42 from alekswebnet/3.1.0

Release new 3.1.0 version

Author: alekswebnet

README.md

@@ -14,28 +14,23 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 
 ## Features
 
-✅ Standalone web component with no runtime dependencies
-
-✅ Drop-in, iframe-based PDF.js default viewer for any web app
-
-✅ Works with same-origin and cross-origin PDF documents
-
-✅ Configure via attributes and URL parameters (page, zoom, search, pagemode, locale)
-
-✅ Programmatic access to `PDFViewerApplication` and `PDFViewerApplicationOptions` via the `initialized` event
-
-✅ Theme control (automatic/light/dark) plus custom CSS injection or external stylesheets
-
-✅ Locale override support using PDF.js viewer locales
-
-✅ Supports all modern browsers and most JS frameworks
+- Standalone web component with no runtime dependencies
+- Drop-in, iframe-based PDF.js default viewer for any web app
+- Works with same-origin and cross-origin PDF documents
+- Configure via attributes and URL parameters (page, zoom, search, pagemode, locale)
+- Programmatic access to `PDFViewerApplication` and `PDFViewerApplicationOptions` via the `initialized` event
+- Theme control (automatic/light/dark) plus custom CSS injection
+- Locale override support using PDF.js viewer locales
+- Supports all modern browsers and most JS frameworks
 
 ## Docs
 
 [Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)
 
 [API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
 
+[CodePen demo](https://codepen.io/redrobot753/pen/bNwVVvp)
+
 [Various use cases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
 
 ## Install
@@ -62,34 +57,40 @@ import 'pdfjs-viewer-element'
 ## Usage
 
 ```html
-<pdfjs-viewer-element src="path-to/file.pdf"></pdfjs-viewer-element>
+<pdfjs-viewer-element
+  src="/sample.pdf"
+  style="height: 100dvh">
+</pdfjs-viewer-element>
 ```
 
-## Attributes
-
-`src` - PDF file URL
-
-`iframe-title` - The title of the `iframe` element, required for better accessibility
-
-`page` - Page number.
-
-`search` - Search text.
-
-`phrase` - Search by phrase, `true` to enable.
+The element is block-level and needs an explicit height.
 
-`zoom` - Zoom level.
+## Attributes
 
-`pagemode` - Page mode, `thumbs | bookmarks | attachments | layers | none`.
+| Attribute | Description | Default |
+| --- | --- | --- |
+| `src` | PDF file URL. | `''` |
+| `iframe-title` | Title for the internal `iframe` (recommended for accessibility). | `PDF viewer window` |
+| `page` | Page number. | `''` |
+| `search` | Search query text. | `''` |
+| `phrase` | Phrase search mode, set to `true` to enable phrase matching. | `''` |
+| `zoom` | Zoom level (for example `auto`, `page-width`, `200%`). | `''` |
+| `pagemode` | Sidebar mode: `thumbs`, `bookmarks`, `attachments`, `layers`, `none`. | `none` |
+| `locale` | Viewer UI locale (for example `en-US`, `de`, `uk`). [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n) | `''` |
+| `viewer-css-theme` | Viewer theme: `AUTOMATIC`, `LIGHT`, `DARK`. | `AUTOMATIC` |
+| `worker-src` | PDF.js worker URL override. | `https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.624/build/pdf.worker.min.mjs` |
 
-`locale` -  Specifies which language to use in the viewer UI, `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
+Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
-`viewer-css-theme` - Apply automatic, light, or dark theme, `AUTOMATIC | LIGHT | DARK`
+## Runtime updates
 
-`viewer-extra-styles` - Add your CSS rules to the viewer application, pass a string with styles.
+Most attributes can be updated dynamically:
 
-`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).
+- `src` updates by calling PDF.js `open({ url })` without rebuilding the viewer.
+- `page`, `search`, `phrase`, `zoom`, `pagemode` update via hash parameters.
+- `viewer-css-theme` updates the viewer theme at runtime.
+- `worker-src` updates viewer options for subsequent document loads.
+- `locale` rebuilds the viewer so localization resources can be applied.
 
 ## Viewer CSS theme
 
@@ -102,18 +103,33 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 </pdfjs-viewer-element>
 ```
 
-## Viewer custom styles 
+Runtime example:
+
+```javascript
+const viewer = document.querySelector('pdfjs-viewer-element')
+viewer.setAttribute('viewer-css-theme', 'DARK')
+viewer.setAttribute('viewer-css-theme', 'AUTOMATIC')
+```
+
+## Viewer custom styles
 
-You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
+You can add your own CSS rules to the viewer application using `injectViewerStyles(styles: string)`:
 
 ```html
-<pdfjs-viewer-element 
-  src="/file.pdf" 
-  viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
-  viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
+<pdfjs-viewer-element id="viewer" src="/file.pdf">
 </pdfjs-viewer-element>
 ```
-Build your own theme with viewer's custom variables and `viewer-extra-styles-urls` attribute: 
+
+```javascript
+const viewer = document.querySelector('#viewer')
+viewer.injectViewerStyles(`
+  #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
+`)
+```
+
+`injectViewerStyles(...)` applies styles immediately when the viewer document is ready, and keeps them for future rebuilds.
+
+Build your own theme with viewer custom variables and inject it via `injectViewerStyles(...)`:
 
 ```css
 :root {
@@ -136,7 +152,11 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
 }
 ```
 
-## PDF.js Viewer Application and Options
+## Methods
+
+`injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
+
+## Programmatic access to PDF.js
 
 ```html
 <pdfjs-viewer-element></pdfjs-viewer-element>
@@ -152,13 +172,31 @@ document.addEventListener('DOMContentLoaded', async () => {
 })
 ```
 
+You can also react to source changes dynamically:
+
+```javascript
+const viewer = document.querySelector('pdfjs-viewer-element')
+viewer.setAttribute('src', '/another-file.pdf')
+```
+
 ## 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
+
+If you are upgrading from an older version:
+
+- `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', ...)`.
+
 ## Accessibility
 
 Use `iframe-title` to add a title to the `iframe` element and improve accessibility.

demo/basic.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Basic demo</title>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;

demo/dark-theme.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Dark theme demo</title>
-   <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+   <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;

demo/extra-styles-urls.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Extra styles demo</title>
-   <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+   <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;
@@ -16,8 +16,34 @@
   <body>
     <pdfjs-viewer-element
       src="/public/sample-pdf-with-images.pdf" 
-      viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']"
-      style="height: 100dvh">
+      style="height: 100dvh"
+    >
     </pdfjs-viewer-element>
+
+    <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);
+        }
+      `)
+    })
+  </script>
   </body>
 </html>

demo/extra-styles.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Extra styles demo</title>
-   <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;
@@ -16,8 +16,16 @@
   <body>
     <pdfjs-viewer-element
       src="/public/sample-pdf-with-images.pdf" 
-      viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
       style="height: 100dvh">
     </pdfjs-viewer-element>
   </body>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      // Create a very simple toolbar by hiding the middle and right toolbar parts.
+      document.querySelector('pdfjs-viewer-element').injectViewerStyles(`
+        #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
+      `)
+    })
+  </script>
 </html>

demo/multiple.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Multiple demo</title>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;

demo/opened-findbar.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Opened find bar demo</title>
-   <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+   <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;
@@ -26,7 +26,7 @@
           const { viewerApp } = event.detail
           viewerApp.eventBus.on('pagesloaded', () => {
             viewerApp.findBar.open()
-            viewerApp.findBar.findField.value = 'na' 
+            viewerApp.findBar.findField.value = 'and' 
             viewerApp.findBar.highlightAll.checked = true
             viewerApp.findBar.findNextButton.click()
           })

demo/pdf-data-load.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Basic demo</title>
-   <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
+   <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
     <style>
       body {
         margin: 0;
@@ -15,7 +15,6 @@
 
   <body>
     <pdfjs-viewer-element
-      id="viewer"
       style="height: 100dvh">
     </pdfjs-viewer-element>
 
@@ -37,7 +36,7 @@
 
 
       document.addEventListener('DOMContentLoaded', async () => {
-        document.querySelector('#viewer').addEventListener('initialized', (event) => {
+        document.querySelector('pdfjs-viewer-element').addEventListener('initialized', (event) => {
           const { viewerApp } = event.detail
           viewerApp.open({ data: pdfData })
         })

index.html

@@ -6,6 +6,7 @@
     <title>pdfjs-viewer-element</title>
     <meta name="description" content="A web component for viewing pdf files in the browser, based on PDF.js">
     <script type="module" src="./src/pdfjs-viewer-element.ts"></script>
+    <script type="module" src="./index.js"></script>
   </head>
   <body style="margin: 0">
     <pdfjs-viewer-element 
@@ -20,11 +21,12 @@
       page="2"
       style="height: 600px">
     </pdfjs-viewer-element>
-    <button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('viewer-extra-styles', '#downloadButton { display: none }')">Hide download button</button>
-    <button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('viewer-extra-styles', '')">Show download button</button>
+    <button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button>
 
     <pdfjs-viewer-element
       id="themedViewer"
+      page="3"
+      locale="uk"
       src="/sample-pdf-10MB.pdf" 
       style="height: 600px">
     </pdfjs-viewer-element>
@@ -44,6 +46,8 @@
     <button onclick="document.querySelector('#themedViewer').setAttribute('zoom', 'auto')">Reset zoom</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'thumbs')">Change page mode</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'none')">Reset page mode</button>
+    <button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-with-images.pdf')">Load images PDF</button>
+    <button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-10MB.pdf')">Load 10MB PDF</button>
     <hr>
 
     <pdfjs-viewer-element
@@ -52,29 +56,4 @@
       style="height: clamp(400px, 80dvh, 600px)">
     </pdfjs-viewer-element>
   </body>
-
-  <script>
-    const pdfData = Uint8Array.from(atob(
-    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
-    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
-    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
-    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
-    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
-    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
-    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
-    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
-    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
-    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
-    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
-    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
-    '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 })
-      })
-    })
-  </script>
 </html>