Merge pull request #7 from guimontme/1207-slide-resize

Slide movendo e Window resize com o debounce

src/js/slide.js

@@ -1,12 +1,14 @@
+import debounce from './debounce';
 export default class Slide {
   constructor(slide, wrapper) {
     this.slide = document.querySelector(slide);
     this.wrapper = document.querySelector(wrapper);
-    this.dist = { finalPosition:0, startX: 0, movement: 0}
+    this.dist = { finalPosition:0, startX: 0, movement: 0};
+    this.activeClass = 'active';
   }
 
   transition (active) {
-    this.slide.style.transition = active ? 'transform .3s' : '';
+    this.slide.style.transition = active ? 'transform .4s' : '';
   }
 
   moveSlide(distX) {
@@ -65,11 +67,6 @@ export default class Slide {
     this.wrapper.addEventListener('touchend', this.onEnd);
   }
 
-  bindEvents() {
-    this.onStart = this.onStart.bind(this);
-    this.onMove = this.onMove.bind(this);
-    this.onEnd = this.onEnd.bind(this);
-  }
 
   /* Slides Config */
   slidePosition(slide) {
@@ -99,6 +96,7 @@ export default class Slide {
     this.dist.finalPosition = activeSlide.position;
     this.moveSlide(activeSlide.position);
     this.slideIndexNav(index);
+    this.changeActiveClass();
   }
 
   activePrevSlide() {
@@ -107,16 +105,44 @@ export default class Slide {
     }
   }
 
+  changeActiveClass() {
+    this.slideArray.forEach((element) => {
+      element.element.classList.remove(this.activeClass);
+    });
+    this.slideArray[this.index.active].element.classList.add(this.activeClass);
+  }
+
   activeNextSlide() {
     if(this.index.next !== undefined) {
       this.changeSlide(this.index.next);
     }
   }
 
+  onResize() {
+    setTimeout(() =>{
+      this.slideConfig();
+      this.transition(true);
+      this.changeSlide(this.index.active);
+    }, 250)
+  }
+
+  addResizeEvent() {
+    window.addEventListener("resize", this.onResize);
+  }
+
+  bindEvents() {
+    this.onStart = this.onStart.bind(this);
+    this.onMove = this.onMove.bind(this);
+    this.onEnd = this.onEnd.bind(this);
+    this.onResize = debounce(this.onResize.bind(this), 100);
+  }
+
   init() {
     this.bindEvents();
+    this.transition(true);
     this.addSlideEvents();
     this.slideConfig();
+    this.addResizeEvent();
     return this;
   }
 }

src/sass/_slide.scss

@@ -5,12 +5,24 @@
 
   .slide {
     display: flex;
+    padding: 10px;
 
     li {
       flex-shrink: 0;
       width: 80vw;
       max-width: 800px;
       margin: 0 20px;
+      opacity: 0.8;
+      transform: scale(.8);
+      filter: grayscale(.8) blur(5px);
+      transition: .4s;
+    }
+
+    li.active {
+      opacity: 1;
+      filter: grayscale(0) blur(0px);
+      transform: scale(1);
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
     }
     // transform: translate3d(-1259px, 0px, 0px);
   }