decentralized-video-chat/public/js/scroll-reveal.js

77 lines
2.0 KiB
JavaScript
Raw Normal View History

2020-03-31 02:16:08 +08:00
(function () {
"use strict";
const revealEl = document.querySelectorAll("[class*=reveal-]");
let viewportHeight = window.innerHeight;
2020-03-24 11:20:28 +08:00
2020-03-31 02:16:08 +08:00
function throttle(delay, fn) {
var lastCall = 0;
2020-03-24 11:20:28 +08:00
return function () {
2020-03-31 02:16:08 +08:00
var now = new Date().getTime();
2020-03-24 11:20:28 +08:00
if (now - lastCall < delay) {
2020-03-31 02:16:08 +08:00
return;
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
lastCall = now;
return fn.apply(void 0, arguments);
};
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
function elementIsVisible(el, offset) {
return el.getBoundingClientRect().top <= viewportHeight - offset;
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
function revealElements() {
2020-03-24 11:20:28 +08:00
for (let i = 0; i < revealEl.length; i++) {
2020-03-31 02:16:08 +08:00
let el = revealEl[i];
let revealDelay = el.getAttribute("data-reveal-delay");
let revealOffset = el.getAttribute("data-reveal-offset")
? el.getAttribute("data-reveal-offset")
: "200";
let listenedEl = el.getAttribute("data-reveal-container")
? el.closest(el.getAttribute("data-reveal-container"))
: el;
if (
elementIsVisible(listenedEl, revealOffset) &&
!el.classList.contains("is-revealed")
) {
2020-03-24 11:20:28 +08:00
if (revealDelay && revealDelay !== 0) {
setTimeout(function () {
2020-03-31 02:16:08 +08:00
el.classList.add("is-revealed");
}, revealDelay);
2020-03-24 11:20:28 +08:00
} else {
2020-03-31 02:16:08 +08:00
el.classList.add("is-revealed");
2020-03-24 11:20:28 +08:00
}
}
}
2020-03-31 02:16:08 +08:00
revealDone();
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
function revealScroll() {
throttle(30, revealElements());
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
function revealResize() {
viewportHeight = window.innerHeight;
throttle(30, revealElements());
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
function revealDone() {
if (
revealEl.length >
document.querySelectorAll("[class*=reveal-].is-revealed").length
)
return;
window.removeEventListener("load", revealElements);
window.removeEventListener("scroll", revealScroll);
window.removeEventListener("resize", revealResize);
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
if (
revealEl.length > 0 &&
document.body.classList.contains("has-animations")
) {
window.addEventListener("load", revealElements);
window.addEventListener("scroll", revealScroll);
window.addEventListener("resize", revealResize);
2020-03-24 11:20:28 +08:00
}
2020-03-31 02:16:08 +08:00
})();