feat(PdfReader): support localization

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

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.1-beta08</Version>
+    <Version>10.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>
@@ -10,14 +10,22 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <Content Remove="Locales\en.json" />
+    <Content Remove="Locales\zh.json" />
+    <EmbeddedResource Include="Locales\en.json" />
+    <EmbeddedResource Include="Locales\zh.json" />
     <Content Remove="wwwroot\pdf.mjs" />
     <Content Remove="wwwroot\pdf.worker.mjs" />
     <None Include="wwwroot\lib\pdf.mjs" />
     <None Include="wwwroot\lib\pdf.worker.mjs" />
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+    <!--<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />-->
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\..\..\BootstrapBlazor\src\BootstrapBlazor\BootstrapBlazor.csproj" />
   </ItemGroup>
 
   <ItemGroup>

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

@@ -0,0 +1,17 @@
+{
+  "BootstrapBlazor.Components.PdfReader": {
+    "ToggleSidebar": "Toggle sidebar",
+    "ZoomIn": "Zoom In",
+    "ZoomOut": "Zoom out",
+    "PageActual": "Fit page actual width",
+    "FitWidth": "Fit to width",
+    "FitHeight": "Fit to height",
+    "RotateLeft": "Rotate left",
+    "RotateRight": "Rotate right",
+    "Download": "Download",
+    "Print": "Print",
+    "TwoPageView": "Two pages on view",
+    "PresentationMode": "Presentation mode",
+    "DocumentProperty": "Document properties"
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "BootstrapBlazor.Components.PdfReader": {
+    "ToggleSidebar": "收起/展开 缩略图",
+    "ZoomIn": "放大",
+    "ZoomOut": "缩小",
+    "PageActual": "页面实际大小",
+    "FitWidth": "适配宽度",
+    "FitHeight": "适配高度",
+    "RotateLeft": "向左旋转 90 度",
+    "RotateRight": "向右旋转 90 度",
+    "Download": "下载",
+    "Print": "打印",
+    "TwoPageView": "双页视图",
+    "PresentationMode": "演示模式",
+    "DocumentProperty": "文档属性"
+  }
+}

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -5,58 +5,74 @@
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
     @if (ShowToolbar)
     {
-        <div class="bb-view-toolbar init">
+        <div class="bb-view-toolbar">
             <div class="bb-view-title">
-                <div class="bb-view-icon bb-view-bar"><i class="fa-solid fa-bars"></i></div>
+                <div class="bb-view-icon bb-view-bar" title="@Localizer["ToggleSidebar"]"><i class="fa-solid fa-bars"></i></div>
                 <span class="bb-view-subject">@_docTitle</span>
             </div>
             <div class="@ViewBodyString">
                 <input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
                 <div class="bb-view-pagesCount"></div>
                 <div class="bb-view-divider"></div>
-                <div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-fw fa-minus"></i></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" />
-                <div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-fw fa-plus"></i></div>
+                <div class="bb-view-icon bb-page-plus" title="@Localizer["ZoomIn"]"><i class="fa-solid fa-fw fa-plus"></i></div>
                 <div class="bb-view-scale">
                     <div class="bb-view-divider"></div>
                     <div class="bb-view-icon btn-group">
-                        <button type="button" class="btn bb-view-fit-height" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line fa-rotate-90"></i></button>
-                        <button type="button" class="btn bb-view-fit-width" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line"></i></button>
+                        <button type="button" class="btn bb-view-fit-height" title="@Localizer["FitHeight"]" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line fa-rotate-90"></i></button>
+                        <button type="button" class="btn bb-view-fit-width" title="@Localizer["FitWidth"]" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)"><i class="fa-solid fa-fw fa-arrows-left-right-to-line"></i></button>
                         <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                             <span class="visually-hidden">Toggle Dropdown</span>
                         </button>
                         <div class="dropdown-menu dropdown-menu-end">
-                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">page-actual</div>
-                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">page-width</div>
-                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">page-height</div>
-                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageFit)">page-fit</div>
-                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.Auto)">auto</div>
+                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">@Localizer["PageActual"]</div>
+                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">@Localizer["FitWidth"]</div>
+                            <div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">@Localizer["FitHeight"]</div>
                         </div>
                     </div>
-                    <div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-fw fa-rotate-left"></i></div>
-                    <div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
+                    <div class="bb-view-icon bb-view-fit-rotate" title="@Localizer["RotateLeft"]" @onclick="RotateLeft"><i class="fa-solid fa-fw fa-rotate-left"></i></div>
+                    <div class="bb-view-icon bb-view-fit-rotate" title="@Localizer["RotateRight"]" @onclick="RotateRight"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
                 </div>
             </div>
             <div class="bb-view-controls">
                 @if (ShowDownload)
                 {
-                    <div class="bb-view-icon bb-view-download" @onclick="OnDownload"><i class="fa-solid fa-fw fa-arrow-right-to-bracket fa-rotate-90"></i></div>
+                    <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>
                 }
                 @if (ShowPrint)
                 {
-                    <div class="bb-view-icon bb-view-print"><i class="fa-solid fa-fw fa-print"></i></div>
+                    <div class="bb-view-icon bb-view-print" title="@Localizer["Print"]"><i class="fa-solid fa-fw fa-print"></i></div>
                 }
                 <div class="dropdown">
                     <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                         <i class="@MoreButtonIcon"></i>
                     </button>
-                    <div class="dropdown-menu shadow dropdown-menu-end">
+                    <div class="dropdown-menu shadow dropdown-menu-end bb-view-dropdown-menu">
                         @if (ShowTwoPagesOneView)
                         {
-                            <div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
+                            <div class="dropdown-item dropdown-item-pages">
+                                <i class="@_dropdownItemCheckIcon"></i>
+                                <i class="@_dropdownItemDefaultIcon"></i>
+                                <span>@Localizer["TwoPageView"]</span>
+                            </div>
+                        }
+                        @if (ShowPresentationMode)
+                        {
+                            <div class="dropdown-item dropdown-item-presentation">
+                                <i class="@_dropdownItemCheckIcon"></i>
+                                <i class="@_dropdownItemDefaultIcon"></i>
+                                <span>@Localizer["PresentationMode"]</span>
+                            </div>
+                        }
+                        @if (ShowTwoPagesOneView || ShowPresentationMode)
+                        {
                             <Divider></Divider>
                         }
-                        <div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
+                        <div class="dropdown-item dropdown-item-doc">
+                            <i class="@_dropdownItemDefaultIcon"></i>
+                            <span>@Localizer["DocumentProperty"]</span>
+                        </div>
                     </div>
                 </div>
             </div>

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

@@ -3,6 +3,7 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 using System.Globalization;
 
 namespace BootstrapBlazor.Components;
@@ -73,6 +74,12 @@ public partial class PdfReader
     [Parameter]
     public bool ShowTwoPagesOneView { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 是否显示按钮 默认 true 显示
+    /// </summary>
+    [Parameter]
+    public bool ShowPresentationMode { get; set; } = false;
+
     /// <summary>
     /// 获得/设置 是否启用双页单视图模式 默认 false
     /// </summary>
@@ -121,6 +128,9 @@ public partial class PdfReader
     [Parameter]
     public Func<Task>? OnPrintingAsync { get; set; }
 
+    [Inject, NotNull]
+    private IStringLocalizer<PdfReader>? Localizer { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-pdf-reader")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -139,9 +149,8 @@ public partial class PdfReader
     private uint _currentPage;
     private string? _url;
     private string? _currentScale;
-    private bool _enableTwoPagesOneView;
-    private bool _showTwoPagesOneViewButton;
-    private string? _twoPagesOneViewIcon;
+    private string? _dropdownItemCheckIcon;
+    private string? _dropdownItemDefaultIcon;
 
     private string CurrentPageString
     {
@@ -182,14 +191,6 @@ private void SetCurrentScale(string value)
         }
     }
 
-    private void OnToggleTwoPagesOneView()
-    {
-        _enableTwoPagesOneView = !_enableTwoPagesOneView;
-        EnableTwoPagesOneView = _enableTwoPagesOneView;
-
-        _twoPagesOneViewIcon = _enableTwoPagesOneView ? "fa-solid fa-fw fa-check" : "fa-solid fa-fw";
-    }
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -198,7 +199,8 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         MoreButtonIcon ??= "fa-solid fa-fw fa-ellipsis-vertical";
-        _twoPagesOneViewIcon ??= "fa-solid fa-fw";
+        _dropdownItemCheckIcon ??= "dropdown-item-check fa-solid fa-fw fa-check";
+        _dropdownItemDefaultIcon ??= "dropdown-item-icon fa-solid fa-fw";
 
         if (CurrentPage == 0)
         {
@@ -222,8 +224,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentPage = CurrentPage;
             _url = Url;
             _currentScale = CurrentScale;
-            _enableTwoPagesOneView = EnableTwoPagesOneView;
-            _showTwoPagesOneViewButton = ShowTwoPagesOneView;
         }
 
         if (_url != Url)
@@ -247,16 +247,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentScale = CurrentScale;
             await InvokeVoidAsync("scale", Id, _currentScale);
         }
-        if (_enableTwoPagesOneView != EnableTwoPagesOneView)
-        {
-            _enableTwoPagesOneView = EnableTwoPagesOneView;
-            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
-        }
-        if (_showTwoPagesOneViewButton != ShowTwoPagesOneView)
-        {
-            _showTwoPagesOneViewButton = ShowTwoPagesOneView;
-            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
-        }
     }
 
     /// <summary>

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

@@ -14,10 +14,6 @@
     color: #fff;
 }
 
-    .bb-view-toolbar.init > div {
-        visibility: hidden;
-    }
-
     .bb-view-toolbar .btn {
         --bs-btn-color: #fff;
     }
@@ -26,6 +22,11 @@
         content: none;
     }
 
+    .bb-view-toolbar .dropdown-menu {
+        --bs-dropdown-link-active-bg: transparent;
+        --bs-dropdown-link-active-color: var(--bs-dropdown-color);
+    }
+
 .bb-view-title {
     display: flex;
     align-items: center;
@@ -134,6 +135,18 @@
         padding: 7px;
     }
 
+    .bb-view-controls .dropdown-item .dropdown-item-check {
+        display: none;
+    }
+
+    .bb-view-controls .dropdown-item.active .dropdown-item-check {
+        display: inline-block;
+    }
+
+    .bb-view-controls .dropdown-item.active .dropdown-item-icon {
+        display: none;
+    }
+
 .bb-view-main {
     display: flex;
     width: 100%;
@@ -173,8 +186,19 @@
         cursor: pointer;
         border: 2px solid #28292a;
         transform: rotate(var(--thumb-rotate));
+        margin: 0 auto;
     }
 
+    ::deep .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 {
+            color: #fff;
+        }
+
 .bb-view-content {
     position: relative;
     flex: 1 1 auto;