decentralized-video-chat/public/js/carousel.js
2020-03-30 14:16:08 -04:00

196 lines
6.2 KiB
JavaScript
Executable File

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