feat(PdfReader): support wasm mode (#770)

* refactor: 移动样式兼容 wasm 模式

* refactor: 增加 invisible 样式确保不要提前渲染

* chore: bump version 10.0.10

Author: ArgoZhang

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

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

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -13,7 +13,7 @@
                 }
                 <span class="bb-view-subject">@_docTitle</span>
             </div>
-            <div class="bb-view-group bb-view-toolbar-main">
+            <div class="bb-view-group bb-view-toolbar-main invisible">
                 <div class="bb-view-group bb-view-group-page">
                     <input type="text" class="bb-view-num" value="1" /><span class="bb-view-slash">/</span>
                     <div class="bb-view-pagesCount"></div>
@@ -42,7 +42,7 @@
                     <div class="bb-view-icon bb-view-rotate-right" title="@Localizer["RotateRight"]"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
                 </div>
             </div>
-            <div class="bb-view-group bb-view-controls">
+            <div class="bb-view-group bb-view-controls invisible">
                 @if (ShowDownload)
                 {
                     <div class="bb-view-icon bb-view-download" title="@Localizer["Download"]" @onclick="OnDownload"><i class="fa-solid fa-fw fa-arrow-right-to-bracket fa-rotate-90"></i></div>
@@ -98,7 +98,7 @@
             </div>
         </div>
     </div>
-    <div class="bb-view-pdf-info">
+    <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>

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

@@ -9,7 +9,7 @@ if (pdfjsLib != null) {
 }
 
 export async function init(id, invoke, options) {
-    await addLink('./_content/BootstrapBlazor.PdfReader/css/pdf_viewer.css');
+    await addLink('./_content/BootstrapBlazor.PdfReader/css/pdf_reader.css');
 
     const el = document.getElementById(id);
     if (el === null) {
@@ -371,6 +371,9 @@ const addEventBus = (el, pdfViewer, eventBus, invoke, options) => {
 
 const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
     const toolbar = el.querySelector(".bb-view-toolbar");
+    [...el.querySelectorAll('.invisible')].forEach(i => {
+        i.classList.remove('invisible');
+    });
 
     EventHandler.on(toolbar, "click", '.bb-view-bar', e => {
         const thumbnailsEl = el.querySelector(".bb-view-thumbnails");

…trapBlazor.PdfReader/PdfReader.razor.css …zor.PdfReader/wwwroot/css/pdf_reader.csssrc/components/BootstrapBlazor.PdfReader/PdfReader.razor.css renamed to src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css renamed to src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css

@@ -1,3 +1,5 @@
+@import url('pdf_viewer.css');
+
 .bb-pdf-reader {
     --bb-pdf-view-height: 600px;
     --bb-pdf-toolbar-height: 60px;
@@ -163,20 +165,20 @@
         flex-basis: 300px;
     }
 
-::deep .bb-view-thumbnail-item {
+.bb-view-thumbnail-item {
     display: block;
     text-align: center;
 }
 
-    ::deep .bb-view-thumbnail-item:not(:last-child) {
+    .bb-view-thumbnail-item:not(:last-child) {
         margin-block-end: 1rem;
     }
 
-    ::deep .bb-view-thumbnail-item.active img {
+    .bb-view-thumbnail-item.active img {
         border: 2px solid #0d6efd;
     }
 
-    ::deep .bb-view-thumbnail-item img {
+    .bb-view-thumbnail-item img {
         width: 128px;
         padding: 1px;
         cursor: pointer;
@@ -185,13 +187,13 @@
         margin: 0 auto;
     }
 
-    ::deep .bb-view-thumbnail-item .bb-view-thumbnail-group {
+    .bb-view-thumbnail-item .bb-view-thumbnail-group {
         display: flex;
         flex-direction: column;
         justify-content: center;
     }
 
-        ::deep .bb-view-thumbnail-item .bb-view-thumbnail-group label {
+        .bb-view-thumbnail-item .bb-view-thumbnail-group label {
             color: #fff;
         }