Fix #3

Author: alekswebnet

index.html

@@ -88,7 +88,7 @@ <h1 class="me-2 me-sm-3 mb-0" style="white-space: nowrap">pdfjs-viewer-element</
             <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">zoom</code></label></div>
+                <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">
                   <select id="src" v-model="src" class="form-select form-select-sm" aria-label="Pdf file path">

src/debounce.ts

@@ -0,0 +1,19 @@
+export const elementReady = (selector: string, document: Document | ShadowRoot) => {
+  return new Promise((resolve, _reject) => {
+    let el = document.querySelector(selector);
+    if (el) {
+      resolve(el); 
+      return
+    }
+    new MutationObserver((_mutationRecords, observer) => {
+      Array.from(document.querySelectorAll(selector)).forEach((element) => {
+        resolve(element);
+        observer.disconnect();
+      });
+    })
+      .observe(document, {
+        childList: true,
+        subtree: true
+      });
+  });
+}

src/elementReady.ts

@@ -1,12 +1,23 @@
-import { debounce } from "./debounce";
+import { elementReady } from "./elementReady";
 
-const defaults = {
+const DEFAULTS = {
   viewerPath: '/pdfjs',
-  viewerEntry: '/web/viewer.html'
+  viewerEntry: '/web/viewer.html',
+  src: '',
+  page: '',
+  search: '',
+  phrase: '',
+  zoom: '',
+  pagemode: '',
+  locale: '',
+  textLayer: ''
 }
 
 const template = document.createElement('template')
-template.innerHTML = `<iframe frameborder="0" width="100%"></iframe><style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</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() {
@@ -27,44 +38,35 @@ export class PdfjsViewerElement extends HTMLElement {
   }
 
   attributeChangedCallback() {
-    this.onAttrsChanged()
+    elementReady('iframe', this.shadowRoot!).then(() => this.setProps())
   }
 
-  private onAttrsChanged = debounce(() => {
-    const src = this.iframe.getAttribute('src')
-    
-    if (src && src.split('&locale=')[1] !== this.getAttribute('locale')) {
-      this.setProps()
-      this.iframe.contentWindow.location.reload()
+  private setProps() {
+    const src = this.getFullPath(this.getAttribute('src') || DEFAULTS.src)
+    const viewerPath = this.getFullPath(this.getAttribute('viewer-path') || DEFAULTS.viewerPath)
+    const page = this.getAttribute('page') || DEFAULTS.page
+    const search = this.getAttribute('search') || DEFAULTS.search
+    const phrase = this.getAttribute('phrase') || DEFAULTS.phrase
+    const zoom = this.getAttribute('zoom') || DEFAULTS.zoom
+    const pagemode = this.getAttribute('pagemode') || DEFAULTS.pagemode
+    const locale = this.getAttribute('locale') || DEFAULTS.locale
+    const textLayer = this.getAttribute('text-layer') || DEFAULTS.textLayer
+
+    const updatedSrc = `${viewerPath}${DEFAULTS.viewerEntry}?file=${src}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}`
+    if (updatedSrc !== this.iframe.getAttribute('src')) {
+      this.rerenderIframe(updatedSrc)
     }
-    else if (src && src.split(defaults.viewerEntry)[0] !== this.getFullPath(this.getAttribute('viewer-path') || '') ) {
-      this.setProps()
-      this.iframe.contentWindow.location.reload()
-    }
-    else {
-      this.setProps()
-    }
-  })
-
-  private async setProps() {
-    const viewerPath = this.getAttribute('viewer-path') || defaults.viewerPath
-    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') || ''
-    const textLayer = this.getAttribute('text-layer') || ''
-
-    this.iframe.setAttribute(
-      'src',
-      `${this.getFullPath(viewerPath)}${defaults.viewerEntry}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}`
-    )
+  }
+
+  private rerenderIframe(src: string) {
+    this.shadowRoot!.replaceChild(this.iframe.cloneNode(), this.iframe)
+    this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
+    this.iframe.contentWindow.location.href = src
   }
 
   private setEventListeners() {
     document.addEventListener('webviewerloaded', () => {
-      this.iframe.contentWindow.PDFViewerApplicationOptions.set('defaultUrl', this.getFullPath(this.getAttribute('src') || ''))
+      if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow.PDFViewerApplicationOptions.set('defaultUrl', '')
       this.iframe.contentWindow.PDFViewerApplicationOptions.set('disablePreferences', true)
       this.iframe.contentWindow.PDFViewerApplicationOptions.set('pdfBugEnabled', true)
     })