fix(core): Setting gestures to false breaks the gallery, closes #464, #…

…467 and #469
MurhafSousli · Oct 3, 2022 · 0fce03a · 0fce03a
1 parent 82ea76d
commit 0fce03a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 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
@@ -108,6 +108,19 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
+    this._zone.runOutsideAngular(() => {
+      // Set styles manually avoid triggering change detection on dragging
+      this._sliderStateSub$ = this.sliderState$.pipe(
+        tap((state: SliderState) => {
+          this.slider.style.transform = state.style.transform;
+          this.slider.style.height = state.style.height;
+          this.slider.style.width = state.style.width;
+          this.slider.classList.toggle('g-no-transition', state.instant);
+          this.container.style.transform = this.zoom.transform;
+        })
+      ).subscribe();
+    });
+
     if (this.config.gestures && typeof Hammer !== 'undefined') {
 
       const direction = this.config.slidingDirection === SlidingDirection.Horizontal
@@ -139,17 +152,6 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
               }
           }
         });
-
-        // Set styles manually avoid triggering change detection on dragging
-        this._sliderStateSub$ = this.sliderState$.pipe(
-          tap((state: SliderState) => {
-            this.slider.style.transform = state.style.transform;
-            this.slider.style.height = state.style.height;
-            this.slider.style.width = state.style.width;
-            this.slider.classList.toggle('g-no-transition', state.instant);
-            this.container.style.transform = this.zoom.transform;
-          })
-        ).subscribe();
       });
     }
 
@@ -162,6 +164,12 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  ngAfterViewInit() {
+    // setTimeout(() => {
+    //   this.updateSlider({ value: 0, instant: true });
+    // }, 200)
+  }
+
   ngOnDestroy() {
     this._hammer?.destroy();
     this._resizeSub$?.unsubscribe();

diff --git a/projects/ng-gallery/src/lib/components/gallery-thumbs.component.ts b/projects/ng-gallery/src/lib/components/gallery-thumbs.component.ts
@@ -111,6 +111,18 @@ export class GalleryThumbsComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
+    this._zone.runOutsideAngular(() => {
+      // Set styles manually avoid triggering change detection on dragging
+      this._sliderStateSub$ = this.sliderState$.pipe(
+        tap((state: SliderState) => {
+          this.slider.style.transform = state.style.transform;
+          this.slider.style.height = state.style.height;
+          this.slider.style.width = state.style.width;
+          this.slider.classList.toggle('g-no-transition', state.instant);
+        })
+      ).subscribe();
+    });
+
     if (this.config.gestures && !this.config.disableThumb && typeof Hammer !== 'undefined') {
 
       let direction: number;
@@ -139,16 +151,6 @@ export class GalleryThumbsComponent implements OnInit, OnChanges, OnDestroy {
           case ThumbnailsMode.Free:
             this._hammer.on('pan', (e) => this.freeMode(e));
         }
-
-        // Set styles manually avoid triggering change detection on dragging
-        this._sliderStateSub$ = this.sliderState$.pipe(
-          tap((state: SliderState) => {
-            this.slider.style.transform = state.style.transform;
-            this.slider.style.height = state.style.height;
-            this.slider.style.width = state.style.width;
-            this.slider.classList.toggle('g-no-transition', state.instant);
-          })
-        ).subscribe();
       });
     }
   }