optimize image viewer

rwecho · Apr 8, 2024 · 48efc93 · 48efc93
1 parent b1682fb
commit 48efc93
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 37 deletions.
diff --git a/src/V2ex.Blazor.Shared/Components/ImageViewer.razor b/src/V2ex.Blazor.Shared/Components/ImageViewer.razor
@@ -3,6 +3,18 @@
      tabindex="-1"
      class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-end md:items-center w-full md:inset-0 !h-full max-h-full">
     <div class="relative p-0 w-full max-w-md max-h-full">
+        <!-- Modal header -->
+        <div class="absolute w-full z-10 flex items-center justify-between p-4 border-b dark:border-gray-600 bg-gray-800 bg-opacity-20">
+            <span class="text-white ">
+                @activeIndex/@Images.Count
+            </span>
+            <button type="button" @onclick="HideModal" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="blazor-error-ui">
+                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                </svg>
+                <span class="sr-only">Close modal</span>
+            </button>
+        </div>
         <div class="relative bg-white shadow dark:bg-gray-700 overflow-hidden">
             <div class="swiper" style="height:100%" @ref="swiperRef">
                 <div class="swiper-wrapper">
@@ -23,12 +35,12 @@
     [Parameter]
     public List<string> Images { get; set; } = [];
 
+    private int activeIndex = 1;
     private ElementReference modalRef;
     private ElementReference swiperRef;
     private IJSObjectReference? interopModule;
     private IJSObjectReference? modal;
     private IJSObjectReference? swiper;
-    private IJSObjectReference? pinchZoom;
 
     [Inject]
     private IJSRuntime JsRuntime { get; set; } = null!;
@@ -49,8 +61,9 @@
             modal = await interopModule.InvokeAsync<IJSObjectReference>("initializeModal",
                 modalRef);
 
-            swiper = await interopModule.InvokeAsync<IJSObjectReference>("initializeSwiper", swiperRef);
-            pinchZoom = await interopModule.InvokeAsync<IJSObjectReference>("initializePinchZoom", swiperRef);
+            swiper = await interopModule.InvokeAsync<IJSObjectReference>("initializeSwiper", 
+                thisRef,
+                swiperRef);
         }
     }
 
@@ -77,6 +90,24 @@
         await this.swiper.InvokeVoidAsync("slideTo", index);
     }
 
+    private async Task HideModal()
+    {
+        if (modal == null)
+        {
+            throw new InvalidOperationException("Modal is not initialized.");
+        }
+
+        await modal.InvokeVoidAsync("hide");
+    }
+
+    [JSInvokable]
+    public Task OnSlideChangeAsync(int activeIndex)
+    {
+        this.activeIndex = activeIndex + 1;
+        this.InvokeAsync(this.StateHasChanged);
+        return Task.CompletedTask;
+    }
+
     public async ValueTask DisposeAsync()
     {
         try
@@ -86,9 +117,6 @@
 
             if (interopModule != null)
                 await interopModule.DisposeAsync();
-
-            if (pinchZoom != null)
-                await pinchZoom.InvokeVoidAsync("destroy");
         }
         catch (JSException)
         {

diff --git a/src/V2ex.Blazor.Shared/Components/ImageViewer.razor.js b/src/V2ex.Blazor.Shared/Components/ImageViewer.razor.js
@@ -22,15 +22,17 @@
     return new Modal(modalRef, modalOptions, instanceOptions);
 }
 
-export function initializeSwiper(swiperRef) {
+export function initializeSwiper(thisRef, swiperRef) {
     const swiper = new Swiper(swiperRef, {
         // Optional parameters
         direction: 'horizontal',
         loop: false,
         initialSlide: 0,
 
         touchStartPreventDefault: false,
-
+        zoom: {
+            maxRatio: 3,
+        },
         // If we need pagination
         pagination: {
             el: '.swiper-pagination',
@@ -51,24 +53,10 @@ export function initializeSwiper(swiperRef) {
 
             },
             slideChange: function () {
+                thisRef.invokeMethodAsync("OnSlideChangeAsync", this.activeIndex);
             },
         },
     });
 
     return swiper;
 }
-
-export function initializePinchZoom(swiperRef) {
-    const images = swiperRef.querySelectorAll('.swiper-slide')
-
-    const pinches = Array.from(images)
-        .map(img => {
-            return new PinchZoom.default(img, {
-                draggableUnzoomed: false,
-                tapZoomFactor: 2,
-                zoomOutFactor: 1.3,
-                useMouseWheel: true
-            });
-        })
-    return pinches
-}
diff --git a/src/V2ex.Blazor.Shared/V2ex.Blazor.Shared.csproj b/src/V2ex.Blazor.Shared/V2ex.Blazor.Shared.csproj
@@ -25,8 +25,4 @@
     <ItemGroup>
       <Content Remove="package.json" />
     </ItemGroup>
-
-    <ItemGroup>
-      <Folder Include="wwwroot\lib\pinch-zoom\" />
-    </ItemGroup>
 </Project>
diff --git a/src/V2ex.Blazor.Shared/wwwroot/css/app.css b/src/V2ex.Blazor.Shared/wwwroot/css/app.css
@@ -1480,6 +1480,10 @@ input:checked + .toggle-bg {
   width: 100%;
 }
 
+.min-w-\[0\] {
+  min-width: 0;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -2039,6 +2043,10 @@ input:checked + .toggle-bg {
   background-color: rgb(244 244 245 / var(--tw-bg-opacity));
 }
 
+.bg-opacity-20 {
+  --tw-bg-opacity: 0.2;
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -2059,6 +2067,11 @@ input:checked + .toggle-bg {
   fill: #F98080;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2238,14 +2251,14 @@ input:checked + .toggle-bg {
   font-weight: 500;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-normal {
   font-weight: 400;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -3027,10 +3040,6 @@ listeners can take over.
     display: flex;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:h-auto {
     height: auto;
   }

diff --git a/src/V2ex.Blazor.Shared/wwwroot/lib/pinch-zoom/pinch-zoom.min.js b/src/V2ex.Blazor.Shared/wwwroot/lib/pinch-zoom/pinch-zoom.min.js
diff --git a/src/V2ex.Blazor/wwwroot/index.html b/src/V2ex.Blazor/wwwroot/index.html
@@ -81,7 +81,6 @@ <h3 class="text-xl font-medium text-gray-900 dark:text-white">
     <script src="_content/V2ex.Blazor.Shared/lib/highlight/highlight.min.js"></script>
     <script src="_content/V2ex.Blazor.Shared/lib/pulltorefresh.js"></script>
     <script src="_content/V2ex.Blazor.Shared/lib/quill/quill.js"></script>
-    <script src="_content/V2ex.Blazor.Shared/lib/pinch-zoom/pinch-zoom.min.js"></script>
 
     <script type="module">
         import * as utils from './_content/V2ex.Blazor.Shared/utils.js';