✨ javascript isolation for facybox.js

src/Blazor.Server.UI/Pages/Products/Products.razor

@@ -18,11 +18,17 @@
 @attribute [Authorize(Policy = Permissions.Products.View)]
 <PageTitle>@Title</PageTitle>
 <style>
+    @@import url("https://cdn.jsdelivr.net/npm/@@fancyapps/[email protected]/dist/fancybox/fancybox.css");
+
+    .fancybox__container {
+        --fancybox-bg: rgba(24, 24, 27, 0.85);
+        z-index: 9999;
+    }
     .mud-table-toolbar {
         height: 120px !important;
     }
 </style>
-
+<h1 class="color">test</h1>
         <AdvancedSearchProductsComponent TRequest="Query" OnConditionChanged="ConditionChanged"></AdvancedSearchProductsComponent>
         <MudDataGrid ServerData="@(ServerReload)"
                      FixedHeader="true"

src/Blazor.Server.UI/Pages/Products/_ProductFormDialog.razor

@@ -1,3 +1,4 @@
+@using Blazor.Server.UI.Services.JsInterop;
 @using CleanArchitecture.Blazor.Application.Features.Products.Commands.AddEdit
 @using ResizeMode = SixLabors.ImageSharp.Processing.ResizeMode
 @using Severity = MudBlazor.Severity
@@ -150,7 +151,7 @@
 
     private async Task PreviewImage(string url, IEnumerable<ProductImage> images)
     {
-        await JS.InvokeVoidAsync("previewImage", url, images.Select(x => x.Url).ToArray());
+        await new Fancybox(JS).Preview(url, images);
     }
 
     private async Task UploadFiles(InputFileChangeEventArgs e)

src/Blazor.Server.UI/Pages/_Layout.cshtml

@@ -12,13 +12,11 @@
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
     <link href="_content/Blazor-ApexCharts/css/apexcharts.css" rel="stylesheet" />
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/@@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
+
+    <link href="Blazor.Server.UI.styles.css" rel="stylesheet">
     <style>
-        .fancybox__container {
-            --fancybox-bg: rgba(24, 24, 27, 0.85);
-            z-index: 9999;
-        }
+        
+
         .mud-input {
             font-size: var(--mud-typography-default-size);
         }
@@ -111,7 +109,7 @@
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-flextree.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
+
 
     <script type="text/javascript">
 
@@ -235,37 +233,6 @@
             }, 50);
         }
 
-        function previewImage(url, gallery) {
- 
-            if (url ==null) return;
-            console.log(url, gallery);
-            if (isImageUrl(url)) {
-                let images = [];
-                if (gallery != null) {
-                    images = gallery.filter(l => isImageUrl(l)).map(x => ({ src: x, caption: x.split("/").pop() }));
-                } else {
-                    images = [{ src: url, caption: url.split("/").pop() }];
-                }
-                const fancybox = new Fancybox(images);
-            } else {
-                const anchorElement = document.createElement('a');
-                anchorElement.href = url;
-                anchorElement.download = fileName ?? '';
-                anchorElement.click();
-                anchorElement.remove();
-            }
-        }
-        function isImageUrl(url) {
-            const imageExtensions = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i;
-            return imageExtensions.test(url);
-        }
-       function isValidUrl(str) {
-            if (str == null) {
-                return false;
-            }
-            const urlRegex  =/^([a-zA-Z]:)?(\\[a-zA-Z0-9\s_@@-~]+)+\.[a-zA-Z]{2,6}$/;
-            return urlRegex.test(str);
-        }
     </script>
 
 </body>

src/Blazor.Server.UI/Program.cs

@@ -9,6 +9,7 @@
 
 builder.RegisterSerilog();
 builder.AddBlazorUiServices();
+builder.WebHost.UseStaticWebAssets();
 builder.Services.AddInfrastructureServices(builder.Configuration)
     .AddApplicationServices();
 

src/Blazor.Server.UI/Services/JsInterop/Fancybox.cs

@@ -0,0 +1,19 @@
+using System.Security.Policy;
+using Microsoft.JSInterop;
+
+namespace Blazor.Server.UI.Services.JsInterop;
+
+public sealed class Fancybox
+{
+    private readonly IJSRuntime _jsRuntime;
+
+    public Fancybox(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+    }
+    public async Task<ValueTask> Preview(string defaultUrl, IEnumerable<ProductImage> images)
+    {
+        var jsmodule =await  _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/fancybox.js");
+        return  jsmodule.InvokeVoidAsync("previewImage", defaultUrl, images.Select(x => x.Url).ToArray());
+    }
+}

src/Blazor.Server.UI/wwwroot/js/fancybox.js

@@ -0,0 +1,24 @@
+import { Fancybox }  from "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.esm.js";
+export function previewImage(url, gallery) {
+
+    if (url == null) return;
+    if (isImageUrl(url)) {
+        let images = [];
+        if (gallery != null) {
+            images = gallery.filter(l => isImageUrl(l)).map(x => ({ src: x, caption: x.split("/").pop() }));
+        } else {
+            images = [{ src: url, caption: url.split("/").pop() }];
+        }
+        const fancybox = new Fancybox(images);
+    } else {
+        const anchorElement = document.createElement('a');
+        anchorElement.href = url;
+        anchorElement.download = fileName ?? '';
+        anchorElement.click();
+        anchorElement.remove();
+    }
+}
+function isImageUrl(url) {
+    const imageExtensions = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i;
+    return imageExtensions.test(url);
+}