Merge pull request #42 from VagrantAI-c/development

Release
VagrantAI-c · Sep 26, 2019 · 986881e · 986881e
2 parents b30a7ce + 57a1508
commit 986881e
Showing 1 changed file with 24 additions and 26 deletions.
diff --git a/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts b/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts
@@ -33,7 +33,6 @@ export class CarouselEngineComponent implements OnInit, OnDestroy {
     private mouseLeaveDestructor: () => void;
     private keyboardListener: () => void;
     private containerScrollListener: () => void;
-    private documentScrollListener: () => void;
     private hammerManager: HammerManager;
 
     constructor(
@@ -61,7 +60,6 @@ export class CarouselEngineComponent implements OnInit, OnDestroy {
         this.destroyHammer();
         this.destroyKeyboardListeners();
         this.destroyElementScrollListener();
-        this.destroyDocumentScrollListener();
         this.destroyed$.next();
         this.destroyed$.complete();
     }
@@ -115,12 +113,6 @@ export class CarouselEngineComponent implements OnInit, OnDestroy {
         }
     }
 
-    private destroyDocumentScrollListener(): void {
-        if (this.documentScrollListener) {
-            this.documentScrollListener();
-        }
-    }
-
     private transformValueChanges(): Observable<string> {
         return this.carousel.carouselStateChanges()
             .pipe(
@@ -209,33 +201,39 @@ export class CarouselEngineComponent implements OnInit, OnDestroy {
                     return;
                 }
                 let lastDelta = 0;
-                /** Whether scroll event should be prevented */
-                let panStarted = false;
+                let lastTouchAction: string;
+
+                this.hammerManager.on('panstart', (event: HammerInput) => {
+                    // Checking whether pan started with horizontal gesture,
+                    // we should block all scroll attempts during current pan session then
+                    // tslint:disable-next-line: no-bitwise
+                    if (event.offsetDirection & Hammer.DIRECTION_HORIZONTAL) {
+                        lastDelta = event.deltaX;
+                        this.carousel.dragStart();
+                        lastTouchAction = this.elementRef.nativeElement.style.touchAction;
+                        this.renderer.setStyle(this.elementRef.nativeElement, 'touch-action', 'none');
+                    }
+                });
+
                 this.hammerManager.on('panright panleft', (event: HammerInput) => {
                     // We should not treat vertical pans as horizontal.
                     // Be adviced that pan right/left events still counts
                     // vertical pans as legitimate horizontal pan.
-                    if (panStarted) {
+
+                    // Next check clarifies that initial gesture was horizontal,
+                    // otherwise this variable would be falsy
+                    if (lastTouchAction) {
                         this.carousel.drag(event.center.x, event.center.x + (event.deltaX - lastDelta));
                         lastDelta = event.deltaX;
                     }
                 });
-                this.hammerManager.on('panstart', (event: HammerInput) => {
-                    // Checking whether pan started with horizontal gesture,
-                    // we should block all scroll attempts during current pan session then
-                    // tslint:disable-next-line: no-bitwise
-                    panStarted = Boolean(event.offsetDirection & Hammer.DIRECTION_HORIZONTAL);
-                    lastDelta = event.deltaX;
-                    this.carousel.dragStart();
-                    this.documentScrollListener = this.renderer.listen(this.document, 'scroll', (scrollEvent: Event) => {
-                        if (panStarted) {
-                            scrollEvent.preventDefault();
-                        }
-                    });
-                });
+
                 this.hammerManager.on('panend', (event: HammerInput) => {
-                    this.carousel.dragEnd(event.deltaX);
-                    this.destroyDocumentScrollListener();
+                    if (lastTouchAction) {
+                        this.carousel.dragEnd(event.deltaX);
+                        this.renderer.setStyle(this.elementRef.nativeElement, 'touch-action', lastTouchAction);
+                    }
+                    lastTouchAction = null;
                 });
             });
     }