Merge branch 'main' into issue#27

src/components/Sliding/index.js

@@ -1,5 +1,8 @@
 import { Component } from 'pet-dex-utilities';
 import { makeSwipable } from '../../utils/swiper';
+import { activeSlide } from './utils/activeSlide';
+import { activeSlideShuffle } from './utils/activeSlideShuffle';
+
 import './index.scss';
 
 const events = [
@@ -8,27 +11,29 @@ const events = [
   'slide:previous',
   'slide:remove',
   'slides:clear',
+  'slides:mode',
 ];
 
-const activeSlide = (slides, slide) => {
-  Array.from(slides).forEach((item) => {
-    item.classList.toggle('sliding__slide--active', item === slide);
-  });
-};
-
 const html = `
   <div class="sliding" data-select="sliding">
     <div class="sliding__content" data-select="sliding-content">
     </div>
   </div>`;
 
-export default function Sliding({ slides = [] }) {
+export default function Sliding({
+  slides = [],
+  shuffleMode = false,
+  slideSideSpacing = 0,
+}) {
   Component.call(this, { html, events });
-
   this.slideIndex = 0;
 
   slides.forEach((item) => this.add(item));
 
+  this.setShuffleMode(shuffleMode);
+  if (slides.length > 1 && shuffleMode)
+    this.setSlideSideSpacing(slideSideSpacing);
+
   const $sliding = this.selected.get('sliding');
 
   makeSwipable($sliding);
@@ -42,10 +47,15 @@ export default function Sliding({ slides = [] }) {
   };
 
   this.listen('mount', () => {
+    const slidingContent = Array.from(
+      this.selected.get('sliding-content').children,
+    );
+
     activeSlide(
-      Array.from(this.selected.get('sliding-content').children),
+      slidingContent,
       this.selected.get('sliding-content').children[0],
     );
+    activeSlideShuffle(slidingContent, this.slideIndex);
     $sliding.addEventListener('swipe-left', this.swipeLeft());
     $sliding.addEventListener('swipe-right', this.swipeRight());
   });
@@ -70,31 +80,42 @@ Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, {
   },
 
   next() {
-    this.slideIndex += 1;
     const slides = this.selected.get('sliding-content').children;
 
+    this.slideIndex += 1;
+
     if (this.slideIndex > slides.length - 1) this.slideIndex = 0;
 
     const slide = slides[this.slideIndex];
-    const container = this.selected.get('sliding').clientWidth;
-    this.selected.get('sliding-content').style.transform =
-      `translateX(${-this.slideIndex * container}px)`;
-    activeSlide(slides, slide);
+
+    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);
+    }
+
+    activeSlideShuffle(slides, this.slideIndex);
     this.emit('slide:next', slide);
   },
 
   previous() {
-    this.slideIndex -= 1;
     const slides = this.selected.get('sliding-content').children;
 
+    this.slideIndex -= 1;
+
     if (this.slideIndex < 0) this.slideIndex = slides.length - 1;
 
     const slide = slides[this.slideIndex];
-    const container = this.selected.get('sliding').clientWidth;
 
-    this.selected.get('sliding-content').style.transform =
-      `translateX(${-this.slideIndex * container}px)`;
-    activeSlide(slides, slide);
+    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);
+    }
+
+    activeSlideShuffle(slides, this.slideIndex);
     this.emit('slide:previous', slide);
   },
 
@@ -105,4 +126,19 @@ Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, {
 
     this.emit('slides:clear');
   },
+
+  setSlideSideSpacing(slideSideSpacing = 0) {
+    this.selected.get('sliding-content').style.padding =
+      `0 ${slideSideSpacing}px`;
+  },
+
+  setShuffleMode(shuffleMode = false) {
+    const $sliding = this.selected.get('sliding');
+
+    this.shuffleMode = shuffleMode;
+
+    $sliding.classList.toggle('sliding--shuffle', shuffleMode);
+
+    this.emit('slides:mode', shuffleMode);
+  },
 });

src/components/Sliding/index.scss

@@ -1,5 +1,6 @@
 .sliding {
   width: 100%;
+
   overflow: hidden;
 
   margin: auto;
@@ -9,6 +10,8 @@
   &__content {
     display: flex;
 
+    align-items: center;
+
     transform: translateX(0);
 
     transition: transform 0.6s ease-in-out;
@@ -17,4 +20,50 @@
   &__slide {
     flex: 0 0 100%;
   }
+
+  &--shuffle {
+    .sliding__slide {
+      width: 100%;
+
+      display: none;
+      flex: unset;
+
+      position: relative;
+
+      z-index: 0;
+
+      transition: all 450ms ease;
+
+      &--active {
+        display: block;
+
+        z-index: 2;
+      }
+
+      &--prev,
+      &--next,
+      &--unfocused {
+        width: 50%;
+
+        display: block;
+
+        position: absolute;
+
+        transform: scale(0.9);
+
+        opacity: 0.6;
+        inset: 0;
+      }
+
+      &--next {
+        left: auto;
+      }
+
+      &--unfocused {
+        width: 100%;
+
+        transform: scale(0.94);
+      }
+    }
+  }
 }

src/components/Sliding/utils/activeSlide.js

@@ -0,0 +1,5 @@
+export const activeSlide = (slides, slide) => {
+  Array.from(slides).forEach((item) => {
+    item.classList.toggle('sliding__slide--active', item === slide);
+  });
+};

src/components/Sliding/utils/activeSlideShuffle.js

@@ -0,0 +1,26 @@
+export const activeSlideShuffle = (slides, activeIndex) => {
+  const totalSlides = slides.length;
+  const hasMoreThanTwoSlides = totalSlides > 2;
+  const prevIndex = activeIndex === 0 ? totalSlides - 1 : activeIndex - 1;
+  const nextIndex = activeIndex === totalSlides - 1 ? 0 : activeIndex + 1;
+
+  Array.from(slides).forEach((slide, index) => {
+    slide.classList.remove(
+      'sliding__slide--active',
+      'sliding__slide--unfocused',
+      'sliding__slide--prev',
+      'sliding__slide--next',
+    );
+
+    if (index === activeIndex) slide.classList.add('sliding__slide--active');
+
+    if (index !== activeIndex && !hasMoreThanTwoSlides)
+      slide.classList.add('sliding__slide--unfocused');
+
+    if (index === prevIndex && hasMoreThanTwoSlides)
+      slide.classList.add('sliding__slide--prev');
+
+    if (index === nextIndex && hasMoreThanTwoSlides)
+      slide.classList.add('sliding__slide--next');
+  });
+};

src/layouts/index.scss

@@ -53,9 +53,6 @@
     grid-area: content;
 
     background-color: colors.$secondary100;
-
-    padding-inline: 2rem;
-    padding-block: 3.2rem;
   }
 
   &__content-page {

src/layouts/pages/PetName/index.js

@@ -0,0 +1,62 @@
+import { Component } from 'pet-dex-utilities';
+import TextInput from '../../../components/TextInput';
+import UploadImage from '../../../components/UploadImage';
+import Button from '../../../components/Button';
+import './index.scss';
+
+const events = ['submit'];
+
+const html = `
+  <div class='pet-name'>
+    <div class='pet-name__container'>
+      <div class='pet-name__image' data-select='upload-image-container'></div>
+      <h1 class='pet-name__title'>Qual o nome do seu bichinho?</h1>
+      <div class='pet-name__input' data-select='input-container'></div>
+    </div>
+    <div class="pet-name__footer">
+      <div class='pet-name__button' data-select='button-container'></div>
+    </div>
+  </div>
+`;
+
+export default function PetName() {
+  Component.call(this, { html, events });
+
+  const $inputContainer = this.selected.get('input-container');
+  const $uploadImage = this.selected.get('upload-image-container');
+  const $buttonContainer = this.selected.get('button-container');
+
+  this.input = new TextInput({
+    placeholder: 'Nome do Pet',
+  });
+
+  this.upload = new UploadImage();
+  this.button = new Button({
+    text: 'Continuar',
+    isFullWidth: true,
+    isDisabled: false,
+  });
+
+  const updateButtonVisibility = () => {
+    const input = this.input.getValue();
+    const image = this.upload.getImage();
+
+    this.button.setIsDisabled(!(input && image));
+  };
+  updateButtonVisibility();
+
+  this.upload.listen('value:change', updateButtonVisibility);
+  this.input.listen('value:change', updateButtonVisibility);
+
+  this.button.listen('click', () => {
+    const image = this.upload.getImage();
+    const name = this.input.getValue();
+    this.emit('submit', { image, name });
+  });
+
+  this.upload.mount($uploadImage);
+  this.input.mount($inputContainer);
+  this.button.mount($buttonContainer);
+}
+
+PetName.prototype = Object.assign(PetName.prototype, Component.prototype);

src/layouts/pages/PetName/index.scss

@@ -0,0 +1,70 @@
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.pet-name {
+  display: flex;
+  flex-direction: column;
+
+  &__container {
+    width: 100%;
+
+    margin-bottom: 2.4rem;
+  }
+
+  &__image {
+    max-width: 18.6rem;
+
+    margin: 5rem auto;
+  }
+
+  &__title {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray800;
+    text-align: center;
+    font-size: fonts.$xs;
+    font-weight: fonts.$medium;
+
+    margin: 7rem auto 3rem;
+  }
+
+  &__input {
+    width: min(100%, 42rem);
+
+    margin: 0 auto;
+  }
+
+  &__footer {
+    width: 100%;
+
+    display: flex;
+
+    justify-content: center;
+
+    margin-top: auto;
+  }
+
+  &__button {
+    width: min(100%, 42rem);
+  }
+}
+
+@include breakpoints.from1024 {
+  .pet-name {
+    align-items: center;
+
+    &__container {
+      margin-bottom: 0;
+    }
+
+    &__title {
+      font-size: fonts.$sm;
+
+      margin-top: 15rem;
+    }
+
+    &__button {
+      margin-top: 4rem;
+    }
+  }
+}