Add nameddest attribute

alekswebnet · alekswebnet · commit 2709dce4ede1 · 2024-04-02T16:36:47.000+03:00
diff --git a/README.md b/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
diff --git a/demo/go-to-nameddest.html b/demo/go-to-nameddest.html
@@ -0,0 +1,24 @@
+<!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 | Disable font face 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-report.pdf" 
+      viewer-path="/public/pdfjs-4.0.379-dist"
+      nameddest="chart"
+      style="height: 100dvh">
+    </pdfjs-viewer-element>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
diff --git a/src/pdfjs-viewer-element.ts b/src/pdfjs-viewer-element.ts
@@ -14,7 +14,8 @@ const DEFAULTS = {
   textLayer: '',
   viewerCssTheme: 'AUTOMATIC',
   viewerExtraStyles: '',
-  viewerExtraStylesUrls: ''
+  viewerExtraStylesUrls: '',
+  nameddest: ''
 } as const
 
 export const ViewerCssTheme = {
@@ -40,7 +41,7 @@ export class PdfjsViewerElement extends HTMLElement {
   public iframe!: PdfjsViewerElementIframe
 
   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']
+    return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode', 'text-layer', 'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls', 'nameddest']
   }
 
   connectedCallback() {
@@ -83,8 +84,9 @@ export class PdfjsViewerElement extends HTMLElement {
     const textLayer = this.getAttribute('text-layer') || DEFAULTS.textLayer
     const viewerCssTheme = this.getAttribute('viewer-css-theme') || DEFAULTS.viewerCssTheme
     const viewerExtraStyles = Boolean(this.getAttribute('viewer-extra-styles') || DEFAULTS.viewerExtraStyles)
+    const nameddest = this.getAttribute('nameddest') || DEFAULTS.nameddest
 
-    return `${viewerPath}${DEFAULTS.viewerEntry}?file=${encodeURIComponent(src)}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}&viewerCssTheme=${viewerCssTheme}&viewerExtraStyles=${viewerExtraStyles}`
+    return `${viewerPath}${DEFAULTS.viewerEntry}?file=${encodeURIComponent(src)}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}&viewerCssTheme=${viewerCssTheme}&viewerExtraStyles=${viewerExtraStyles}&nameddest=${nameddest}`
   }
 
   private mountViewer(src: string) {
@@ -183,12 +185,6 @@ export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
   contentWindow: PdfjsViewerElementIframeWindow
 }
 
-export interface PdfjsViewerLoadedEvent extends Event {
-  detail: {
-    source: PdfjsViewerElementIframeWindow
-  }
-}
-
 export default PdfjsViewerElement
 
 if (!window.customElements.get('pdfjs-viewer-element')) {
diff --git a/types/pdfjs-viewer-element.d.ts b/types/pdfjs-viewer-element.d.ts
@@ -43,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;
diff --git a/vite.config.ts b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    // Prevent resolve external deps of the prebuild v.4.0.189 
+    // Prevent resolve external deps of the prebuild from v.4.0.189 
     exclude: ['canvas', 'path2d-polyfill']
   }
 })

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "pdfjs-viewer-element",`
`3`		`- "version": "2.6.2",`
	`3`	`+ "version": "2.6.3",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"author": {`
`6`	`6`	`"name": "Oleksandr Shevchuk",`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default defineConfig({`
`20`	`20`	`},`
`21`	`21`	`},`
`22`	`22`	`optimizeDeps: {`
`23`		`- // Prevent resolve external deps of the prebuild v.4.0.189`
	`23`	`+ // Prevent resolve external deps of the prebuild from v.4.0.189`
`24`	`24`	`exclude: ['canvas', 'path2d-polyfill']`
`25`	`25`	`}`
`26`	`26`	`})`