wait #3016 @0:50

diff --git a/resources/js/carrousel.js b/resources/js/carrousel.js
index 6c2073e4811773965f75e7f6a8dc8ec66d733307..14cf14388b49bb7ee295daae4bae732e29d9fd1f 100644 (file)
--- a/resources/js/carrousel.js
+++ b/resources/js/carrousel.js
@@ -12,11 +12,12 @@ window.Hammer = Hammer.default;
         this.index = 0;
         this.slideLength = this.element.find(".slide").length;
 
+        this.transitionning = false;
         this.automode = true;
 
         this.prevBtn = this.element.find(".home-arrow-left");
         this.nextBtn = this.element.find(".home-arrow-right");
-        this.Delay = 1;
+        this.multiplyDuration = 1;
         this.getImg = new Image();
         this.getImg.src = this.element.find('.img-slider').attr("src");
 
@@ -66,9 +67,6 @@ window.Hammer = Hammer.default;
             });
 
             this.autoSlideDuration = 8; // automatic slideshow delay
-            this.slideInterval = window.setTimeout(function () {
-                $this.nextSlide();
-            }, this.autoSlideDuration * 1000);
 
             this.resize();
             this.initSwipeEvent();
@@ -76,6 +74,16 @@ window.Hammer = Hammer.default;
             this.indicator();
         },
 
+        automaticSlideshow: function () {
+            var $this = this;
+            clearTimeout(this.slideInterval);
+            if (this.automode) {
+                this.slideInterval = window.setTimeout(function () {
+                    $this.nextSlide();
+                }, this.autoSlideDuration * 1000);
+            }
+        },
+
         resize: function () {
             let $this = this;
             this.element.find('.img-slider').each(function () {
@@ -109,6 +117,11 @@ window.Hammer = Hammer.default;
         },
 
         goToSlide: function (nextindex, direction) {
+            if (this.transitionning) {
+                return;
+            }
+            this.transitionning = true;
+
             this.width = this.element.find('.slide-img').eq(this.index).width();
             this.height = this.element.find('.slide-img').eq(this.index).height();
 
@@ -123,61 +136,53 @@ window.Hammer = Hammer.default;
             this.nextIndicatorIndex = this.element.find('.slider-position').eq(nextindex);
             this.nextContainerImg = this.element.find('.slide-img').eq(nextindex);
 
-            this.hammerSwipe.get('swipe').set({enable: false}); // disable swipe when animation is running
             let $this = this;
             this.finishAnimation = function () { // when animation is finished this function will be executed
-
-                $this.hammerSwipe.get('swipe').set({enable: true}); // swipe functionality is now reactivate
+                console.log('end transition');
                 $this.currentSlideIndex.removeClass('active').addClass('hide');
 
-                if ($this.automode) {
-                    $this.slideInterval = setTimeout(function () {
-                        $this.nextSlide();
-                    }, $this.autoSlideDuration * 1000);
-                }
-
-                $this.enableArrows(); // when animation is finished we reactivate click event
-                $this.automaticSlideshow();
                 TweenMax.set($this.element.find('.slide-img'), {
-                    clip: $this.initRect + $this.width + 'px ' + $this.height + $this.finalRect,
-                    ease: Power3.easeOut
+                    clip: $this.initRect + $this.width + 'px ' + $this.height + $this.finalRect
                 });
 
+                $this.transitionning = false;
+                $this.automaticSlideshow();
             };
 
             if ($(window).outerWidth() > 768) {
                 TweenMax.set($this.element.find('.slide-img'), {
-                    clip: $this.initRect + $this.width + 'px ' + $this.height + $this.finalRect,
-                    ease: Power3.easeOut
+                    clip: $this.initRect + $this.width + 'px ' + $this.height + $this.finalRect
                 });
 
                 let tl = new TimelineMax({onComplete: $this.finishAnimation});
 
                 tl.set($this.currentSlideIndex, {zIndex: 97});
                 tl.set($this.nextTextContainer, {opacity: 1, x: 0});
-                tl.to($this.currentTextContainer, 0.5 * $this.Delay, {
+
+                // At 0
+
+                tl.to($this.currentTextContainer, 0.8 * $this.multiplyDuration, {
                     x: -80 * direction,
                     opacity: 0,
                     ease: Power1.easeOut
-                });
-                tl.to($this.currentContainerImg, 2 * $this.Delay, {
+                }, 0.1);
+                tl.to($this.currentContainerImg, 1.2 * $this.multiplyDuration, {
                     clip: $this.initRect + (direction) * -1 * $this.imgWidth + 'px,' + $this.height + 'px,' + (direction) * -1 * $this.imgWidth + 'px',
                     ease: Power2.easeInOut
-                }, "-=" + 0.8 * $this.Delay);
-
-                tl.fromTo($this.nextTextContainer, 0.5 * $this.Delay, {
+                }, 0);
+                tl.fromTo($this.nextTextContainer, 0.6 * $this.multiplyDuration, {
                     x: 80 * direction,
                     opacity: 0,
-                }, {ease: Power1.easeOut, opacity: 1, x: 0}, '-=' + 1.2 * $this.Delay);
+                }, {ease: Power1.easeOut, opacity: 1, x: 0}, 0.6);
 
-                tl.from($this.nextContainerImg, 1.5 * $this.Delay, {
+                tl.from($this.nextContainerImg, 1.2 * $this.multiplyDuration, {
                     x: 150 * direction,
                     ease: Power2.easeInOut
-                }, '-=' + 2.3 * $this.Delay); // initial delay value 1.5s
-                tl.to($this.currentContainerImg, 1.5 * $this.Delay, {
+                }, 0); // initial delay value 1.5s
+                tl.to($this.currentContainerImg, 1.2 * $this.multiplyDuration, {
                     x: -250 * direction,
                     ease: Power2.easeInOut
-                }, "-=" + 1.9 * $this.Delay); // initial delay value 1.5s
+                }, 0); // initial delay value 1.5s
                 tl.set($this.currentSlideIndex, {zIndex: 0});
                 tl.set($this.currentContainerImg, {x: 0});
 
@@ -195,13 +200,12 @@ window.Hammer = Hammer.default;
                 tl2.to($this.currentSlideIndex, 0.7, {
                     transform: 'translateX(' + ($this.negativePercent + '%') + ')',
                     ease: Power1.easeOut
-                });
-                tl2.to($this.currentTextBlock, 0.7, {opacity: 0}, '-=0.9');
+                },0);
+
                 tl2.from($this.nextSlideIndex, 0.7, {
                     transform: 'translateX(' + ($this.percent + '%') + ')',
                     ease: Power1.easeOut
-                }, "-=0.7");
-                tl2.from($this.nextTextBlock, 0.7, {opacity: 0, x: 100 * direction});
+                }, 0);
 
                 // reset all block style
                 tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)'});
@@ -214,7 +218,6 @@ window.Hammer = Hammer.default;
             this.currentIndicatorIndex.removeClass('active-indicator').eq(this.index);
 
             this.nextSlideIndex.addClass('active').eq(nextindex);
-            this.disableArrows(); // disable click on arrows until animation finishes
             this.index = nextindex;
 
         },
@@ -240,8 +243,6 @@ window.Hammer = Hammer.default;
                 let nextPosition = $(this).data('position');
                 let currentPosition = $this.index;
 
-                clearTimeout($this.slideInterval);
-
                 if (currentPosition < nextPosition) {
                     direction = 1;
                 } else if (currentPosition > nextPosition) {
@@ -283,11 +284,6 @@ window.Hammer = Hammer.default;
                 $this.prevSlide();
             });
         },
-
-        disableArrows: function () {
-            this.element.find(".arrow.next").off();
-            this.element.find(".arrow.prev").off();
-        }
     };
 
     jQuery.fn.PMISlide = function () {