wip #2747 @7

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 5c4505372eefacd29a6705213c015cbe90b5c9f1..d82f8cdd598ea48cc0f91b74ea5c8f8af4a0264b 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -35,7 +35,7 @@ $(window).on('resize',function () {
 // // RESIZE
 function resize() {
     $('.img-slider').each(function () {
-        let width = $('.slide-img').eq(index).width(), // -->
+        let width = $('.slide-img').eq(index).width(),
             height = $('.slide-img').eq(index).height();
 
         let naturalHeight = $(this).prop('naturalHeight'),
@@ -44,78 +44,75 @@ function resize() {
         let getAllImg = new Image();
             getAllImg.src = $(this).attr("src");
 
-        console.log(getAllImg); // --> return toutes les img avec leur attributs src
+        // console.log(getAllImg); // --> return toutes les img avec leur attributs src
 
-        console.log('img natural values: '+naturalWidth,naturalHeight);
+        // console.log('img natural values: '+naturalWidth,naturalHeight);
 
         let widthFactor = width / naturalWidth,  // coef multiplicateur width
             heightFactor =  height / naturalHeight ; // coef multiplicateur height
 
         TweenMax.set($(this),{width:naturalWidth*Math.max(widthFactor, heightFactor), height:naturalHeight*Math.max(widthFactor, heightFactor)});
-
-        // console.log('valeurs des facteurs de multiplication: '+widthFactor,heightFactor);
     });
 
     $('.slide-img').each(function () {
         let width = $(this).width(), // --> container width (clip container)
             height = $(this).height(); // --> container height (clip container)
 
-        TweenMax.set($(this),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
+        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);
     });
 }
 
 function GotoSlide(nextindex, direction){
-    if (!isRunning){
-        isRunning = true;
 
-    let currentSlideIndex = $('.slide').eq(index),
-        nextSlideIndex = $('.slide').eq(nextindex),
-         currentText = $('.slide-txt').eq(index),
-         nextText = $('.slide-txt').eq(nextindex),
-         currentImg = $('.img-slider').eq(index),
-         nextImg = $('.img-slider').eq(nextindex),
-         currentContainerImg = $('.slide-img').eq(index),
-        currentIndicatorIndex = $('.slider-position').eq(index),
-        nextIndicatorIndex = $('.slider-position').eq(nextindex),
-         nextContainerImg = $('.slide-img').eq(nextindex);
+    if (!isRunning) {
+        isRunning = true;
 
-        console.log(nextindex, direction);
-        TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
+        let currentSlideIndex = $('.slide').eq(index),
+            nextSlideIndex = $('.slide').eq(nextindex),
+            currentText = $('.slide-txt').eq(index),
+            nextText = $('.slide-txt').eq(nextindex),
+            currentImg = $('.img-slider').eq(index),
+            nextImg = $('.img-slider').eq(nextindex),
+            currentContainerImg = $('.slide-img').eq(index),
+            currentIndicatorIndex = $('.slider-position').eq(index),
+            nextIndicatorIndex = $('.slider-position').eq(nextindex),
+            nextContainerImg = $('.slide-img').eq(nextindex);
+
+        let finishAnimation = function () {
+            alert("finished");
+            currentSlideIndex.removeClass('active').eq(index);
+            isRunning = false;
+        };
 
-    let tl = new TimelineMax({onComplete: isSlideRunning});
-    tl.set(currentSlideIndex,{zIndex: 97});
-    tl.set(nextText,{opacity:1,x:0});
-    tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
-    tl.to(currentContainerImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay);
+            console.log(nextindex, direction);
+            TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
-    tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
+        // negative delay slow the end of this timeline
 
-    tl.from(nextContainerImg,1.5*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay);
-    tl.to(currentContainerImg,1.5*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay);
-    tl.set(currentSlideIndex,{zIndex: 0});
-    tl.set(currentContainerImg,{x:0});
+        let tl = new TimelineMax({onComplete: finishAnimation});
+        tl.set(currentSlideIndex,{zIndex: 97});
+        tl.set(nextText,{opacity:1,x:0});
+        tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
+        tl.to(currentContainerImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay);
 
-    nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
-    currentIndicatorIndex.removeClass('active-indicator').eq(index);
+        tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
 
-    setTimeout(function () {
-        nextSlideIndex.addClass('active').eq(nextindex);
-    });
+        tl.from(nextContainerImg,1*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s
+        tl.to(currentContainerImg,1*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay); // initial delay value 1.5s
+        tl.set(currentSlideIndex,{zIndex: 0});
+        tl.set(currentContainerImg,{x:0});
 
-    setTimeout(function () {
-        currentSlideIndex.removeClass('active').eq(index);
-    },1000*Delay);
+        nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
+        currentIndicatorIndex.removeClass('active-indicator').eq(index);
 
-    index=nextindex;
+        nextSlideIndex.addClass('active').eq(nextindex);
 
-    function isSlideRunning(){
-            isRunning = false;
-        }
+        index=nextindex;
 
-    }
-    else{
+    } else {
+        console.warn("animation still running!");
         return false;
     }
 }