You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
openpower.foundation_sw_dev/themes/openpowerfoundation/assets/js/changelog.js

98 lines
3.0 KiB
JavaScript

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