Code docs

CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log
+
+All notable changes and releases will be documented here
+
+## [Unreleased] - V1.1.0 (Latest Version)
+
+- Added support for page thumbnails which can be toggled on/off
+- Add some basic code documentation to the PDF viewer parameters
+- Small improvements to the documentation website
+
+## [2025-02-08] - V1.0.1 
+
+- FIXED: Bug that was preventing JS code from being executed
+
+## [2025-02-07] - V1.0.0 (Initial Release)
+
+- Initial Release

MudBlazor.PdfViewer.Docs/Components/App.razor

@@ -8,6 +8,11 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
     <link href="_content/Gotho.MudBlazor.PdfViewer/mudpdf.min.css" rel="stylesheet"/>
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
     <ImportMap/>
     <HeadOutlet @rendermode="InteractiveServer"/>
 </head>

MudBlazor.PdfViewer.Docs/Components/Pages/Home.razor

@@ -2,6 +2,8 @@
 
 @using MudBlazorPdf
 
+<PageTitle>MudBlazor PdfViewer</PageTitle>
+
 <div style="max-width: 1440px; margin: auto">
 
     <MudText Typo="Typo.h1">MudBlazor PDF Viewer</MudText>
@@ -23,9 +25,9 @@
 
     <MudTabs>
         <MudTabPanel Text="Example">
+            <MudText Class="py-3">@eventLog</MudText>
             <MudPdfViewer
                 Class="pt-5"
-                ShowThumbnails="true"
                 Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
                 OnDocumentLoaded="OnDocumentLoaded"
                 OnPageChanged="OnPageChanged"/>
@@ -37,13 +39,31 @@
         </MudTabPanel>
     </MudTabs>
 
+    <MudText Typo="Typo.h2" Class="pt-5">Thumbnails</MudText>
+    <MudText Typo="Typo.body1" Class="pb-4">Thumbnails for individual pages can be toggled or hidden completely</MudText>
+
+    <MudTabs>
+        <MudTabPanel Text="Example">
+            <MudPdfViewer
+                Class="pt-5"
+                HideThumbnails="true"
+                Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"/>
+        </MudTabPanel>
+        <MudTabPanel Text="Code">
+            <pre>
+                <MudText Style="display: block; padding: 1rem; white-space: pre; background-color: #161719" HtmlTag="code">@Examples.Thumbnails</MudText>
+            </pre>
+        </MudTabPanel>
+    </MudTabs>
+
     <MudText Typo="Typo.h2" Class="pt-5">Orientation</MudText>
     <MudText Typo="Typo.body1" Class="pb-4">The orientation of the loaded PDF can be specified manually</MudText>
 
     <MudTabs>
         <MudTabPanel Text="Example">
             <MudPdfViewer
                 Class="pt-5"
+                HideThumbnails="true"
                 Url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
                 Orientation="Orientation.Landscape"/>
         </MudTabPanel>

MudBlazor.PdfViewer.Docs/Examples.cs

@@ -22,9 +22,17 @@ private void OnPageChanged(PdfViewerEventArgs args)
 }
 ";
 
+    public static string Thumbnails = @"
+<MudPdfViewer
+    Class=""pt-5""
+    HideThumbnails=""true""
+    Url=""https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf""/>
+";
+
     public static string Orientation = @"
 <MudPdfViewer
     Class=""pt-5""
+    HideThumbnails=""true""
     Orientation=""Orientation.Landscape""
     Url=""https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf""/>";
 

MudBlazor.PdfViewer.Docs/MudBlazor.PdfViewer.Docs.csproj

@@ -22,4 +22,8 @@
       </Content>
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="wwwroot\" />
+    </ItemGroup>
+
 </Project>

MudBlazor.PdfViewer.Docs/wwwroot/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MudBlazor PDF Viewer",
+  "short_name": "MudPdf",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

MudBlazor.PdfViewer/MudPdfViewer.razor

@@ -3,6 +3,13 @@
 <MudGrid Class="flex-wrap">
     <MudItem xs="12">
         <MudToolBar Class="justify-space-between">
+            @if (!HideThumbnails)
+            {
+                <MudTooltip Text="@Config.Labels.ToggleThumbnails" Arrow="true" Placement="Placement.Top">
+                    <MudIconButton Icon="@Config.Icons.ToggleThumbnails" Size="Size.Medium" OnClick="ToggleThumbnails"
+                                   aria-label="@Config.Labels.ToggleThumbnails"/>
+                </MudTooltip>
+            }
             <MudTooltip Text="@Config.Labels.PreviousPage" Arrow="true" Placement="Placement.Top">
                 <MudIconButton Icon="@Config.Icons.PreviousPage" Size="Size.Medium" OnClick="PreviousPageAsync"
                                aria-label="@Config.Labels.PreviousPage"/>

MudBlazor.PdfViewer/MudPdfViewer.razor.cs

@@ -23,12 +23,38 @@ public partial class MudPdfViewer : MudComponentBase
 
     private Orientation _oldOrientation = Orientation.Portrait;
     private double _rotation = 0;
-
+
+    private bool _toggleThumbnails = true;
+
+    /// <summary>
+    /// Sets the display orientation of the PDF document
+    /// </summary>
+    /// <remarks>
+    /// Defaults to <c>Orientation.Portrait</c>
+    /// </remarks>
     [Parameter] public Orientation Orientation { get; set; } = Orientation.Portrait;
+
+    /// <summary>
+    /// URL of the PDF to be displayed, this can also be a base64 string 
+    /// </summary>
     [Parameter] public string? Url { get; set; }
-    [Parameter] public bool ShowThumbnails { get; set; }
-
+
+    /// <summary>
+    /// Hides the thumbnail bar as well as the option to display it
+    /// </summary>
+    /// <remarks>
+    /// Defaults to <c>false</c>
+    /// </remarks>
+    [Parameter] public bool HideThumbnails { get; set; } = false;
+
+    /// <summary>
+    /// This event fires immediately after the PDF document is loaded.
+    /// </summary>
     [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; }
 
     [Inject] private PdfInterop PdfInterop { get; set; } = default!;
@@ -39,14 +65,15 @@ protected override async Task OnInitializedAsync()
         _objectReference ??= DotNetObjectReference.Create(this);
         _rotation = Orientation == Orientation.Portrait ? 0 : -90;
         _id ??= "".GenerateRandomString();
+        _toggleThumbnails = !HideThumbnails;
 
         await base.OnInitializedAsync();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
-            await PdfInterop.InitializeAsync(_objectReference!, _id!, _scale, _rotation, Url!, ShowThumbnails);
+            await PdfInterop.InitializeAsync(_objectReference!, _id!, _scale, _rotation, Url!, HideThumbnails);
 
         await base.OnAfterRenderAsync(firstRender);
     }
@@ -190,13 +217,13 @@ private async Task SwitchOrientationAsync()
 
     private void ToggleThumbnails()
     {
-        ShowThumbnails = !ShowThumbnails;
+        _toggleThumbnails = !_toggleThumbnails;
         StateHasChanged();
     }
 
     private string ThumbnailClass()
     {
-        return ShowThumbnails
+        return _toggleThumbnails
             ? "mudpdf_thumbnails"
             : "mudpdf_thumbnails d-none";
     }

MudBlazor.PdfViewer/MudPdfViewerConfig.cs

@@ -7,6 +7,7 @@ public class MudPdfViewerConfig
 
     public class Label
     {
+        public string ToggleThumbnails { get; set; } = "Show Thumbnails";
         public string PreviousPage { get; set; } = "Previous Page";
         public string NextPage { get; set; } = "Next Page";
         public string PageOf { get; set; } = "of";
@@ -19,11 +20,11 @@ public class Label
         public string FirstPage { get; set; } = "First Page";
         public string LastPage { get; set; } = "Last Page";
         public string ResetZoom { get; set; } = "Reset Zoom";
-        public string ToggleThumbnails { get; set; } = "Toggle Thumbnails";
     }
 
     public class Icon
     {
+        public string ToggleThumbnails { get; set; } = MudBlazor.Icons.Material.Filled.ViewSidebar;
         public string PreviousPage { get; set; } = MudBlazor.Icons.Material.Filled.ArrowUpward;
         public string NextPage { get; set; } = MudBlazor.Icons.Material.Filled.ArrowDownward;
         public string ZoomIn { get; set; } = MudBlazor.Icons.Material.Filled.Add;
@@ -35,6 +36,5 @@ public class Icon
         public string FirstPage { get; set; } = MudBlazor.Icons.Material.Filled.VerticalAlignTop;
         public string LastPage { get; set; } = MudBlazor.Icons.Material.Filled.VerticalAlignBottom;
         public string ResetZoom { get; set; } = MudBlazor.Icons.Material.Filled.ResetTv;
-        public string ToggleThumbnails { get; set; } = MudBlazor.Icons.Material.Filled.MenuBook;
     }
 }

MudBlazor.PdfViewer/README.md

@@ -18,6 +18,12 @@ Add the following to your application startup in `Program.cs`;
 builder.Services.AddMudBlazorPdfViewer();
 ```
 
+Update your `App.razor` file to import the required CSS;
+
+```
+<link href="_content/Gotho.MudBlazor.PdfViewer/mudpdf.min.css" rel="stylesheet"/>
+```
+
 Then, add the namespace to your `_Imports.razor` file.
 
 ```

MudBlazor.PdfViewer/wwwroot/mudpdf.css

@@ -1,16 +1,22 @@
 .mudpdf_container {
     margin-left: 24px;
-    padding-bottom: 24px
+    padding-bottom: 24px;
+    position: relative;
+}
+
+.mudpdf_thumbnail canvas{
+    overflow: auto;
 }
 
 .mudpdf_thumbnails {
     max-width: 11%; 
     position: absolute; 
     left: 0; 
-    overflow-y: scroll; 
-    max-height: 88%; 
+    overflow-y: scroll;
     margin-left: 1rem;
     background-color: #161719;
+    top: 1em;
+    bottom: 1em;
 }
 
 .mudpdf_thumbnail

NOTICE.md

@@ -15,7 +15,7 @@ This library includes functionality derived from [Blazor Bootstrap](https://gith
 
 This library ports the functionality of the `PdfViewer` Blazor component from the Blazor Bootstrap library for use with the [MudBlazor](https://github.com/MudBlazor/MudBlazor/) Blazor component library.
 
-Minimal changes have been made to the original Blazor Bootstrap `PdfViewer` behaviour with the majority of changes focussing on integrating with existing MudBlazor components for styling purposes.
+Some changes have been made to the original Blazor Bootstrap `PdfViewer` behaviour with the majority of changes focussing on integrating with existing MudBlazor components for styling purposes. As well as some additional changes to support new features such as thumbnails
 
 The JS Interop code has been ported wholesale with only slight changes to naming
 

README.md

@@ -7,7 +7,7 @@ A port of the BlazorBootstrap PDF viewer to work with MudBlazor
 Grab the package from [nuget.org](https://www.nuget.org/packages/Gotho.MudBlazor.PdfViewer/1.0.1#readme-body-tab);
 
 ```
-dotnet add package Gotho.MudBlazor.PdfViewer --version 1.0.1
+dotnet add package Gotho.MudBlazor.PdfViewer --version 1.1.0
 ```
 
 ### Configure
@@ -18,7 +18,13 @@ Add the following to your application startup in `Program.cs`;
 builder.Services.AddMudBlazorPdfViewer();
 ```
 
-Then, add the namespace to your `_Imports.razor` file.
+Update your `App.razor` file to import the required CSS;
+
+```
+<link href="_content/Gotho.MudBlazor.PdfViewer/mudpdf.min.css" rel="stylesheet"/>
+```
+
+Then, add the namespace to your `_Imports.razor` file;
 
 ```
 @using MudBlazor.PdfViewer