Skip to content

Commit

Permalink
feat(module:carousel): add enhancement API and methods (#688)
Browse files Browse the repository at this point in the history 
close #652
  • Loading branch information
@hsuanxyz @vthinkxie
hsuanxyz authored and vthinkxie committed Dec 6, 2017
1 parent b7cc148 commit c22dad3
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 49 deletions.
86 changes: 73 additions & 13 deletions src/components/carousel/nz-carousel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import {
Renderer2,
OnDestroy,
Input,
Output,
ElementRef,
ViewEncapsulation
ViewEncapsulation,
EventEmitter,
HostListener
} from '@angular/core';
import { NzCarouselContentDirective } from './nz-carousel-content.directive';
import { toBoolean } from '../util/convert';
Expand Down Expand Up @@ -41,11 +44,13 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
private _autoPlay = false;
private _dots = true;
private _vertical = false;
private _pauseOnHover = true;
activeIndex = 0;
transform = 'translate3d(0px, 0px, 0px)';
interval;
slideContents;

_autoPlaySpeed = 3000;
_mouseHover = false;
@ContentChildren(NzCarouselContentDirective)
set _slideContents(value) {
this.slideContents = value;
Expand All @@ -54,7 +59,52 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {

@ViewChild('slickList') slickList: ElementRef;
@ViewChild('slickTrack') slickTrack: ElementRef;
@HostBinding('class.ant-carousel') _nzCarousel = true;
@Input() nzEffect = 'scrollx';
@Output() nzAfterChange: EventEmitter<number> = new EventEmitter();
@Output() nzBeforeChange: EventEmitter<{form: number; to: number}> = new EventEmitter();
@Input()
get nzAutoPlaySpeed(): number {
return this._autoPlaySpeed;
}

set nzAutoPlaySpeed(speed: number) {
// css transition speed is 500ms
this._autoPlaySpeed = Math.max(speed, 500);
}

@HostListener('mouseenter')
_onMouseenter() {
this._mouseHover = true;
if (this.nzAutoPlay && this.nzPauseOnHover) {
this.clearInterval();
}
}

@HostListener('mouseleave')
_onMouseleave() {
this._mouseHover = false;
if (!this.interval && this.nzAutoPlay) {
this.createInterval();
}
}

get _nextIndex(): number {
return this.activeIndex < this.slideContents.length - 1 ? (this.activeIndex + 1) : 0;
}

get _prevIndex(): number {
return this.activeIndex > 0 ? (this.activeIndex - 1) : (this.slideContents.length - 1)
}

@Input()
set nzPauseOnHover(value: boolean) {
this._pauseOnHover = toBoolean(value);
}

get nzPauseOnHover(): boolean {
return this._pauseOnHover;
}

@Input()
set nzDots(value: boolean) {
Expand Down Expand Up @@ -88,9 +138,11 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
}

setActive(content, i) {
if (this.nzAutoPlay) {
if ((this.nzAutoPlay && !this.nzPauseOnHover) || (this.nzAutoPlay && this.nzPauseOnHover && !this._mouseHover)) {
this.createInterval();
}
const beforeIndex = this.slideContents.toArray().findIndex(slide => slide.isActive);
this.nzBeforeChange.emit({ form: beforeIndex, to: i });
this.activeIndex = i;
if (this.nzEffect !== 'fade') {
if (!this.nzVertical) {
Expand All @@ -99,10 +151,9 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
this.transform = `translate3d(0px, ${-this.activeIndex * this.hostElement.nativeElement.offsetHeight}px, 0px)`;
}
}
this.slideContents.forEach(slide => {
slide.isActive = false;
});
this.slideContents.forEach(slide => slide.isActive = false);
content.isActive = true;
this.nzAfterChange.emit(i);
}

ngAfterViewInit() {
Expand Down Expand Up @@ -146,13 +197,8 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
createInterval() {
this.clearInterval();
this.interval = setInterval(_ => {
if (this.activeIndex < this.slideContents.length - 1) {
this.activeIndex++;
} else {
this.activeIndex = 0;
}
this.setActive(this.slideContents.toArray()[ this.activeIndex ], this.activeIndex);
}, 3000);
this.setActive(this.slideContents.toArray()[this._nextIndex], this._nextIndex);
}, this.nzAutoPlaySpeed);
}

clearInterval() {
Expand All @@ -162,6 +208,20 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
}
}

public nzSlickNext() {
this.setActive(this.slideContents.toArray()[this._nextIndex], this._nextIndex);
}

public nzSlickPrev() {
this.setActive(this.slideContents.toArray()[this._prevIndex], this._prevIndex);
}

public nzSlickGoTo(index: number) {
if (index >= 0 && index <= this.slideContents.length - 1) {
this.setActive(this.slideContents.toArray()[index], index);
}
}

ngOnDestroy() {
this.clearInterval();
}
Expand Down
131 changes: 95 additions & 36 deletions src/showcase/nz-demo-carousel/nz-demo-carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,44 +48,103 @@ <h2 id="API"><span>API</span>
</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>[nz-carousel-content]</td>
<td>用于标识滚动的slide内容</td>
<td>Directive</td>
<td>-</td>
</tr>
<tr>
<td>nzEffect</td>
<td>动画效果函数，可取 scrollx, fade</td>
<td>String</td>
<td>scrollx</td>
</tr>
<tr>
<td>nzDots</td>
<td>是否显示面板指示点</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>nzVertical</td>
<td>垂直显示</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>nzAutoPlay</td>
<td>是否自动切换</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>[nz-carousel-content]</td>
<td>用于标识滚动的slide内容</td>
<td>Directive</td>
<td>-</td>
</tr>
<tr>
<td>nzEffect</td>
<td>动画效果函数，可取 scrollx, fade</td>
<td>String</td>
<td>scrollx</td>
</tr>
<tr>
<td>nzDots</td>
<td>是否显示面板指示点</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>nzVertical</td>
<td>垂直显示</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>nzAutoPlay</td>
<td>是否自动切换</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>nzAutoPlaySpeed</td>
<td>自动切换速度, 单位毫秒</td>
<td>Number</td>
<td>3000</td>
</tr>
<tr>
<td>nzPauseOnHover</td>
<td>鼠标悬停暂停</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>nzAfterChange</td>
<td>切换面板后的回调, 参数为当前索引</td>
<td>Function(number)</td>
<td>无</td>
</tr>
<tr>
<td>nzBeforeChange</td>
<td>切换面板前的回调, 参数为当前的索引与被切换到的索引</td>
<td>{{ 'Function({ form: number; to: number})' }}</td>
<td>无</td>
</tr>
</tbody>
</table>

<h2>
<span>Methods</span>
<small><a href="https://angular.cn/guide/component-interaction">使用方法</a></small>
</h2>
<table>
<thead>
<tr>
<th>方法名</th>
<th>参数</th>
<th>说明</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzSlickNext</td>
<td>无</td>
<td>切换到下一个面板</td>
<td>无</td>
</tr>
<tr>
<td>nzSlickPrev</td>
<td>无</td>
<td>切换到上一个面板</td>
<td>无</td>
</tr>
<tr>
<td>nzSlickGoTo</td>
<td>index: number</td>
<td>切换到指定索引面板</td>
<td>无</td>
</tr>
</tbody>
</table>
</section>
Expand Down

0 comments on commit c22dad3

Please sign in to comment.