feat(carousel): add swipe gesture support (#1856)

close #1816

angular.json

@@ -24,7 +24,9 @@
             "styles": [
               "site/src/styles.less"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/hammerjs/hammer.min.js"
+            ]
           },
           "configurations": {
             "production": {

components/carousel/doc/index.en-US.md

@@ -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
 

components/carousel/doc/index.zh-CN.md

@@ -27,6 +27,7 @@ subtitle: 走马灯
 | `[nzVertical]` | 垂直显示 | boolean | false |
 | `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | 无 |
 | `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | 无 |
+| `[nzEnableSwipe]` | 是否支持手势划动切换，仅在自行引入 hammer.js 的情形下生效 | `boolean` | `true` |
 #### 方法
 
 | 名称 | 描述 |

components/carousel/nz-carousel.component.html

@@ -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>

components/carousel/nz-carousel.component.ts

@@ -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,
@@ -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 {
@@ -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) {
   }
 

components/carousel/nz-carousel.spec.ts

@@ -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)');
+    });
   });
 });
 

package.json

@@ -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",
@@ -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",

site_scripts/_site/src/index.html

@@ -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){