Merge pull request #238 from activebridge/fix/carousel

Fix desktop, IOS carousel js logic
activebridge · Aug 28, 2024 · f5536c3 · f5536c3
2 parents d73bf01 + 8df11a9
commit f5536c3
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 91 deletions.
diff --git a/_includes/solutions_subpages_carousel.html b/_includes/solutions_subpages_carousel.html
@@ -1,5 +1,5 @@
 <div class="carousel-scroll" >
-  <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+  <div class="carousel-scroll__scroller" data-scroll="scroller">
     {% for item in site.data.solutions.industries.applications %}
       <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
         <h2 class="animate-visibility__title">{{ item.title }}</h2>

diff --git a/_includes/testimonials_carousel.html b/_includes/testimonials_carousel.html
@@ -1,5 +1,5 @@
 <div class="carousel-scroll" >
-  <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+  <div class="carousel-scroll__scroller" data-scroll="scroller">
     {% for item in site.data.testimonials.all %}
       <div class="carousel-scroll__animate-visibility animate-visibility with-opacity testimonials" data-scroll="item">
         <h2 class="animate-visibility__title">{{ item.title }}</h2>

diff --git a/_sass/carousel.scss b/_sass/carousel.scss
@@ -15,7 +15,6 @@
     margin: 0 auto;
     scrollbar-width: none;
     perspective: 1000px;
-    touch-action: pan-y;
     &::-webkit-scrollbar { display: none; }
   }
 

diff --git a/assets/js/carousel.js b/assets/js/carousel.js
@@ -1,14 +1,14 @@
 const setCarousel = (scroller) => {
-  const mainSection = document.querySelector('.body-content__main-section');
-  const items = scroller.querySelectorAll('[data-scroll="item"]');
-  const mobileStep = screen.width <= 768 ? scroller.children[0].offsetWidth/2 : 0;
+  if (scroller.children.length <= 4 ) scroller.innerHTML += scroller.innerHTML;
+
+  const items = scroller.querySelectorAll('.animate-visibility');
+  const mobileStep = screen.width <= 768 ? scroller.children[0].offsetWidth / 2 : 0;
 
   let clones = [];
   let disableScroll = false;
   let scrollWidth = 0;
   let scrollPos = 0;
   let clonesWidth = 0;
-  let isScrolling = false;
   let isDragging = false;
 
   scroller.innerHTML += scroller.innerHTML;
@@ -24,10 +24,9 @@ const setCarousel = (scroller) => {
 
   clones = scroller.querySelectorAll('.js-clone');
 
-  const getClonesWidth = () => {
+  const getClonesWidth = () =>{
     clonesWidth = 0;
     clones.forEach(clone => { clonesWidth += clone.offsetWidth; });
-
     return clonesWidth;
   }
 
@@ -46,12 +45,12 @@ const setCarousel = (scroller) => {
     if (!disableScroll) {
       scrollPos = Math.round(getScrollPos() / 100) * 100;
       if (clonesWidth + scrollPos >= scrollWidth) {
-        setScrollPos(clonesWidth + mobileStep);
+        setScrollPos(clonesWidth);
         disableScroll = true;
-      } else if (scrollPos == 0 ) {
+      } else if (scrollPos == 0) {
         setScrollPos(scrollWidth - clonesWidth * 2);
         disableScroll = true;
-      } else if(scrollPos <= mobileStep ){
+      } else if (scrollPos <= mobileStep) {
         setScrollPos(scrollWidth - clonesWidth * 2 + mobileStep);
         disableScroll = true;
       }
@@ -63,111 +62,109 @@ const setCarousel = (scroller) => {
     }
   }
 
-  const easeInOutQuad = (t, b, c, d) => {
-    t /= d / 2;
-    if (t < 1) return c / 2 * t * t + b;
-    t--;
-    return -c / 2 * (t * (t - 2) - 1) + b;
-  }
-
-  const smoothScroll = (element, to) => {
-    if (isScrolling) return;
-    isScrolling = true;
-
-    const start = element.scrollLeft;
-    const change = to - start;
-    const duration = 500;
-    let currentTime = 0;
-
-    const animateScroll = () => {
-      currentTime += 20;
-      const val = easeInOutQuad(currentTime, start, change, duration);
-      element.scrollLeft = val;
-
-      if (currentTime < duration) {
-        requestAnimationFrame(animateScroll);
-      } else {
-        isScrolling = false;
-        requestAnimationFrame(scrollUpdate);
-      }
-    }
-
-    animateScroll();
-  }
-
-  const handleWheelEvent = (e) => {
-    e.preventDefault();
-    const direction = e.shiftKey ? Math.sign(e.deltaY) : Math.sign(e.deltaX);
-
-    if (Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.shiftKey) {
-      const delta = direction * scroller.children[0].offsetWidth;
-      smoothScroll(scroller, scroller.scrollLeft + delta);
-    } else {
-      const mainBlock = screen.width <= 768 ? mainSection : window;
-      mainBlock.scrollBy(0, e.deltaY);
-    }
-  }
-
-  scroller.addEventListener("click", (event) => {
+  scroller.addEventListener('click', (event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const clickX = event.clientX - rect.left;
     const middle = rect.width / 2;
 
     if (clickX > middle) {
-      smoothScroll(scroller, scroller.scrollLeft + scroller.children[1].offsetWidth);
+      scroller.scrollTo({
+        left: scroller.scrollLeft + scroller.children[1].offsetWidth,
+        behavior: 'smooth'
+      });
     } else {
-      smoothScroll(scroller, scroller.scrollLeft - scroller.children[1].offsetWidth);
+      scroller.scrollTo({
+        left: scroller.scrollLeft - scroller.children[1].offsetWidth,
+        behavior: 'smooth'
+      });
     }
     isDragging = false;
   });
 
-  let startX, deltaX, currentX, delta;
+  let isDesktopScrolling;
+  scroller.addEventListener('scroll', (event) => {
+    const target = event.target;
+    const offsetWidth = target.offsetWidth;
+
+    const checkPos = () => {
+      [...target.children].map(e => {
+        const toCenter = Math.abs(window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2);
+        const toCenter2 = window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2;
+        const viewport = toCenter / offsetWidth * 100;
+        const viewport2 = toCenter2 / offsetWidth * 100;
+        e.style.setProperty('--viewport', viewport);
+        e.style.setProperty('--viewport2', viewport2);
+      });
+    };
+    checkPos();
+    scrollUpdate();
+
+    if(screen.width >= 768 ) {
+      clearTimeout(isDesktopScrolling);
+      isDesktopScrolling = setTimeout(() => {
+        onScrollStop();
+      }, 100);
+
+      function onScrollStop() {
+        scroller.scrollTo({
+          left: scroller.children[0].offsetWidth * Math.round(scroller.scrollLeft / scroller.children[0].offsetWidth),
+          behavior: 'smooth'
+        });
+      };
+    }
+  });
+
+  let startX, deltaX, currentX, halfOfCard, startY, deltaY, currentY, isHorizontalScroll;
 
   const onTouchStart = (event) => {
     startX = event.touches[0].pageX;
+    startY = event.touches[0].pageY;
     deltaX = 0;
     currentX = 0;
-    delta = 0;
+    currentY = 0;
+    halfOfCard = 0;
+    deltaY = 0;
+    isHorizontalScroll = undefined;
   }
 
   const onTouchMove = (event) => {
+    if (event.touches.length > 1) return;
+
     isDragging = true;
     currentX = event.touches[0].pageX;
+    currentY = event.touches[0].pageY;
     deltaX = currentX - startX;
-    delta = currentX - startX > 0 ? -1 : 1;
-    scroller.scrollLeft -= deltaX;
+    deltaY = currentY - startY;
+    const scrollDelta = currentX - startX > 0 ? -1 : 1;
+    halfOfCard = screen.width <= 768 ? (scroller.children[0].offsetWidth/2) * scrollDelta : 0;
+    if (typeof isHorizontalScroll === 'undefined') isHorizontalScroll = Math.abs(deltaY) > Math.abs(deltaX);
+
+    if (!isHorizontalScroll) {
+      event.preventDefault();
+      scroller.scrollLeft -= deltaX;
+    }
+
     startX = currentX;
+    startY = currentY;
   }
 
   const onTouchEnd = () => {
-    if (isDragging) {
-      const scrollToPos = scroller.children[0].offsetWidth * Math.round(scroller.scrollLeft / scroller.children[0].offsetWidth) + mobileStep * delta;
-      smoothScroll(scroller, scrollToPos);
-      isDragging = false;
+    if (!isHorizontalScroll && isDragging) {
+      setTimeout(() => {
+        scroller.scrollTo({
+          left: scroller.children[0].offsetWidth * Math.round(scroller.scrollLeft / scroller.children[0].offsetWidth) + halfOfCard,
+          behavior: 'smooth'
+        });
+      }, 0);
     }
+    isDragging = false;
   }
 
-  scroller.addEventListener('wheel', handleWheelEvent, { passive: false });
   scroller.addEventListener('touchstart', onTouchStart, { passive: false });
   scroller.addEventListener('touchmove', onTouchMove, { passive: false });
   scroller.addEventListener('touchend', onTouchEnd, { passive: false });
 }
 
-function loop({ target, target: { offsetWidth } }) {
-  const checkPos = () => {
-    [...target.children].map(e => {
-      const toCenter = Math.abs(window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2)
-      const toCenter2 = window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2
-      const viewport = toCenter / offsetWidth * 100
-      const viewport2 = toCenter2 / offsetWidth * 100
-      e.style.setProperty('--viewport', viewport)
-      e.style.setProperty('--viewport2', viewport2)
-    })
-  }
-  requestAnimationFrame(checkPos);
-}
-window.loop = loop;
-
 document.addEventListener("DOMContentLoaded", () => {
   const carousels = document.querySelectorAll('[data-scroll="scroller"]');
   carousels.forEach((element) => setCarousel(element));

diff --git a/expertise.html b/expertise.html
@@ -41,7 +41,7 @@ <h2 class="message inria-bold">{{ site.data.expertise.technologies.subtitle }}</
       <p class="block-sub-title">{{ site.data.expertise.industries.title }}</p>
     </div>
     <div class="carousel-scroll" >
-      <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+      <div class="carousel-scroll__scroller" data-scroll="scroller">
         {% for element in site.data.expertise.industries.all %}
           <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
             <h2 class="animate-visibility__title">{{ element.title }}</h2>

diff --git a/index.html b/index.html
@@ -132,7 +132,7 @@ <h2 class="message inria-bold">{{ site.data.index.build_great_product }}</h2>
       <p class="description">{{ site.data.index.help_businesses }}</p>
     </div>
     <div class="carousel-scroll" >
-      <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+      <div class="carousel-scroll__scroller" data-scroll="scroller">
         {% for item in site.data.index.solutions %}
           <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
             <h2 class="animate-visibility__title">{{ item.title }}</h2>

diff --git a/reviews.html b/reviews.html
@@ -57,7 +57,7 @@ <h1 class="page-title white-text">{{ site.data.testimonials.title }}</h1>
       <h2 class="message inria-bold white-text">{{ site.data.testimonials.solutions.description }}</h2>
     </div>
     <div class="carousel-scroll" >
-      <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+      <div class="carousel-scroll__scroller" data-scroll="scroller">
         {% for item in site.data.testimonials.solutions.all %}
           <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
             <h2 class="animate-visibility__title">{{ item.title }}</h2>

diff --git a/services.html b/services.html
@@ -30,7 +30,7 @@ <h2 class="block-cera-title">{{ site.data.services.web_services.title }}</h2>
     </div>
     <div class="carousel-background">
       <div class="carousel-scroll" >
-        <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+        <div class="carousel-scroll__scroller" data-scroll="scroller">
           {% for item in site.data.services.web_services.all %}
             <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
               <h2 class="animate-visibility__title">{{ item.title }}</h2>
@@ -57,7 +57,7 @@ <h2 class="block-cera-title white-text">{{ site.data.services.custom_ror_dev_ser
       <p class="description white-text">{{ site.data.services.custom_ror_dev_services.description }}</p>
     </div>
     <div class="carousel-scroll" >
-      <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+      <div class="carousel-scroll__scroller" data-scroll="scroller">
         {% for item in site.data.services.custom_ror_dev_services.all %}
           <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
             <h2 class="animate-visibility__title">{{ item.title }}</h2>

diff --git a/solutions.html b/solutions.html
@@ -62,7 +62,7 @@ <h1 class="block-inria-title">{{ site.data.solutions.title }}</h1>
       <h2 class="block-cera-title">{{site.data.solutions.industries.title}}</h2>
     </div>
     <div class="carousel-scroll" >
-      <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+      <div class="carousel-scroll__scroller" data-scroll="scroller">
         {% for item in site.data.solutions.industries.all %}
           <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
             <h2 class="animate-visibility__title">{{ item.title }}</h2>
@@ -150,7 +150,7 @@ <h2 class="block-cera-title white-text">{{ site.data.solutions.build-test-produc
         <p class="message inria-regular white-text">{{ site.data.solutions.build-test-product.description }}</p>
       </div>
       <div class="carousel-scroll" >
-        <div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
+        <div class="carousel-scroll__scroller" data-scroll="scroller">
           {% for item in site.data.team_extension.services.all %}
             <div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
               <h2 class="animate-visibility__title">{{ item.title }}</h2>