Skip to content

Commit

Permalink
PdfViewer component (#5676)
Browse files Browse the repository at this point in the history
* Add PdfViewer project

* Working example

* Sort extensions in the demo

* Loading and pages navigation

* Optimize scripts loading

* Use buttons

* loadDocument method

* Zoom

* Update sln guid

* Split viewer into separate components

* nuget pack

* Docs and release notes

* readonly note

* Update PageNumber and Scale options

* Update Rotation

* Delete extra NotifyPdfInitialized

* Scale two way binding

* Mention mthods in docs

* Fix initial pageNumber

* Add printing

* Fix zoom icon names

* Non-generic subscribable callbacks

* Use internal state

* URL wording

* mark Subscribable methods as internal

* Rename method insertCSSIntoDocumentHead

* Rename canvas to element

* Null checks

* null checks

* Use delegate in example

* Grammar

* Rename to SubscribeOrReplace

* Base64 example

* Comment

* Change lead sentence

* Separate API page
  • Loading branch information
stsrki authored Sep 6, 2024
1 parent afca9eb commit f7b22ed
Show file tree
Hide file tree
Showing 52 changed files with 1,884 additions and 137 deletions.
7 changes: 7 additions & 0 deletions Blazorise.sln
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.Captcha.ReCaptcha
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.Charts.Zoom", "Source\Extensions\Blazorise.Charts.Zoom\Blazorise.Charts.Zoom.csproj", "{045536EC-BD97-409D-BDF7-C148B7C5AAFC}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.PdfViewer", "Source\Extensions\Blazorise.PdfViewer\Blazorise.PdfViewer.csproj", "{EAB7EC89-900A-4280-B24A-152B9DD2B503}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Expand Down Expand Up @@ -405,6 +407,10 @@ Global
{045536EC-BD97-409D-BDF7-C148B7C5AAFC}.Debug|Any CPU.Build.0 = Debug|Any CPU
{045536EC-BD97-409D-BDF7-C148B7C5AAFC}.Release|Any CPU.ActiveCfg = Release|Any CPU
{045536EC-BD97-409D-BDF7-C148B7C5AAFC}.Release|Any CPU.Build.0 = Release|Any CPU
{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Debug|Any CPU.Build.0 = Debug|Any CPU
{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Release|Any CPU.ActiveCfg = Release|Any CPU
{EAB7EC89-900A-4280-B24A-152B9DD2B503}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
Expand Down Expand Up @@ -474,6 +480,7 @@ Global
{D24EA4EF-0AEC-43B2-BCDC-56229D60C285} = {9731051E-0AA7-411E-A76A-987854F034DA}
{2B4FD79A-42E2-4B81-828B-0799E4744ADA} = {9731051E-0AA7-411E-A76A-987854F034DA}
{045536EC-BD97-409D-BDF7-C148B7C5AAFC} = {9731051E-0AA7-411E-A76A-987854F034DA}
{EAB7EC89-900A-4280-B24A-152B9DD2B503} = {9731051E-0AA7-411E-A76A-987854F034DA}
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {205B3EA4-470F-45DA-911E-346AF7D0A9A5}
Expand Down
1 change: 1 addition & 0 deletions Demos/Blazorise.Demo/Blazorise.Demo.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<ProjectReference Include="..\..\Source\Extensions\Blazorise.Video\Blazorise.Video.csproj" />
<ProjectReference Include="..\..\Source\Extensions\Blazorise.SignaturePad\Blazorise.SignaturePad.csproj" />
<ProjectReference Include="..\..\Source\Extensions\Blazorise.FluentValidation\Blazorise.FluentValidation.csproj" />
<ProjectReference Include="..\..\Source\Extensions\Blazorise.PdfViewer\Blazorise.PdfViewer.csproj" />
<ProjectReference Include="..\Apps\TodoApp\TodoApp.csproj" />
</ItemGroup>

Expand Down
97 changes: 25 additions & 72 deletions Demos/Blazorise.Demo/Components/SideMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -290,79 +290,32 @@
Extensions
</BarDropdownToggle>
<BarDropdownMenu>
<BarDropdownItem To="tests/animate">
Animate
</BarDropdownItem>
<BarDropdownItem To="tests/autocomplete">
Autocomplete
</BarDropdownItem>
<BarDropdownItem To="tests/animate">Animate</BarDropdownItem>
<BarDropdownItem To="tests/autocomplete">Autocomplete</BarDropdownItem>
<BarDropdownItem To="tests/captcha">Captcha</BarDropdownItem>
<BarDropdownItem To="tests/charts">
Charts
</BarDropdownItem>
<BarDropdownItem To="tests/charts/annotations">
Charts Annotations
</BarDropdownItem>
<BarDropdownItem To="tests/charts/datalabels">
Charts Data Labels
</BarDropdownItem>
<BarDropdownItem To="tests/charts/zoom">
Charts Zoom
</BarDropdownItem>
<BarDropdownItem To="tests/cropper">
Cropper
</BarDropdownItem>
<BarDropdownItem To="tests/dropdownlist">
Dropdown List
</BarDropdownItem>
<BarDropdownItem To="tests/listview">
List View
</BarDropdownItem>
<BarDropdownItem To="tests/livecharts">
Live Charts
</BarDropdownItem>
<BarDropdownItem To="tests/loadingindicator">
Loading Indicator
</BarDropdownItem>
<BarDropdownItem To="tests/lottie-animation">
Lottie Animation
</BarDropdownItem>
<BarDropdownItem To="tests/markdown">
Markdown
</BarDropdownItem>
<BarDropdownItem To="tests/qrcode">
QR Code
</BarDropdownItem>
<BarDropdownItem To="tests/signaturepad">
SignaturePad
</BarDropdownItem>
<BarDropdownItem To="tests/repeater">
Repeater
</BarDropdownItem>
<BarDropdownItem To="tests/richtextedit">
RichTextEdit
</BarDropdownItem>
<BarDropdownItem To="tests/selectlist">
Select List
</BarDropdownItem>
<BarDropdownItem To="tests/snackbar">
Snackbar
</BarDropdownItem>
<BarDropdownItem To="tests/spinkit">
Spin Kit
</BarDropdownItem>
<BarDropdownItem To="tests/splitter">
Splitter
</BarDropdownItem>
<BarDropdownItem To="tests/treeview">
TreeView
</BarDropdownItem>
<BarDropdownItem To="tests/transferlist">
Transfer List
</BarDropdownItem>
<BarDropdownItem To="tests/video">
Video
</BarDropdownItem>
<BarDropdownItem To="tests/charts">Charts</BarDropdownItem>
<BarDropdownItem To="tests/charts/annotations">Charts Annotations</BarDropdownItem>
<BarDropdownItem To="tests/charts/datalabels">Charts Data Labels</BarDropdownItem>
<BarDropdownItem To="tests/charts/zoom">Charts Zoom</BarDropdownItem>
<BarDropdownItem To="tests/cropper">Cropper</BarDropdownItem>
<BarDropdownItem To="tests/dropdownlist">Dropdown List</BarDropdownItem>
<BarDropdownItem To="tests/listview">List View</BarDropdownItem>
<BarDropdownItem To="tests/livecharts">Live Charts</BarDropdownItem>
<BarDropdownItem To="tests/loadingindicator">Loading Indicator</BarDropdownItem>
<BarDropdownItem To="tests/lottie-animation">Lottie Animation</BarDropdownItem>
<BarDropdownItem To="tests/markdown">Markdown</BarDropdownItem>
<BarDropdownItem To="tests/pdfviewer">Pdf Viewer</BarDropdownItem>
<BarDropdownItem To="tests/qrcode">QR Code</BarDropdownItem>
<BarDropdownItem To="tests/repeater">Repeater</BarDropdownItem>
<BarDropdownItem To="tests/richtextedit">RichTextEdit</BarDropdownItem>
<BarDropdownItem To="tests/selectlist">Select List</BarDropdownItem>
<BarDropdownItem To="tests/signaturepad">SignaturePad</BarDropdownItem>
<BarDropdownItem To="tests/snackbar">Snackbar</BarDropdownItem>
<BarDropdownItem To="tests/spinkit">Spin Kit</BarDropdownItem>
<BarDropdownItem To="tests/splitter">Splitter</BarDropdownItem>
<BarDropdownItem To="tests/transferlist">Transfer List</BarDropdownItem>
<BarDropdownItem To="tests/treeview">TreeView</BarDropdownItem>
<BarDropdownItem To="tests/video">Video</BarDropdownItem>
</BarDropdownMenu>
</BarDropdown>
</BarItem>
Expand Down
44 changes: 44 additions & 0 deletions Demos/Blazorise.Demo/Pages/Tests/PdfViewerPage.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@page "/tests/pdfviewer"
<Row>
<Column>
<Card Margin="Margin.Is4.OnY">
<CardHeader>
<CardTitle>PdfViewer</CardTitle>
</CardHeader>
<CardBody>
<PdfViewerContainer Height="Height.Rem(50)">
<PdfViewerToolbar />
<PdfViewer Source="@source" />
</PdfViewerContainer>
</CardBody>
</Card>
</Column>
</Row>
<Row>
<Column>
<Card Margin="Margin.Is4.OnY">
<CardHeader>
<CardTitle>As a standalone PdfViewer</CardTitle>
</CardHeader>
<CardBody>
<Button Color="Color.Primary" Clicked="@(()=>standalonePdfViewerRef.PreviousPage())">Previous page</Button>
<Button Color="Color.Primary" Clicked="@(()=>standalonePdfViewerRef.NextPage())">Next page</Button>
<Button Color="Color.Secondary" Clicked="@(()=>pageNumber = 5)">Go to Page 5</Button>
<Button Color="Color.Secondary" Clicked="@(()=>scale = 1)">Set Scale 1</Button>
<Button Color="Color.Secondary" Clicked="@(()=>scale = 2)">Set Scale 2</Button>
<Button Color="Color.Dark" Clicked="@(()=>standalonePdfViewerRef.Print())">Print</Button>
</CardBody>
<CardBody>
<Div Height="Height.Rem(50)" Overflow="Overflow.Auto">
<PdfViewer @ref="@standalonePdfViewerRef" Source="@source" @bind-PageNumber="@pageNumber" @bind-Scale="@scale" />
</Div>
</CardBody>
</Card>
</Column>
</Row>
@code {
string source = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
PdfViewer standalonePdfViewerRef;
int pageNumber = 2;
double scale = 1;
}
1 change: 1 addition & 0 deletions Demos/Blazorise.Demo/_Imports.razor
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,5 @@
@using Blazorise.Cropper
@using Blazorise.Shared.Models
@using Blazorise.SignaturePad
@using Blazorise.PdfViewer
@using TodoApp
1 change: 1 addition & 0 deletions Documentation/Blazorise.Docs/Blazorise.Docs.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<ProjectReference Include="..\..\Source\Extensions\Blazorise.Cropper\Blazorise.Cropper.csproj" />
<ProjectReference Include="..\..\Source\Extensions\Blazorise.SignaturePad\Blazorise.SignaturePad.csproj" />
<ProjectReference Include="..\..\Source\Extensions\Blazorise.Splitter\Blazorise.Splitter.csproj" />
<ProjectReference Include="..\..\Source\Extensions\Blazorise.PdfViewer\Blazorise.PdfViewer.csproj" />
<PackageReference Include="MailKit" Version="4.7.0" />
<PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
<PackageReference Include="MimeKit" Version="4.7.1" />
Expand Down
3 changes: 3 additions & 0 deletions Documentation/Blazorise.Docs/Layouts/DocsLayout.razor
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,9 @@
<BarDropdownItem To="docs/extensions/lottie-animation">LottieAnimation</BarDropdownItem>
<BarDropdownItem To="docs/extensions/markdown">Markdown</BarDropdownItem>
<BarDropdownItem To="docs/extensions/qrcode">QRCode</BarDropdownItem>
<BarDropdownItem To="docs/extensions/pdfviewer" Flex="Flex.JustifyContent.Between">
<DocsNewFeatureBadge>PdfViewer</DocsNewFeatureBadge>
</BarDropdownItem>
<BarDropdownItem To="docs/extensions/richtextedit">RichTextEdit</BarDropdownItem>
<BarDropdownItem To="docs/extensions/selectlist">SelectList</BarDropdownItem>
<BarDropdownItem To="docs/extensions/sidebar">Sidebar</BarDropdownItem>
Expand Down
29 changes: 29 additions & 0 deletions Documentation/Blazorise.Docs/Models/Snippets.generated.cs

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="atSign">&#64;</span>using Blazorise.PdfViewer
</pre></div>
</div>

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewer</span> <span class="htmlAttributeName">Source</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
</pre></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
Install-Package Blazorise.PdfViewer
</pre></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnPreviousPageClicked</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Prev<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnNextPageClicked</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Next<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>

<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewer</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>pdfViewerRef</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Source</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code {
PdfViewer pdfViewerRef;

Task OnPreviousPageClicked() =&gt; pdfViewerRef.PreviousPage();
Task OnNextPageClicked() =&gt; pdfViewerRef.NextPage();
}
</pre></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewerContainer</span> <span class="htmlAttributeName">Height</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Height.Rem(35)</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewerToolbar</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">PdfViewer</span> <span class="htmlAttributeName">Source</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">PdfViewerContainer</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@using Blazorise.PdfViewer

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@namespace Blazorise.Docs.Docs.Examples

<PdfViewer Source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Install-Package Blazorise.PdfViewer
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@namespace Blazorise.Docs.Docs.Examples

<Button Color="Color.Primary" Clicked="@OnPreviousPageClicked">Prev</Button>
<Button Color="Color.Primary" Clicked="@OnNextPageClicked">Next</Button>

<PdfViewer @ref="@pdfViewerRef" Source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />

@code {
PdfViewer pdfViewerRef;

Task OnPreviousPageClicked() => pdfViewerRef.PreviousPage();
Task OnNextPageClicked() => pdfViewerRef.NextPage();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@namespace Blazorise.Docs.Docs.Examples

<PdfViewerContainer Height="Height.Rem(35)">
<PdfViewerToolbar />
<PdfViewer Source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
</PdfViewerContainer>
Loading

0 comments on commit f7b22ed

Please sign in to comment.