From a24e3e8d2f9d18950168a344d85320dced30ec7e Mon Sep 17 00:00:00 2001 From: nael Date: Tue, 13 Aug 2019 18:25:54 +0200 Subject: [PATCH] wip #2747 @7 --- public/_modules/home-slider/index.html | 10 +- public/_modules/home-slider/slider-jq.js | 223 +++++++++++++++-------- public/_modules/home-slider/style.css | 1 + public/_modules/home-slider/style.styl | 1 + 4 files changed, 154 insertions(+), 81 deletions(-) diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html index 6937db4..029ad7c 100644 --- a/public/_modules/home-slider/index.html +++ b/public/_modules/home-slider/index.html @@ -42,7 +42,6 @@
-
@@ -193,10 +192,10 @@
    -
  • -
  • -
  • -
  • +
  • +
  • +
  • +
@@ -206,7 +205,6 @@ - diff --git a/public/_modules/home-slider/slider-jq.js b/public/_modules/home-slider/slider-jq.js index 42560e9..d429bf6 100644 --- a/public/_modules/home-slider/slider-jq.js +++ b/public/_modules/home-slider/slider-jq.js @@ -24,59 +24,63 @@ this.container = this.element.find('.slider'); - this.hammerSwipe.get('swipe').set({ enable: true }); this.initt(); }; JQPMISlide.prototype = { initt: function () { - this.initEvents(); + this.initEvents(); }, - initEvents:function(){ - let $this=this; - $(window).on('orientationchange',function () { + initEvents: function () { + let $this = this; + $(window).on('orientationchange', function () { $this.resize(); setTimeout(function () { $this.resize(); - },500); + }, 500); }); - $(window).on('resize',function () { + $(window).on('resize', function () { $this.resize(); }); this.resize(); this.initSwipeEvent(); this.enableArrows(); + // this.automaticSlideshow(); + this.indicator(); }, - resize:function() { - let $this=this; + resize: function () { + let $this = this; this.element.find('.img-slider').each(function () { - let width = $this.element.find('.slide-img').eq($this.index).width(), - height = $this.element.find('.slide-img').eq($this.index).height(); + let width = $this.element.find('.slide-img').eq($this.index).width(), + height = $this.element.find('.slide-img').eq($this.index).height(); - let naturalHeight = $(this).prop('naturalHeight'), - naturalWidth = $(this).prop('naturalWidth'); + let naturalHeight = $(this).prop('naturalHeight'), + naturalWidth = $(this).prop('naturalWidth'); - let getAllImg = new Image(); - getAllImg.src = $(this).attr("src"); + let getAllImg = new Image(); + getAllImg.src = $(this).attr("src"); - let widthFactor = width / naturalWidth, // coef multiplicateur width - heightFactor = height / naturalHeight ; // coef multiplicateur height + 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)}); - }); + TweenMax.set($(this), { + width: naturalWidth * Math.max(widthFactor, heightFactor), + height: naturalHeight * Math.max(widthFactor, heightFactor) + }); + }); - $('.slide-img').each(function () { - let width = $(this).width(), // --> container width (clip container) - height = $(this).height(); // --> container height (clip container) + $('.slide-img').each(function () { + let width = $(this).width(), // --> container width (clip container) + height = $(this).height(); // --> container height (clip container) - TweenMax.set($(this),{clip:$this.init + width +'px '+ height+ $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container - }); - }, + TweenMax.set($(this), {clip: $this.init + width + 'px ' + height + $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container + }); + }, - goToSlide: function(nextindex,direction){ + goToSlide: function (nextindex, direction) { this.width = this.element.find('.slide-img').eq(this.index).width(); this.height = this.element.find('.slide-img').eq(this.index).height(); @@ -91,58 +95,87 @@ 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 + 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 + $this.hammerSwipe.get('swipe').set({enable: true}); // swipe functionality is now reactivate $this.currentSlideIndex.removeClass('active').eq($this.index); $this.enableArrows(); // when animation is finished we reactivate click event - TweenMax.set($this.element.find('.slide-img'),{clip:$this.init + $this.width +'px '+ $this.height+ $this.final, ease: Power3.easeOut}); + TweenMax.set($this.element.find('.slide-img'), { + clip: $this.init + $this.width + 'px ' + $this.height + $this.final, + ease: Power3.easeOut + }); }; - if($(window).width() > 768){ - TweenMax.set($this.element.find('.slide-img'),{clip:$this.init + $this.width +'px '+ $this.height+ $this.final, ease: Power3.easeOut}); + if ($(window).width() > 768) { + TweenMax.set($this.element.find('.slide-img'), { + clip: $this.init + $this.width + 'px ' + $this.height + $this.final, + ease: Power3.easeOut + }); 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,{x:-80*direction,opacity:0, ease: Power1.easeOut}); - tl.to($this.currentContainerImg,2*$this.Delay,{ clip: $this.init+ (direction)*-1*$this.imgWidth+'px,'+ $this.height+'px,'+ (direction)*-1*$this.imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*$this.Delay); - - tl.from($this.nextTextContainer,0.5*$this.Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*$this.Delay); - - tl.from($this.nextContainerImg,1.5*$this.Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*$this.Delay); // initial delay value 1.5s - tl.to($this.currentContainerImg,1.5*$this.Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*$this.Delay); // initial delay value 1.5s - tl.set($this.currentSlideIndex,{zIndex: 0}); - tl.set($this.currentContainerImg,{x:0}); + tl.set($this.currentSlideIndex, {zIndex: 97}); + tl.set($this.nextTextContainer, {opacity: 1, x: 0}); + tl.to($this.currentTextContainer, 0.5 * $this.Delay, { + x: -80 * direction, + opacity: 0, + ease: Power1.easeOut + }); + tl.to($this.currentContainerImg, 2 * $this.Delay, { + clip: $this.init + (direction) * -1 * $this.imgWidth + 'px,' + $this.height + 'px,' + (direction) * -1 * $this.imgWidth + 'px', + ease: Power2.easeInOut + }, "-=" + 0.8 * $this.Delay); + + tl.from($this.nextTextContainer, 0.5 * $this.Delay, { + x: 80 * direction, + opacity: 0, + ease: Power1.easeOut + }, '-=' + 1.2 * $this.Delay); + + tl.from($this.nextContainerImg, 1.5 * $this.Delay, { + x: 150 * direction, + ease: Power2.easeInOut + }, '-=' + 2.3 * $this.Delay); // initial delay value 1.5s + tl.to($this.currentContainerImg, 1.5 * $this.Delay, { + x: -250 * direction, + ease: Power2.easeInOut + }, "-=" + 1.9 * $this.Delay); // initial delay value 1.5s + tl.set($this.currentSlideIndex, {zIndex: 0}); + tl.set($this.currentContainerImg, {x: 0}); } - else{ + else { let tl2 = new TimelineMax({onComplete: $this.finishAnimation}); - $this.percent = 100*direction; - $this.negativePercent = -100*direction; - - tl2.set($this.currentSlideIndex,{transform: 'translateX(0px)',opacity:1}); - tl2.set($this.nextSlideIndex,{transform: 'translateX(0px)',opacity:1}); - tl2.set($this.currentTextContainer,{transform: 'translateX(0px)',opacity:1}); - tl2.set($this.nextTextContainer,{transform: 'translateX(0px)',opacity:1}); - - tl2.to($this.currentSlideIndex,0.7,{transform: 'translateX('+ ($this.percent+'%') +')',ease: Power1.easeOut}); - tl2.to($this.currentTextBlock,0.7,{opacity:0},'-=0.9'); - tl2.from($this.nextSlideIndex,0.7,{transform: 'translateX('+ ($this.negativePercent+'%') +')',ease: Power1.easeOut},"-=0.7"); - tl2.from($this.nextTextBlock,0.7,{opacity:0,x:-100*direction}); + $this.percent = 100 * direction; + $this.negativePercent = -100 * direction; + + tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.currentTextContainer, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextTextContainer, {transform: 'translateX(0px)', opacity: 1}); + + tl2.to($this.currentSlideIndex, 0.7, { + transform: 'translateX(' + ($this.percent + '%') + ')', + ease: Power1.easeOut + }); + tl2.to($this.currentTextBlock, 0.7, {opacity: 0}, '-=0.9'); + tl2.from($this.nextSlideIndex, 0.7, { + transform: 'translateX(' + ($this.negativePercent + '%') + ')', + ease: Power1.easeOut + }, "-=0.7"); + tl2.from($this.nextTextBlock, 0.7, {opacity: 0, x: -100 * direction}); // reset all block style - tl2.set($this.currentTextBlock,{opacity:1}); - tl2.set($this.currentSlideIndex,{transform: 'translateX(0px)',opacity:1}); - tl2.set($this.nextSlideIndex,{transform: 'translateX(0px)',opacity:1}); - tl2.set($this.currentTextContainer,{transform: 'translateX(0px)',opacity:1}); - tl2.set($this.nextTextContainer,{transform: 'translateX(0px)',opacity:1}); + tl2.set($this.currentTextBlock, {opacity: 1}); + tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.currentTextContainer, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextTextContainer, {transform: 'translateX(0px)', opacity: 1}); } this.nextIndicatorIndex.addClass('active-indicator').eq(nextindex); @@ -150,7 +183,7 @@ this.nextSlideIndex.addClass('active').eq(nextindex); this.disableArrows(); // disable click on arrows until animation finishes - this.index=nextindex; + this.index = nextindex; }, @@ -168,6 +201,53 @@ this.goToSlide(nextindex, direction); }, + indicator: function(){ + let $this= this; + $('.slider-position').on('click',function () { + let direction = -1; + let pos = $(this).data('position'); + + if (posdirection){ + this.direction = 1; + } + else if(pos=direction){ + this.goToSlide(pos,direction).off(); + } + console.log(pos,direction); + + // DETERMINER la direction en fonction de la position + $this.goToSlide(pos,direction); + // console.log(direction); + }); + }, + + // autoSlide: function () { + // let $this = this; + // + // let myVar = setInterval(function () { + // $this.nextSlide(); + // }, 4000); + // }, + + // automaticSlideshow:function(){ + // // this.autoSlide(); + // + // let $this = this; + // + // let myVar = setInterval(function () { + // $this.nextSlide(); + // }, 4000); + // + // $(".arrow").on('click',function () { + // // $this.autoSlide.off(); + // // clearInterval(myVar); + // // alert('test'); + // }) + // }, + initSwipeEvent: function (){ let $this = this; this.hammerSwipe.on('swiperight', function() { @@ -180,25 +260,18 @@ enableArrows: function() { let $this = this; + this.element.find(".arrow.next").on('click',function () { + $this.nextSlide(); + }); - // this.element.on('click','.arrow.next') - // $('.arrow.next').on('click', function () { - // $this.nextSlide(); - // }); - - // this.element.on('click','.arrow.prev') - // $('.arrow.prev').on('click',function () { - // $this.prevSlide(); - // }); - - this.element.find(".home-arrow-left").on('click',function () { + this.element.find(".arrow.prev").on('click',function () { $this.prevSlide(); }); }, disableArrows: function() { - $('.arrow.next').off(); - $('.arrow.prev').off(); + this.element.find(".arrow.next").off(); + this.element.find(".arrow.prev").off(); } }; @@ -213,5 +286,5 @@ })(jQuery); $(function () { - $("#pmiSlider").PMISlide(); + $(".slider-container").PMISlide(); }); \ No newline at end of file diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css index 1106da0..0ce6c7e 100644 --- a/public/_modules/home-slider/style.css +++ b/public/_modules/home-slider/style.css @@ -97,6 +97,7 @@ border-radius: 50%; margin-right: 10px; transition: all 400ms ease-in-out; + cursor: pointer; } .active-indicator { width: 10px; diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl index 7bc4982..bd731d4 100644 --- a/public/_modules/home-slider/style.styl +++ b/public/_modules/home-slider/style.styl @@ -77,6 +77,7 @@ $controlSize= 60px; border-radius 50% margin-right: 10px transition all 400ms ease-in-out + cursor: pointer .active-indicator width: 10px height 10px -- 2.39.5