Refactor initPdfViewer using the new registerGlobalInitFunc

Author: kerwin612

templates/repo/settings/lfs_file.tmpl

@@ -31,7 +31,7 @@
 									<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 								</audio>
 							{{else if .IsPDFFile}}
-								<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
+								<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
 							{{else}}
 								<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 							{{end}}

templates/repo/view_file.tmpl

@@ -108,7 +108,7 @@
 							<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 						</audio>
 					{{else if .IsPDFFile}}
-						<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
+						<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}

web_src/js/render/pdf.ts

@@ -1,12 +1,10 @@
 import {htmlEscape} from 'escape-goat';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 export async function initPdfViewer() {
-  const els = document.querySelectorAll('.pdf-content');
-  if (!els.length) return;
+  registerGlobalInitFunc('initPdfViewer', async (el: HTMLInputElement) => {
+    const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
 
-  const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
-
-  for (const el of els) {
     const src = el.getAttribute('data-src');
     const fallbackText = el.getAttribute('data-fallback-button-text');
     pdfobject.embed(src, el, {
@@ -15,5 +13,5 @@ export async function initPdfViewer() {
       `,
     });
     el.classList.remove('is-loading');
-  }
+  });
 }