feat: 移动工具栏按钮逻辑到客户端

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -15,13 +15,13 @@
             </div>
             <div class="@ViewBodyString">
                 <div class="bb-view-group bb-view-group-page">
-                    <input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
+                    <input type="text" class="bb-view-num" value="1" /><span class="bb-view-slash">/</span>
                     <div class="bb-view-pagesCount"></div>
                 </div>
                 <div class="bb-view-group bb-view-group-scale">
                     <div class="bb-view-divider"></div>
                     <div class="bb-view-icon bb-page-minus" title="@Localizer["ZoomOut"]"><i class="fa-solid fa-fw fa-minus"></i></div>
-                    <input type="text" class="bb-view-scale-input" @bind="CurrentScaleString" />
+                    <input type="text" class="bb-view-scale-input" value="100%" />
                     <div class="bb-view-icon bb-page-plus" title="@Localizer["ZoomIn"]"><i class="fa-solid fa-fw fa-plus"></i></div>
                 </div>
                 <div class="bb-view-group bb-view-group-rotate">

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs

@@ -4,7 +4,6 @@
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
-using System.Globalization;
 
 namespace BootstrapBlazor.Components;
 
@@ -148,45 +147,6 @@ public partial class PdfReader
     private string? _dropdownItemDefaultIcon;
     private bool _enableThumbnails = true;
 
-    private string CurrentPageString
-    {
-        get => CurrentPage.ToString(CultureInfo.InvariantCulture);
-        set => SetCurrentPage(value);
-    }
-
-    private void SetCurrentPage(string value)
-    {
-        if (uint.TryParse(value, NumberStyles.Integer, CultureInfo.InvariantCulture, out var num))
-        {
-            CurrentPage = num;
-        }
-    }
-
-    private string CurrentScaleString
-    {
-        get => $"{CurrentScale ?? "100"}%";
-        set => SetCurrentScale(value);
-    }
-
-    private void SetCurrentScale(string value)
-    {
-        if (string.IsNullOrEmpty(value))
-        {
-            CurrentScale = "100";
-        }
-        else if (float.TryParse(value.TrimEnd("%"), out var v))
-        {
-            v = v switch
-            {
-                > 500 => 500,
-                < 25 => 25,
-                _ => v
-            };
-
-            CurrentScale = v.ToString(CultureInfo.InvariantCulture);
-        }
-    }
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -263,6 +223,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         Url,
         FitMode,
         EnableThumbnails,
+        CurrentPage,
         TriggerPagesInit = OnPagesInitAsync != null,
         TriggerPagesLoaded = OnPagesLoadedAsync != null,
         TriggerPageChanged = OnPageChangedAsync != null,

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

@@ -261,8 +261,31 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         const thumbnailsEl = el.querySelector(".bb-view-thumbnails");
         thumbnailsEl.classList.toggle("show");
     });
+    EventHandler.on(toolbar, "change", '.bb-view-num', e => {
+        let pageNumber = parseInt(e.delegateTarget.value) || 1;
+        if (pageNumber < 1) {
+            pageNumber = 1;
+        }
+        if (pageNumber > pdfViewer.pagesCount) {
+            pageNumber = pdfViewer.pagesCount;
+        }
+        pdfViewer.currentPageNumber = pageNumber;
+    });
     EventHandler.on(toolbar, "click", '.bb-page-minus', e => updateScale(pdfViewer, e.delegateTarget, -1));
     EventHandler.on(toolbar, "click", '.bb-page-plus', e => updateScale(pdfViewer, e.delegateTarget, 1));
+    EventHandler.on(toolbar, 'change', '.bb-view-scale-input', e => {
+        let value = parseInt(e.delegateTarget.value);
+        if (value < 25) {
+            value = 25;
+        }
+        else if (value > 500) {
+            value = 500;
+        }
+        pdfViewer.currentScale = value / 100;
+    });
+    EventHandler.on(toolbar, 'focus', '.bb-view-scale-input', e => {
+        e.delegateTarget.select();
+    });
     EventHandler.on(toolbar, 'click', '.bb-view-rotate-left', e => {
         rotateView(pdfViewer, -90);
     });
@@ -401,7 +424,6 @@ export function dispose(id) {
 
     if (observer) {
         observer.disconnect();
-        observer = null;
     }
 
     if (el) {
@@ -413,6 +435,8 @@ export function dispose(id) {
         const toolbar = el.querySelector(".bb-view-toolbar");
         if (toolbar) {
             EventHandler.off(toolbar, "click");
+            EventHandler.off(toolbar, "change");
+            EventHandler.off(toolbar, "focus");
         }
 
         const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");