Skip to content

Commit fd90c9b

Browse files
authored
Ribbon and PDF Viewer updates (#654)
* #628 - PDF Viewer: demos/docs updated * Ribbon code cleanup
1 parent 114361e commit fd90c9b

File tree

12 files changed

+129
-64
lines changed

12 files changed

+129
-64
lines changed

BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1818
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1919
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
20-
<link href="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
20+
<link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
2121
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
2222
<link href="BlazorBootstrap.Demo.Hosted.Client.styles.css" rel="stylesheet" asp-append-version="true" />
2323
<!-- Font Awesome -->
@@ -54,7 +54,7 @@
5454
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
5555
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
5656
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js" asp-append-version="true"></script>
57-
<script src="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
57+
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
5858
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
5959
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
6060
<script>

BlazorBootstrap.Demo.RCL/Pages/Index.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
</div>
138138
<div class="col-sm-4 mb-2">
139139
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pdf-viewer">
140-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> Pdf Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
140+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
141141
</a>
142142
</div>
143143
<div class="col-sm-4 mb-2">

BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewerDocumentation.razor

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
66

7-
<h1>Blazor Pdf Viewer</h1>
7+
<h1>Blazor PDF Viewer</h1>
88
<div class="lead mb-3">
99
The Blazor PDF Viewer component allows users to view PDF files directly in the browser, without relying on third-party browser tools or extensions.
1010
</div>
@@ -20,9 +20,16 @@
2020
</div>
2121
<Demo Type="typeof(PdfViewer_Demo_02_Orientation)" Tabs="true" />
2222

23+
<SectionHeading Size="HeadingSize.H2" Text="Base64String" PageUrl="@pageUrl" HashTagName="base64-string" />
24+
<div class="mb-3">PDF Viewer component supports <b>base64</b> string as a URL.</div>
25+
<Callout Heading="Example">
26+
Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)"
27+
</Callout>
28+
<Demo Type="typeof(PdfViewer_Demo_03_Base64String)" Tabs="true" />
29+
2330
@code {
2431
private string pageUrl = "/pdf-viewer";
25-
private string title = "Blazor Pdf Viewer Component";
32+
private string title = "Blazor PDF Viewer Component";
2633
private string description = "The Blazor PDF Viewer component allows users to view PDF files directly in the browser, without relying on third-party browser tools or extensions.";
2734
private string imageUrl = "https://i.imgur.com/7Vz9Efi.png";
2835
}

BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewer_Demo_03_Base64String.razor

Lines changed: 23 additions & 0 deletions
Large diffs are not rendered by default.

BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ private IEnumerable<NavItem> GetNavItems()
6060
new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
6161
new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
6262
new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },
63-
new (){ Id = "515", Text = "Pdf Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
63+
new (){ Id = "515", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
6464
new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
6565
new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
6666
new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },

BlazorBootstrap.Demo.Server/Pages/_Host.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1717
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1818
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
19-
<link href="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
19+
<link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
2020
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
2121
<link href="BlazorBootstrap.Demo.Server.styles.css" rel="stylesheet" asp-append-version="true" />
2222
<!-- Font Awesome -->
@@ -53,7 +53,7 @@
5353
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
5454
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
5555
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js" asp-append-version="true"></script>
56-
<script src="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
56+
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
5757
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
5858
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
5959
<script>

blazorbootstrap/Components/PdfViewer/PdfViewer.razor.cs

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
44
{
55
#region Fields and Constants
66

7+
private int defaultZoomLevel = 8;
8+
79
private int maxZoomLevel = 17;
810

911
private int minZoomLevel = 1;
@@ -13,13 +15,14 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
1315
private Orientation? oldOrientation;
1416

1517
private int pageNumber = 0;
18+
1619
private int pagesCount = 0;
1720

1821
private double rotation = 0;
1922

2023
private double scale = 1.0;
21-
private int defaultZoomLevel = 8;
2224
private int zoomLevel = 8;
25+
2326
private string zoomPercentage = "100%";
2427

2528
#endregion
@@ -38,14 +41,12 @@ protected override async Task OnInitializedAsync()
3841
protected override async Task OnParametersSetAsync()
3942
{
4043
if (Rendered)
41-
{
4244
if (!Orientation.Equals(oldOrientation))
4345
{
4446
oldOrientation = Orientation;
4547
rotation = Orientation == Orientation.Portrait ? 0 : -90;
4648
await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
4749
}
48-
}
4950

5051
await base.OnParametersSetAsync();
5152
}
@@ -119,6 +120,15 @@ private async Task PageNumberChangedAsync(int value)
119120

120121
private async Task PrintAsync() => await PdfViewerJsInterop.PrintAsync(objRef!, ElementId!, Url!);
121122

123+
private async Task ResetZoomAsync()
124+
{
125+
zoomLevel = defaultZoomLevel;
126+
var zp = GetZoomPercentage(defaultZoomLevel);
127+
zoomPercentage = $"{zp}%";
128+
scale = 0.01 * zp;
129+
await PdfViewerJsInterop.ZoomInOutAsync(objRef!, ElementId!, scale);
130+
}
131+
122132
private async Task RotateClockwiseAsync()
123133
{
124134
rotation += 90;
@@ -179,15 +189,6 @@ private async Task ZoomOutAsync()
179189
await PdfViewerJsInterop.ZoomInOutAsync(objRef!, ElementId!, scale);
180190
}
181191

182-
private async Task ResetZoomAsync()
183-
{
184-
zoomLevel = defaultZoomLevel;
185-
var zp = GetZoomPercentage(defaultZoomLevel);
186-
zoomPercentage = $"{zp}%";
187-
scale = 0.01 * zp;
188-
await PdfViewerJsInterop.ZoomInOutAsync(objRef!, ElementId!, scale);
189-
}
190-
191192
#endregion
192193

193194
#region Properties, Indexers
@@ -198,28 +199,32 @@ private async Task ResetZoomAsync()
198199
/// <summary>
199200
/// This event fires immediately after the PDF document is loaded.
200201
/// </summary>
201-
[Parameter] public EventCallback<PdfViewerEventArgs> OnDocumentLoaded { get; set; }
202+
[Parameter]
203+
public EventCallback<PdfViewerEventArgs> OnDocumentLoaded { get; set; }
202204

203205
/// <summary>
204206
/// This event fires immediately after the page is changed.
205207
/// </summary>
206-
[Parameter] public EventCallback<PdfViewerEventArgs> OnPageChanged { get; set; }
208+
[Parameter]
209+
public EventCallback<PdfViewerEventArgs> OnPageChanged { get; set; }
207210

208211
/// <summary>
209-
/// Provides JavaScript interop functionality for the PDF viewer.
212+
/// Gets or sets the preferred orientation for the PDF viewer.
210213
/// </summary>
211-
[Inject] private PdfViewerJsInterop PdfViewerJsInterop { get; set; } = default!;
214+
[Parameter]
215+
public Orientation Orientation { get; set; }
212216

213217
/// <summary>
214-
/// Gets or sets the URL of the PDF document to be displayed.
218+
/// Provides JavaScript interop functionality for the PDF viewer.
215219
/// </summary>
216-
[Parameter] public string? Url { get; set; }
220+
[Inject]
221+
private PdfViewerJsInterop PdfViewerJsInterop { get; set; } = default!;
217222

218223
/// <summary>
219-
/// Gets or sets the preferred orientation for the PDF viewer.
224+
/// Gets or sets the URL of the PDF document to be displayed.
220225
/// </summary>
221226
[Parameter]
222-
public Orientation Orientation { get; set; }
227+
public string? Url { get; set; }
223228

224229
#endregion
225230
}

blazorbootstrap/Components/Ribbon/Ribbon.razor.cs

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ protected override void BuildClasses()
3030
/// <inheritdoc />
3131
protected override async ValueTask DisposeAsync(bool disposing)
3232
{
33-
// TODO: update
34-
3533
if (disposing) tabs = null;
3634

3735
await base.DisposeAsync(disposing);

blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,6 @@ protected override void BuildClasses()
1414
base.BuildClasses();
1515
}
1616

17-
/// <inheritdoc />
18-
protected override async ValueTask DisposeAsync(bool disposing)
19-
{
20-
if (disposing)
21-
{
22-
// TODO: update
23-
}
24-
25-
await base.DisposeAsync(disposing);
26-
}
27-
2817
#endregion
2918

3019
#region Properties, Indexers

blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,6 @@ protected override void BuildClasses()
1818
base.BuildClasses();
1919
}
2020

21-
/// <inheritdoc />
22-
protected override async ValueTask DisposeAsync(bool disposing)
23-
{
24-
if (disposing)
25-
{
26-
// TOOD: update
27-
}
28-
29-
await base.DisposeAsync(disposing);
30-
}
31-
3221
/// <summary>
3322
/// Triggers the OnRibbonItemClick event of the parent Ribbon component.
3423
/// </summary>

0 commit comments

Comments
 (0)