From ec197f749990aaa3bde4c3d31b3b98cea8698b1d Mon Sep 17 00:00:00 2001 From: lxm23 Date: Mon, 14 Mar 2022 14:50:25 +0800 Subject: [PATCH 1/2] feat(module:image): nz-image add press `left` or `right` to switch image The nz-image add nzEnableLeftRightArrow to support press `left` or `right` to switch image --- components/image/doc/index.en-US.md | 1 + components/image/doc/index.zh-CN.md | 1 + components/image/image-preview-options.ts | 1 + components/image/image-preview-ref.ts | 17 ++++++++++++++++- 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md index 23cd944aa4..ad81ee03d5 100644 --- a/components/image/doc/index.en-US.md +++ b/components/image/doc/index.en-US.md @@ -60,6 +60,7 @@ Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem | nzZIndex | The z-index of the image preview | `number` | 1000 | | nzZoom | Zoom rate | `number` | 1 | | nzRotate | Rotate rate | `number` | 0 | +| nzEnableLeftRightArrow | Whether support press `left` or `right` to switch image | `boolean` | `true` | ### NzImagePreviewRef diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md index cf8bc98676..0e9ff07383 100644 --- a/components/image/doc/index.zh-CN.md +++ b/components/image/doc/index.zh-CN.md @@ -60,6 +60,7 @@ import { NzImageModule } from 'ng-zorro-antd/image'; | nzZIndex | 设置预览层的 z-index | `number` | 1000 | | nzZoom | 缩放比例 | `number` | 1 | | nzRotate | 旋转角度 | `number` | 0 | +| nzEnableLeftRightArrow | 是否支持键盘方向键切换图片 | `boolean` | `true` | ### NzImagePreviewRef diff --git a/components/image/image-preview-options.ts b/components/image/image-preview-options.ts index 744c471ea0..7caade9f17 100644 --- a/components/image/image-preview-options.ts +++ b/components/image/image-preview-options.ts @@ -14,6 +14,7 @@ export class NzImagePreviewOptions { nzZoom?: number; nzRotate?: number; nzDirection?: Direction; + nzEnableLeftRightArrow?: boolean = true; } export interface NzImage { diff --git a/components/image/image-preview-ref.ts b/components/image/image-preview-ref.ts index ad0d9b018d..9e951702f5 100644 --- a/components/image/image-preview-ref.ts +++ b/components/image/image-preview-ref.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes'; +import { ESCAPE, hasModifierKey, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes'; import { OverlayRef } from '@angular/cdk/overlay'; import { Subject } from 'rxjs'; import { filter, take, takeUntil } from 'rxjs/operators'; @@ -27,6 +27,21 @@ export class NzImagePreviewRef { this.close(); }); + overlayRef + .keydownEvents() + .pipe( + filter( + event => + (this.config.nzEnableLeftRightArrow as boolean) && + (event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW) && + !hasModifierKey(event) + ) + ) + .subscribe(event => { + event.preventDefault(); + event.keyCode === LEFT_ARROW ? this.prev() : this.next(); + }); + overlayRef.detachments().subscribe(() => { this.overlayRef.dispose(); }); From 798059ba0f98b2aa90b273cbcbaa2595e1962469 Mon Sep 17 00:00:00 2001 From: lxm23 Date: Wed, 23 Mar 2022 15:17:45 +0800 Subject: [PATCH 2/2] feat(module:image): nz-image add press `left` or `right` to switch image The nz-image add support press `left` or `right` to switch image --- components/image/doc/index.en-US.md | 3 +-- components/image/doc/index.zh-CN.md | 3 +-- components/image/image-preview-options.ts | 1 - components/image/image-preview-ref.ts | 22 +++++++++++----------- components/image/image.spec.ts | 16 +++++++++++++++- 5 files changed, 28 insertions(+), 17 deletions(-) diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md index ad81ee03d5..d18554af1e 100644 --- a/components/image/doc/index.en-US.md +++ b/components/image/doc/index.en-US.md @@ -54,13 +54,12 @@ Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem | Property | Description | Type | Default | | --- | --- | --- | --- | -| nzKeyboard | Whether support press `esc` to close | `boolean` | `true` | +| nzKeyboard | Whether support press `esc` to close, press `left` or `right` to switch image | `boolean` | `true` | | nzMaskClosable | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` | | nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | | nzZIndex | The z-index of the image preview | `number` | 1000 | | nzZoom | Zoom rate | `number` | 1 | | nzRotate | Rotate rate | `number` | 0 | -| nzEnableLeftRightArrow | Whether support press `left` or `right` to switch image | `boolean` | `true` | ### NzImagePreviewRef diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md index 0e9ff07383..2e8abf22ed 100644 --- a/components/image/doc/index.zh-CN.md +++ b/components/image/doc/index.zh-CN.md @@ -54,13 +54,12 @@ import { NzImageModule } from 'ng-zorro-antd/image'; | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| nzKeyboard | 是否支持键盘 esc 关闭 | `boolean` | `true` | +| nzKeyboard | 是否支持键盘 esc 关闭、左右键切换图片 | `boolean` | `true` | | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | | nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` | | nzZIndex | 设置预览层的 z-index | `number` | 1000 | | nzZoom | 缩放比例 | `number` | 1 | | nzRotate | 旋转角度 | `number` | 0 | -| nzEnableLeftRightArrow | 是否支持键盘方向键切换图片 | `boolean` | `true` | ### NzImagePreviewRef diff --git a/components/image/image-preview-options.ts b/components/image/image-preview-options.ts index 7caade9f17..744c471ea0 100644 --- a/components/image/image-preview-options.ts +++ b/components/image/image-preview-options.ts @@ -14,7 +14,6 @@ export class NzImagePreviewOptions { nzZoom?: number; nzRotate?: number; nzDirection?: Direction; - nzEnableLeftRightArrow?: boolean = true; } export interface NzImage { diff --git a/components/image/image-preview-ref.ts b/components/image/image-preview-ref.ts index 9e951702f5..d1644fd259 100644 --- a/components/image/image-preview-ref.ts +++ b/components/image/image-preview-ref.ts @@ -19,27 +19,27 @@ export class NzImagePreviewRef { private config: NzImagePreviewOptions, private overlayRef: OverlayRef ) { - overlayRef - .keydownEvents() - .pipe(filter(event => (this.config.nzKeyboard as boolean) && event.keyCode === ESCAPE && !hasModifierKey(event))) - .subscribe(event => { - event.preventDefault(); - this.close(); - }); - overlayRef .keydownEvents() .pipe( filter( event => - (this.config.nzEnableLeftRightArrow as boolean) && - (event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW) && + (this.config.nzKeyboard as boolean) && + (event.keyCode === ESCAPE || event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW) && !hasModifierKey(event) ) ) .subscribe(event => { event.preventDefault(); - event.keyCode === LEFT_ARROW ? this.prev() : this.next(); + if (event.keyCode === ESCAPE) { + this.close(); + } + if (event.keyCode === LEFT_ARROW) { + this.prev(); + } + if (event.keyCode === RIGHT_ARROW) { + this.next(); + } }); overlayRef.detachments().subscribe(() => { diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts index c446ce6bd1..8f2852fa7e 100644 --- a/components/image/image.spec.ts +++ b/components/image/image.spec.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes'; import { Overlay, OverlayContainer } from '@angular/cdk/overlay'; import { Component, DebugElement, NgModule, ViewChild } from '@angular/core'; import { @@ -27,7 +28,7 @@ import { ZoomOutOutline } from '@ant-design/icons-angular/icons'; -import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing'; +import { dispatchFakeEvent, dispatchKeyboardEvent } from 'ng-zorro-antd/core/testing'; import { NzIconModule, NZ_ICONS } from 'ng-zorro-antd/icon'; import { getFitContentPosition, @@ -400,6 +401,19 @@ describe('Preview', () => { fixture.detectChanges(); previewImageElement = getPreviewImageElement(); expect(previewImageElement.src).toContain(images[1].src); + + dispatchKeyboardEvent(overlayContainerElement, 'keydown', RIGHT_ARROW); + tickChanges(); + previewImageElement = getPreviewImageElement(); + expect(previewImageElement.src).toContain(images[1].src); + dispatchKeyboardEvent(overlayContainerElement, 'keydown', LEFT_ARROW); + tickChanges(); + previewImageElement = getPreviewImageElement(); + expect(previewImageElement.src).toContain(images[0].src); + dispatchKeyboardEvent(overlayContainerElement, 'keydown', RIGHT_ARROW); + tickChanges(); + previewImageElement = getPreviewImageElement(); + expect(previewImageElement.src).toContain(images[1].src); })); });