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)
      })
    }
  }
}())