Reload iframe only after necessary attributes changed #30

Author: alekswebnet

index.html

@@ -11,15 +11,15 @@
     <pdfjs-viewer-element 
       src="/fake-file.pdf" 
       viewer-path="/pdfjs-4.0.379-dist"
-      style="height: clamp(600px, 600px, 80dvh)">
+      style="height: 600px">
     </pdfjs-viewer-element>
     <pdfjs-viewer-element 
       id="hideOpenFileViewer"
       src="/sample-pdf-with-images.pdf" 
       viewer-path="/pdfjs-4.0.379-dist"
       locale="de"
       page="2"
-      style="height: clamp(600px, 600px, 80dvh)">
+      style="height: 600px">
     </pdfjs-viewer-element>
     <button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('viewer-extra-styles', '#download { display: none }')">Hide download button</button>
     <button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('viewer-extra-styles', '')">Show download button</button>
@@ -29,7 +29,7 @@
       viewer-path="/pdfjs-4.0.379-dist"
       viewer-css-theme="DARK"
       locale="es"
-      style="height: clamp(600px, 600px, 80dvh)">
+      style="height: 600px">
     </pdfjs-viewer-element>
 
     <button onclick="document.querySelector('#themedViewer').setAttribute('viewer-css-theme', 'LIGHT')">Change theme</button>
@@ -38,7 +38,7 @@
     <button onclick="document.querySelector('#themedViewer').setAttribute('page', '1')">Reset page</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'de')">Change locale</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'es')">Reset locale</button>
-    <button onclick="document.querySelector('#themedViewer').setAttribute('text-layer', 'visible')">Change text text layer</button>
+    <button onclick="document.querySelector('#themedViewer').setAttribute('text-layer', 'visible')">Change text layer</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('text-layer', 'none')">Reset text layer</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('search', 'iss')">Change search text</button>
     <button onclick="document.querySelector('#themedViewer').setAttribute('search', '')">Reset search text</button>

src/pdfjs-viewer-element.ts

@@ -8,7 +8,7 @@ const DEFAULTS = {
   page: '',
   search: '',
   phrase: '',
-  zoom: 'auto',
+  zoom: '',
   pagemode: 'none',
   locale: '',
   textLayer: '',
@@ -22,6 +22,8 @@ export const ViewerCssTheme = {
   DARK: 2,
 } as const
 
+export const hardRefreshAttributes = ['src', 'viewer-path', 'locale', 'viewer-css-theme', 'viewer-extra-styles']
+
 export class PdfjsViewerElement extends HTMLElement {
   constructor() {
     super()
@@ -42,8 +44,8 @@ export class PdfjsViewerElement extends HTMLElement {
 
   connectedCallback() {
     this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
-    document.addEventListener('webviewerloaded', () => {
-      this.setCssTheme()
+    document.addEventListener('webviewerloaded', async () => {
+      this.setCssTheme(this.getCssThemeOption())
       this.setViewerExtraStyles(this.getAttribute('viewer-extra-styles'))
       if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('defaultUrl', '')
       this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true)
@@ -52,7 +54,13 @@ export class PdfjsViewerElement extends HTMLElement {
     });
   }
 
-  attributeChangedCallback() {
+  attributeChangedCallback(name: string) {
+    if (!hardRefreshAttributes.includes(name)) {
+      this.onIframeReady(() => {
+        this.iframe.src = this.getIframeSrc()
+      })
+      return
+    }
     this.onIframeReady(() => this.mountViewer(this.getIframeSrc()))
   }
 
@@ -74,9 +82,7 @@ export class PdfjsViewerElement extends HTMLElement {
     const viewerCssTheme = this.getAttribute('viewer-css-theme') || DEFAULTS.viewerCssTheme
     const viewerExtraStyles = Boolean(this.getAttribute('viewer-extra-styles') || DEFAULTS.viewerExtraStyles)
 
-    const updatedSrc = `${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}`
-    if (updatedSrc !== this.iframe.getAttribute('src')) return updatedSrc
-    return ''
+    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}`
   }
 
   private mountViewer(src: string) {
@@ -97,9 +103,8 @@ export class PdfjsViewerElement extends HTMLElement {
       : ViewerCssTheme[DEFAULTS.viewerCssTheme]
   }
 
-  setCssTheme() {
-    const cssTheme = this.getCssThemeOption()
-    if (cssTheme === ViewerCssTheme.DARK) {
+  private setCssTheme(theme: 0 | 1 | 2) {
+    if (theme === ViewerCssTheme.DARK) {
       const styleSheet = this.iframe.contentDocument?.styleSheets[0];
       const cssRules = styleSheet?.cssRules || [];
       const rules = Object.keys(cssRules)