Ribbon and PDF Viewer updates (#654)

* #628 - PDF Viewer: demos/docs updated * Ribbon code cleanup
vikramlearning · Apr 14, 2024 · fd90c9b · fd90c9b
1 parent 114361e
commit fd90c9b
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 64 deletions.
diff --git a/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml b/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml
@@ -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/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
     <link href="BlazorBootstrap.Demo.Hosted.Client.styles.css" rel="stylesheet" asp-append-version="true" />
     <!-- Font Awesome -->
@@ -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>

diff --git a/BlazorBootstrap.Demo.RCL/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Pages/Index.razor
@@ -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">

diff --git a/BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewerDocumentation.razor
@@ -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>
@@ -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";
 }
diff --git a/BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewer_Demo_03_Base64String.razor b/BlazorBootstrap.Demo.RCL/Pages/PdfViewer/PdfViewer_Demo_03_Base64String.razor
diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs
@@ -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" },

diff --git a/BlazorBootstrap.Demo.Server/Pages/_Host.cshtml b/BlazorBootstrap.Demo.Server/Pages/_Host.cshtml
@@ -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/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
     <link href="BlazorBootstrap.Demo.Server.styles.css" rel="stylesheet" asp-append-version="true" />
     <!-- Font Awesome -->
@@ -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>

diff --git a/blazorbootstrap/Components/PdfViewer/PdfViewer.razor.cs b/blazorbootstrap/Components/PdfViewer/PdfViewer.razor.cs
@@ -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;
@@ -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
@@ -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();
     }
@@ -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;
@@ -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
@@ -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
 }
diff --git a/blazorbootstrap/Components/Ribbon/Ribbon.razor.cs b/blazorbootstrap/Components/Ribbon/Ribbon.razor.cs
@@ -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);

diff --git a/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs
@@ -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

diff --git a/blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs
@@ -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>

diff --git a/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.cs
@@ -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

diff --git a/docs/docs/05-components/pdf-viewer.mdx b/docs/docs/05-components/pdf-viewer.mdx