Verified Commit 6bbd1bf0 authored by Leo Wilson's avatar Leo Wilson

Simplify JS and remove bottom header animation

parent 40c4cf45
......@@ -4,4 +4,6 @@ A lighter version of [Track3's Hermit theme](https://github.com/Track3/hermit) f
See Hermit's official GitHub repo for documentation. Unless otherwise stated here, everything is identical.
* Removed theme name from footer
\ No newline at end of file
* Significantly simplified JS
* Removed theme name from footer
* Bottom header does not disappear
\ No newline at end of file
/**
* 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);
}
document.querySelector(ele) && document.querySelector(ele).addEventListener(e, callback);
}
/**
* Functions
*/
// Auto Hide Header
//
let header = document.getElementById('site-header');
let lastScrollPosition = window.pageYOffset;
const autoHideHeader = () => {
let currentScrollPosition = Math.max(window.pageYOffset, 0);
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 showImg = () => {
document.querySelector('.bg-img').classList.add('show-bg-img');
}
const hideImg = () => {
document.querySelector('.bg-img').classList.remove('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", showImg);
listen('.bg-img', "click", hideImg);
if (header) {
listen('#menu-btn', "click", () => {
let mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuVisible) {
mobileMenu.style.animationName = 'bounceOutRight';
mobileMenu.style.webkitAnimationName = 'bounceOutRight'
mobileMenuVisible = false;
} else {
mobileMenu.style.animationName = 'bounceInRight';
mobileMenu.style.webkitAnimationName = 'bounceInRight';
mobileMenu.style.display = 'block';
mobileMenuVisible = true;
}
});
listen('#toc-btn', 'click', () => { document.getElementById('toc').classList.toggle('show-toc'); });
listen('#img-btn', 'click', () => { document.querySelector('.bg-img').classList.add('show-bg-img'); });
listen('.bg-img', 'click', () => { document.querySelector('.bg-img').classList.remove('show-bg-img'); });
document.querySelectorAll('.post-year').forEach((ele)=> {
ele.addEventListener('click', () => {
window.location.hash = '#' + ele.id;
});
});
window.addEventListener('scroll', throttle(() => {
autoHideHeader();
if (mobileMenuVisible == true) {
toggleMobileMenu();
}
}, 250));
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment