From b0e7884ee0aff80346c6eb9b909d2dc714489a77 Mon Sep 17 00:00:00 2001
From: Muhammed Can <mucan54@hotmail.com>
Date: Wed, 18 Oct 2023 00:55:23 +0300
Subject: [PATCH] mobile support and click redirect

---
 src/swiffy-slider-extensions.js | 64 ++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/swiffy-slider-extensions.js b/src/swiffy-slider-extensions.js
index 99e1723..36aa72a 100644
--- a/src/swiffy-slider-extensions.js
+++ b/src/swiffy-slider-extensions.js
@@ -7,8 +7,10 @@ const swiffysliderextensions = function() {
         },
 
         initSlider(sliderElement) {
-            if (sliderElement.classList.contains("slider-nav-mousedrag"))
-                sliderElement.addEventListener("mousedown", (e) => this.handleMouseDrag(e, sliderElement), { passive: true });
+            if (sliderElement.classList.contains("slider-nav-mousedrag")) {
+                sliderElement.addEventListener("mousedown", (e) => this.handleMouseDrag(e, sliderElement), {passive: true});
+                sliderElement.addEventListener("touchstart", (e) => this.handleMouseDrag(e, sliderElement), {passive: true});
+            }
         },
 
         handleMouseDrag(e, sliderElement) {
@@ -23,14 +25,14 @@ const swiffysliderextensions = function() {
             sliderElement.classList.add("dragging");
 
             const startingLeftPos = container.scrollLeft;
-            const mouseDownStartingXPos = e.clientX;
+            const mouseDownStartingXPos = e.clientX ?? e.touches[0].pageX;
             const slideWidth = container.children[0].offsetWidth + parseInt(window.getComputedStyle(container).columnGap);
             const maxLeftPosition = slideWidth * (container.children.length - 1);
             const startLeftScroll = container.scrollLeft;
             let nextSlideLeftPos = startLeftScroll;
 
             const moveDelegate = (e) => {
-                const mouseMovedXpos = e.clientX - mouseDownStartingXPos;
+                const mouseMovedXpos = (e.clientX ?? e.touches[0].pageX) - mouseDownStartingXPos;
                 const nextDraggingLeftPosition = startingLeftPos - (mouseMovedXpos * 1.8);
 
                 if (nextDraggingLeftPosition > 0 && nextDraggingLeftPosition <= maxLeftPosition) {
@@ -54,17 +56,55 @@ const swiffysliderextensions = function() {
                 }
             }
 
-            container.addEventListener('mousemove', moveDelegate, { passive: true });
-            document.addEventListener('mouseup', () => {
+            const getVisibleSliders = (e, sliderElement) => {
+                const container = sliderElement.querySelector('.slider-container');
+                //returns an array of slide elements that are fully or partially visible
+                const visibleSlides = [];
+                //We are using a grid layout and the slides left and right properties include the width of the gap, so when comparing with container width add a gap for each side of the slide gap.
+                const gapWidth = parseInt(window.getComputedStyle(container).columnGap);
+                for (const slide of container.children) {
+                    var slideScrollLeftPosition = slide.getBoundingClientRect().left - container.getBoundingClientRect().left;
+                    var slideScrollRightPosition = slideScrollLeftPosition + slide.offsetWidth - gapWidth;
+                    if (slideScrollLeftPosition >= 0 && slideScrollRightPosition <= container.offsetWidth) {
+                        visibleSlides.push(slide);
+                    }
+                }
+                return visibleSlides;
+            }
+
+            const sliderTrigger = (e) => {
                 container.removeEventListener('mousemove', moveDelegate);
+                container.removeEventListener('touchmove', moveDelegate);
                 container.style.cursor = null;
-                if (nextSlideLeftPos < 0) { nextSlideLeftPos = 0; }
-                container.scroll({
-                    left: nextSlideLeftPos,
-                    behavior: "smooth"
-                });
+
+                if(nextSlideLeftPos != maxLeftPosition && Math.abs(startingLeftPos - nextSlideLeftPos) <= 10) {
+                    currentSlider = getVisibleSliders(e, sliderElement);
+                    if (currentSlider.length > 0) {
+                        if(currentSlider[0].querySelector('a'))
+                        currentSlider[0].querySelector('a').click();
+                    }
+                }
+
+                if(nextSlideLeftPos == maxLeftPosition) {
+                    nextSlideLeftPos = 0;
+                    window.swiffyslider.slide(sliderElement, true);
+                }
+                else if (nextSlideLeftPos <= 0) {
+                    nextSlideLeftPos = 0;
+                }
+                else {
+                    container.scroll({
+                        left: nextSlideLeftPos,
+                        behavior: "smooth"
+                    });
+                }
                 this.draggingtimer = setTimeout(() => { sliderElement.classList.remove("dragging"); }, 550);
-            }, { once: true, passive: true });
+            }
+
+            container.addEventListener('mousemove', moveDelegate, { passive: true });
+            container.addEventListener('touchmove', moveDelegate, { passive: true });
+            document.addEventListener('mouseup', sliderTrigger, { once: true, passive: true });
+            document.addEventListener('touchend', sliderTrigger, { once: true, passive: true });
         }
     };
 }();