Skip to content

Commit 5226da5

Browse files
gvreddy04gvreddy04
authored
Pdf Viewer component (#54)
- Introduced a new `PdfViewer` component for viewing PDF documents, with event handling for loading and page navigation. - Updated `Program.cs` to register the `BlazorExpress.Bulma` service. - Refactored JavaScript interop classes (`GoogleMap`, `Menu`, `ScriptLoader`) to use new interop implementations, and added `PdfViewerJsInterop`. - Added supporting classes `PdfViewerModel`, `PdfViewerEventArgs`, and an `Orientation` enum. - Added a new JavaScript file for PDF rendering logic and license notices to PDF.js files. - Refactored the PDF viewer's layout and navigation controls for better usability, including enhanced page navigation, zoom, rotation, and orientation controls. - Updated documentation and demo navigation to include the new PDF Viewer, and improved documentation readability and UI styling. - Enhanced event logging and customization options for the PDF Viewer component.
1 parent 2273e79 commit 5226da5

32 files changed

Lines changed: 887 additions & 12 deletions

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoRouteConstants.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ public static class DemoRouteConstants
5858
public const string Demos_Modal_Documentation = Demos_Prefix + "/modal";
5959
public const string Demos_Navbar_Documentation = Demos_Prefix + "/navbar";
6060
public const string Demos_Pagination_Documentation = Demos_Prefix + "/pagination";
61+
public const string Demos_PdfViewer_Documentation = Demos_Prefix + "/pdf-viewer";
6162
public const string Demos_Panel_Documentation = Demos_Prefix + "/panel";
6263
public const string Demos_ScriptLoader_Documentation = Demos_Prefix + "/script-loader";
6364
public const string Demos_Tabs_Documentation = Demos_Prefix + "/tabs";
@@ -132,6 +133,7 @@ public static class DemoRouteConstants
132133
public const string Docs_Modal_Documentation = Docs_Prefix + "/modal";
133134
public const string Docs_Navbar_Documentation = Docs_Prefix + "/navbar";
134135
public const string Docs_Pagination_Documentation = Docs_Prefix + "/pagination";
136+
public const string Docs_PdfViewer_Documentation = Docs_Prefix + "/pdf-viewer";
135137
public const string Docs_Panel_Documentation = Docs_Prefix + "/panel";
136138
public const string Docs_ScriptLoader_Documentation = Docs_Prefix + "/script-loader";
137139
public const string Docs_Tabs_Documentation = Docs_Prefix + "/tabs";

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoScreenshotSrcConstants.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ public class DemoScreenshotSrcConstants
4141
public const string Modal = DemoScreenshotSrcPrefix + "modal.png";
4242
public const string Navbar = DemoScreenshotSrcPrefix + "navbar.png";
4343
public const string Pagination = DemoScreenshotSrcPrefix + "pagination.png";
44+
public const string PdfViewer = DemoScreenshotSrcPrefix + "pdf-viewer.png";
4445
public const string ScriptLoader = DemoScreenshotSrcPrefix + "script-loader.png";
4546
public const string Tabs = DemoScreenshotSrcPrefix + "tabs.png";
4647

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ private HashSet<LinkGroup> GetLinkGroups()
9797
new Link { Href = DemoRouteConstants.Demos_Modal_Documentation, Text = "Modal" },
9898
new Link { Href = DemoRouteConstants.Demos_Navbar_Documentation, Text = "Navbar" },
9999
new Link { Href = DemoRouteConstants.Demos_Pagination_Documentation, Text = "Pagination" },
100+
new Link { Href = DemoRouteConstants.Demos_PdfViewer_Documentation, Text = "Pdf Viewer" },
100101
new Link { Href = DemoRouteConstants.Demos_ScriptLoader_Documentation, Text = "Script Loader" },
101102
new Link { Href = DemoRouteConstants.Demos_Tabs_Documentation, Text = "Tabs" }
102103
]

‎BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ private HashSet<LinkGroup> GetLinkGroups()
111111
new Link { Href = DemoRouteConstants.Docs_Modal_Documentation, Text = "Modal" },
112112
new Link { Href = DemoRouteConstants.Docs_Navbar_Documentation, Text = "Navbar" },
113113
new Link { Href = DemoRouteConstants.Docs_Pagination_Documentation, Text = "Pagination" },
114+
new Link { Href = DemoRouteConstants.Docs_PdfViewer_Documentation, Text = "Pdf Viewer" },
114115
new Link { Href = DemoRouteConstants.Docs_ScriptLoader_Documentation, Text = "Script Loader" },
115116
new Link { Href = DemoRouteConstants.Docs_Tabs_Documentation, Text = "Tabs" }
116117
]

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Block/Block_Demo_01_How_it_works.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
</Block>
77
<Block>
88
This text is within a <strong>third block</strong>. This block has no margin at the bottom.
9-
</Block>
9+
</Block>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/PdfViewer/PdfViewerDocumentation.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@DemoRouteConstants.Docs_PdfViewer_Documentation" />
13+
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
15+
<Demo Type="typeof(PdfViewer_Demo_01_How_it_works)" Tabs="true" />
16+
</Section>
17+
18+
@code {
19+
private const string componentName = nameof(PdfViewer);
20+
private const string pageUrl = DemoRouteConstants.Demos_PdfViewer_Documentation;
21+
private const string pageTitle = componentName;
22+
private const string pageDescription = $"The Blazor <code>{componentName}</code> component allows users to view PDF files directly in the browser without relying on third-party browser tools or extensions.";
23+
private const string metaTitle = $"Blazor {componentName} Component";
24+
private const string metaDescription = $"The Blazor {componentName} component allows users to view PDF files directly in the browser without relying on third-party browser tools or extensions.";
25+
private const string imageUrl = DemoScreenshotSrcConstants.PdfViewer;
26+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/PdfViewer/PdfViewer_Demo_01_How_it_works.razor‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<p class="mb-3">@eventLog</p>
2+
3+
<PdfViewer Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
4+
OnDocumentLoaded="OnDocumentLoaded"
5+
OnPageChanged="OnPageChanged" />
6+
7+
@code {
8+
private string eventLog { get; set; } = $"Last event: ..., CurrentPage: 0, TotalPages: 0";
9+
10+
private void OnDocumentLoaded(PdfViewerEventArgs args)
11+
=> eventLog = $"Last event: OnDocumentLoaded, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
12+
13+
private void OnPageChanged(PdfViewerEventArgs args)
14+
=> eventLog = $"Last event: OnPageChanged, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
15+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Docs/PdfViewer/PdfViewer_Doc_01_Documentation.razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DocsMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DemoLink Href="@DemoRouteConstants.Demos_PdfViewer_Documentation" />
13+
14+
<Section Class="p-0" Size="HeadingSize.H4" Name="Screenshot" PageUrl="@pageUrl" Link="screenshot">
15+
<img src="@imageUrl" class="img-fluid" alt="@metaTitle" />
16+
</Section>
17+
18+
<Section Class="p-0" Size="HeadingSize.H4" Name="Parameters" PageUrl="@pageUrl" Link="parameters">
19+
<DocxTable TItem="PdfViewer" DocType="DocType.Parameters" />
20+
</Section>
21+
22+
<Section Class="p-0" Size="HeadingSize.H4" Name="Methods" PageUrl="@pageUrl" Link="methods">
23+
<DocxTable TItem="PdfViewer" DocType="DocType.Methods" />
24+
</Section>
25+
26+
<Section Class="p-0" Size="HeadingSize.H4" Name="Events" PageUrl="@pageUrl" Link="events">
27+
<DocxTable TItem="PdfViewer" DocType="DocType.Events" />
28+
</Section>
29+
30+
@code {
31+
private const string componentName = nameof(PdfViewer);
32+
private const string pageUrl = DemoRouteConstants.Docs_PdfViewer_Documentation;
33+
private const string pageTitle = componentName;
34+
private const string pageDescription = $"This documentation provides a comprehensive reference for the <code>{componentName}</code> component, guiding you through its configuration options.";
35+
private const string metaTitle = $"Blazor {componentName} Component";
36+
private const string metaDescription = $"This documentation provides a comprehensive reference for the {componentName} component, guiding you through its configuration options.";
37+
private const string imageUrl = DemoScreenshotSrcConstants.PdfViewer;
38+
}

‎BlazorExpress.Bulma.Demo.RCL/Utils/DemoPageLinkUtil.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,9 @@ public static HashSet<PageLink> GetDemosLinks()
109109
index += 1;
110110
links.Add(new PageLink { Id = index, IconName = BootstrapIconName.None, Href = DemoRouteConstants.Demos_Form_PasswordInput_Documentation, Text = "Password Input", Categories = new() { DemoPageLinkCategory.All, DemoPageLinkCategory.Form }, Status = PageLinkStatus.None, IsActive = false });
111111

112+
index += 1;
113+
links.Add(new PageLink { Id = index, IconName = BootstrapIconName.None, Href = DemoRouteConstants.Demos_PdfViewer_Documentation, Text = "Pdf Viewer", Categories = new() { DemoPageLinkCategory.All, DemoPageLinkCategory.Components }, Status = PageLinkStatus.New, IsActive = true });
114+
112115
index += 1;
113116
links.Add(new PageLink { Id = index, IconName = BootstrapIconName.UsbCFill, Href = DemoRouteConstants.Demos_ProgressBar_Documentation, Text = "Progress Bar", Categories = new() { DemoPageLinkCategory.All, DemoPageLinkCategory.Elements }, Status = PageLinkStatus.None, IsActive = true });
114117

‎BlazorExpress.Bulma.Demo.RCL/wwwroot/images/screenshots/pdf-viewer.png‎

85.7 KB
Loading

0 commit comments

Comments
 (0)