Skip to content

Ribbon and PDF Viewer updates #654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 14, 2024
Merged

Ribbon and PDF Viewer updates #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7215dc4
#628 - PDF Viewer: demos/docs updated
gvreddy04 Apr 14, 2024
f87d985
Ribbon code cleanup
gvreddy04 Apr 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<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" />
<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" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
<link href="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
<link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="BlazorBootstrap.Demo.Hosted.Client.styles.css" rel="stylesheet" asp-append-version="true" />
<!-- Font Awesome -->
Expand Down Expand Up @@ -54,7 +54,7 @@
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<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>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js" asp-append-version="true"></script>
<script src="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
<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>
<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>
<script>
Expand Down
2 changes: 1 addition & 1 deletion BlazorBootstrap.Demo.RCL/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pdf-viewer">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> Pdf Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
Expand Down
11 changes: 9 additions & 2 deletions BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewerDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

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

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

<SectionHeading Size="HeadingSize.H2" Text="Base64String" PageUrl="@pageUrl" HashTagName="base64-string" />
<div class="mb-3">PDF Viewer component supports <b>base64</b> string as a URL.</div>
<Callout Heading="Example">
Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)"
</Callout>
<Demo Type="typeof(PdfViewer_Demo_03_Base64String)" Tabs="true" />

@code {
private string pageUrl = "/pdf-viewer";
private string title = "Blazor Pdf Viewer Component";
private string title = "Blazor PDF Viewer Component";
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.";
private string imageUrl = "https://i.imgur.com/7Vz9Efi.png";
}
23 changes: 23 additions & 0 deletions BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewer_Demo_03_Base64String.razor
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ private IEnumerable<NavItem> GetNavItems()
new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },
new (){ Id = "515", Text = "Pdf Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
new (){ Id = "515", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
Expand Down
4 changes: 2 additions & 2 deletions BlazorBootstrap.Demo.Server/Pages/_Host.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<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" />
<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" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
<link href="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
<link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="BlazorBootstrap.Demo.Server.styles.css" rel="stylesheet" asp-append-version="true" />
<!-- Font Awesome -->
Expand Down Expand Up @@ -53,7 +53,7 @@
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<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>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js" asp-append-version="true"></script>
<script src="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
<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>
<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>
<script>
Expand Down
45 changes: 25 additions & 20 deletions blazorbootstrap/Components/PdfViewer/PdfViewer.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ public partial class PdfViewer : BlazorBootstrapComponentBase
{
#region Fields and Constants

private int defaultZoomLevel = 8;

private int maxZoomLevel = 17;

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

private int pageNumber = 0;

private int pagesCount = 0;

private double rotation = 0;

private double scale = 1.0;
private int defaultZoomLevel = 8;
private int zoomLevel = 8;

private string zoomPercentage = "100%";

#endregion
Expand All @@ -38,14 +41,12 @@ protected override async Task OnInitializedAsync()
protected override async Task OnParametersSetAsync()
{
if (Rendered)
{
if (!Orientation.Equals(oldOrientation))
{
oldOrientation = Orientation;
rotation = Orientation == Orientation.Portrait ? 0 : -90;
await PdfViewerJsInterop.RotateAsync(objRef!, ElementId!, rotation);
}
}

await base.OnParametersSetAsync();
}
Expand Down Expand Up @@ -119,6 +120,15 @@ private async Task PageNumberChangedAsync(int value)

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

private async Task ResetZoomAsync()
{
zoomLevel = defaultZoomLevel;
var zp = GetZoomPercentage(defaultZoomLevel);
zoomPercentage = $"{zp}%";
scale = 0.01 * zp;
await PdfViewerJsInterop.ZoomInOutAsync(objRef!, ElementId!, scale);
}

private async Task RotateClockwiseAsync()
{
rotation += 90;
Expand Down Expand Up @@ -179,15 +189,6 @@ private async Task ZoomOutAsync()
await PdfViewerJsInterop.ZoomInOutAsync(objRef!, ElementId!, scale);
}

private async Task ResetZoomAsync()
{
zoomLevel = defaultZoomLevel;
var zp = GetZoomPercentage(defaultZoomLevel);
zoomPercentage = $"{zp}%";
scale = 0.01 * zp;
await PdfViewerJsInterop.ZoomInOutAsync(objRef!, ElementId!, scale);
}

#endregion

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

/// <summary>
/// This event fires immediately after the page is changed.
/// </summary>
[Parameter] public EventCallback<PdfViewerEventArgs> OnPageChanged { get; set; }
[Parameter]
public EventCallback<PdfViewerEventArgs> OnPageChanged { get; set; }

/// <summary>
/// Provides JavaScript interop functionality for the PDF viewer.
/// Gets or sets the preferred orientation for the PDF viewer.
/// </summary>
[Inject] private PdfViewerJsInterop PdfViewerJsInterop { get; set; } = default!;
[Parameter]
public Orientation Orientation { get; set; }

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

/// <summary>
/// Gets or sets the preferred orientation for the PDF viewer.
/// Gets or sets the URL of the PDF document to be displayed.
/// </summary>
[Parameter]
public Orientation Orientation { get; set; }
public string? Url { get; set; }

#endregion
}
2 changes: 0 additions & 2 deletions blazorbootstrap/Components/Ribbon/Ribbon.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ protected override void BuildClasses()
/// <inheritdoc />
protected override async ValueTask DisposeAsync(bool disposing)
{
// TODO: update

if (disposing) tabs = null;

await base.DisposeAsync(disposing);
Expand Down
11 changes: 0 additions & 11 deletions blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,6 @@ protected override void BuildClasses()
base.BuildClasses();
}

/// <inheritdoc />
protected override async ValueTask DisposeAsync(bool disposing)
{
if (disposing)
{
// TODO: update
}

await base.DisposeAsync(disposing);
}

#endregion

#region Properties, Indexers
Expand Down
11 changes: 0 additions & 11 deletions blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,6 @@ protected override void BuildClasses()
base.BuildClasses();
}

/// <inheritdoc />
protected override async ValueTask DisposeAsync(bool disposing)
{
if (disposing)
{
// TOOD: update
}

await base.DisposeAsync(disposing);
}

/// <summary>
/// Triggers the OnRibbonItemClick event of the parent Ribbon component.
/// </summary>
Expand Down
11 changes: 0 additions & 11 deletions blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,6 @@ protected override void BuildClasses()
base.BuildClasses();
}

/// <inheritdoc />
protected override async ValueTask DisposeAsync(bool disposing)
{
if (disposing)
{
// TODO: update
}

await base.DisposeAsync(disposing);
}

#endregion

#region Properties, Indexers
Expand Down
67 changes: 66 additions & 1 deletion docs/docs/05-components/pdf-viewer.mdx
View file
Open in desktop

Large diffs are not rendered by default.