hermit-V2/assets/js/main.js

97 lines
2.1 KiB
JavaScript
Raw Normal View History

2018-10-23 01:15:50 -04:00
/**
* 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);
}
}
2018-10-23 01:15:50 -04:00
/**
* Functions
*/
// Auto Hide Header
//
let header = document.getElementById('site-header');
let lastScrollPosition = window.pageYOffset;
2018-10-23 01:15:50 -04:00
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');
2018-10-23 01:15:50 -04:00
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
2018-10-23 01:15:50 -04:00
//
2019-01-03 05:25:14 -05:00
const showImg = () => {
document.querySelector('.bg-img').classList.add('show-bg-img');
}
const hideImg = () => {
document.querySelector('.bg-img').classList.remove('show-bg-img');
2018-10-23 01:15:50 -04:00
}
// ToC Toggle
2018-12-28 09:52:23 -05:00
//
const toggleToc = () => {
document.getElementById('toc').classList.toggle('show-toc');
}
if (header !== null) {
listen('#menu-btn', "click", toggleMobileMenu);
listen('#toc-btn', "click", toggleToc);
2019-01-03 05:25:14 -05:00
listen('#img-btn', "click", showImg);
listen('.bg-img', "click", hideImg);
2018-12-28 09:52:23 -05:00
2018-10-23 01:15:50 -04:00
window.addEventListener('scroll', throttle(() => {
autoHideHeader();
2018-12-28 09:52:23 -05:00
2018-10-23 01:15:50 -04:00
if (mobileMenuVisible == true) {
2019-01-04 04:05:49 -05:00
toggleMobileMenu();
2018-10-23 01:15:50 -04:00
}
}, 250));
}