93 lines
2.0 KiB
JavaScript
93 lines
2.0 KiB
JavaScript
/**
|
|
* Utils
|
|
*/
|
|
|
|
// Throttle
|
|
//
|
|
const throttle = (callback, limit) => {
|
|
let timeoutHandler = null;
|
|
return () => {
|
|
if (timeoutHandler == null) {
|
|
timeoutHandler = setTimeout(() => {
|
|
callback();
|
|
timeoutHandler = null;
|
|
}, limit);
|
|
}
|
|
};
|
|
};
|
|
|
|
// addEventListener Helper
|
|
//
|
|
const listen = (ele, e, callback) => {
|
|
if (document.querySelector(ele) !== null) {
|
|
document.querySelector(ele).addEventListener(e, callback);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Functions
|
|
*/
|
|
|
|
// Auto Hide Header
|
|
//
|
|
let header = document.getElementById('site-header');
|
|
let lastScrollPosition = window.pageYOffset;
|
|
|
|
const autoHideHeader = () => {
|
|
let currentScrollPosition = window.pageYOffset;
|
|
if (currentScrollPosition > lastScrollPosition) {
|
|
header.classList.remove('slideInUp');
|
|
header.classList.add('slideOutDown');
|
|
} else {
|
|
header.classList.remove('slideOutDown');
|
|
header.classList.add('slideInUp');
|
|
}
|
|
lastScrollPosition = currentScrollPosition;
|
|
}
|
|
|
|
// Mobile Menu Toggle
|
|
//
|
|
let mobileMenuVisible = false;
|
|
|
|
const toggleMobileMenu = () => {
|
|
let mobileMenu = document.getElementById('mobile-menu');
|
|
if (mobileMenuVisible == false) {
|
|
mobileMenu.style.animationName = 'bounceInRight';
|
|
mobileMenu.style.webkitAnimationName = 'bounceInRight';
|
|
mobileMenu.style.display = 'block';
|
|
mobileMenuVisible = true;
|
|
} else {
|
|
mobileMenu.style.animationName = 'bounceOutRight';
|
|
mobileMenu.style.webkitAnimationName = 'bounceOutRight'
|
|
mobileMenuVisible = false;
|
|
}
|
|
}
|
|
|
|
// Featured Image Toggle
|
|
//
|
|
const toggleImg = () => {
|
|
document.querySelector('.bg-img').classList.toggle('show-bg-img');
|
|
}
|
|
|
|
// ToC Toggle
|
|
//
|
|
const toggleToc = () => {
|
|
document.getElementById('toc').classList.toggle('show-toc');
|
|
}
|
|
|
|
|
|
if (header !== null) {
|
|
listen('#menu-btn', "click", toggleMobileMenu);
|
|
listen('#toc-btn', "click", toggleToc);
|
|
listen('#img-btn', "click", toggleImg);
|
|
listen('.bg-img', "click", toggleImg);
|
|
|
|
window.addEventListener('scroll', throttle(() => {
|
|
autoHideHeader();
|
|
|
|
if (mobileMenuVisible == true) {
|
|
mobileMenuToggle();
|
|
}
|
|
}, 250));
|
|
}
|