Skip to content

Commit f90ef5f

Browse files
ArgoZhangArgoZhang
committed
refactor: 增加重置工具栏逻辑
1 parent 3adb3d9 commit f90ef5f

2 files changed

Lines changed: 117 additions & 79 deletions

File tree

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,10 +137,10 @@ public partial class PdfReader
137137
private string? _docTitle;
138138
private uint _currentPage;
139139
private string? _url;
140-
private string? _currentScale;
141140
private string? _dropdownItemCheckIcon;
142141
private string? _dropdownItemDefaultIcon;
143142
private bool _enableThumbnails = true;
143+
private bool _showToolbar = true;
144144

145145
/// <summary>
146146
/// <inheritdoc/>
@@ -171,10 +171,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
171171

172172
if (firstRender)
173173
{
174-
_currentPage = CurrentPage;
175174
_url = Url;
176-
_currentScale = CurrentScale;
175+
_currentPage = CurrentPage;
177176
_enableThumbnails = EnableThumbnails;
177+
_showToolbar = ShowToolbar;
178178
}
179179

180180
if (_url != Url)
@@ -187,10 +187,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
187187
_currentPage = CurrentPage;
188188
await NavigateToPageAsync(_currentPage);
189189
}
190-
if (_currentScale != CurrentScale)
190+
if (_showToolbar != ShowToolbar)
191191
{
192-
_currentScale = CurrentScale;
193-
await InvokeVoidAsync("scale", Id, _currentScale);
192+
_showToolbar = ShowToolbar;
193+
if (_showToolbar)
194+
{
195+
await InvokeVoidAsync("resetToolbar", Id);
196+
}
194197
}
195198
if (_enableThumbnails != EnableThumbnails)
196199
{

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

Lines changed: 108 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,13 @@ export function scale(id, scale) {
6060
}
6161
}
6262

63+
export function resetToolbar(id) {
64+
const { el, pdfViewer } = Data.get(id);
65+
if (pdfViewer) {
66+
resetToolbarView(el, pdfViewer);
67+
}
68+
}
69+
6370
export function resetThumbnails(id) {
6471
const { el, pdfViewer } = Data.get(id);
6572
if (pdfViewer) {
@@ -98,74 +105,79 @@ const loadPdf = async (el, invoke, options) => {
98105
}
99106

100107
const setObserver = el => {
108+
const observer = new ResizeObserver(entries => {
109+
relayoutToolbar(el);
110+
});
111+
112+
observer.observe(el);
113+
return observer;
114+
}
115+
116+
const relayoutToolbar = el => {
117+
const toolbar = el.querySelector(".bb-view-toolbar");
118+
if (toolbar === null) {
119+
return;
120+
}
121+
101122
const title = el.querySelector(".bb-view-title");
102123
const subject = el.querySelector(".bb-view-subject");
124+
if (subject === null) {
125+
return;
126+
}
127+
103128
const groupPage = el.querySelector(".bb-view-group-page");
104129
const groupScale = el.querySelector(".bb-view-group-scale");
105130
const groupRotate = el.querySelector(".bb-view-group-rotate");
106131
const controls = el.querySelector(".bb-view-controls");
107132

108-
el.widths = [subject.offsetWidth, groupRotate.offsetWidth, groupScale.offsetWidth, groupPage.offsetWidth, controls.offsetWidth];
133+
if (el.widths === void 0) {
134+
el.widths = [subject.offsetWidth, groupRotate.offsetWidth, groupScale.offsetWidth, groupPage.offsetWidth, controls.offsetWidth];
135+
}
109136

110-
const increaseSpace = toolbar => {
111-
if (controls.classList.contains('d-none')) {
112-
if (title.offsetWidth + el.widths[4] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
113-
controls.classList.remove("d-none");
114-
}
137+
const getActualWidth = () => title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth;
138+
while (getActualWidth() + 8 > toolbar.offsetWidth) {
139+
if (subject.classList.contains("d-none") === false) {
140+
subject.classList.add("d-none");
115141
}
116-
else if (groupPage.classList.contains('d-none')) {
117-
if (title.offsetWidth + el.widths[3] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
118-
groupPage.classList.remove("d-none");
119-
}
142+
else if (groupRotate.classList.contains('d-none') === false) {
143+
groupRotate.classList.add("d-none");
120144
}
121-
else if (groupScale.classList.contains('d-none')) {
122-
if (title.offsetWidth + el.widths[2] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
123-
groupScale.classList.remove("d-none");
124-
}
145+
else if (groupScale.classList.contains('d-none') === false) {
146+
groupScale.classList.add("d-none");
125147
}
126-
else if (groupRotate.classList.contains('d-none')) {
127-
if (title.offsetWidth + el.widths[1] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
128-
groupRotate.classList.remove("d-none");
129-
}
148+
else if (groupPage.classList.contains('d-none') === false) {
149+
groupPage.classList.add("d-none");
130150
}
131-
else if (subject.classList.contains("d-none")) {
132-
if (title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) {
133-
subject.classList.remove("d-none");
134-
}
151+
else if (controls.classList.contains('d-none') === false) {
152+
controls.classList.add("d-none");
135153
}
136154
}
137-
const decreaseSpace = toolbar => {
138-
while (title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth > toolbar.offsetWidth) {
139-
if (subject.classList.contains("d-none") === false) {
140-
subject.classList.add("d-none");
141-
}
142-
else if (groupRotate.classList.contains('d-none') === false) {
143-
groupRotate.classList.add("d-none");
144-
}
145-
else if (groupScale.classList.contains('d-none') === false) {
146-
groupScale.classList.add("d-none");
147-
}
148-
else if (groupPage.classList.contains('d-none') === false) {
149-
groupPage.classList.add("d-none");
150-
}
151-
else if (controls.classList.contains('d-none') === false) {
152-
controls.classList.add("d-none");
153-
}
155+
156+
if (controls.classList.contains('d-none')) {
157+
if (getActualWidth() + el.widths[4] < toolbar.offsetWidth) {
158+
controls.classList.remove("d-none");
154159
}
155160
}
156-
157-
const observer = new ResizeObserver(entries => {
158-
const toolbar = el.querySelector(".bb-view-toolbar");
159-
if (toolbar === null) {
160-
return;
161+
else if (groupPage.classList.contains('d-none')) {
162+
if (getActualWidth() + el.widths[3] < toolbar.offsetWidth) {
163+
groupPage.classList.remove("d-none");
161164
}
162-
163-
decreaseSpace(toolbar);
164-
increaseSpace(toolbar);
165-
});
166-
167-
observer.observe(el);
168-
return observer;
165+
}
166+
else if (groupScale.classList.contains('d-none')) {
167+
if (getActualWidth() + el.widths[2] < toolbar.offsetWidth) {
168+
groupScale.classList.remove("d-none");
169+
}
170+
}
171+
else if (groupRotate.classList.contains('d-none')) {
172+
if (getActualWidth() + el.widths[1] < toolbar.offsetWidth) {
173+
groupRotate.classList.remove("d-none");
174+
}
175+
}
176+
else if (subject.classList.contains("d-none")) {
177+
if (getActualWidth() + el.widths[0] < toolbar.offsetWidth) {
178+
subject.classList.remove("d-none");
179+
}
180+
}
169181
}
170182

171183
const addEventBus = (el, pdfViewer, eventBus, invoke, options) => {
@@ -226,25 +238,7 @@ const addEventBus = (el, pdfViewer, eventBus, invoke, options) => {
226238
}, true);
227239

228240

229-
eventBus.on("scalechanging", evt => {
230-
const minus = el.querySelector(".bb-page-minus");
231-
const plus = el.querySelector(".bb-page-plus");
232-
const scaleEl = el.querySelector(".bb-view-scale-input");
233-
234-
const scale = evt.scale * 100;
235-
scaleEl.value = `${Math.round(scale, 0)}%`;
236-
237-
if (scale === 25) {
238-
minus.classList.add("disabled");
239-
}
240-
else if (scale === 500) {
241-
plus.classList.add("disabled");
242-
}
243-
else {
244-
minus.classList.remove("disabled");
245-
plus.classList.remove("disabled");
246-
}
247-
})
241+
eventBus.on("scalechanging", evt => updateScaleValue(el, evt.scale));
248242

249243
eventBus.on("rotationchanging", evt => {
250244
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
@@ -277,16 +271,16 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
277271
const group = el.querySelector('.bb-view-group-rotate');
278272
group.classList.remove('fit-height')
279273
pdfViewer.currentScaleValue = 'page-width';
280-
});
274+
});
281275
EventHandler.on(toolbar, 'click', '.bb-view-fit-height', e => {
282276
const group = el.querySelector('.bb-view-group-rotate');
283277
group.classList.add('fit-height')
284278
pdfViewer.currentScaleValue = 'page-height';
285-
});
279+
});
286280
EventHandler.on(toolbar, 'click', '.bb-view-page-actual', e => {
287281
const group = el.querySelector('.bb-view-group-rotate');
288282
group.classList.remove('fit-height')
289-
pdfViewer.currentScaleValue = 'page-actual';
283+
pdfViewer.currentScaleValue = 'page-actual';
290284
});
291285
EventHandler.on(toolbar, 'change', '.bb-view-scale-input', e => {
292286
let value = parseInt(e.delegateTarget.value);
@@ -333,6 +327,27 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
333327
});
334328
}
335329

330+
const resetToolbarView = (el, pdfViewer) => {
331+
const scaleEl = el.querySelector(".bb-view-scale-input");
332+
updateScaleValue(el, pdfViewer.currentScale);
333+
334+
const pageEl = el.querySelector(".bb-view-num");
335+
pageEl.value = pdfViewer.currentPageNumber;
336+
337+
const group = el.querySelector('.bb-view-group-rotate');
338+
if (group) {
339+
if (pdfViewer.currentScaleValue === 'page-height') {
340+
group.classList.add('fit-height');
341+
}
342+
else {
343+
group.classList.remove('fit-height');
344+
}
345+
}
346+
347+
delete el.widths
348+
relayoutToolbar(el);
349+
}
350+
336351
const resetThumbnailsView = (el, pdfViewer) => {
337352
const thumbnailsContainer = el.querySelector(".bb-view-thumbnails");
338353
pdfViewer.getPagesOverview().map(async (p, i) => {
@@ -373,6 +388,26 @@ const resetThumbnailsView = (el, pdfViewer) => {
373388
});
374389
}
375390

391+
const updateScaleValue = (el, value) => {
392+
const minus = el.querySelector(".bb-page-minus");
393+
const plus = el.querySelector(".bb-page-plus");
394+
const scaleEl = el.querySelector(".bb-view-scale-input");
395+
396+
const scale = value * 100;
397+
scaleEl.value = `${Math.round(scale, 0)}%`;
398+
399+
if (scale === 25) {
400+
minus.classList.add("disabled");
401+
}
402+
else if (scale === 500) {
403+
plus.classList.add("disabled");
404+
}
405+
else {
406+
minus.classList.remove("disabled");
407+
plus.classList.remove("disabled");
408+
}
409+
}
410+
376411
const updateScale = (pdfViewer, button, rate) => {
377412
if (button.classList.contains('disabled')) {
378413
return;

0 commit comments

Comments
 (0)