From b67ec187b29ccd9d56ebc35fcdde37b7a25e0c3f Mon Sep 17 00:00:00 2001
From: nael <nael@cubedesigners.com>
Date: Fri, 2 Aug 2019 18:11:19 +0200
Subject: [PATCH] wip #2747 @7

---
 public/_modules/home-slider/index.html |  1 -
 public/_modules/home-slider/slider.js  | 56 ++++++++++++++++----------
 public/_modules/home-slider/style.css  |  5 +++
 public/_modules/home-slider/style.styl |  4 +-
 4 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index 7cee5b0..4950800 100644
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -199,7 +199,6 @@
                 </ul>
             </div>
         </div>
-
     </div>
 </section>
 
diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 88f9b6c..10e4bcb 100644
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -19,6 +19,9 @@ let width = $('.slide-img').width(), // --> clip container width
     init = 'rect(0px ',
     final = 'px 0px)';
 
+let container = document.querySelector('.slider');
+let listener = SwipeListener(container);
+
 resize();
 
 $(window).on('orientationchange',function () {
@@ -33,6 +36,10 @@ $(window).on('resize',function () {
 
 // // RESIZE
 function resize() {
+    // if ($(window).width() > 769) {
+    //     listener.off();
+    // }
+
     $('.img-slider').each(function () {
         let width = $('.slide-img').eq(index).width(),
             height = $('.slide-img').eq(index).height();
@@ -58,8 +65,6 @@ function resize() {
             height = $(this).height(); // --> container height (clip container)
 
         TweenMax.set($(this),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); // on resize apply new width/height to clip container
-
-        console.log('container --> '+ width,height);
     });
 }
 
@@ -84,15 +89,14 @@ function GotoSlide(nextindex, direction){
             currentSlideIndex.removeClass('active').eq(index);
 
             enableArrows(); // when animation is finished we reactivate click event
-
             TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
-            // isRunning = false;
         };
 
             console.log(nextindex, direction);
             TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
+        // TODO : remove negative delay
         // negative delay slow the end of this timeline
 
         let tl = new TimelineMax({onComplete: finishAnimation});
@@ -121,23 +125,6 @@ function GotoSlide(nextindex, direction){
     // console.log(tl.duration()); // timeline duration
 }
 
-//
-// arrowNavigation();
-//
-//  function arrowNavigation() {
-//      $('.arrow').on('click', function () {
-//          resize();
-//          if ($(this).is('.next')) {
-//              direction = 1;
-//          }
-//          else {
-//              direction = -1;
-//          }
-//          let nextindex = (index + direction + slideLength) % slideLength;
-//          GotoSlide(nextindex, direction);
-//      });
-//  }
-
  function nextSlide() {
     let  direction = 1;
 
@@ -160,4 +147,29 @@ function GotoSlide(nextindex, direction){
      $('.arrow.prev').off();
  }
 
- enableArrows();
\ No newline at end of file
+ enableArrows();
+
+// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over
+// TODO : 2 --> Disable swipe when screen size >768px
+
+// TODO : BUG --> si on swipe (next, prev, next) on ne voit plus l'image
+function SwipeContent(){
+    container.addEventListener('swipe', function (e) {
+        let directions = e.detail.directions;
+        let x = e.detail.x;
+        let y = e.detail.y;
+
+        if (directions.left) {
+            prevSlide();
+        }
+
+        if (directions.right) {
+            nextSlide();
+        }
+    });
+}
+SwipeContent();
+
+// if ($(window).width() > 769) {
+//     listener.off();
+// }
\ No newline at end of file
diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css
index 2f5ccbf..89cb246 100644
--- a/public/_modules/home-slider/style.css
+++ b/public/_modules/home-slider/style.css
@@ -44,6 +44,11 @@
   width: 100%;
   height: 100%;
 }
+@media (max-width: 769px) {
+  .slide {
+    overflow-x: hidden;
+  }
+}
 .slide-mask {
   overflow: hidden;
   height: 100%;
diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
index 3018066..0ad8127 100644
--- a/public/_modules/home-slider/style.styl
+++ b/public/_modules/home-slider/style.styl
@@ -38,7 +38,7 @@ $controlSize= 60px;
   left: 50%
   transform: translateX(-50%)
   //width 100%
-//  //height 100%
+  //height 100%
 .slider
   width: 100%
   position relative
@@ -46,6 +46,8 @@ $controlSize= 60px;
 .slide
   width: 100%
   height: 100%
+  @media (max-width 769px)
+    overflow-x hidden
 .slide-mask
   overflow hidden
   height 100%
-- 
2.39.5