From: nael Date: Fri, 9 Aug 2019 16:32:18 +0000 (+0200) Subject: wip #2747 @7 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=75991ac49f79f88a1b3497cd9ad7d2569f6b0a51;p=pmi.git wip #2747 @7 --- diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html index aec5cfe..01fc76f 100644 --- a/public/_modules/home-slider/index.html +++ b/public/_modules/home-slider/index.html @@ -54,7 +54,7 @@
-
+

Wheel Force Transducer

@@ -76,7 +76,7 @@

- +
@@ -90,7 +90,7 @@
-
+

slide suivante

@@ -112,7 +112,7 @@

- +
@@ -125,7 +125,7 @@
-
+

Lorem ipsum

@@ -149,7 +149,7 @@

- +
@@ -161,7 +161,7 @@
-
+

Lorrefdcem ipsfdcum

@@ -185,7 +185,7 @@

- +
@@ -208,7 +208,8 @@ - + + \ No newline at end of file diff --git a/public/_modules/home-slider/slider-jq.js b/public/_modules/home-slider/slider-jq.js new file mode 100644 index 0000000..52e4705 --- /dev/null +++ b/public/_modules/home-slider/slider-jq.js @@ -0,0 +1,203 @@ +// jshint ignore: start + +(function ($) { + function JQPMISlide(element) { + this.element = element; + this.hammertime = new Hammer(this.myElement); + this.index = 0; + this.slideLength = this.element.find(".slide").length; + + this.prevBtn = this.element.find(".home-arrow-left"); + this.nextBtn = this.element.find(".home-arrow-right"); + this.Delay = 1; + this.getImg = new Image(); + this.getImg.src = this.element.find('.img-slider').attr("src"); + + this.img = document.getElementsByClassName('.img-slider'); + this.imgWidth = this.getImg.naturalWidth; + + this.width = this.element.find('.slide-img').width(); // --> clip container width + this.height = this.element.find('.slide-img').height(); // --> clip container height + this.init = 'rect(0px '; + this.final = 'px 0px)'; + + this.container = document.querySelector('.slider'); + this.myElement = document.getElementById('myElement'); + + this.hammertime.get('swipe').set({ enable: true }); + + this.initt(); + }; + + JQPMISlide.prototype = { + initt: function () { + this.initEvents(); + }, + + initEvents:function(){ + let $this=this; + $(window).on('orientationchange',function () { + $this.resize(); + setTimeout(function () { + $this.resize(); + },500); + }); + $(window).on('resize',function () { + $this.resize(); + }); + this.resize(); + this.enableArrows(); + this.initSwipeEvent(); + + }, + + 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 naturalHeight = $(this).prop('naturalHeight'), + naturalWidth = $(this).prop('naturalWidth'); + + let getAllImg = new Image(); + getAllImg.src = $(this).attr("src"); + + 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)}); + }); + + $('.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 + }); + }, + + 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(); + + this.currentSlideIndex = this.element.find('.slide').eq(this.index); + this.nextSlideIndex = this.element.find('.slide').eq(nextindex); + this.currentTextContainer = this.element.find('.slide-txt').eq(this.index); + this.nextTextContainer = this.element.find('.slide-txt').eq(nextindex); + this.currentContainerImg = this.element.find('.slide-img').eq(this.index); + this.currentIndicatorIndex = this.element.find('.slider-position').eq(this.index); + this.currentTextBlock = this.element.find('.txt').eq(this.index); + this.nextTextBlock = this.element.find('.txt').eq(nextindex); + this.nextIndicatorIndex = this.element.find('.slider-position').eq(nextindex); + this.nextContainerImg = this.element.find('.slide-img').eq(nextindex); + + this.hammertime.get('swipe').set({ enable: false }); // disable swipe when animation is running + + this.finishAnimation = function () { // when animation is finished this function will be executed + + this.hammertime.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}); + + }; + + 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: init+ (direction)*-1*this.imgWidth+'px,'+ this.height+'px,'+ (direction)*-1*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{ + 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}); + + // 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}); + + } + this.nextIndicatorIndex.addClass('active-indicator').eq(nextindex); + 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; + + }, + + nextSlide: function () { + this.direction = 1; + + this.nextindex = (this.index + this.direction + this.slideLength) % this.slideLength; + this.goToSlide(this.nextindex, this.direction); + }, + + initSwipeEvent: function (){ + this.Hammer().on('swiperight', function() { + this.prevSlide(); + }); + this.hammertime.on('swipeleft', function() { + this.nextSlide(); + }); + }, + prevSlide: function () { + this.direction = -1; + + this.nextindex = (this.index + this.direction + this.slideLength) % this.slideLength; + this.goToSlide(this.nextindex, this.direction); + }, + + enableArrows: function() { + this.element.find('.arrow.next').on('click', this.nextSlide); + this.element.find('.arrow.prev').on('click', this.prevSlide); + }, + + disableArrows: function() { + this.element.find('.arrow.next').off(); + this.element.find('.arrow.prev').off(); + } + }; + + jQuery.fn.PMISlide = function () { + return this.each(function () { + var $this = $(this); + if ($(this).data('PMISlide') === undefined) { + $(this).data('PMISlide', new JQPMISlide($this)); + } + }) + }; +})(jQuery); + +$(function () { + $("#myElement").PMISlide(); +}); \ No newline at end of file diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js index 130a394..3dd3535 100644 --- a/public/_modules/home-slider/slider.js +++ b/public/_modules/home-slider/slider.js @@ -9,9 +9,7 @@ let getImg = new Image(); getImg.src = $('.img-slider').attr("src"); let img = document.getElementsByClassName('.img-slider'), - imgHeight = getImg.naturalHeight, imgWidth = getImg.naturalWidth; - // console.log('valeur initial img => '+imgWidth,imgHeight); let width = $('.slide-img').width(), // --> clip container width height = $('.slide-img').height(), // --> clip container height @@ -20,26 +18,24 @@ let width = $('.slide-img').width(), // --> clip container width let container = document.querySelector('.slider'); let listener = SwipeListener(container); +let myElement = document.getElementById('myElement'); +let hammertime = new Hammer(myElement); -resize(); - - - -var myElement = document.getElementById('myElement'); - -var hammertime = new Hammer(myElement); hammertime.get('swipe').set({ enable: true }); -hammertime.on('swipeleft', function(ev) { - prevSlide(); -}); - -hammertime.on('swiperight', function(ev) { - nextSlide(); -}); - +function swipeEvent(){ + hammertime.on('swiperight', function() { + prevSlide(); + }); + hammertime.on('swipeleft', function() { + nextSlide(); + }); +} +resize(); +swipeEvent(); +// ******* RESIZE EVENT ******* // $(window).on('orientationchange',function () { resize(); setTimeout(function () { @@ -48,9 +44,11 @@ $(window).on('orientationchange',function () { }); $(window).on('resize',function () { resize(); - }); -// RESIZE +// ******* RESIZE EVENT ******* // + +// RESIZE FUNCTION + function resize() { $('.img-slider').each(function () { let width = $('.slide-img').eq(index).width(), @@ -62,10 +60,6 @@ function resize() { let getAllImg = new Image(); getAllImg.src = $(this).attr("src"); - // console.log(getAllImg); // --> return toutes les img avec leur attributs src - - // console.log('img natural values: '+naturalWidth,naturalHeight); - let widthFactor = width / naturalWidth, // coef multiplicateur width heightFactor = height / naturalHeight ; // coef multiplicateur height @@ -81,62 +75,84 @@ function resize() { } function GotoSlide(nextindex, direction){ - let width = $('.slide-img').eq(index).width(), - height = $('.slide-img').eq(index).height(); - - 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 width = $('.slide-img').eq(index).width(), + height = $('.slide-img').eq(index).height(); + + let currentSlideIndex = $('.slide').eq(index), + nextSlideIndex = $('.slide').eq(nextindex), + currentTextContainer = $('.slide-txt').eq(index), + nextTextContainer = $('.slide-txt').eq(nextindex), + currentContainerImg = $('.slide-img').eq(index), + currentIndicatorIndex = $('.slider-position').eq(index), + currentTextBlock = $('.txt').eq(index), + nextTextBlock = $('.txt').eq(nextindex), + nextIndicatorIndex = $('.slider-position').eq(nextindex), + nextContainerImg = $('.slide-img').eq(nextindex); hammertime.get('swipe').set({ enable: false }); // disable swipe when animation is running - console.log( hammertime.get('swipe').set({ enable: false })); - let finishAnimation = function () { + let finishAnimation = function () { // when animation is finished this function will be executed - hammertime.get('swipe').set({ enable: true }); + hammertime.get('swipe').set({ enable: true }); // swipe functionality is now reactivate + 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}); - 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}); - - }; - 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 + // if window width superior 768px --> we launch desktop animation + if($(window).width() > 768){ + console.log(nextindex, direction); + TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); let tl = new TimelineMax({onComplete: finishAnimation}); - // tl.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); 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.set(nextTextContainer,{opacity:1,x:0}); + tl.to(currentTextContainer,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); - tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay); + tl.from(nextTextContainer,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay); tl.from(nextContainerImg,1.5*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s tl.to(currentContainerImg,1.5*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}); - nextIndicatorIndex.addClass('active-indicator').eq(nextindex); - currentIndicatorIndex.removeClass('active-indicator').eq(index); + } + // if window width inferior or equal to 768px --> we launch mobile animation + else{ + let tl2 = new TimelineMax({onComplete: finishAnimation}); + + let percent = 100*direction; + let negativePercent = -100*direction; + + console.log(nextindex, direction); + tl2.set(currentSlideIndex,{transform: 'translateX(0px)',opacity:1}); + tl2.set(nextSlideIndex,{transform: 'translateX(0px)',opacity:1}); + tl2.set(currentTextContainer,{transform: 'translateX(0px)',opacity:1}); + tl2.set(nextTextContainer,{transform: 'translateX(0px)',opacity:1}); - nextSlideIndex.addClass('active').eq(nextindex); + tl2.to(currentSlideIndex,0.7,{transform: 'translateX('+ (percent+'%') +')',ease: Power1.easeOut}); + tl2.to(currentTextBlock,0.7,{opacity:0},'-=0.9'); + tl2.from(nextSlideIndex,0.7,{transform: 'translateX('+ (negativePercent+'%') +')',ease: Power1.easeOut},"-=0.7"); + tl2.from(nextTextBlock,0.7,{opacity:0,x:-100*direction}); - disableArrows(); // disable click on arrows until animation finishes + // reset all block style + tl2.set(currentTextBlock,{opacity:1}); + tl2.set(currentSlideIndex,{transform: 'translateX(0px)',opacity:1}); + tl2.set(nextSlideIndex,{transform: 'translateX(0px)',opacity:1}); + tl2.set(currentTextContainer,{transform: 'translateX(0px)',opacity:1}); + tl2.set(nextTextContainer,{transform: 'translateX(0px)',opacity:1}); + } + + nextIndicatorIndex.addClass('active-indicator').eq(nextindex); + currentIndicatorIndex.removeClass('active-indicator').eq(index); + + nextSlideIndex.addClass('active').eq(nextindex); + disableArrows(); // disable click on arrows until animation finishes index=nextindex; } @@ -162,26 +178,4 @@ function GotoSlide(nextindex, direction){ $('.arrow.prev').off(); } - enableArrows(); - -// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over // update : works on desktop, bug with mobile devices - -// TODO : BUG --> si on swipe (next, prev, next) on ne voit plus l'image - -// function swiper(){ -// container.addEventListener('swipe', function (e) { -// let directions = e.detail.directions; -// -// // listener.on(); -// if (directions.left) { -// prevSlide(); -// } -// -// if (directions.right) { -// nextSlide(); -// } -// }); -// } -// -// swiper(); - + enableArrows(); \ No newline at end of file diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css index 89cb246..b57d65f 100644 --- a/public/_modules/home-slider/style.css +++ b/public/_modules/home-slider/style.css @@ -16,12 +16,24 @@ left: 2%; z-index: 99; } +@media (max-width: 769px) { + .home-arrow-left { + top: 88.5%; + left: 5%; + } +} .home-arrow-right { position: absolute; top: 50%; right: 2%; z-index: 99; } +@media (max-width: 769px) { + .home-arrow-right { + top: 88.5%; + right: 5%; + } +} .column-wrapper.active { display: grid; } @@ -40,6 +52,11 @@ position: relative; height: 80vh; } +@media (max-width: 769px) { + .slider { + overflow: hidden; + } +} .slide { width: 100%; height: 100%; diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl index 0ad8127..5763424 100644 --- a/public/_modules/home-slider/style.styl +++ b/public/_modules/home-slider/style.styl @@ -22,11 +22,17 @@ $controlSize= 60px; top: 50%; left: 2%; z-index 99 + @media (max-width 769px) + top: 88.5% + left 5% .home-arrow-right position: absolute; top: 50%; right: 2%; z-index 99 + @media (max-width 769px) + top: 88.5% + right 5% .column-wrapper.active display grid .slide-img @@ -43,6 +49,8 @@ $controlSize= 60px; width: 100% position relative height 80vh + @media (max-width 769px) + overflow hidden .slide width: 100% height: 100%