Test display pdf

EgwCoreLib.BlazorTest/Pages/TestPdfViewer.razor

@@ -0,0 +1,24 @@
+@page "/TestPdfViewer"
+
+<div class="card">
+    <div class="card-header">
+        <div class="d-flex justify-content-between">
+            <div class="px-0">
+        <h3>Test pdf display</h3>
+            </div>
+            <div class="px-0">
+                <select class="form-select" @bind="@FileSel">
+                    <option value="File01.pdf">File 01</option>
+                    <option value="File02.pdf">File 02</option>
+                    <option value="File03.pdf">File 03</option>
+                    <option value="File04.pdf">File 04</option>
+                    <option value="File05.pdf">File 05</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    <div class="card-body h-100">
+        <p class="card-text">Selezione: <b>@FileSel</b></p>
+        <PdfViewer Width="100%" Height="100%" PdfUrl="@($"test/{FileSel}")"></PdfViewer>
+    </div>
+</div>

EgwCoreLib.BlazorTest/Pages/TestPdfViewer.razor.cs

@@ -0,0 +1,19 @@
+namespace EgwCoreLib.BlazorTest.Pages
+{
+    public partial class TestPdfViewer
+    {
+        protected string FileSel
+        {
+            get => fileSel;
+            set
+            {
+                if (fileSel != value)
+                {
+                    fileSel = value;
+                    StateHasChanged();
+                }
+            }
+        }
+        private string fileSel { get; set; } = "File01.pdf";
+    }
+}

EgwCoreLib.BlazorTest/Pages/_Layout.cshtml

@@ -44,9 +44,17 @@
                 onConnectionUp: () => console.log("Client reconnected!")
             }
         }).then(() => {
-            Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
-                document.location.reload();
-            }
+            Object.defineProperty(Blazor.defaultReconnectionHandler, '_reconnectionDisplay', {
+                get() {
+                    return this.__reconnectionDisplay;
+                },
+                set(value) {
+                    this.__reconnectionDisplay = {
+                        show: () => value.show(),
+                        update: (d) => value.update(d),
+                        rejected: (d) => document.location.reload()
+                    }
+                }
             });
         });
     </script>

EgwCoreLib.Razor/EgwCoreLib.Razor.csproj

@@ -33,6 +33,7 @@
     <None Remove="ChartTS - Copy.razor.js" />
     <None Remove="ChartTS.razor.js" />
     <None Remove="Doughnut.razor.js" />
+    <None Remove="PdfViewer.razor.js" />
   </ItemGroup>
 
   <ItemGroup>
@@ -52,6 +53,7 @@
       <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
+    <Content Include="PdfViewer.razor.js" />
   </ItemGroup>
 
   <ItemGroup>

EgwCoreLib.Razor/PdfViewer.razor

@@ -1,12 +1,10 @@
-<div>
-    @if (isMobile)
-    {
-        <h3>Mobile</h3>
-        <iframe src="@PdfUrl" width="@Width" height="@Height" />
-    }
-    else
-    {
-        <h3>Desktop</h3>
-        <object type="application/pdf" data="@PdfUrl" width="@Width" height="@Height" />
-    }
-</div>
+@if (isMobile)
+{
+    <h3>Mobile</h3>
+    <iframe src="@PdfUrl" width="@Width" height="@Height" />
+}
+else
+{
+    <h3>Desktop</h3>
+    <object type="application/pdf" data="@PdfUrl" width="@Width" height="@Height" />
+}

EgwCoreLib.Razor/PdfViewer.razor.cs

@@ -1,5 +1,9 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Options;
 using Microsoft.JSInterop;
+using System.Diagnostics.CodeAnalysis;
+using System.Xml.Linq;
+using ZXingBlazor.Components;
 
 namespace EgwCoreLib.Razor
 {
@@ -14,11 +18,13 @@ namespace EgwCoreLib.Razor
         /// <summary>
         /// Larghezza desiderata
         /// </summary>
+        [Parameter]
         public string Width { get; set; } = "100%";
         /// <summary>
         /// Altezza desiderata
         /// </summary>
-        public string Height { get; set; } = "60%";
+        [Parameter]
+        public string Height { get; set; } = "80%";
 
         /// <summary>
         /// Boolean Mobile vs Desktop
@@ -26,12 +32,23 @@ namespace EgwCoreLib.Razor
         private bool isMobile { get; set; }
 
         [Inject]
-        protected IJSRuntime JSRuntime { get; set; } = null!;
+        [NotNull]
+        private IJSRuntime? JS { get; set; }
+
+        private IJSObjectReference? module;
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
+            try
+            {
+                if (!firstRender) return;
+
+                module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/EgwCoreLib.Razor/PdfViewer.razor.js");
+                isMobile = await JS.InvokeAsync<bool>("isDevice");
+            }
+            catch
+            { }
 
-            isMobile = await JSRuntime.InvokeAsync<bool>("isDevice");
         }
     }
 }

EgwCoreLib.Razor/PdfViewer.razor.js

@@ -0,0 +1,3 @@
+function isDevice() {
+    return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);
+}