Skip to content

Commit

Permalink
feat(carousel): add swipe gesture support (NG-ZORRO#1856)
Browse files Browse the repository at this point in the history
  • Loading branch information
Wendell authored and 执衡 committed Jul 22, 2018
1 parent 65c8fdc commit fa685d0
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 5 deletions.
4 changes: 3 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
"styles": [
"site/src/styles.less"
],
"scripts": []
"scripts": [
"node_modules/hammerjs/hammer.min.js"
]
},
"configurations": {
"production": {
Expand Down
1 change: 1 addition & 0 deletions components/carousel/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ A carousel component. Scales with its container.
| `[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 }>` | - |
| `[nzEnableSwipe]` | Whether to support swipe gesture (would work if only you import hammer.js in your project) | `boolean` | `true` |

#### Methods

Expand Down
1 change: 1 addition & 0 deletions components/carousel/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ subtitle: 走马灯
| `[nzVertical]` | 垂直显示 | boolean | false |
| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` ||
| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` ||
| `[nzEnableSwipe]` | 是否支持手势划动切换,仅在自行引入 hammer.js 的情形下生效 | `boolean` | `true` |
#### 方法

| 名称 | 描述 |
Expand Down
3 changes: 2 additions & 1 deletion components/carousel/nz-carousel.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div class="slick-initialized slick-slider" [class.slick-vertical]="nzVertical">
<div class="slick-list" #slickList tabindex="-1" (keydown)="onKeyDown($event)">
<div class="slick-list" #slickList tabindex="-1" (keydown)="onKeyDown($event)"
(swipeleft)="swipe('swipeleft')" (swiperight)="swipe('swiperight')" (pan)="swipeInProgress($event);">
<div class="slick-track" [style.transform]="transform" #slickTrack>
<ng-content></ng-content>
</div>
Expand Down
34 changes: 31 additions & 3 deletions components/carousel/nz-carousel.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,13 @@ import {
TemplateRef,
ViewChild
} from '@angular/core';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { toBoolean, toNumber } from '../core/util/convert';

import { NzCarouselContentDirective } from './nz-carousel-content.directive';

export type SwipeDirection = 'swipeleft' | 'swiperight';

@Component({
selector : 'nz-carousel',
preserveWhitespaces: false,
Expand Down Expand Up @@ -73,6 +72,7 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
@ViewChild('slickTrack') slickTrack: ElementRef;
@Output() nzAfterChange: EventEmitter<number> = new EventEmitter();
@Output() nzBeforeChange: EventEmitter<{ from: number; to: number }> = new EventEmitter();
@Input() nzEnableSwipe = true;

@HostListener('window:resize', [ '$event' ])
onWindowResize(e: UIEvent): void {
Expand Down Expand Up @@ -240,6 +240,34 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
}
}

swipe(action: SwipeDirection = 'swipeleft'): void {
if (!this.nzEnableSwipe) { return; }
if (action === 'swipeleft') { this.next(); }
if (action === 'swiperight') { this.pre(); }
}

/* tslint:disable:no-any */
swipeInProgress(e: any): void {
if (this.nzEffect === 'scrollx') {
const final = e.isFinal;
const scrollWidth = final ? 0 : e.deltaX * 1.2;
const totalWidth = this.elementRef.nativeElement.offsetWidth;
if (this.nzVertical) {
const totalHeight = this.elementRef.nativeElement.offsetHeight;
const scrollPercent = scrollWidth / totalWidth;
const scrollHeight = scrollPercent * totalHeight;
this.transform = `translate3d(0px, ${-this.activeIndex * totalHeight + scrollHeight}px, 0px)`;
} else {
this.transform = `translate3d(${-this.activeIndex * totalWidth + scrollWidth}px, 0px, 0px)`;
}
}
if (e.isFinal) {
this.setUpAutoPlay();
} else {
this.clearTimeout();
}
}

constructor(public elementRef: ElementRef, private renderer: Renderer2) {
}

Expand Down
16 changes: 16 additions & 0 deletions components/carousel/nz-carousel.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,22 @@ describe('carousel', () => {
tick(200);
expect(resizeSpy).toHaveBeenCalled();
}));
it('should swipe work', fakeAsync(() => {
fixture.detectChanges();
testComponent.nzCarouselComponent.swipe('swipeleft');
tick(1000);
fixture.detectChanges();
expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
}));
it('should swipeInProgress work', () => {
fixture.detectChanges();
fixture.detectChanges();
testComponent.nzCarouselComponent.swipeInProgress({ isFinal: false, deltaX: 100 });
expect(testComponent.nzCarouselComponent.transform).toBe('translate3d(120px, 0px, 0px)');
testComponent.nzCarouselComponent.swipeInProgress({ isFinal: true });
fixture.detectChanges();
expect(testComponent.nzCarouselComponent.transform).toBe('translate3d(0px, 0px, 0px)');
});
});
});

Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
"@angular/router": "^6.0.0",
"@schematics/angular": "^0.6.0",
"@stackblitz/sdk": "^1.1.1",
"@types/hammerjs": "^2.0.35",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
Expand All @@ -78,6 +79,7 @@
"conventional-changelog-cli": "^2.0.1",
"core-js": "^2.5.4",
"fs-extra": "^6.0.1",
"hammerjs": "^2.0.8",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
Expand Down
1 change: 1 addition & 0 deletions site_scripts/_site/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- Hotjar Tracking Code for ng.ant.design -->
<script>
(function(h,o,t,j,a,r){
Expand Down

0 comments on commit fa685d0

Please sign in to comment.