Skip to content

Commit 3499375

Browse files
ArgoZhangArgoZhang
authored
feat(PdfReader): support localization (#733)
* refactor: 代码兼容演示模式 * chore: bump version 10.0.1 * refactor: 移除 init 样式以及逻辑 * doc: 增加多语言支持 * feat: 缩略图增加页码 * refactor: 优化性能 * refactor: 精简代码 * chore: 更新项目 * doc: 更新大小写
1 parent b63be39 commit 3499375

7 files changed

Lines changed: 148 additions & 95 deletions

File tree

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>10.0.1-beta08</Version>
4+
<Version>10.0.1</Version>
55
</PropertyGroup>
6-
6+
77
<PropertyGroup>
88
<PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Pdf Reader</PackageTags>
99
<Description>Bootstrap UI components extensions of PdfReader</Description>
@@ -16,6 +16,13 @@
1616
<None Include="wwwroot\lib\pdf.worker.mjs" />
1717
</ItemGroup>
1818

19+
<ItemGroup>
20+
<Content Remove="Locales\en.json" />
21+
<Content Remove="Locales\zh.json" />
22+
<EmbeddedResource Include="Locales\en.json" />
23+
<EmbeddedResource Include="Locales\zh.json" />
24+
</ItemGroup>
25+
1926
<ItemGroup>
2027
<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
2128
</ItemGroup>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"BootstrapBlazor.Components.PdfReader": {
3+
"ToggleSidebar": "Toggle sidebar",
4+
"ZoomIn": "Zoom in",
5+
"ZoomOut": "Zoom out",
6+
"PageActual": "Fit page actual width",
7+
"FitWidth": "Fit to width",
8+
"FitHeight": "Fit to height",
9+
"RotateLeft": "Rotate left",
10+
"RotateRight": "Rotate right",
11+
"Download": "Download",
12+
"Print": "Print",
13+
"TwoPageView": "Two pages on view",
14+
"PresentationMode": "Presentation mode",
15+
"DocumentProperty": "Document properties"
16+
}
17+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"BootstrapBlazor.Components.PdfReader": {
3+
"ToggleSidebar": "收起/展开 缩略图",
4+
"ZoomIn": "放大",
5+
"ZoomOut": "缩小",
6+
"PageActual": "页面实际大小",
7+
"FitWidth": "适配宽度",
8+
"FitHeight": "适配高度",
9+
"RotateLeft": "向左旋转 90 度",
10+
"RotateRight": "向右旋转 90 度",
11+
"Download": "下载",
12+
"Print": "打印",
13+
"TwoPageView": "双页视图",
14+
"PresentationMode": "演示模式",
15+
"DocumentProperty": "文档属性"
16+
}
17+
}

‎src/components/BootstrapBlazor.PdfReader/PdfReader.razor‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,74 @@
55
<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
66
@if (ShowToolbar)
77
{
8-
<div class="bb-view-toolbar init">
8+
<div class="bb-view-toolbar">
99
<div class="bb-view-title">
10-
<div class="bb-view-icon bb-view-bar"><i class="fa-solid fa-bars"></i></div>
10+
<div class="bb-view-icon bb-view-bar" title="@Localizer["ToggleSidebar"]"><i class="fa-solid fa-bars"></i></div>
1111
<span class="bb-view-subject">@_docTitle</span>
1212
</div>
1313
<div class="@ViewBodyString">
1414
<input type="text" class="bb-view-num" @bind="CurrentPageString" /><span class="bb-view-slash">/</span>
1515
<div class="bb-view-pagesCount"></div>
1616
<div class="bb-view-divider"></div>
17-
<div class="bb-view-icon bb-page-minus"><i class="fa-solid fa-fw fa-minus"></i></div>
17+
<div class="bb-view-icon bb-page-minus" title="@Localizer["ZoomOut"]"><i class="fa-solid fa-fw fa-minus"></i></div>
1818
<input type="text" class="bb-view-scale-input" @bind="CurrentScaleString" />
19-
<div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-fw fa-plus"></i></div>
19+
<div class="bb-view-icon bb-page-plus" title="@Localizer["ZoomIn"]"><i class="fa-solid fa-fw fa-plus"></i></div>
2020
<div class="bb-view-scale">
2121
<div class="bb-view-divider"></div>
2222
<div class="bb-view-icon btn-group">
23-
<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>
24-
<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>
23+
<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>
24+
<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>
2525
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
2626
<span class="visually-hidden">Toggle Dropdown</span>
2727
</button>
2828
<div class="dropdown-menu dropdown-menu-end">
29-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">page-actual</div>
30-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">page-width</div>
31-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">page-height</div>
32-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageFit)">page-fit</div>
33-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.Auto)">auto</div>
29+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">@Localizer["PageActual"]</div>
30+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">@Localizer["FitWidth"]</div>
31+
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">@Localizer["FitHeight"]</div>
3432
</div>
3533
</div>
36-
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-fw fa-rotate-left"></i></div>
37-
<div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-fw fa-rotate-right"></i></div>
34+
<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>
35+
<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>
3836
</div>
3937
</div>
4038
<div class="bb-view-controls">
4139
@if (ShowDownload)
4240
{
43-
<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>
41+
<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>
4442
}
4543
@if (ShowPrint)
4644
{
47-
<div class="bb-view-icon bb-view-print"><i class="fa-solid fa-fw fa-print"></i></div>
45+
<div class="bb-view-icon bb-view-print" title="@Localizer["Print"]"><i class="fa-solid fa-fw fa-print"></i></div>
4846
}
4947
<div class="dropdown">
5048
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
5149
<i class="@MoreButtonIcon"></i>
5250
</button>
53-
<div class="dropdown-menu shadow dropdown-menu-end">
51+
<div class="dropdown-menu shadow dropdown-menu-end bb-view-dropdown-menu">
5452
@if (ShowTwoPagesOneView)
5553
{
56-
<div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
54+
<div class="dropdown-item dropdown-item-pages">
55+
<i class="@_dropdownItemCheckIcon"></i>
56+
<i class="@_dropdownItemDefaultIcon"></i>
57+
<span>@Localizer["TwoPageView"]</span>
58+
</div>
59+
}
60+
@if (ShowPresentationMode)
61+
{
62+
<div class="dropdown-item dropdown-item-presentation">
63+
<i class="@_dropdownItemCheckIcon"></i>
64+
<i class="@_dropdownItemDefaultIcon"></i>
65+
<span>@Localizer["PresentationMode"]</span>
66+
</div>
67+
}
68+
@if (ShowTwoPagesOneView || ShowPresentationMode)
69+
{
5770
<Divider></Divider>
5871
}
59-
<div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
72+
<div class="dropdown-item dropdown-item-doc">
73+
<i class="@_dropdownItemDefaultIcon"></i>
74+
<span>@Localizer["DocumentProperty"]</span>
75+
</div>
6076
</div>
6177
</div>
6278
</div>

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

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// Website: https://www.blazor.zone or https://argozhang.github.io/
44

55
using Microsoft.AspNetCore.Components;
6+
using Microsoft.Extensions.Localization;
67
using System.Globalization;
78

89
namespace BootstrapBlazor.Components;
@@ -74,10 +75,10 @@ public partial class PdfReader
7475
public bool ShowTwoPagesOneView { get; set; } = true;
7576

7677
/// <summary>
77-
/// 获得/设置 是否启用双页单视图模式 默认 false
78+
/// 获得/设置 是否显示按钮 默认 true 显示
7879
/// </summary>
7980
[Parameter]
80-
public bool EnableTwoPagesOneView { get; set; }
81+
public bool ShowPresentationMode { get; set; } = false;
8182

8283
/// <summary>
8384
/// 页面初始化回调方法
@@ -121,6 +122,9 @@ public partial class PdfReader
121122
[Parameter]
122123
public Func<Task>? OnPrintingAsync { get; set; }
123124

125+
[Inject, NotNull]
126+
private IStringLocalizer<PdfReader>? Localizer { get; set; }
127+
124128
private string? ClassString => CssBuilder.Default("bb-pdf-reader")
125129
.AddClassFromAttributes(AdditionalAttributes)
126130
.Build();
@@ -139,9 +143,8 @@ public partial class PdfReader
139143
private uint _currentPage;
140144
private string? _url;
141145
private string? _currentScale;
142-
private bool _enableTwoPagesOneView;
143-
private bool _showTwoPagesOneViewButton;
144-
private string? _twoPagesOneViewIcon;
146+
private string? _dropdownItemCheckIcon;
147+
private string? _dropdownItemDefaultIcon;
145148

146149
private string CurrentPageString
147150
{
@@ -182,14 +185,6 @@ private void SetCurrentScale(string value)
182185
}
183186
}
184187

185-
private void OnToggleTwoPagesOneView()
186-
{
187-
_enableTwoPagesOneView = !_enableTwoPagesOneView;
188-
EnableTwoPagesOneView = _enableTwoPagesOneView;
189-
190-
_twoPagesOneViewIcon = _enableTwoPagesOneView ? "fa-solid fa-fw fa-check" : "fa-solid fa-fw";
191-
}
192-
193188
/// <summary>
194189
/// <inheritdoc/>
195190
/// </summary>
@@ -198,7 +193,8 @@ protected override void OnParametersSet()
198193
base.OnParametersSet();
199194

200195
MoreButtonIcon ??= "fa-solid fa-fw fa-ellipsis-vertical";
201-
_twoPagesOneViewIcon ??= "fa-solid fa-fw";
196+
_dropdownItemCheckIcon ??= "dropdown-item-check fa-solid fa-fw fa-check";
197+
_dropdownItemDefaultIcon ??= "dropdown-item-icon fa-solid fa-fw";
202198

203199
if (CurrentPage == 0)
204200
{
@@ -222,8 +218,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
222218
_currentPage = CurrentPage;
223219
_url = Url;
224220
_currentScale = CurrentScale;
225-
_enableTwoPagesOneView = EnableTwoPagesOneView;
226-
_showTwoPagesOneViewButton = ShowTwoPagesOneView;
227221
}
228222

229223
if (_url != Url)
@@ -247,16 +241,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
247241
_currentScale = CurrentScale;
248242
await InvokeVoidAsync("scale", Id, _currentScale);
249243
}
250-
if (_enableTwoPagesOneView != EnableTwoPagesOneView)
251-
{
252-
_enableTwoPagesOneView = EnableTwoPagesOneView;
253-
await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
254-
}
255-
if (_showTwoPagesOneViewButton != ShowTwoPagesOneView)
256-
{
257-
_showTwoPagesOneViewButton = ShowTwoPagesOneView;
258-
await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
259-
}
260244
}
261245

262246
/// <summary>

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

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@
1414
color: #fff;
1515
}
1616

17-
.bb-view-toolbar.init > div {
18-
visibility: hidden;
19-
}
20-
2117
.bb-view-toolbar .btn {
2218
--bs-btn-color: #fff;
2319
}
@@ -26,6 +22,11 @@
2622
content: none;
2723
}
2824

25+
.bb-view-toolbar .dropdown-menu {
26+
--bs-dropdown-link-active-bg: transparent;
27+
--bs-dropdown-link-active-color: var(--bs-dropdown-color);
28+
}
29+
2930
.bb-view-title {
3031
display: flex;
3132
align-items: center;
@@ -134,6 +135,18 @@
134135
padding: 7px;
135136
}
136137

138+
.bb-view-controls .dropdown-item .dropdown-item-check {
139+
display: none;
140+
}
141+
142+
.bb-view-controls .dropdown-item.active .dropdown-item-check {
143+
display: inline-block;
144+
}
145+
146+
.bb-view-controls .dropdown-item.active .dropdown-item-icon {
147+
display: none;
148+
}
149+
137150
.bb-view-main {
138151
display: flex;
139152
width: 100%;
@@ -173,8 +186,19 @@
173186
cursor: pointer;
174187
border: 2px solid #28292a;
175188
transform: rotate(var(--thumb-rotate));
189+
margin: 0 auto;
176190
}
177191

192+
::deep .bb-view-thumbnail-item .bb-view-thumbnail-group {
193+
display: flex;
194+
flex-direction: column;
195+
justify-content: center;
196+
}
197+
198+
::deep .bb-view-thumbnail-item .bb-view-thumbnail-group label {
199+
color: #fff;
200+
}
201+
178202
.bb-view-content {
179203
position: relative;
180204
flex: 1 1 auto;

0 commit comments

Comments
 (0)