feat: 增加关闭按钮逻辑

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/Locales/en.json

@@ -12,6 +12,7 @@
     "Print": "Print",
     "TwoPageView": "Two pages on view",
     "PresentationMode": "Presentation mode",
-    "DocumentProperty": "Document properties"
+    "DocumentProperty": "Document properties",
+    "CloseButtonText": "Close"
   }
 }

src/components/BootstrapBlazor.PdfReader/Locales/zh.json

@@ -12,6 +12,7 @@
     "Print": "打印",
     "TwoPageView": "双页视图",
     "PresentationMode": "演示模式",
-    "DocumentProperty": "文档属性"
+    "DocumentProperty": "文档属性",
+    "CloseButtonText": "关闭"
   }
 }

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -167,6 +167,11 @@
                 <div class="bb-view-pdf-dialog-label">Fast web view:</div>
                 <div class="bb-view-pdf-dialog-webview">No</div>
             </div>
+            <div class="bb-view-pdf-dialog-close">
+                <button type="button" class="btn btn-primary">
+                    <span>@Localizer["CloseButtonText"]</span>
+                </button>
+            </div>
         </div>
     </div>
 </div>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css

@@ -216,9 +216,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
+    z-index: 5;
 }
 
+    .bb-view-pdf-info:not(.show) {
+        display: none;
+    }
+
 .bb-view-pdf-backdrop {
     position: absolute;
     inset: 0;
@@ -240,12 +244,21 @@
     width: 344px;
 }
 
-.bb-view-pdf-dialog-item:not(:last-child) {
-    margin-block-start: .5rem;
-}
+    .bb-view-pdf-dialog-item:not(:last-child) {
+        margin-block-start: .5rem;
+    }
 
 .bb-view-pdf-dialog-label {
     width: 108px;
     white-space: nowrap;
     overflow: hidden;
 }
+
+.bb-view-pdf-dialog-close {
+    text-align: right;
+    padding-block-start: 1rem;
+}
+
+    .bb-view-pdf-dialog-close .btn {
+        --bs-btn-padding-x: 1rem;
+    }

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

@@ -141,7 +141,7 @@ const loadMetadata = (el, pdfViewer, metadata) => {
 
     const size = el.querySelector('.bb-view-pdf-dialog-size');
     pdfViewer.pdfDocument.getPage(pdfViewer.currentPageNumber).then(page => {
-        const viewport = page.getViewport({scale: 1});
+        const viewport = page.getViewport({ scale: 1 });
         size.textContent = `${(viewport.width / 72).toFixed(2)} * ${(viewport.height / 72).toFixed(2)} in (portrait)`;
     });
 
@@ -162,7 +162,7 @@ function parsePdfDate(pdfDateString) {
         return null;
     }
 
-    const [, year, month, day, hours, minutes, seconds, timezoneSign, timezoneHours, timezoneMinutes ] = match;
+    const [, year, month, day, hours, minutes, seconds, timezoneSign, timezoneHours, timezoneMinutes] = match;
 
     const date = new Date(
         parseInt(year),
@@ -436,6 +436,12 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         //    el.requestFullscreen();
         //}
     });
+    EventHandler.on(toolbar, "click", ".dropdown-item-doc", e => {
+        const dialog = el.querySelector(".bb-view-pdf-info");
+        if (dialog) {
+            dialog.classList.add("show");
+        }
+    });
 }
 
 const resetToolbarView = (el, pdfViewer) => {