Skip to content

Commit

Permalink
feat(module:carousel): support dot position (#3575)
Browse files Browse the repository at this point in the history
* feat(module:carousel): support dot position

* fix(module:carousel): fix content height in vertical mode

* fix: typo
  • Loading branch information
Wendell authored and vthinkxie committed Jun 22, 2019
1 parent 3c82f26 commit 0566331
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 92 deletions.
16 changes: 16 additions & 0 deletions components/carousel/demo/position.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
order: 1
title:
zh-CN: 位置
en-US: Position
---

## zh-CN

位置有 4 个方向。

## en-US

There are four positions available.


42 changes: 42 additions & 0 deletions components/carousel/demo/position.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-carousel-position',
template: `
<nz-radio-group [(ngModel)]="dotPosition">
<label nz-radio-button nzValue="bottom">Bottom</label>
<label nz-radio-button nzValue="top">Top</label>
<label nz-radio-button nzValue="left">Left</label>
<label nz-radio-button nzValue="right">Right</label>
</nz-radio-group>
<nz-carousel [nzDotPosition]="dotPosition">
<div nz-carousel-content *ngFor="let index of array">
<h3>{{ index }}</h3>
</div>
</nz-carousel>
`,
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';
}
16 changes: 0 additions & 16 deletions components/carousel/demo/vertical.md

This file was deleted.

31 changes: 0 additions & 31 deletions components/carousel/demo/vertical.ts

This file was deleted.

22 changes: 11 additions & 11 deletions components/carousel/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<number>` | - |
| `(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<number>` | - | |
| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | |

#### Methods

Expand Down
22 changes: 11 additions & 11 deletions components/carousel/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<number>` | - |
| `(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<number>` | - | |
| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | |

#### 方法

Expand Down
22 changes: 11 additions & 11 deletions components/carousel/nz-carousel-definitions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<NzCarouselContentDirective>;
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<NzCarouselStrategyRegistryItem[]>(
'nz-carousel-custom-strategies'
);

export interface PointerVector {
x: number;
y: number;
Expand All @@ -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<CarouselStrategyRegistryItem[]>(
'nz-carousel-custom-strategies'
);
9 changes: 8 additions & 1 deletion components/carousel/nz-carousel.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,14 @@
</div>
</div>
<!-- Render dots. -->
<ul class="slick-dots" *ngIf="nzDots">
<ul
class="slick-dots"
*ngIf="nzDots"
[class.slick-dots-top]="nzDotPosition === 'top'"
[class.slick-dots-bottom]="nzDotPosition === 'bottom'"
[class.slick-dots-left]="nzDotPosition === 'left'"
[class.slick-dots-right]="nzDotPosition === 'right'"
>
<li
*ngFor="let content of carouselContents; let i = index"
[class.slick-active]="content.isActive"
Expand Down
49 changes: 43 additions & 6 deletions components/carousel/nz-carousel.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import { Platform } from '@angular/cdk/platform';
import { DOCUMENT } from '@angular/common';
import {
isDevMode,
AfterContentInit,
AfterViewInit,
ChangeDetectionStrategy,
Expand Down Expand Up @@ -39,9 +40,10 @@ import { takeUntil, throttleTime } from 'rxjs/operators';

import { NzCarouselContentDirective } from './nz-carousel-content.directive';
import {
CarouselStrategyRegistryItem,
FromToInterface,
NzCarouselDotPosition,
NzCarouselEffects,
NzCarouselStrategyRegistryItem,
NZ_CAROUSEL_CUSTOM_STRATEGIES,
PointerVector
} from './nz-carousel-definitions';
Expand All @@ -57,7 +59,7 @@ import { NzCarouselTransformStrategy } from './strategies/transform-strategy';
preserveWhitespaces: false,
templateUrl: './nz-carousel.component.html',
host: {
'[class.ant-carousel-vertical]': 'nzVertical'
'[class.ant-carousel-vertical]': 'vertical'
},
styles: [
`
Expand Down Expand Up @@ -89,11 +91,39 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
@Input() nzEffect: NzCarouselEffects = 'scrollx';
@Input() @InputBoolean() nzEnableSwipe = true;
@Input() @InputBoolean() nzDots: boolean = true;
@Input() @InputBoolean() nzVertical: boolean = false;
@Input() @InputBoolean() nzAutoPlay = false;
@Input() @InputNumber() nzAutoPlaySpeed = 3000;
@Input() @InputNumber() nzTransitionSpeed = 500;

@Input()
@InputBoolean()
get nzVertical(): boolean {
return this.vertical;
}

set nzVertical(value: boolean) {
if (isDevMode()) {
console.warn(`'nzVertical' is deprecated and will be removed in 9.0.0. Please use 'nzDotPosition' instead.`);
}
this.vertical = value;
}

@Input()
set nzDotPosition(value: NzCarouselDotPosition) {
this._dotPosition = value;
if (value === 'left' || value === 'right') {
this.vertical = true;
} else {
this.vertical = false;
}
}

get nzDotPosition(): NzCarouselDotPosition {
return this._dotPosition;
}

private _dotPosition: NzCarouselDotPosition = 'bottom';

@Output() readonly nzBeforeChange = new EventEmitter<FromToInterface>();
@Output() readonly nzAfterChange = new EventEmitter<number>();

Expand All @@ -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<void>();
Expand All @@ -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');
Expand Down Expand Up @@ -165,14 +196,20 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
}

ngOnChanges(changes: SimpleChanges): void {
const { nzEffect } = changes;
const { nzEffect, nzDotPosition } = changes;

if (nzEffect && !nzEffect.isFirstChange()) {
this.switchStrategy();
this.markContentActive(0);
this.syncStrategy();
}

if (nzDotPosition && !nzDotPosition.isFirstChange()) {
this.switchStrategy();
this.markContentActive(0);
this.syncStrategy();
}

if (!this.nzAutoPlay || !this.nzAutoPlaySpeed) {
this.clearScheduledTransition();
} else {
Expand Down
12 changes: 11 additions & 1 deletion components/carousel/nz-carousel.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy';
[nzEffect]="effect"
[nzVertical]="vertical"
[nzDots]="dots"
[nzDotPosition]="dotPosition"
[nzDotRender]="dotRender"
[nzAutoPlay]="autoPlay"
[nzAutoPlaySpeed]="autoPlaySpeed"
Expand All @@ -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];
Expand Down Expand Up @@ -135,6 +137,7 @@ describe('carousel', () => {
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
}));

// @deprecated 9.0.0
it('should vertical work', () => {
fixture.detectChanges();

Expand All @@ -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);
Expand Down Expand Up @@ -381,8 +390,9 @@ function tickMilliseconds<T>(fixture: ComponentFixture<T>, 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 }));
Expand Down
Loading

0 comments on commit 0566331

Please sign in to comment.