fm-lp-factory/factory/templates/template1/carousel/carouselGamificationWithControlTopLeft.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";

let slideIndex = 1;
let section = null;
export default (component) => {
  css();
  section = document.createElement("section");
  section.classList.add("fm-carousel-gamification-ctrl-top", "fm-section-container", "fm-carrousel-hidden");
  section.innerHTML = template
    .replace("%title%", component.title);
  document.querySelector("#fm-landing-page-content").appendChild(section);

  LoyalJS.public.services().gamificationServices.getListOfImagesService(
    {
      limit: 20,
      offset: 0,
      xApplication: "lp-gamification-image-list",
    })
    .then((response) => {
      if (response.body.success && response.body.data.length > 0) {
        section.classList.remove("fm-carrousel-hidden");
        createCardImage(response.body.data);
      }
      else throw new Error("No data for carrousel found");
    })
    .catch((error) => {
      console.log(error);
    });

  section.querySelectorAll('[fm-action="slidePrev"]').forEach((element) => {
    element.addEventListener("click", () => {
      plusSlides(section, -1);
    });
  });

  section.querySelectorAll('[fm-action="slideNext"]').forEach((element) => {
    element.addEventListener("click", () => {
      plusSlides(section, 1);
    });
  });

  section.addEventListener("touchstart", handleTouchStart, { passive: true });
  section.addEventListener("touchmove", handleTouchMove, { passive: true });

  let xDown = null;
  let yDown = null;

  function handleTouchStart(event) {
    xDown = event.touches[0].clientX;
    yDown = event.touches[0].clientY;
  }

  function handleTouchMove(event) {
    if (!xDown || !yDown) {
      return;
    }

    const xUp = event.touches[0].clientX;
    const yUp = event.touches[0].clientY;

    const xDiff = xDown - xUp;
    const yDiff = yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
      if (xDiff > 0) {
        plusSlides(section, 1);
      } else {
        plusSlides(section, -1);
      }
    }
    xDown = null;
    yDown = null;
  }
}

const template = /*html*/ `
<div class="fm-carousel-gamification-ctrl-top-header">
  <h2>%title%</h2>
  <div class="fm-carousel-control fm-desktop">
    <span class="fm-carousel-control-btn" fm-action="slidePrev">❮</span>
    <span class="fm-carousel-control-btn" fm-action="slideNext">❯</span>
  </div>
</div>
<div class="carousel-inner-container">
  <div class="fm-carousel-control fm-mobile">
      <span class="fm-carousel-control-btn " fm-action="slidePrev">❮</span>
      <span class="fm-carousel-control-btn" fm-action="slideNext">❯</span>
  </div>
</div>
`;

const templateCarrouselCard = /*html*/ `
<div class="fm-carousel-gamification-ctrl-top-cell fm-fade fm-carousel-hidden">
    <div class="fm-carrousel-img-frame">
        <img src="%cardImage" >
    </div>
  <div class="text">%imageTitle%</div>
</div>
`;

const createCardImage = (listOfImages) => {
  listOfImages.forEach((card, index) => {
    const cardTemplate = templateCarrouselCard
      .replace("%pagination%", `${index + 1} / ${listOfImages.length}`)
      .replace("%cardImage", card.image)
      .replace("%imageTitle%", card.title || "");
    section.querySelector(".carousel-inner-container").insertAdjacentHTML("beforeend", cardTemplate);
    showSlides(section, slideIndex);
  });
}

function plusSlides(sliderContainer, n) {
  showSlides(sliderContainer, slideIndex += n);
}

function showSlides(sliderContainer, n) {
  let slides = sliderContainer.getElementsByClassName("fm-carousel-gamification-ctrl-top-cell");

  if (n > slides.length) slideIndex = 1
  if (n < 1) slideIndex = slides.length

  // Hide all slides
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.add("fm-carousel-hidden");
    slides[i].classList.remove("first-slide");
  }
  if (window.innerWidth > 1000) { // Show a range of 4 slides
    for (let i = slideIndex - 1; i < slideIndex + 3; i++) {
      if (i === (slideIndex - 1)) slides[i].classList.add("first-slide");
      if (i < slides.length) slides[i].classList.remove("fm-carousel-hidden");
    }
  }
  else if (window.innerWidth > 768) { // Show a range of 3 slides
    for (let i = slideIndex - 1; i < slideIndex + 2; i++) {
      if (i === (slideIndex - 1)) slides[i].classList.add("first-slide");
      if (i < slides.length) slides[i].classList.remove("fm-carousel-hidden");
    }
  }
  else {  // Show a range of 2 slides
    for (let i = slideIndex - 1; i < slideIndex + 1; i++) {
      if (i === (slideIndex - 1)) slides[i].classList.add("first-slide");
      if (i < slides.length) slides[i].classList.remove("fm-carousel-hidden");
    }
  }
}

const css = () => {
  updateFmTemplateCss(/*css*/
    `
    .fm-carousel-gamification-ctrl-top .fm-carousel-gamification-ctrl-top-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }


    .fm-carousel-gamification-ctrl-top .fm-carousel-hidden,
    .fm-carousel-gamification-ctrl-top.fm-carrousel-hidden {
      display: none;
    }

    .fm-carousel-gamification-ctrl-top .carousel-inner-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .fm-carousel-gamification-ctrl-top .fm-carousel-control.fm-mobile {
      display: none;
      justify-content: space-between;
      margin: auto;
      position: absolute;
      width: 100%;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .fm-carousel-gamification-ctrl-top .carousel-inner-container {
        overflow: hidden;
        width: 100%;
      }

      .fm-carousel-gamification-ctrl-top .fm-carousel-control.fm-mobile {
        display: flex;
      }

      .fm-carousel-gamification-ctrl-top .fm-carousel-control.fm-desktop {
        display: none;
      }
    }

    .fm-carousel-gamification-ctrl-top .fm-carousel-control {
      display: flex;
      gap: 10px;
    }

    .fm-carousel-gamification-ctrl-top .fm-carousel-control
    .fm-carousel-control-btn {
      padding:8px;
      cursor: pointer;
      background: var(--fm-secondary-button-color);
      color: var(--fm-secondary-button-text-color);
      border-radius: 50%;
      transition: all 0.6s ease;
    }

    .fm-carousel-gamification-ctrl-top .fm-carousel-control
    .fm-carousel-control-btn:hover {
      background: var(--fm-secondary-button-text-color);
      color: var(--fm-secondary-button-color);
    }

    .fm-carousel-gamification-ctrl-top
    .carousel-inner-container .fm-carousel-gamification-ctrl-top-cell {
      margin: 0 10px;
    }

    .fm-carousel-gamification-ctrl-top .carousel-inner-container
    .fm-carousel-gamification-ctrl-top-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .fm-carousel-gamification-ctrl-top .carousel-inner-container
    .fm-carousel-gamification-ctrl-top-cell .fm-carrousel-img-frame {
        width: 300px;
        height: 300px;
        border-radius: var(--fm-base-border-radius);
        transition: all .3s ease;
        overflow: hidden;
     }

    @media (min-width: 900px) {
        .fm-carousel-gamification-ctrl-top .carousel-inner-container
        .fm-carousel-gamification-ctrl-top-cell .fm-carrousel-img-frame:hover {
            width: 400px;
            height: 400px;
        }
    }
    .fm-carousel-gamification-ctrl-top 
    .carousel-inner-container .fm-carousel-gamification-ctrl-top-cell.first-slide .fm-carrousel-img-frame{
      width: 350px;
    }

    @media (max-width: 1100px) {
      .fm-carousel-gamification-ctrl-top
      .carousel-inner-container .fm-carousel-gamification-ctrl-top-cell .fm-carrousel-img-frame {
        width: 100%;
        height: 200px;
      }
      .fm-carousel-gamification-ctrl-top 
      .carousel-inner-container .fm-carousel-gamification-ctrl-top-cell.first-slide .fm-carrousel-img-frame{
        width: 300px;
      }
    }

    @media (max-width: 768px) {
      .fm-carousel-gamification-ctrl-top
      .carousel-inner-container .fm-carousel-gamification-ctrl-top-cell .fm-carrousel-img-frame {
        width: 150px;
      }
      .fm-carousel-gamification-ctrl-top 
      .carousel-inner-container .fm-carousel-gamification-ctrl-top-cell.first-slide .fm-carrousel-img-frame{
        width: 200px;
      }
    }

    /* Fading animation */
    .fm-fade {
      animation-name: fm-fade-key;
      animation-duration: 1s;
    }

    @keyframes fm-fade-key {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }
    `
  );
}