fix(core): enable scrolling on inline gallery

fix #1104
sachinchoolur · Aug 20, 2021 · 7742ac0 · 7742ac0
1 parent 9527000
commit 7742ac0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/lightgallery.ts b/src/lightgallery.ts
@@ -1636,7 +1636,7 @@ export class LightGallery {
         }
     }
 
-    touchMove(startCoords: Coords, endCoords: Coords): void {
+    touchMove(startCoords: Coords, endCoords: Coords, e?: TouchEvent): void {
         const distanceX = endCoords.pageX - startCoords.pageX;
         const distanceY = endCoords.pageY - startCoords.pageY;
         let allowSwipe = false;
@@ -1660,6 +1660,7 @@ export class LightGallery {
         const $currentSlide = this.getSlideItem(this.index);
 
         if (this.swipeDirection === 'horizontal') {
+            e?.preventDefault();
             // reset opacity and transition duration
             this.outer.addClass('lg-dragging');
 
@@ -1683,6 +1684,7 @@ export class LightGallery {
             );
         } else if (this.swipeDirection === 'vertical') {
             if (this.settings.swipeToClose) {
+                e?.preventDefault();
                 this.$container.addClass('lg-dragging-vertical');
 
                 const opacity = 1 - Math.abs(distanceY) / window.innerHeight;
@@ -1782,7 +1784,6 @@ export class LightGallery {
 
         if (this.settings.enableSwipe) {
             this.$inner.on('touchstart.lg', (e) => {
-                e.preventDefault();
                 this.dragOrSwipeEnabled = true;
                 const $item = this.getSlideItem(this.index);
                 if (
@@ -1803,7 +1804,6 @@ export class LightGallery {
             });
 
             this.$inner.on('touchmove.lg', (e) => {
-                e.preventDefault();
                 if (
                     isSwiping &&
                     this.touchAction === 'swipe' &&
@@ -1813,7 +1813,7 @@ export class LightGallery {
                         pageX: e.targetTouches[0].pageX,
                         pageY: e.targetTouches[0].pageY,
                     };
-                    this.touchMove(startCoords, endCoords);
+                    this.touchMove(startCoords, endCoords, e);
                     isMoved = true;
                 }
             });

diff --git a/src/plugins/zoom/lg-zoom.ts b/src/plugins/zoom/lg-zoom.ts
@@ -562,10 +562,9 @@ export default class Zoom {
                 } else {
                     clearTimeout(tapped);
                     tapped = null;
+                    event.preventDefault();
                     this.setActualSize(this.core.index, event);
                 }
-
-                event.preventDefault();
             }
         });
 
@@ -697,7 +696,6 @@ export default class Zoom {
 
         this.core.$inner.on('touchstart.lg', (e) => {
             $item = this.core.getSlideItem(this.core.index);
-            e.preventDefault();
             if (
                 e.targetTouches.length === 2 &&
                 !this.core.outer.hasClass('lg-first-slide-loading') &&
@@ -716,13 +714,13 @@ export default class Zoom {
         });
 
         this.core.$inner.on('touchmove.lg', (e) => {
-            e.preventDefault();
             if (
                 e.targetTouches.length === 2 &&
                 this.core.touchAction === 'pinch' &&
                 (this.$LG(e.target).hasClass('lg-item') ||
                     $item.get().contains(e.target))
             ) {
+                e.preventDefault();
                 const endDist = this.getTouchDistance(e);
 
                 const distance = startDist - endDist;
@@ -983,7 +981,6 @@ export default class Zoom {
         let $item = this.core.getSlideItem(this.core.index);
 
         this.core.$inner.on('touchstart.lg', (e) => {
-            e.preventDefault();
             const currentItem = this.core.galleryItems[this.core.index];
             // Allow zoom only on image
             if (!currentItem.src) {
@@ -996,6 +993,7 @@ export default class Zoom {
                 e.targetTouches.length === 1 &&
                 this.core.outer.hasClass('lg-zoomed')
             ) {
+                e.preventDefault();
                 startTime = new Date();
                 this.core.touchAction = 'zoomSwipe';
                 _LGel = this.core
@@ -1028,13 +1026,13 @@ export default class Zoom {
         });
 
         this.core.$inner.on('touchmove.lg', (e) => {
-            e.preventDefault();
             if (
                 e.targetTouches.length === 1 &&
                 this.core.touchAction === 'zoomSwipe' &&
                 (this.$LG(e.target).hasClass('lg-item') ||
                     $item.get().contains(e.target))
             ) {
+                e.preventDefault();
                 this.core.touchAction = 'zoomSwipe';
 
                 endCoords = this.getSwipeCords(e, Math.abs(this.rotateValue));