Add new properties, update demo

alekswebnet · alekswebnet · commit c565ffe04f13 · 2023-03-19T06:35:59.000+02:00
diff --git a/README.md b/README.md
@@ -3,9 +3,9 @@
 [![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
 [![Package Quality](https://packagequality.com/shield/pdfjs-viewer-element.svg)](https://packagequality.com/#?package=pdfjs-viewer-element)
 
-A web component for viewing pdf files in the browser. The package is based on [PDF.js viewer](https://mozilla.github.io/pdf.js/web/viewer.html) build and works with any framework. See [demo](https://alekswebnet.github.io/pdfjs-viewer-element/index.html).
+A web component for viewing pdf files in the browser. The package is based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) build and works with any framework. See [demo](https://alekswebnet.github.io/pdfjs-viewer-element/).
 
-⚠️ `pdfjs-viewer-element` uses 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 and **place the prebuilt** files to some directory of your project. You may specify the path to this directory with `viewer-path` property (`/pdfjs` by default).
+⚠️ `pdfjs-viewer-element` uses 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 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).
 
 ## Install
 ```
@@ -31,7 +31,7 @@ import 'pdfjs-viewer-element'
 ```
 
 ```javascript
-<pdfjs-viewer-element src="/compressed.tracemonkey-pldi-09.pdf" viewer-path="/path-to-viewer"></pdfjs-viewer-element>
+<pdfjs-viewer-element src="/file.pdf" viewer-path="/path-to-viewer"></pdfjs-viewer-element>
 ```
 
 ## Properties
@@ -40,7 +40,22 @@ import 'pdfjs-viewer-element'
 
 `viewer-path` - path to prebuilt directory (`/pdfjs` by default).
 
-`locale` - language localization (e.g. 'en', 'en-US', 'es', 'de'), see [pdf.js i10n files](https://github.com/mozilla/pdf.js/tree/master/l10n) (the language of your browser by default)
+`src` - Path to pdf file
+
+`viewer-path` - Path to PDF.js prebuilt
+
+`locale` - Language of the interface
+
+`page` - Page number
+
+`search` - Search text
+
+`phrase` - Search by phrase
+
+`zoom` - Zoom level
+
+`pagemode` - Page mode
+
 ## License
 For this package - [MIT](http://opensource.org/licenses/MIT).
 
diff --git a/index.html b/index.html
@@ -2,18 +2,181 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element</title>
-    <link rel="stylesheet" href="./src/index.css" />
+    <meta name="description" content="A web component for viewing pdf files in the browser, based on PDF.js">
+    <script src="https://unpkg.com/petite-vue" defer init></script>
     <script type="module" src="/src/pdfjs-viewer-element.ts"></script>
+    <script>var locales=["ach","af","an","ar","ast","az","be","bg","bn","bo","br","brx","bs","ca","cak","ckb","cs","cy","da","de","dsb","el","en-CA","en-GB","en-US","eo","es-AR","es-CL","es-ES","es-MX","et","eu","fa","ff","fi","fr","fur","fy-NL","ga-IE","gd","gl","gn","gu-IN","he","hi-IN","hr","hsb","hu","hy-AM","hye","ia","id","is","it","ja","ka","kab","kk","km","kn","ko","lij","lo","lt","ltg","lv","meh","mk","mr","ms","my","nb-NO","ne-NP","nl","nn-NO","oc","pa-IN","pl","pt-BR","pt-PT","rm","ro","ru","sat","sc","scn","sco","si","sk","skr","sl","son","sq","sr","sv-SE","szl","ta","te","tg","th","tl","tr","trs","uk","ur","uz","vi","wo","xh","zh-CN","zh-TW"];</script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <style>
+      @media (min-width: 992px) {
+        .content-col {
+          max-height: 100vh;
+          max-height: 100dvh;
+        }
+      }
+    </style>
   </head>
-  <body>
-    <pdfjs-viewer-element 
-      src="/compressed.tracemonkey-pldi-09.pdf" 
-      viewer-path="/pdfjs"
-      locale="en"
-      style="height: 100dvh"
-    ></pdfjs-viewer-element>
+  <body class="bg-light">
+    <div class="d-flex" v-scope="{ tab: window.location.href.includes('/api') ? 'api' : 'start' , src: '/example.pdf', viewerPath: '/pdfjs', page: null, locale: null, locales: window.locales, zoom: 'auto', pagemode: 'none', search: null, phrase: true}">
+      <div class="container-fluid flex-fill p-0 ps-lg-2 overflow-hidden">
+        <div class="row h-100">
+          <div class="col-lg-6 px-4 pt-4 pb-4 overflow-auto content-col">
+            <div class="d-flex pt-0 pt-lg-4 justify-content-center align-items-center">
+              <a class="d-block" href="https://github.com/alekswebnet/pdfjs-viewer-element" target="_blank">
+                <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle">
+                  <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+                </svg>
+              </a>
+            </div>
+            <div class="pt-1 d-flex align-items-center justify-content-center flex-wrap">
+              <h1 class="me-2 me-sm-3 mb-0" style="white-space: nowrap">pdfjs-viewer-element</h1>
+              <a href="https://www.npmjs.com/package/pdfjs-viewer-element" target="_blank"><img class="mt-1" src="https://img.shields.io/npm/v/pdfjs-viewer-element" alt="Npm version"></a>
+            </div>
+            <p class="lead text-center text-muted pb-sm-4">
+              A web component for viewing pdf files in the browser, based on 
+              <a href="https://github.com/mozilla/pdf.js" target="_blank">PDF.js</a> viewer.
+            </p>
+            <ul class="nav nav-tabs" role="tablist" style="display: none" :class="{ 'd-flex': !!tab }">
+              <li class="nav-item bg-light" role="presentation">
+                <button 
+                  class="nav-link bg-light"
+                  :class="{ 'active': tab === 'start' }"
+                  :style="{ 'border-bottom-color': tab === 'start' ? 'var(--bs-light)' : '#dee2e6' }" 
+                  type="button" 
+                  role="tab"
+                  @click="window.history.pushState({}, '', `${window.location.origin}`), tab = 'start'"
+                  aria-controls="start">📦 Getting Started</button>
+              </li>
+              <li class="nav-item bg-light" role="presentation">
+                <button 
+                  class="nav-link bg-light"
+                  :class="{ 'active': tab === 'api' }"
+                  :style="{ 'border-bottom-color': tab === 'api' ? 'var(--bs-light)' : '#dee2e6' }" 
+                  type="button" 
+                  role="tab"
+                  @click="window.history.pushState({}, '', `${window.location.origin}/api`), tab = 'api'"
+                  aria-controls="api">⚙️ API</button>
+              </li>
+            </ul>
+            <div style="display: none" class="pt-4 small" :class="{ 'd-block': tab === 'start' }">
+              <p class="fs-6">Download and place the 
+                <a href="http://mozilla.github.io/pdf.js/getting_started" target="_blank">PDF.js prebuilt</a> 
+                files to some directory of your project. Specify the path to this directory with <code style="color: #905">viewer-path</code> property (<code style="color: #07a">/pdfjs</code> by default). </p>
+              <p class="fs-6 mb-0">Install using module bundlers: </p>
+              <pre class="d-flex flex-column bg-white border rounded language-bash">
+                <code style="color: #999"># With npm</code>
+                <code>npm install pdfjs-viewer-element</code>
+                <code style="color: #999"># With yarn</code>
+                <code>yarn add pdfjs-viewer-element</code>
+              </pre>
+              <pre class="d-flex flex-column bg-white border rounded language-js">
+                <code>import 'pdfjs-viewer-element'</code>
+              </pre>
+              <p class="fs-6 mb-0">Install using browser: </p>
+              <pre class="d-flex bg-white border rounded language-markup">
+                <code>&lt;script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"&gt;&lt;/script&gt;</code>
+              </pre>
+              <p class="fs-6 mb-0">Usage: </p>
+              <pre class="d-flex bg-white border rounded language-markup">
+                <code>&lt;pdfjs-viewer-element scr="/file.pdf" viewer-path="/pdfjs"&gt;&lt;/pdfjs-viewer-element&gt;</code>
+              </pre>
+            </div>
+            <form style="display: none" class="pt-4" :class="{ 'd-block': tab === 'api' }">
+              <p class="fs-6 mb-2">Properties overview:</p>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="src" class="col-form-label"><code style="color: #905">src</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Path to pdf file</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <input id="src" v-model="src" class="form-control form-control-sm" type="text" aria-label="Pdf file path" disabled />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="viewerPath" class="col-form-label"><code style="color: #905">viewer-path</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Path to PDF.js prebuilt</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <input id="viewerPath" v-model="viewerPath" class="form-control form-control-sm" type="text" aria-label="Viewer path" disabled />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="locale" class="col-form-label"><code style="color: #905">locale</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Language of the interface</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <select id="locale" v-model="locale" class="form-select form-select-sm" aria-label="Language localization">
+                    <option selected :value="null">Default</option>
+                    <option v-for="loc in locales" :value="loc" v-html="loc"></option>
+                  </select>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="page" class="col-form-label"><code style="color: #905">page</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Page number</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <input id="page" v-model="page" class="form-control form-control-sm" type="number" aria-label="Page number" />
+                </div>
+              </div>
+              <hr class="d-block d-sm-none mb-0">
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="search" class="col-form-label"><code style="color: #905">search</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Search text</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <input id="search" v-model="search" class="form-control form-control-sm" type="text" aria-label="Search" />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="phrase" class="col-form-label"><code style="color: #905">phrase</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Search by phrase</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <input id="phrase" v-model="phrase" class="form-check-input" type="checkbox" aria-label="Search by phrase" />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="zoom" class="col-form-label"><code style="color: #905">zoom</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Zoom level</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <select id="zoom" v-model="zoom" class="form-select form-select-sm" aria-label="Zoom">
+                    <option selected value="auto">auto</option>
+                    <option value="page-width">page-width</option>
+                    <option value="page-height">page-height</option>
+                    <option value="page-fit">page-fit</option>
+                    <option value="200">200%</option>
+                  </select>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 col-sm-3"><label for="pagemode" class="col-form-label"><code style="color: #905">pagemode</code></label></div>
+                <div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Page mode</span></div>
+                <div class="col-sm-4 d-flex align-items-center">
+                  <select id="pagemode" v-model="pagemode" class="form-select form-select-sm" aria-label="Page mode">
+                    <option selected value="none">none</option>
+                    <option value="thumbs">thumbs</option>
+                    <option value="bookmarks">bookmarks</option>
+                    <option value="attachments">attachments</option>
+                  </select>
+                </div>
+              </div>
+            </form>
+          </div>
+          <hr class="d-block d-lg-none mb-0 mt-0 bg-secondary">
+          <div class="col-lg-6 h-100 px-2 ps-lg-0 h-lg-auto" style="height: 100vh; height: 100dvh">
+            <pdfjs-viewer-element 
+              :src="src" 
+              :viewer-path="viewerPath"
+              :locale="locale"
+              :page="page"
+              :search="search"
+              :phrase="phrase"
+              :zoom="zoom"
+              :pagemode="pagemode"
+              style="height: 100vh; height: 100dvh"
+              class="border-start">
+            </pdfjs-viewer-element>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/public/example.pdf b/public/example.pdf
diff --git a/src/debounce.ts b/src/debounce.ts
@@ -0,0 +1,7 @@
+export const debounce = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
diff --git a/src/index.css b/src/index.css
diff --git a/src/pdfjs-viewer-element.ts b/src/pdfjs-viewer-element.ts
@@ -1,5 +1,7 @@
+import { debounce } from "./debounce";
+
 const template = document.createElement('template');
-template.innerHTML = `<iframe frameborder="0" width="100%"></iframe><style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:inherit}</style>`
+template.innerHTML = `<iframe frameborder="0" width="100%"></iframe><style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>`
 
 export class PdfjsViewerElement extends HTMLElement {
   constructor() {
@@ -8,42 +10,58 @@ export class PdfjsViewerElement extends HTMLElement {
     shadowRoot.appendChild(template.content.cloneNode(true))
   }
 
-  private iframe!: PdfjsViewerElementIframe;
+  private iframe!: PdfjsViewerElementIframe
 
   static get observedAttributes() {
-    return ['src', 'viewer-path', 'locale']
+    return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode']
   }
 
   connectedCallback() {
-    this.iframe = this.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
-    this.setAttributes()
-    this.initEventListeners()
+    this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
+    this.setEventListeners()
   }
 
-  attributeChangedCallback(name: string) {
-    if (['src', 'viewer-path'].includes(name)) {
-      this.setAttributes()
-      this.initEventListeners()
-    }
+  attributeChangedCallback() {
+    this.onAttrsChanged()
   }
 
-  setAttributes() {
-    if (!this.hasAttribute('viewer-path')) this.setAttribute('viewer-path', '/pdfjs')
-    this.iframe?.setAttribute(
-      'src', 
-      `${this.getAttribute('viewer-path')}/web/viewer.html?file=${this.getAttribute('src') || ''}`
+  private onAttrsChanged = debounce(async () => {
+    const url = this.iframe?.getAttribute('src')
+    
+    if (url && url.split('&locale=')[1] !== this.getAttribute('locale')) {
+      await this.setProps()
+      this.iframe.contentWindow.location.reload()
+    }
+    else {
+      await this.setProps()
+    }
+  })
+
+  private async setProps() {
+    const viewerPath = this.getAttribute('viewer-path') || '/pdfjs'
+    const file = this.getFileSrc(this.getAttribute('src') || '')
+    const page = this.getAttribute('page') || ''
+    const search = this.getAttribute('search') || ''
+    const phrase = this.getAttribute('phrase') || ''
+    const zoom = this.getAttribute('zoom') || ''
+    const pagemode = this.getAttribute('pagemode') || ''
+    const locale = this.getAttribute('locale')
+
+    this.iframe.setAttribute(
+      'src',
+      `${viewerPath}/web/viewer.html#file=${file}&page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}${locale ? '&locale='+locale : ''}`
     )
   }
 
-  initEventListeners() {
-    document.addEventListener('webviewerloaded', () => {
-      this.setViewerOptions()
+  private setEventListeners() {
+    document.addEventListener('webviewerloaded', async () => {
+      this.iframe.contentWindow?.PDFViewerApplicationOptions.set('disablePreferences', true)
+      this.iframe.contentWindow?.PDFViewerApplicationOptions.set('pdfBugEnabled', true)
     })
   }
 
-  setViewerOptions() {
-    const locale = this.getAttribute('locale')
-    if (locale) this.iframe.contentWindow?.PDFViewerApplicationOptions.set('locale', locale)
+  private getFileSrc(path: string) {
+    return path.startsWith('/') ? `${window.location.origin}${path}` : path
   }
 }
 
@@ -55,8 +73,8 @@ declare global {
 
 export interface PdfjsViewerElementIframeWindow extends Window {
   PDFViewerApplicationOptions: {
-    set: (name: string, value: string) => void
-  };
+    set: (name: string, value: string | boolean) => void
+  }
 }
 
 export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
