openpower.foundation/themes/openpowerfoundation/assets/js/changelog.js

(function() {
const changelog = document.querySelector(".changelog ol"),
elH = document.querySelectorAll(".changelog li > div"),
arrows = document.querySelectorAll(".changelog .arrows .arrow"),
arrowPrev = document.querySelector(".changelog .arrows .arrow__prev"),
arrowNext = document.querySelector(".changelog .arrows .arrow__next"),
firstItem = document.querySelector(".changelog li:first-child"),
lastItem = document.querySelector(".changelog li:last-child"),
xScrolling = 280,
disabledClass = "disabled";
window.addEventListener("load", init);
function init() {
	setEqualHeights(elH);
	animateTl(xScrolling, arrows, changelog);
	setSwipeFn(changelog, arrowPrev, arrowNext);
	setKeyboardFn(arrowPrev, arrowNext);
}
function setEqualHeights(el) {
	let counter = 0;
	for (let i = 0; i < el.length; i++) {
		const singleHeight = el[i].offsetHeight;
		if (counter < singleHeight) {
			counter = singleHeight;
		}
	}
	for (let i = 0; i < el.length; i++) {
		el[i].style.height = `${counter}px`;
	}
}
function isElementInViewport(el) {
	const rect = el.getBoundingClientRect();
	return (
		rect.top >= 0 &&
		rect.left >= 0 &&
		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
		rect.right <= (window.innerWidth || document.documentElement.clientWidth)
	);
}
function setBtnState(el, flag = true) {
	if (flag) {
		el.classList.add(disabledClass);
	} else {
		if (el.classList.contains(disabledClass)) {
			el.classList.remove(disabledClass);
		}
		el.disabled = false;
	}
}
function animateTl(scrolling, el, tl) {
	let counter = 0;
	for (let i = 0; i < el.length; i++) {
		el[i].addEventListener("click", function() {
			if (!arrowPrev.disabled) {
				arrowPrev.disabled = true;
			}
			if (!arrowNext.disabled) {
				arrowNext.disabled = true;
			}
			const sign = (this.classList.contains("arrow__prev")) ? "" : "-";
			if (counter === 0) {
				tl.style.transform = `translateX(-${scrolling}px)`;
			} else {
				const tlStyle = getComputedStyle(tl);
				const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
				const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
				tl.style.transform = `translateX(${values}px)`;
			}
			setTimeout(() => {
				isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
				isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
			}, 1100);
			counter++;
		});
	}
}
function setSwipeFn(tl, prev, next) {
	const hammer = new Hammer(tl);
	hammer.on("swipeleft", () => next.click());
	hammer.on("swiperight", () => prev.click());
}
function setKeyboardFn(prev, next) {
	document.addEventListener("keydown", (e) => {
		if ((e.which === 37) || (e.which === 39)) {
			const changelogOfTop = changelog.offsetTop;
			const y = window.pageYOffset;
			if (changelogOfTop !== y) {
				window.scrollTo(0, changelogOfTop);
			}
			if (e.which === 37) {
				prev.click();
			} else if (e.which === 39) {
				next.click();
			}
		}
	});
}
})();