feat(PdfReader): remove async/await getPdfUrl (#845)

* feat: redesign backdrop function

* refactor: 移除异步逻辑

* chore: bump version 10.0.22

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.21</Version>
+    <Version>10.0.22</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -101,8 +101,8 @@
             </div>
         </div>
     </div>
+    <div class="bb-view-pdf-backdrop invisible"></div>
     <div class="bb-view-pdf-info invisible">
-        <div class="bb-view-pdf-backdrop"></div>
         <div class="bb-view-pdf-dialog">
             <div class="bb-view-pdf-dialog-title mb-3">@Localizer["DocumentProperties"]</div>
             <div class="bb-view-pdf-dialog-item">

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -527,7 +527,7 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         rotateView(pdfViewer, 90);
     });
     EventHandler.on(toolbar, "click", ".bb-view-print", async e => {
-        await printPdf(el, options);
+        printPdf(el, options);
         await invoke.invokeMethodAsync("Printing");
     })
     EventHandler.on(toolbar, "click", ".dropdown-item-pages", async e => {
@@ -540,15 +540,15 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
             pdfViewer.spreadMode = 0;
         }
     });
-    EventHandler.on(toolbar, "click", ".bb-view-download", async e => {
+    EventHandler.on(toolbar, "click", ".bb-view-download", e => {
         let fileName = el.getAttribute('data-bb-download');
         if (fileName === null) {
             const docTitle = el.querySelector('.bb-view-subject');
             if (docTitle) {
                 fileName = docTitle.textContent;
             }
         }
-        await downloadPdf(options, fileName);
+        downloadPdf(options, fileName);
     });
 
     EventHandler.on(toolbar, "click", ".dropdown-item-presentation", async e => {
@@ -562,6 +562,8 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         //}
     });
     EventHandler.on(toolbar, "click", ".dropdown-item-doc", e => {
+        showBackdrop(el);
+
         const dialog = el.querySelector(".bb-view-pdf-info");
         if (dialog) {
             dialog.classList.add("show");
@@ -574,25 +576,23 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         if (dialog) {
             dialog.classList.remove("show");
         }
+
+        hideBackdrop(el);
     });
 }
 
-const downloadPdf = async (options, fileName) => {
+const downloadPdf = (options, fileName) => {
     if (fileName === null) {
         fileName = "download.pdf";
     }
 
-    await getPdfUrl(options, url => {
+    getPdfUrl(options, url => {
         const anchorElement = document.createElement('a');
         anchorElement.href = url;
         anchorElement.download = fileName;
         document.body.appendChild(anchorElement);
         anchorElement.click();
         document.body.removeChild(anchorElement);
-
-        return new Promise((resolve, reject) => {
-            resolve();
-        });
     });
 }
 
@@ -761,7 +761,7 @@ const makeThumb = async page => {
     return canvas;
 }
 
-const printPdf = async (el, options) => {
+const printPdf = (el, options) => {
     let iframe = el.querySelector(".bb-view-print-iframe");
     if (iframe === null) {
         iframe = document.createElement("iframe");
@@ -772,26 +772,37 @@ const printPdf = async (el, options) => {
         el.appendChild(iframe);
     }
 
-    await getPdfUrl(options, url => {
+    getPdfUrl(options, url => {
         iframe.src = url;
         iframe.onload = () => {
             iframe.contentWindow.focus();
             iframe.contentWindow.print();
         };
-        return new Promise((resolve, reject) => {
-            resolve();
-        });
     });
 }
 
-const getPdfUrl = async (options, callback) => {
+const showBackdrop = el => {
+    const backdrop = el.querySelector('.bb-view-pdf-backdrop');
+    if (backdrop) {
+        backdrop.classList.add('show');
+    }
+}
+
+const hideBackdrop = el => {
+    const backdrop = el.querySelector('.bb-view-pdf-backdrop');
+    if (backdrop) {
+        backdrop.classList.remove('show');
+    }
+}
+
+const getPdfUrl = (options, callback) => {
     if (options.url) {
         callback(options.url);
     }
     else if (options.data) {
         const blob = new Blob([options.data], { type: 'application/pdf' });
         var url = window.URL.createObjectURL(blob);
-        await callback(url);
+        callback(url);
         window.URL.revokeObjectURL(url);
     }
 }

src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css

@@ -237,6 +237,18 @@
     inset: 0;
 }
 
+.bb-view-pdf-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: #000;
+    opacity: 0.6;
+    z-index: 1;
+}
+
+    .bb-view-pdf-backdrop:not(.show) {
+        display: none;
+    }
+
 .bb-view-pdf-info {
     position: absolute;
     inset: 0;
@@ -250,14 +262,6 @@
         display: none;
     }
 
-.bb-view-pdf-backdrop {
-    position: absolute;
-    inset: 0;
-    background-color: #000;
-    opacity: 0.6;
-    z-index: 1;
-}
-
 .bb-view-pdf-dialog {
     background-color: #fff;
     padding: 1rem;