✨ javascript isolation for openseadragon

neozhu · Oct 22, 2023 · 3431d15 · 3431d15
1 parent 4b1dfcf
commit 3431d15
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 34 deletions.
diff --git a/src/Blazor.Server.UI/Pages/_Layout.cshtml b/src/Blazor.Server.UI/Pages/_Layout.cshtml
@@ -103,7 +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 type="text/javascript">
 
@@ -160,34 +160,9 @@
         }
 
 
-        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);
-        }
+       
        
 
     </script>

diff --git a/src/Blazor.Server.UI/Services/JsInterop/Fancybox.cs b/src/Blazor.Server.UI/Services/JsInterop/Fancybox.cs
@@ -14,6 +14,6 @@ public Fancybox(IJSRuntime 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());
+        return  jsmodule.InvokeVoidAsync(JSInteropConstants.PreviewImage, defaultUrl, images.Select(x => x.Url).ToArray());
     }
 }
diff --git a/src/Blazor.Server.UI/Services/JsInterop/InputClear.cs b/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);
     }
 
 

diff --git a/src/Blazor.Server.UI/Services/JsInterop/JSInteropConstants.cs b/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";
 }
diff --git a/src/Blazor.Server.UI/Services/JsInterop/OpenSeadragon.cs b/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);
     }
 
 

diff --git a/src/Blazor.Server.UI/wwwroot/js/clearinput.js b/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);
+}
diff --git a/src/Blazor.Server.UI/wwwroot/js/openseadragon.js b/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)
+}