From 10981510407696e788d291cae972341ace1b9d68 Mon Sep 17 00:00:00 2001 From: Wendell Date: Fri, 14 Jun 2019 17:30:35 +0800 Subject: [PATCH] feat(module:carousel): support dot position --- components/carousel/demo/position.md | 16 ++++++ components/carousel/demo/position.ts | 42 ++++++++++++++++ components/carousel/demo/vertical.md | 16 ------ components/carousel/demo/vertical.ts | 31 ------------ components/carousel/doc/index.en-US.md | 22 ++++----- components/carousel/doc/index.zh-CN.md | 22 ++++----- .../carousel/nz-carousel-definitions.ts | 22 ++++----- .../carousel/nz-carousel.component.html | 9 +++- components/carousel/nz-carousel.component.ts | 49 ++++++++++++++++--- components/carousel/nz-carousel.spec.ts | 12 ++++- .../carousel/strategies/transform-strategy.ts | 15 ++++-- 11 files changed, 164 insertions(+), 92 deletions(-) create mode 100644 components/carousel/demo/position.md create mode 100644 components/carousel/demo/position.ts delete mode 100644 components/carousel/demo/vertical.md delete mode 100644 components/carousel/demo/vertical.ts diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md new file mode 100644 index 0000000000..a866b857e8 --- /dev/null +++ b/components/carousel/demo/position.md @@ -0,0 +1,16 @@ +--- +order: 1 +title: + zh-CN: 位置 + en-US: Position +--- + +## zh-CN + +位置有 4 个方向。 + +## en-US + +There are four position available. + + diff --git a/components/carousel/demo/position.ts b/components/carousel/demo/position.ts new file mode 100644 index 0000000000..dae6233577 --- /dev/null +++ b/components/carousel/demo/position.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-carousel-position', + template: ` + + + + + + + +
+

{{ index }}

+
+ + `, + styles: [ + ` + nz-radio-group { + margin-bottom: 8px; + } + + [nz-carousel-content] { + text-align: center; + height: 160px; + line-height: 160px; + background: #364d79; + color: #fff; + overflow: hidden; + } + + h3 { + color: #fff; + } + ` + ] +}) +export class NzDemoCarouselPositionComponent { + array = [1, 2, 3, 4]; + dotPosition = 'bottom'; +} diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md deleted file mode 100644 index 128ea70986..0000000000 --- a/components/carousel/demo/vertical.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -order: 1 -title: - zh-CN: 垂直 - en-US: Vertical ---- - -## zh-CN - -垂直显示。 - -## en-US - -Vertical pagination. - - diff --git a/components/carousel/demo/vertical.ts b/components/carousel/demo/vertical.ts deleted file mode 100644 index 3c7788deb7..0000000000 --- a/components/carousel/demo/vertical.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'nz-demo-carousel-vertical', - template: ` - -
-

{{ index }}

-
- - `, - styles: [ - ` - [nz-carousel-content] { - text-align: center; - height: 160px; - line-height: 160px; - background: #364d79; - color: #fff; - overflow: hidden; - } - - h3 { - color: #fff; - } - ` - ] -}) -export class NzDemoCarouselVerticalComponent { - array = [1, 2, 3]; -} diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md index 983cc58597..ca969a3b8f 100644 --- a/components/carousel/doc/index.en-US.md +++ b/components/carousel/doc/index.en-US.md @@ -24,17 +24,17 @@ import { NzCarouselModule } from 'ng-zorro-antd'; ### nz-carousel -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | -| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | -| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | -| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | -| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | -| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | -| `[nzVertical]` | Whether to use a vertical display | `boolean` | `false` | -| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - | -| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | - | +| Property | Description | Type | Default | Version since | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | | +| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | | +| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | | +| `[nzDotPosition]` | The position of the dots, which can be one of `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 | +| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | | +| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | | +| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | | +| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - | | +| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | | #### Methods diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md index 9f3130b7ba..c77c5df62d 100644 --- a/components/carousel/doc/index.zh-CN.md +++ b/components/carousel/doc/index.zh-CN.md @@ -25,17 +25,17 @@ import { NzCarouselModule } from 'ng-zorro-antd'; ### nz-carousel -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | -| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` | -| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - | -| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | -| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | -| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | -| `[nzVertical]` | 垂直显示 | `boolean` | `false` | -| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter` | - | -| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | | +| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` | | +| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - | | +| `[nzDotPosition]` | 面板指示点位置，可选 `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 | | +| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | | +| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | | +| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | | +| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter` | - | | +| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | | #### 方法 diff --git a/components/carousel/nz-carousel-definitions.ts b/components/carousel/nz-carousel-definitions.ts index 6056bde54a..6f884fd1f2 100644 --- a/components/carousel/nz-carousel-definitions.ts +++ b/components/carousel/nz-carousel-definitions.ts @@ -10,19 +10,28 @@ import { InjectionToken, QueryList } from '@angular/core'; import { NzCarouselContentDirective } from './nz-carousel-content.directive'; import { NzCarouselBaseStrategy } from './strategies/base-strategy'; -// Support string for custom transition effect. export type NzCarouselEffects = 'fade' | 'scrollx' | string; +export type NzCarouselDotPosition = 'top' | 'bottom' | 'left' | 'right'; export interface NzCarouselComponentAsSource { carouselContents: QueryList; el: HTMLElement; nzTransitionSpeed: number; - nzVertical: boolean; + vertical: boolean; slickListEl: HTMLElement; slickTrackEl: HTMLElement; activeIndex: number; } +export interface NzCarouselStrategyRegistryItem { + name: string; + strategy: NzCarouselBaseStrategy; +} + +export const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken( + 'nz-carousel-custom-strategies' +); + export interface PointerVector { x: number; y: number; @@ -32,12 +41,3 @@ export interface FromToInterface { from: number; to: number; } - -export interface CarouselStrategyRegistryItem { - name: string; - strategy: NzCarouselBaseStrategy; -} - -export const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken( - 'nz-carousel-custom-strategies' -); diff --git a/components/carousel/nz-carousel.component.html b/components/carousel/nz-carousel.component.html index f00c2e4199..d4ad344af5 100755 --- a/components/carousel/nz-carousel.component.html +++ b/components/carousel/nz-carousel.component.html @@ -13,7 +13,14 @@ -
    +
    • (); @Output() readonly nzAfterChange = new EventEmitter(); @@ -102,6 +132,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD slickListEl: HTMLElement; slickTrackEl: HTMLElement; strategy: NzCarouselBaseStrategy; + vertical = false; transitionInProgress: number | null; private destroy$ = new Subject(); @@ -114,12 +145,12 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD constructor( elementRef: ElementRef, - @Inject(DOCUMENT) document: any, // tslint:disable-line:no-any private renderer: Renderer2, private cdr: ChangeDetectorRef, private ngZone: NgZone, private platform: Platform, - @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: CarouselStrategyRegistryItem[] + @Inject(DOCUMENT) document: any, // tslint:disable-line:no-any + @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: NzCarouselStrategyRegistryItem[] ) { this.document = document; this.renderer.addClass(elementRef.nativeElement, 'ant-carousel'); @@ -165,7 +196,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD } ngOnChanges(changes: SimpleChanges): void { - const { nzEffect } = changes; + const { nzEffect, nzDotPosition } = changes; if (nzEffect && !nzEffect.isFirstChange()) { this.switchStrategy(); @@ -173,6 +204,12 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD this.syncStrategy(); } + if (nzDotPosition && !nzDotPosition.isFirstChange()) { + this.switchStrategy(); + this.markContentActive(0); + this.syncStrategy(); + } + if (!this.nzAutoPlay || !this.nzAutoPlaySpeed) { this.clearScheduledTransition(); } else { diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts index 6e4294ce61..2288fa9ed5 100644 --- a/components/carousel/nz-carousel.spec.ts +++ b/components/carousel/nz-carousel.spec.ts @@ -18,6 +18,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy'; [nzEffect]="effect" [nzVertical]="vertical" [nzDots]="dots" + [nzDotPosition]="dotPosition" [nzDotRender]="dotRender" [nzAutoPlay]="autoPlay" [nzAutoPlaySpeed]="autoPlaySpeed" @@ -36,6 +37,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy'; export class NzTestCarouselBasicComponent { @ViewChild(NzCarouselComponent, { static: false }) nzCarouselComponent: NzCarouselComponent; dots = true; + dotPosition = 'bottom'; vertical = false; effect = 'scrollx'; array = [1, 2, 3, 4]; @@ -135,6 +137,7 @@ describe('carousel', () => { expect(carouselContents[0].nativeElement.classList).toContain('slick-active'); })); + // @deprecated 9.0.0 it('should vertical work', () => { fixture.detectChanges(); @@ -149,6 +152,12 @@ describe('carousel', () => { expect(carouselWrapper.nativeElement.firstElementChild!.classList).toContain('slick-vertical'); }); + it('should nzDotPosition work', () => { + testComponent.dotPosition = 'left'; + fixture.detectChanges(); + expect(carouselWrapper.nativeElement.firstElementChild!.classList).toContain('slick-vertical'); + }); + it('should effect change work', fakeAsync(() => { fixture.detectChanges(); tick(1000); @@ -381,8 +390,9 @@ function tickMilliseconds(fixture: ComponentFixture, seconds: number = 1): /* * Swipe a carousel. + * * @param carousel: Carousel component. - * @Distance: Positive to right. Nagetive to left. + * @param Distance: Positive to right. Negative to left. */ function swipe(carousel: NzCarouselComponent, distance: number): void { carousel.pointerDown(new MouseEvent('mousedown', { clientX: 500, clientY: 0 })); diff --git a/components/carousel/strategies/transform-strategy.ts b/components/carousel/strategies/transform-strategy.ts index 287e634fcd..ff417bf63f 100644 --- a/components/carousel/strategies/transform-strategy.ts +++ b/components/carousel/strategies/transform-strategy.ts @@ -19,7 +19,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy { private isTransitioning = false; private get vertical(): boolean { - return this.carouselComponent!.nzVertical; + return this.carouselComponent!.vertical; } dispose(): void { @@ -34,8 +34,10 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy { const activeIndex = carousel.activeIndex; if (this.contents.length) { + this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`); + if (this.vertical) { - this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`); + this.renderer.setStyle(this.slickTrackEl, 'width', `${this.unitWidth}px`); this.renderer.setStyle(this.slickTrackEl, 'height', `${this.length * this.unitHeight}px`); this.renderer.setStyle( this.slickTrackEl, @@ -43,6 +45,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy { `translate3d(0, ${-activeIndex * this.unitHeight}px, 0)` ); } else { + this.renderer.setStyle(this.slickTrackEl, 'height', `${this.unitHeight}px`); this.renderer.setStyle(this.slickTrackEl, 'width', `${this.length * this.unitWidth}px`); this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-activeIndex * this.unitWidth}px, 0, 0)`); } @@ -58,7 +61,11 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy { const { to: t } = this.getFromToInBoundary(_f, _t); const complete$ = new Subject(); - this.renderer.setStyle(this.slickTrackEl, 'transition', 'transform 500ms ease'); + this.renderer.setStyle( + this.slickTrackEl, + 'transition', + `transform ${this.carouselComponent!.nzTransitionSpeed}ms ease` + ); if (this.vertical) { this.verticalTransform(_f, _t); @@ -97,7 +104,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy { const activeIndex = this.carouselComponent!.activeIndex; - if (this.carouselComponent!.nzVertical) { + if (this.carouselComponent!.vertical) { if (!this.isDragging && this.length > 2) { if (activeIndex === this.maxIndex) { this.prepareVerticalContext(true);