Skip to content

Commit 2df033c

Browse files
h2lsArgoZhang
h2ls
and
ArgoZhang
authored
feat(ImageViewer): support change zoomSpeed (#6145)
* add zoomSpeed parameter * Add ZoomSpeed parameter and remove zoomSpeed from viewer * update demo * refactor: 调整格式 * refactor: 移除注释 * refactor: 更改参数为可为空 * refactor: 移除预编译 * refactor: 增加缩放率检查逻辑 * fix: 修复 keydown 事件销毁导致其他钩子失效问题 --------- Co-Authored-By: Ethan Lee <33386249+h2ls@users.noreply.github.com> Co-authored-by: Argo Zhang <argo@live.ca>
1 parent 5acba45 commit 2df033c

8 files changed

Lines changed: 50 additions & 71 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
Name="PreviewList">
117117
<div class="images img-ph mt-3">
118118
<div class="images-item">
119-
<ImageViewer Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/bird.jpeg")" PreviewList="PreviewList" />
119+
<ImageViewer Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/bird.jpeg")" PreviewList="PreviewList" ZoomSpeed="0.5" />
120120
</div>
121121
</div>
122122
</DemoBlock>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5914,7 +5914,7 @@
59145914
"ImageViewerErrorTemplateTitle": "Load failed",
59155915
"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",
59165916
"ImageViewerPreviewListTitle": "A larger preview",
5917-
"ImageViewerPreviewListIntro": "Can be set up by the <code>Preview List</code> opens a larger Preview of the function",
5917+
"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",
59185918
"ImageViewersAttrUrl": "Picture Url",
59195919
"ImageViewersAttrAlt": "Native Alt attribute",
59205920
"ImageViewersAttrShowPlaceHolder": "Whether display placeholder for large images added",

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

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

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@ public partial class ImagePreviewer
7878
[Parameter]
7979
public string? RotateRightIcon { get; set; }
8080

81+
/// <summary>
82+
/// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值
83+
/// </summary>
84+
[Parameter]
85+
public double? ZoomSpeed { get; set; }
86+
8187
[Inject]
8288
[NotNull]
8389
private IIconTheme? IconTheme { get; set; }
@@ -126,5 +132,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
126132
/// <inheritdoc/>
127133
/// </summary>
128134
/// <returns></returns>
129-
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList);
135+
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList, new { ZoomSpeed });
130136
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import Data from "../../modules/data.js"
22
import Viewer from "../../modules/viewer.js"
33

4-
export function init(id, prevList) {
4+
export function init(id, prevList, config) {
55
const el = document.getElementById(id)
66
if (el === null) {
77
return
88
}
99

1010
const viewer = {
1111
el,
12-
viewer: Viewer.init(el, prevList)
12+
viewer: Viewer.init(el, prevList, config)
1313
}
1414
Data.set(id, viewer)
1515
}

‎src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
@if (ShowPreviewList)
1616
{
17-
<ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" PreviewList="PreviewList" />
17+
<ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" ZoomSpeed="@ZoomSpeed" PreviewList="PreviewList" />
1818
}
1919
</div>
2020

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ public partial class ImageViewer
2828
/// </summary>
2929
[Parameter]
3030
[NotNull]
31-
#if NET6_0_OR_GREATER
3231
[EditorRequired]
33-
#endif
3432
public string? Url { get; set; }
3533

3634
/// <summary>
@@ -118,6 +116,12 @@ public partial class ImageViewer
118116
[Parameter]
119117
public bool IsIntersectionObserver { get; set; }
120118

119+
/// <summary>
120+
/// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值
121+
/// </summary>
122+
[Parameter]
123+
public double? ZoomSpeed { get; set; }
124+
121125
[Inject]
122126
[NotNull]
123127
private IIconTheme? IconTheme { get; set; }

‎src/BootstrapBlazor/wwwroot/modules/viewer.js‎

Lines changed: 31 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import EventHandler from "./event-handler.js"
33

44
export default {
55
init(el, prevList, config) {
6+
const BASE_SPEED = 0.015;
7+
if (config.zoomSpeed && typeof config.zoomSpeed !== 'number') {
8+
config.zoomSpeed = BASE_SPEED;
9+
}
10+
if (config.zoomSpeed <= 0) {
11+
config.zoomSpeed = BASE_SPEED;
12+
}
613
const viewer = {
714
...{
815
el,
@@ -31,7 +38,6 @@ export default {
3138
viewer.pt = { top: 0, left: 0 }
3239
viewer.updateImage(viewer.index)
3340

34-
// // 消除 body 滚动条
3541
viewer.body.classList.add('is-img-preview')
3642
viewer.el.classList.add('show')
3743
}
@@ -101,15 +107,12 @@ export default {
101107
viewer.prevImg.style.marginTop = `${top}px`
102108
}
103109

104-
// 关闭按钮处理事件
105110
EventHandler.on(viewer.closeButton, 'click', () => {
106111
viewer.body.classList.remove('is-img-preview')
107-
// 恢复 Image
108112
viewer.resetImage()
109113
viewer.el.classList.remove('show')
110114
})
111115

112-
// 上一张按钮处理事件
113116
EventHandler.on(el, 'click', '.bb-viewer-prev', () => {
114117
viewer.index--
115118
if (viewer.index < 0) {
@@ -118,7 +121,6 @@ export default {
118121
viewer.updateImage(viewer.index)
119122
})
120123

121-
// 下一张按钮处理事件
122124
EventHandler.on(el, 'click', '.bb-viewer-next', () => {
123125
viewer.index++
124126
if (viewer.index >= viewer.prevList.length) {
@@ -127,67 +129,61 @@ export default {
127129
viewer.updateImage(viewer.index)
128130
})
129131

130-
// 全屏/恢复按钮功能
131132
EventHandler.on(viewer.fullScreen, 'click', () => {
132133
viewer.resetImage()
133134
viewer.el.classList.toggle('active')
134135
})
135136

136-
// 放大功能
137137
EventHandler.on(viewer.zoomOut, 'click', () => viewer.processImage(scale => scale + 0.2))
138-
139-
// 缩小功能
140138
EventHandler.on(viewer.zoomIn, 'click', () => viewer.processImage(scale => Math.max(0.2, scale - 0.2)))
141-
142-
// 左旋转功能
143139
EventHandler.on(viewer.rotateLeft, 'click', () => viewer.processImage(null, rotate => rotate - 90))
144-
145-
// 右旋转功能
146140
EventHandler.on(viewer.rotateRight, 'click', () => viewer.processImage(null, rotate => rotate + 90))
147141

148142
const handlerWheel = e => {
149-
e.preventDefault()
150-
const wheel = e.wheelDelta || -e.detail
151-
const delta = Math.max(-1, Math.min(1, wheel))
143+
e.preventDefault();
144+
const wheel = e.wheelDelta || -e.detail;
145+
const delta = Math.max(-1, Math.min(1, wheel));
146+
147+
const zoomStep = e.shiftKey ? viewer.zoomSpeed * 0.2 : viewer.zoomSpeed;
148+
152149
if (delta > 0) {
153-
// 放大
154-
viewer.processImage(scale => scale + 0.015)
155-
} else {
156-
// 缩小
157-
viewer.processImage(scale => Math.max(0.195, scale - 0.015))
150+
viewer.processImage(scale => scale + zoomStep);
151+
}
152+
else {
153+
viewer.processImage(scale => Math.max(0.195, scale - zoomStep));
158154
}
159155
}
160-
// 鼠标放大缩小
156+
161157
EventHandler.on(viewer.prevImg, 'mousewheel', handlerWheel)
162158
EventHandler.on(viewer.prevImg, 'DOMMouseScroll', handlerWheel)
163-
164-
// 点击遮罩关闭功能
165159
EventHandler.on(viewer.mask, 'click', () => {
166160
viewer.closeButton.click()
167161
})
168162

169-
// 增加键盘支持
170-
EventHandler.on(document, 'keydown', e => {
163+
viewer.keyHandler = e => {
171164
if (e.key === "ArrowUp") {
172165
viewer.zoomOut.click()
173-
} else if (e.key === "ArrowDown") {
166+
}
167+
else if (e.key === "ArrowDown") {
174168
viewer.zoomIn.click()
175-
} else if (e.key === "ArrowLeft") {
169+
}
170+
else if (e.key === "ArrowLeft") {
176171
const prevButton = viewer.el.querySelector('.bb-viewer-prev')
177172
if (prevButton) {
178173
prevButton.click()
179174
}
180-
} else if (e.key === "ArrowRight") {
175+
}
176+
else if (e.key === "ArrowRight") {
181177
const nextButton = viewer.el.querySelector('.bb-viewer-next')
182178
if (nextButton) {
183179
nextButton.click()
184180
}
185-
} else if (e.key === "Escape") {
181+
}
182+
else if (e.key === "Escape") {
186183
viewer.closeButton.click()
187184
}
188-
})
189-
190-
// 缩放处理
185+
}
186+
EventHandler.on(document, 'keydown', viewer.keyHandler);
191187
EventHandler.on(viewer.prevImg, 'touchstart', e => {
192188
e.preventDefault()
193189

@@ -278,8 +274,6 @@ export default {
278274
e => {
279275
viewer.originX = e.clientX || e.touches[0].clientX
280276
viewer.originY = e.clientY || e.touches[0].clientY
281-
282-
// 偏移量
283277
viewer.pt.top = parseInt(viewer.prevImg.style.marginTop)
284278
viewer.pt.left = parseInt(viewer.prevImg.style.marginLeft)
285279

@@ -309,48 +303,23 @@ export default {
309303
},
310304

311305
dispose(viewer) {
312-
313-
// 关闭按钮处理事件
314306
EventHandler.off(viewer.closeButton, 'click')
315-
316-
// 上一张按钮处理事件
317307
EventHandler.off(viewer.element, 'click', '.bb-viewer-prev')
318-
319-
// 下一张按钮处理事件
320308
EventHandler.off(viewer.element, 'click', '.bb-viewer-next')
321-
322-
// 全屏/恢复按钮功能
323309
EventHandler.off(viewer.fullScreen, 'click')
324-
325-
// 放大功能
326310
EventHandler.off(viewer.zoomOut, 'click')
327-
328-
// 缩小功能
329311
EventHandler.off(viewer.zoomIn, 'click')
330-
331-
// 左旋转功能
332312
EventHandler.off(viewer.rotateLeft, 'click')
333-
334-
// 右旋转功能
335313
EventHandler.off(viewer.rotateRight, 'click')
336-
337-
// 鼠标放大缩小
338314
EventHandler.off(viewer.prevImg, 'mousewheel')
339315
EventHandler.off(viewer.prevImg, 'DOMMouseScroll')
340-
341-
// 触摸放大缩小
342316
EventHandler.off(viewer.prevImg, 'touchstart')
343317
EventHandler.off(viewer.prevImg, 'touchmove')
344318
EventHandler.off(viewer.prevImg, 'touchend')
345319
EventHandler.off(viewer.prevImg, 'touchcancel')
346-
347-
//drag
348-
Drag.dispose(viewer.prevImg)
349-
350-
// 点击遮罩关闭功能
351320
EventHandler.off(viewer.mask, 'click')
321+
EventHandler.off(document, 'keydown', viewer.keyHandler)
352322

353-
// 增加键盘支持
354-
EventHandler.off(document, 'keydown')
323+
Drag.dispose(viewer.prevImg)
355324
}
356325
}

0 commit comments

Comments
 (0)