feat(ImageViewer): support change zoomSpeed

src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor

@@ -116,7 +116,7 @@
            Name="PreviewList">
     <div class="images img-ph mt-3">
         <div class="images-item">
-            <ImageViewer Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/bird.jpeg")" PreviewList="PreviewList" />
+            <ImageViewer Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/bird.jpeg")" PreviewList="PreviewList" ZoomSpeed="0.5" />
         </div>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -5914,7 +5914,7 @@
     "ImageViewerErrorTemplateTitle": "Load failed",
     "ImageViewerErrorTemplateIntro": "Can be set up by the <code>Error Template</code> open Error Template function, Url parameter <code>Url</code> unable to load images displayed when the content of the Template",
     "ImageViewerPreviewListTitle": "A larger preview",
-    "ImageViewerPreviewListIntro": "Can be set up by the <code>Preview List</code> opens a larger Preview of the function",
+    "ImageViewerPreviewListIntro": "Can be set up by the <code>Preview List</code> opens a larger Preview of the function, set <code>ZoomSpeed</code> to control the speed of scrolling and scaling",
     "ImageViewersAttrUrl": "Picture Url",
     "ImageViewersAttrAlt": "Native Alt attribute",
     "ImageViewersAttrShowPlaceHolder": "Whether display placeholder for large images added",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -5914,7 +5914,7 @@
     "ImageViewerErrorTemplateTitle": "加载失败",
     "ImageViewerErrorTemplateIntro": "可通过设置 <code>ErrorTemplate</code> 开启错误模板功能，参数 <code>Url</code> 无法加载图片时显示此模板内容",
     "ImageViewerPreviewListTitle": "大图预览",
-    "ImageViewerPreviewListIntro": "可通过设置 <code>PreviewList</code> 开启预览大图的功能",
+    "ImageViewerPreviewListIntro": "可通过设置 <code>PreviewList</code> 开启预览大图的功能，设置 <code>ZoomSpeed</code> 控制滚动缩放时的速度",
     "ImageViewersAttrUrl": "图片 Url",
     "ImageViewersAttrAlt": "原生 alt 属性",
     "ImageViewersAttrShowPlaceHolder": "是否显示占位符 适用于大图片加载",

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs

@@ -78,6 +78,12 @@ public partial class ImagePreviewer
     [Parameter]
     public string? RotateRightIcon { get; set; }
 
+    /// <summary>
+    /// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值
+    /// </summary>
+    [Parameter]
+    public double? ZoomSpeed { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
@@ -126,5 +132,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList);
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList, new { ZoomSpeed });
 }

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js

@@ -1,15 +1,15 @@
 import Data from "../../modules/data.js"
 import Viewer from "../../modules/viewer.js"
 
-export function init(id, prevList) {
+export function init(id, prevList, config) {
     const el = document.getElementById(id)
     if (el === null) {
         return
     }
 
     const viewer = {
         el,
-        viewer: Viewer.init(el, prevList)
+        viewer: Viewer.init(el, prevList, config)
     }
     Data.set(id, viewer)
 }

src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor

@@ -14,7 +14,7 @@
 
     @if (ShowPreviewList)
     {
-        <ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" PreviewList="PreviewList" />
+        <ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" ZoomSpeed="@ZoomSpeed" PreviewList="PreviewList" />
     }
 </div>
 

src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs

@@ -28,9 +28,7 @@ public partial class ImageViewer
     /// </summary>
     [Parameter]
     [NotNull]
-#if NET6_0_OR_GREATER
     [EditorRequired]
-#endif
     public string? Url { get; set; }
 
     /// <summary>
@@ -118,6 +116,12 @@ public partial class ImageViewer
     [Parameter]
     public bool IsIntersectionObserver { get; set; }
 
+    /// <summary>
+    /// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值
+    /// </summary>
+    [Parameter]
+    public double? ZoomSpeed { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }

src/BootstrapBlazor/wwwroot/modules/viewer.js

@@ -3,6 +3,13 @@ import EventHandler from "./event-handler.js"
 
 export default {
     init(el, prevList, config) {
+        const BASE_SPEED = 0.015;
+        if (config.zoomSpeed && typeof config.zoomSpeed !== 'number') {
+            config.zoomSpeed = BASE_SPEED;
+        }
+        if (config.zoomSpeed <= 0) {
+            config.zoomSpeed = BASE_SPEED;
+        }
         const viewer = {
             ...{
                 el,
@@ -31,7 +38,6 @@ export default {
             viewer.pt = { top: 0, left: 0 }
             viewer.updateImage(viewer.index)
 
-            // // 消除 body 滚动条
             viewer.body.classList.add('is-img-preview')
             viewer.el.classList.add('show')
         }
@@ -101,15 +107,12 @@ export default {
             viewer.prevImg.style.marginTop = `${top}px`
         }
 
-        // 关闭按钮处理事件
         EventHandler.on(viewer.closeButton, 'click', () => {
             viewer.body.classList.remove('is-img-preview')
-            // 恢复 Image
             viewer.resetImage()
             viewer.el.classList.remove('show')
         })
 
-        // 上一张按钮处理事件
         EventHandler.on(el, 'click', '.bb-viewer-prev', () => {
             viewer.index--
             if (viewer.index < 0) {
@@ -118,7 +121,6 @@ export default {
             viewer.updateImage(viewer.index)
         })
 
-        // 下一张按钮处理事件
         EventHandler.on(el, 'click', '.bb-viewer-next', () => {
             viewer.index++
             if (viewer.index >= viewer.prevList.length) {
@@ -127,67 +129,61 @@ export default {
             viewer.updateImage(viewer.index)
         })
 
-        // 全屏/恢复按钮功能
         EventHandler.on(viewer.fullScreen, 'click', () => {
             viewer.resetImage()
             viewer.el.classList.toggle('active')
         })
 
-        // 放大功能
         EventHandler.on(viewer.zoomOut, 'click', () => viewer.processImage(scale => scale + 0.2))
-
-        // 缩小功能
         EventHandler.on(viewer.zoomIn, 'click', () => viewer.processImage(scale => Math.max(0.2, scale - 0.2)))
-
-        // 左旋转功能
         EventHandler.on(viewer.rotateLeft, 'click', () => viewer.processImage(null, rotate => rotate - 90))
-
-        // 右旋转功能
         EventHandler.on(viewer.rotateRight, 'click', () => viewer.processImage(null, rotate => rotate + 90))
 
         const handlerWheel = e => {
-            e.preventDefault()
-            const wheel = e.wheelDelta || -e.detail
-            const delta = Math.max(-1, Math.min(1, wheel))
+            e.preventDefault();
+            const wheel = e.wheelDelta || -e.detail;
+            const delta = Math.max(-1, Math.min(1, wheel));
+
+            const zoomStep = e.shiftKey ? viewer.zoomSpeed * 0.2 : viewer.zoomSpeed;
+
             if (delta > 0) {
-                // 放大
-                viewer.processImage(scale => scale + 0.015)
-            } else {
-                // 缩小
-                viewer.processImage(scale => Math.max(0.195, scale - 0.015))
+                viewer.processImage(scale => scale + zoomStep);
+            }
+            else {
+                viewer.processImage(scale => Math.max(0.195, scale - zoomStep));
             }
         }
-        // 鼠标放大缩小
+
         EventHandler.on(viewer.prevImg, 'mousewheel', handlerWheel)
         EventHandler.on(viewer.prevImg, 'DOMMouseScroll', handlerWheel)
-
-        // 点击遮罩关闭功能
         EventHandler.on(viewer.mask, 'click', () => {
             viewer.closeButton.click()
         })
 
-        // 增加键盘支持
-        EventHandler.on(document, 'keydown', e => {
+        viewer.keyHandler = e => {
             if (e.key === "ArrowUp") {
                 viewer.zoomOut.click()
-            } else if (e.key === "ArrowDown") {
+            }
+            else if (e.key === "ArrowDown") {
                 viewer.zoomIn.click()
-            } else if (e.key === "ArrowLeft") {
+            }
+            else if (e.key === "ArrowLeft") {
                 const prevButton = viewer.el.querySelector('.bb-viewer-prev')
                 if (prevButton) {
                     prevButton.click()
                 }
-            } else if (e.key === "ArrowRight") {
+            }
+            else if (e.key === "ArrowRight") {
                 const nextButton = viewer.el.querySelector('.bb-viewer-next')
                 if (nextButton) {
                     nextButton.click()
                 }
-            } else if (e.key === "Escape") {
+            }
+            else if (e.key === "Escape") {
                 viewer.closeButton.click()
             }
-        })
-
-        // 缩放处理
+        }
+        EventHandler.on(document, 'keydown', viewer.keyHandler);
         EventHandler.on(viewer.prevImg, 'touchstart', e => {
             e.preventDefault()
 
@@ -278,8 +274,6 @@ export default {
             e => {
                 viewer.originX = e.clientX || e.touches[0].clientX
                 viewer.originY = e.clientY || e.touches[0].clientY
-
-                // 偏移量
                 viewer.pt.top = parseInt(viewer.prevImg.style.marginTop)
                 viewer.pt.left = parseInt(viewer.prevImg.style.marginLeft)
 
@@ -309,48 +303,23 @@ export default {
     },
 
     dispose(viewer) {
-
-        // 关闭按钮处理事件
         EventHandler.off(viewer.closeButton, 'click')
-
-        // 上一张按钮处理事件
         EventHandler.off(viewer.element, 'click', '.bb-viewer-prev')
-
-        // 下一张按钮处理事件
         EventHandler.off(viewer.element, 'click', '.bb-viewer-next')
-
-        // 全屏/恢复按钮功能
         EventHandler.off(viewer.fullScreen, 'click')
-
-        // 放大功能
         EventHandler.off(viewer.zoomOut, 'click')
-
-        // 缩小功能
         EventHandler.off(viewer.zoomIn, 'click')
-
-        // 左旋转功能
         EventHandler.off(viewer.rotateLeft, 'click')
-
-        // 右旋转功能
         EventHandler.off(viewer.rotateRight, 'click')
-
-        // 鼠标放大缩小
         EventHandler.off(viewer.prevImg, 'mousewheel')
         EventHandler.off(viewer.prevImg, 'DOMMouseScroll')
-
-        // 触摸放大缩小
         EventHandler.off(viewer.prevImg, 'touchstart')
         EventHandler.off(viewer.prevImg, 'touchmove')
         EventHandler.off(viewer.prevImg, 'touchend')
         EventHandler.off(viewer.prevImg, 'touchcancel')
-
-        //drag
-        Drag.dispose(viewer.prevImg)
-
-        // 点击遮罩关闭功能
         EventHandler.off(viewer.mask, 'click')
+        EventHandler.off(document, 'keydown', viewer.keyHandler)
 
-        // 增加键盘支持
-        EventHandler.off(document, 'keydown')
+        Drag.dispose(viewer.prevImg)
     }
 }