fix(core): Slide bug with touch scroll, related to #465

MurhafSousli · Oct 4, 2022 · a26d63f · a26d63f
1 parent 32aca2c
commit a26d63f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/projects/ng-gallery/src/lib/components/gallery-slider.component.ts b/projects/ng-gallery/src/lib/components/gallery-slider.component.ts
@@ -150,7 +150,7 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
 
   private activateGestures() {
     if (typeof Hammer !== 'undefined') {
-      let direction: 'VERTICAL' | 'HORIZONTAL';
+      let direction: number;
       let touchAction: 'pan-x' | 'pan-y' | 'compute' = 'compute';
 
       if (this.config.slidingDirection === SlidingDirection.Horizontal) {
@@ -170,24 +170,23 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
       this._hammer.get('pan').set({ direction });
 
       this._zone.runOutsideAngular(() => {
-        this._hammer.on('panmove', (e) => {
+        this._hammer.on('pan', (e) => {
           switch (this.config.slidingDirection) {
             case SlidingDirection.Horizontal:
-              this.updateSlider({ value: e.deltaX, instant: true });
+              if (e.isFinal) {
+                this.updateSlider({ value: 0, instant: false });
+                this.horizontalPan(e);
+              } else {
+                this.updateSlider({ value: e.deltaX, instant: true });
+              }
               break;
             case SlidingDirection.Vertical:
-              this.updateSlider({ value: e.deltaY, instant: true });
-          }
-        });
-
-        this._hammer.on('panend', (e) => {
-          this.updateSlider({ value: 0, instant: false });
-          switch (this.config.slidingDirection) {
-            case SlidingDirection.Horizontal:
-              this.horizontalPan(e);
-              break;
-            case SlidingDirection.Vertical:
-              this.verticalPan(e);
+              if (e.isFinal) {
+                this.updateSlider({ value: 0, instant: false });
+                this.verticalPan(e);
+              } else {
+                this.updateSlider({ value: e.deltaY, instant: true });
+              }
           }
         });
       });

diff --git a/projects/ng-gallery/src/lib/components/gallery-thumbs.component.ts b/projects/ng-gallery/src/lib/components/gallery-thumbs.component.ts
@@ -146,15 +146,22 @@ export class GalleryThumbsComponent implements OnInit, OnChanges, OnDestroy {
     if (!this.config.disableThumb && typeof Hammer !== 'undefined') {
 
       let direction: number;
+      let touchAction: 'pan-x' | 'pan-y' | 'compute' = 'compute';
 
       switch (this.config.thumbPosition) {
         case ThumbnailsPosition.Right:
         case ThumbnailsPosition.Left:
           direction = Hammer.DIRECTION_VERTICAL;
+          if (this.config.reserveGesturesAction) {
+            touchAction = 'pan-y';
+          }
           break;
         case ThumbnailsPosition.Top:
         case ThumbnailsPosition.Bottom:
           direction = Hammer.DIRECTION_HORIZONTAL;
+          if (this.config.reserveGesturesAction) {
+            touchAction = 'pan-x';
+          }
           break;
       }
 
@@ -186,18 +193,20 @@ export class GalleryThumbsComponent implements OnInit, OnChanges, OnDestroy {
     switch (this.config.thumbPosition) {
       case ThumbnailsPosition.Right:
       case ThumbnailsPosition.Left:
-        this.updateSlider({ value: e.deltaY, instant: true });
         if (e.isFinal) {
           this.updateSlider({ value: 0, instant: false });
           this.verticalPan(e);
+        } else {
+          this.updateSlider({ value: e.deltaY, instant: true });
         }
         break;
       case ThumbnailsPosition.Top:
       case ThumbnailsPosition.Bottom:
-        this.updateSlider({ value: e.deltaX, instant: true });
         if (e.isFinal) {
           this.updateSlider({ value: 0, instant: false });
           this.horizontalPan(e);
+        } else {
+          this.updateSlider({ value: e.deltaX, instant: true });
         }
     }
   }