diff --git a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor index 83c2dd16e31..9fc3289c4a5 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor @@ -116,7 +116,7 @@ Name="PreviewList">
- +
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 52240212062..872ce12f3b0 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -5914,7 +5914,7 @@ "ImageViewerErrorTemplateTitle": "Load failed", "ImageViewerErrorTemplateIntro": "Can be set up by the Error Template open Error Template function, Url parameter Url unable to load images displayed when the content of the Template", "ImageViewerPreviewListTitle": "A larger preview", - "ImageViewerPreviewListIntro": "Can be set up by the Preview List opens a larger Preview of the function", + "ImageViewerPreviewListIntro": "Can be set up by the Preview List opens a larger Preview of the function, set ZoomSpeed to control the speed of scrolling and scaling", "ImageViewersAttrUrl": "Picture Url", "ImageViewersAttrAlt": "Native Alt attribute", "ImageViewersAttrShowPlaceHolder": "Whether display placeholder for large images added", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 12e9dad5b55..a7742e06cc4 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -5914,7 +5914,7 @@ "ImageViewerErrorTemplateTitle": "加载失败", "ImageViewerErrorTemplateIntro": "可通过设置 ErrorTemplate 开启错误模板功能，参数 Url 无法加载图片时显示此模板内容", "ImageViewerPreviewListTitle": "大图预览", - "ImageViewerPreviewListIntro": "可通过设置 PreviewList 开启预览大图的功能", + "ImageViewerPreviewListIntro": "可通过设置 PreviewList 开启预览大图的功能，设置 ZoomSpeed 控制滚动缩放时的速度", "ImageViewersAttrUrl": "图片 Url", "ImageViewersAttrAlt": "原生 alt 属性", "ImageViewersAttrShowPlaceHolder": "是否显示占位符 适用于大图片加载", diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs index e206590c487..88449f733b4 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs @@ -78,6 +78,12 @@ public partial class ImagePreviewer [Parameter] public string? RotateRightIcon { get; set; } + /// + /// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值 + /// + [Parameter] + public double? ZoomSpeed { get; set; } + [Inject] [NotNull] private IIconTheme? IconTheme { get; set; } @@ -126,5 +132,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender) /// /// /// - protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList); + protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList, new { ZoomSpeed }); } diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js index 47db46efbd7..8885fe574c3 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js @@ -1,7 +1,7 @@ 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 @@ -9,7 +9,7 @@ export function init(id, prevList) { const viewer = { el, - viewer: Viewer.init(el, prevList) + viewer: Viewer.init(el, prevList, config) } Data.set(id, viewer) } diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor index c15f7ce24c0..f4b59419090 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor @@ -14,7 +14,7 @@ @if (ShowPreviewList) { - + } diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs index b57753cd4c2..0151b1c070a 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs @@ -28,9 +28,7 @@ public partial class ImageViewer /// [Parameter] [NotNull] -#if NET6_0_OR_GREATER [EditorRequired] -#endif public string? Url { get; set; } /// @@ -118,6 +116,12 @@ public partial class ImageViewer [Parameter] public bool IsIntersectionObserver { get; set; } + /// + /// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值 + /// + [Parameter] + public double? ZoomSpeed { get; set; } + [Inject] [NotNull] private IIconTheme? IconTheme { get; set; } diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 591c51ef20e..1ed481cf4f8 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/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) } }