Skip to content

Commit 3adb3d9

Browse files
ArgoZhangArgoZhang
committed
feat: 工具栏缩放功能下沉到客户端
1 parent 0a0e565 commit 3adb3d9

4 files changed

Lines changed: 27 additions & 30 deletions

File tree

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
<span class="bb-view-subject">@_docTitle</span>
1515
</div>
16-
<div class="@ViewBodyString">
16+
<div class="bb-view-group bb-view-toolbar-main">
1717
<div class="bb-view-group bb-view-group-page">
1818
<input type="text" class="bb-view-num" value="1" /><span class="bb-view-slash">/</span>
1919
<div class="bb-view-pagesCount"></div>
@@ -27,15 +27,15 @@
2727
<div class="bb-view-group bb-view-group-rotate">
2828
<div class="bb-view-divider"></div>
2929
<div class="bb-view-icon btn-group">
30-
<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>
31-
<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>
30+
<button type="button" class="btn bb-view-fit-height" title="@Localizer["FitHeight"]"><i class="fa-solid fa-fw fa-arrows-left-right-to-line fa-rotate-90"></i></button>
31+
<button type="button" class="btn bb-view-fit-width" title="@Localizer["FitWidth"]"><i class="fa-solid fa-fw fa-arrows-left-right-to-line"></i></button>
3232
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
3333
<span class="visually-hidden">Toggle Dropdown</span>
3434
</button>
3535
<div class="dropdown-menu dropdown-menu-end shadow">
36-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageActual)">@Localizer["PageActual"]</div>
37-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageWidth)">@Localizer["FitWidth"]</div>
38-
<div class="dropdown-item" @onclick="() => SetFitMode(PdfReaderFitMode.PageHeight)">@Localizer["FitHeight"]</div>
36+
<div class="dropdown-item bb-view-page-actual">@Localizer["PageActual"]</div>
37+
<div class="dropdown-item bb-view-fit-width">@Localizer["FitWidth"]</div>
38+
<div class="dropdown-item bb-view-fit-height">@Localizer["FitHeight"]</div>
3939
</div>
4040
</div>
4141
<div class="bb-view-icon bb-view-rotate-left" title="@Localizer["RotateLeft"]"><i class="fa-solid fa-fw fa-rotate-left"></i></div>

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

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,7 @@ public partial class PdfReader
134134
.AddClassFromAttributes(AdditionalAttributes)
135135
.Build();
136136

137-
private string? ViewBodyString => CssBuilder.Default("bb-view-group bb-view-toolbar-main")
138-
.AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight)
139-
.Build();
140-
141137
private string? _docTitle;
142-
private PdfReaderFitMode _fitMode;
143138
private uint _currentPage;
144139
private string? _url;
145140
private string? _currentScale;
@@ -176,7 +171,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
176171

177172
if (firstRender)
178173
{
179-
_fitMode = FitMode;
180174
_currentPage = CurrentPage;
181175
_url = Url;
182176
_currentScale = CurrentScale;
@@ -188,12 +182,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
188182
_url = Url;
189183
await InvokeInitAsync();
190184
}
191-
192-
if (_fitMode != FitMode)
193-
{
194-
_fitMode = FitMode;
195-
await InvokeVoidAsync("setScaleValue", Id, _fitMode.ToDescriptionString());
196-
}
197185
if (_currentPage != CurrentPage)
198186
{
199187
_currentPage = CurrentPage;
@@ -238,27 +226,21 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
238226
public Task NavigateToPageAsync(uint pageNumber) => InvokeVoidAsync("navigateToPage", Id, pageNumber);
239227

240228
/// <summary>
241-
/// 适应页面宽度
229+
/// 设置页面适配模式方法
242230
/// </summary>
243-
public void SetFitMode(PdfReaderFitMode mode) => FitMode = mode;
231+
public Task SetFitMode(PdfReaderFitMode mode) => InvokeVoidAsync("setScaleValue", Id, mode.ToDescriptionString());
244232

245233
/// <summary>
246234
/// 旋转页面方法
247235
/// </summary>
248236
/// <returns></returns>
249-
public async Task RotateLeft()
250-
{
251-
await InvokeVoidAsync("rotate", Id, -90);
252-
}
237+
public Task RotateLeft() => InvokeVoidAsync("rotate", Id, -90);
253238

254239
/// <summary>
255240
/// 旋转页面方法
256241
/// </summary>
257242
/// <returns></returns>
258-
public async Task RotateRight()
259-
{
260-
await InvokeVoidAsync("rotate", Id, 90);
261-
}
243+
public Task RotateRight() => InvokeVoidAsync("rotate", Id, 90);
262244

263245
private async Task OnDownload()
264246
{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@
7979
width: 1%;
8080
}
8181

82-
.bb-view-toolbar-main.fit-width .bb-view-fit-height {
82+
.bb-view-toolbar-main .fit-height .bb-view-fit-height {
8383
display: none;
8484
}
8585

86-
.bb-view-toolbar-main.fit-width .bb-view-fit-width {
86+
.bb-view-toolbar-main .fit-height .bb-view-fit-width {
8787
display: block;
8888
}
8989

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,21 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
273273
});
274274
EventHandler.on(toolbar, "click", '.bb-page-minus', e => updateScale(pdfViewer, e.delegateTarget, -1));
275275
EventHandler.on(toolbar, "click", '.bb-page-plus', e => updateScale(pdfViewer, e.delegateTarget, 1));
276+
EventHandler.on(toolbar, 'click', '.bb-view-fit-width', e => {
277+
const group = el.querySelector('.bb-view-group-rotate');
278+
group.classList.remove('fit-height')
279+
pdfViewer.currentScaleValue = 'page-width';
280+
});
281+
EventHandler.on(toolbar, 'click', '.bb-view-fit-height', e => {
282+
const group = el.querySelector('.bb-view-group-rotate');
283+
group.classList.add('fit-height')
284+
pdfViewer.currentScaleValue = 'page-height';
285+
});
286+
EventHandler.on(toolbar, 'click', '.bb-view-page-actual', e => {
287+
const group = el.querySelector('.bb-view-group-rotate');
288+
group.classList.remove('fit-height')
289+
pdfViewer.currentScaleValue = 'page-actual';
290+
});
276291
EventHandler.on(toolbar, 'change', '.bb-view-scale-input', e => {
277292
let value = parseInt(e.delegateTarget.value);
278293
if (value < 25) {

0 commit comments

Comments
 (0)