refactor: fix the mode the slide switches according to the slide mode

devhatt · Sep 6, 2024 · ee54cd8 · ee54cd8
1 parent caaf2b2
commit ee54cd8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 53 deletions.
diff --git a/src/components/Sliding/index.js b/src/components/Sliding/index.js
@@ -82,55 +82,41 @@ Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, {
   next() {
     const slides = this.selected.get('sliding-content').children;
 
-    if (this.shuffleMode) {
-      const slideElements = Array.from(slides);
+    this.slideIndex += 1;
 
-      this.slideIndex =
-        this.slideIndex === slideElements.length - 1 ? 0 : this.slideIndex + 1;
+    if (this.slideIndex > slides.length - 1) this.slideIndex = 0;
 
-      activeSlideShuffle(slideElements, this.slideIndex);
-      this.emit('slide:next', slides[this.slideIndex]);
-    } else {
-      this.slideIndex += 1;
-
-      if (this.slideIndex > slides.length - 1) this.slideIndex = 0;
-
-      const slide = slides[this.slideIndex];
+    const slide = slides[this.slideIndex];
 
+    if (!this.shuffleMode) {
       const container = this.selected.get('sliding').clientWidth;
       this.selected.get('sliding-content').style.transform =
         `translateX(${-this.slideIndex * container}px)`;
-
       activeSlide(slides, slide);
-      this.emit('slide:next', slide);
     }
+
+    activeSlideShuffle(slides, this.slideIndex);
+    this.emit('slide:next', slide);
   },
 
   previous() {
     const slides = this.selected.get('sliding-content').children;
 
-    if (this.shuffleMode) {
-      const slideElements = Array.from(slides);
+    this.slideIndex -= 1;
 
-      this.slideIndex =
-        this.slideIndex === 0 ? slideElements.length - 1 : this.slideIndex - 1;
+    if (this.slideIndex < 0) this.slideIndex = slides.length - 1;
 
-      activeSlideShuffle(slideElements, this.slideIndex);
-      this.emit('slide:previous', slides[this.slideIndex]);
-    } else {
-      this.slideIndex -= 1;
-
-      if (this.slideIndex < 0) this.slideIndex = slides.length - 1;
-
-      const slide = slides[this.slideIndex];
+    const slide = slides[this.slideIndex];
 
+    if (!this.shuffleMode) {
       const container = this.selected.get('sliding').clientWidth;
       this.selected.get('sliding-content').style.transform =
         `translateX(${-this.slideIndex * container}px)`;
-
       activeSlide(slides, slide);
-      this.emit('slide:previous', slide);
     }
+
+    activeSlideShuffle(slides, this.slideIndex);
+    this.emit('slide:previous', slide);
   },
 
   clear() {

diff --git a/src/components/Sliding/index.scss b/src/components/Sliding/index.scss
@@ -23,49 +23,46 @@
 
   &--shuffle {
     .sliding__slide {
-      width: 62%;
-      height: 100%;
+      width: 100%;
 
-      margin: auto;
+      display: none;
+      flex: unset;
 
-      position: absolute;
-      right: 0;
-      left: 0;
+      position: relative;
 
-      opacity: 0;
+      z-index: 0;
 
       transition: all 450ms ease;
 
       &--active {
-        width: 100%;
-
-        position: relative;
+        display: block;
 
         z-index: 2;
+      }
+
+      &--prev,
+      &--next,
+      &--unfocused {
+        width: 50%;
+
+        display: block;
+
+        position: absolute;
 
-        transform: translateX(0) scale(1);
+        transform: scale(0.9);
 
-        opacity: 1;
+        opacity: 0.6;
+        inset: 0;
       }
 
-      &--unfocused,
-      &--prev,
       &--next {
-        opacity: 0.6;
+        left: auto;
       }
 
       &--unfocused {
         width: 100%;
 
-        transform: translate(0) scale(0.92);
-      }
-
-      &--prev {
-        transform: translateX(-40%) scale(0.8);
-      }
-
-      &--next {
-        transform: translateX(40%) scale(0.8);
+        transform: scale(0.94);
       }
     }
   }

diff --git a/src/components/Sliding/utils/activeSlideShuffle.js b/src/components/Sliding/utils/activeSlideShuffle.js
@@ -4,7 +4,7 @@ export const activeSlideShuffle = (slides, activeIndex) => {
   const prevIndex = activeIndex === 0 ? totalSlides - 1 : activeIndex - 1;
   const nextIndex = activeIndex === totalSlides - 1 ? 0 : activeIndex + 1;
 
-  slides.forEach((slide, index) => {
+  Array.from(slides).forEach((slide, index) => {
     slide.classList.remove(
       'sliding__slide--active',
       'sliding__slide--unfocused',