docs: fix doc's demo for zoom wheel ✨ (#336)

willnguyen1312 · Oct 27, 2024 · eb6135a · eb6135a
1 parent 8621449
commit eb6135a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/docs/src/components/HomePageShow.vue b/packages/docs/src/components/HomePageShow.vue
@@ -88,21 +88,33 @@ const processZoom = async (zoomType: TabValue) => {
   await nextTick()
 
   if (zoomType === "hover") {
+    const isMobile = window.innerWidth < 768
+    const isTablet = window.innerWidth < 1024
     createZoomImageHover(imageHoverContainerRef.value as HTMLDivElement, {
       zoomImageSource: imageURL,
-      customZoom: { width: 300, height: 500 },
+      customZoom: isMobile
+        ? {
+            width: 150,
+            height: 200,
+          }
+        : isTablet
+          ? { width: 200, height: 300 }
+          : { width: 300, height: 400 },
       zoomTarget: zoomTargetRef.value as HTMLDivElement,
       scale: 2,
     })
   }
 
   if (zoomType === "wheel") {
-    createZoomImageWheel(imageWheelContainerRef.value as HTMLDivElement)
+    createZoomImageWheel(imageWheelContainerRef.value as HTMLDivElement, {
+      shouldZoomOnSingleTouch: () => zoomImageWheelState.currentZoom > 1,
+    })
   }
 
   if (zoomType === "move") {
     createZoomImageMove(imageMoveContainerRef.value as HTMLDivElement, {
       zoomImageSource: imageURL,
+      disabledContextMenu: true,
     })
   }
 

diff --git a/size.json b/size.json
@@ -35,8 +35,8 @@
   "@zoom-image/svelte": {
     "useZoomImageWheel": "2.64 KB",
     "useZoomImageHover": "1.75 KB",
-    "useZoomImageMove": "1.49 KB",
-    "useZoomImageClick": "1.39 KB"
+    "useZoomImageMove": "1.5 KB",
+    "useZoomImageClick": "1.4 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "2.42 KB",