decentralized-video-chat/public/js/carousel.js

(function () {
  "use strict";

  // Swipe detector
  // https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js
  let swipe = {
    touchStartX: 0,
    touchEndX: 0,
    minSwipePixels: 30,
    detectionZone: undefined,
    swipeCallback: function () {},

    init: function (detectionZone, callback) {
      swipe.swipeCallback = callback;
      detectionZone.addEventListener(
        "touchstart",
        function (event) {
          swipe.touchStartX = event.changedTouches[0].screenX;
        },
        false
      );
      detectionZone.addEventListener(
        "touchend",
        function (event) {
          swipe.touchEndX = event.changedTouches[0].screenX;
          swipe.handleSwipeGesture();
        },
        false
      );
    },

    handleSwipeGesture: function () {
      let direction, moved;
      if (swipe.touchEndX <= swipe.touchStartX) {
        moved = swipe.touchStartX - swipe.touchEndX;
        direction = "left";
      }
      if (swipe.touchEndX >= swipe.touchStartX) {
        moved = swipe.touchEndX - swipe.touchStartX;
        direction = "right";
      }
      if (moved > swipe.minSwipePixels && direction !== "undefined") {
        swipe.swipe(direction, moved);
      }
    },

    swipe: function (direction, movedPixels) {
      let ret = {};
      ret.direction = direction;
      ret.movedPixels = movedPixels;
      swipe.swipeCallback(ret);
    },
  };

  const carousels = document.getElementsByClassName("carousel-items");

  // Rotate the carousel forward or backward
  function rotateCarousel(el, dir) {
    if (dir === undefined) {
      dir = "next";
    }
    let currentItem = el.getElementsByClassName("carousel-item is-active")[0];
    let nextItem =
      dir === "next"
        ? currentItem.nextElementSibling
        : currentItem.previousElementSibling;
    let index = currentItem.getAttribute("data-carousel");
    let currentBullet = el.parentNode.getElementsByClassName("carousel-bullet")[
      index
    ];
    let nextBullet =
      dir === "next"
        ? currentBullet.nextElementSibling
        : currentBullet.previousElementSibling;
    currentItem.classList.remove("is-active");
    currentBullet.classList.remove("is-active");
    if (nextItem) {
      nextItem.classList.add("is-active");
      nextBullet.classList.add("is-active");
    } else {
      if (dir === "next") {
        el.firstElementChild.classList.add("is-active");
        el.parentNode
          .getElementsByClassName("carousel-bullets")[0]
          .firstElementChild.classList.add("is-active");
      } else {
        el.lastElementChild.classList.add("is-active");
        el.parentNode
          .getElementsByClassName("carousel-bullets")[0]
          .lastElementChild.classList.add("is-active");
      }
    }
  }

  // Equal heights fix
  function equalHeightCarousel(carousel, items) {
    let taller = 0;
    let height;
    for (let i = 0; i < items.length; i++) {
      items[0].parentNode.style.minHeight = taller + "px";
      items[i].classList.add("is-loading");
      height = items[i].offsetHeight;
      items[i].classList.remove("is-loading");
      if (height > taller) {
        taller = height;
      }
    }
    items[0].parentNode.style.minHeight = taller + "px";
  }

  // Clear autorotate
  function clearAutorotate(autorotate) {
    if (autorotate) {
      clearInterval(autorotate);
    }
  }

  if (carousels.length > 0) {
    for (let i = 0; i < carousels.length; i++) {
      let carousel = carousels[i];
      let items = carousel.getElementsByClassName("carousel-item");
      let activeItem = 0;
      let autorotateTiming = carousel.getAttribute("data-autorotate");
      // Generate bullets container
      const bulletsContainer = document.createElement("div");
      bulletsContainer.className = "carousel-bullets";
      carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling);
      for (let i = 0; i < items.length; i++) {
        // Add data attributes
        items[i].setAttribute("data-carousel", i);
        // Determine a new active item, if any
        if (items[i].classList.contains("is-active")) activeItem = i;
        // Generate bullets
        let bullet = document.createElement("button");
        bullet.className = "carousel-bullet";
        bullet.setAttribute("data-bullet", i);
        carousel.parentNode
          .getElementsByClassName("carousel-bullets")[0]
          .appendChild(bullet);
      }
      // Add is-active class to first carousel item and bullet
      items[activeItem].classList.add("is-active");
      let bullets = carousel.parentNode.getElementsByClassName(
        "carousel-bullet"
      );
      bullets[activeItem].classList.add("is-active");
      // Equal height items
      equalHeightCarousel(carousel, items);
      window.addEventListener("resize", function () {
        equalHeightCarousel(carousel, items);
      });
      // Autorotate
      let autorotate = false;
      if (autorotateTiming) {
        autorotate = setInterval(function () {
          rotateCarousel(carousel, "next");
        }, autorotateTiming);
      }
      // Rotate by bullet click
      for (let i = 0; i < bullets.length; i++) {
        let bullet = bullets[i];
        bullet.addEventListener("click", function (e) {
          e.preventDefault();
          // Do nothing if item is active
          if (bullet.classList.contains("is-active")) {
            return;
          }
          // Remove active classes
          for (let i = 0; i < bullets.length; i++) {
            bullets[i].classList.remove("is-active");
          }
          for (let i = 0; i < items.length; i++) {
            items[i].classList.remove("is-active");
          }
          // Add active classes to corresponding items and bullets
          let index = this.getAttribute("data-bullet");
          items[index].classList.add("is-active");
          this.classList.add("is-active");
          // Clear autorotate timing
          clearAutorotate(autorotate);
        });
      }
      // Rotate on swipe
      swipe.init(carousel, function (e) {
        if (e.direction === "left") {
          rotateCarousel(carousel, "next");
        } else if (e.direction === "right") {
          rotateCarousel(carousel, "prev");
        }
        // Clear autorotate timing
        clearAutorotate(autorotate);
      });
    }
  }
})();