Jsisolation

src/Blazor.Server.UI/Pages/Identity/Users/Profile.razor

@@ -1,4 +1,5 @@
 @page "/user/profile"
+@using Blazor.Server.UI.Services.JsInterop;
 @using CleanArchitecture.Blazor.Application.Common.Interfaces.Identity
 @using CleanArchitecture.Blazor.Application.Features.Fluxor;
 @using SixLabors.ImageSharp
@@ -201,7 +202,6 @@
         if (index == 2)
         {
             await LoadOrgData();
-            await JS.InvokeVoidAsync("createOrgChart", this._orgData);
         }
     }
     private async Task LoadOrgData()
@@ -229,7 +229,7 @@
             orgitem._directSubordinates = count;
             this._orgData.Add(orgitem);
         }
-
+        await (new OrgChart(JS)).Create(this._orgData);
     }
 
     protected override async Task OnInitializedAsync()

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"
@@ -320,7 +326,7 @@
     private async Task OnSearch(string text)
     {
         throw new Exception("OnSearch error!");
         _selectedItems = new HashSet<ProductDto>();
         Query.Keyword = text;
         await _table.ReloadServerData();
     }

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

@@ -11,14 +11,10 @@
     <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/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);
         }
@@ -107,11 +103,7 @@
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
     <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
     <script src="_content/BlazorTime/blazorTime.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.0.0/openseadragon.min.js"></script>
-    <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">
 
@@ -168,104 +160,11 @@
         }
 
 
-        async function showOpenSeadragon(element, url) {
-            console.log('showOpenSeadragon');
-            var viewer = OpenSeadragon({
-                id: element,
-                showNavigator: false,
-                showZoomControl: false,
-                showHomeControl: false,
-                showFullPageControl: false,
-                showSequenceControl: false,
-                maxZoomPixelRatio: 3,
-                minZoomImageRatio: 0.3,
-                tileSources: {
-                    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                    type: 'image',
-                    url: url,
-                }
-            });
-            console.log(viewer);
-        }
-
-        function clearInput(inputId) {
-            setTimeout(function () {
-                var input = document.querySelector("#" + inputId);
-                if (input) {
-                    input.value = "";
-                }
-            }, 30);
-        }
-        var chart;
-        async function createOrgChart(orgdata) {
-            setTimeout(function () {
-                //console.log(orgdata)
-                const activeid = orgdata.find(x => x.isLoggedUser == true);
-                chart = new d3.OrgChart()
-                    .nodeHeight((d) => 85 + 25)
-                    .nodeWidth((d) => 220 + 2)
-                    .childrenMargin((d) => 50)
-                    .compactMarginBetween((d) => 35)
-                    .compactMarginPair((d) => 30)
-                    .neighbourMargin((a, b) => 20)
-                    .nodeContent(function (d, i, arr, state) {
-                        const color = '#FFFFFF';
-                        const imageDiffVert = 25 + 2;
-                        return `
-                        <div style='width:${d.width }px;height:${d.height}px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>
-                                <div style="font-family: 'Inter', sans-serif;background-color:${color};  margin-left:-1px;width:${d.width - 2}px;height:${d.height - imageDiffVert}px;border-radius:10px;border: 1px solid #E4E2E9">
-                                            <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px">#${d.data.id.slice(-3)}</div>
-                                    <div style="background-color:${color};margin-top:${-imageDiffVert - 20}px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
-                                    <div style="margin-top:${-imageDiffVert - 20}px;">   <img src=" ${d.data.profileUrl}" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
-                                    <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${d.data.name} </div>
-                                            <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${d.data.positionName } </div>
-
-                                </div>
-                            </div>
-                                    `;
-                    })
-                    .container('.chart-container')
-                    .data(orgdata)
-                    .render();
+
 
-                if (activeid != null) {
-                    //console.log(activeid)
-                    chart.setHighlighted(activeid.id).render();
-                }
-            }, 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(JSInteropConstants.PreviewImage, defaultUrl, images.Select(x => x.Url).ToArray());
+    }
+}

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

@@ -11,9 +11,10 @@ public InputClear(IJSRuntime jsRuntime)
     {
         _jsRuntime = jsRuntime;
     }
-    public ValueTask Clear(string targetId)
+    public async Task<ValueTask> Clear(string targetId)
     {
-        return _jsRuntime.InvokeVoidAsync(JSInteropConstants.ClearInput, targetId);
+        var jsmodule = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/clearinput.js");
+        return jsmodule.InvokeVoidAsync(JSInteropConstants.ClearInput, targetId);
     }
 
 

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

@@ -2,7 +2,8 @@
 
 public class JSInteropConstants
 {
-    public static string ShowOpenSeadragon => "showOpenSeadragon";
+    public static string ShowOpenSeadragon="showOpenSeadragon";
     public static string ClearInput = "clearInput";
+    public static string PreviewImage = "previewImage";
     public static string CreateOrgChart = "createOrgChart";
 }

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

@@ -10,10 +10,11 @@ public OpenSeadragon(IJSRuntime jsRuntime)
     {
         _jsRuntime = jsRuntime;
     }
-    public ValueTask Open(string url)
+    public async Task<ValueTask> Open(string url)
     {
         var target = "openseadragon";
-        return _jsRuntime.InvokeVoidAsync(JSInteropConstants.ShowOpenSeadragon, target, url);
+        var jsmodule = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/openseadragon.js");
+        return jsmodule.InvokeVoidAsync(JSInteropConstants.ShowOpenSeadragon, target, url);
     }
 
 

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

@@ -12,9 +12,10 @@ public OrgChart(IJSRuntime jsRuntime)
     {
         _jsRuntime = jsRuntime;
     }
-    public ValueTask Create(List<OrgItem> data)
+    public async Task<ValueTask> Create(List<OrgItem> data)
     {
-        return _jsRuntime.InvokeVoidAsync(JSInteropConstants.CreateOrgChart, data);
+        var jsmodule = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/orgchart.js");
+        return jsmodule.InvokeVoidAsync("createOrgChart", data);
     }
 
 

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

@@ -0,0 +1,8 @@
+export function clearInput(inputId) {
+    setTimeout(function () {
+        var input = document.querySelector("#" + inputId);
+        if (input) {
+            input.value = "";
+        }
+    }, 30);
+}

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);
+}

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

@@ -0,0 +1,20 @@
+import OpenSeadragon from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+
+export function showOpenSeadragon(element, url) {
+    var viewer = OpenSeadragon({
+        id: element,
+        showNavigator: false,
+        showZoomControl: false,
+        showHomeControl: false,
+        showFullPageControl: false,
+        showSequenceControl: false,
+        maxZoomPixelRatio: 3,
+        minZoomImageRatio: 0.3,
+        tileSources: {
+            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+            type: 'image',
+            url: url,
+        }
+    });
+    console.log(viewer)
+}

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

@@ -0,0 +1,40 @@
+import { OrgChart } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+
+export function createOrgChart(orgdata) {
+    let chart
+    setTimeout(function () {
+        //console.log(orgdata)
+        const activeid = orgdata.find(x => x.isLoggedUser == true);
+        chart = new OrgChart()
+            .nodeHeight((d) => 85 + 25)
+            .nodeWidth((d) => 220 + 2)
+            .childrenMargin((d) => 50)
+            .compactMarginBetween((d) => 35)
+            .compactMarginPair((d) => 30)
+            .neighbourMargin((a, b) => 20)
+            .nodeContent(function (d, i, arr, state) {
+                const color = '#FFFFFF';
+                const imageDiffVert = 25 + 2;
+                return `
+                        <div style='width:${d.width}px;height:${d.height}px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>
+                                <div style="font-family: 'Inter', sans-serif;background-color:${color};  margin-left:-1px;width:${d.width - 2}px;height:${d.height - imageDiffVert}px;border-radius:10px;border: 1px solid #E4E2E9">
+                                            <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px">#${d.data.id.slice(-3)}</div>
+                                    <div style="background-color:${color};margin-top:${-imageDiffVert - 20}px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
+                                    <div style="margin-top:${-imageDiffVert - 20}px;">   <img src=" ${d.data.profileUrl}" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
+                                    <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${d.data.name} </div>
+                                            <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${d.data.positionName} </div>
+
+                                </div>
+                            </div>
+                                    `;
+            })
+            .container('.chart-container')
+            .data(orgdata)
+            .render();
+
+        if (activeid != null) {
+            //console.log(activeid)
+            chart.setHighlighted(activeid.id).render();
+        }
+    }, 50);
+}