From 50b25f7b2f0b6140a096f9a55f0cd84951691df9 Mon Sep 17 00:00:00 2001 From: saibotk Date: Fri, 14 Aug 2020 19:43:39 +0200 Subject: [PATCH] Adjust main.js to also show the menu bar when scrolled to the bottom --- assets/js/main.js | 106 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 assets/js/main.js diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..2494be3 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,106 @@ +/** + * Utils + * + * From https://github.com/Track3/hermit/blob/master/assets/js/main.js + * + * MIT licensed + */ + +// 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 = Math.max(window.pageYOffset, 0); + if (currentScrollPosition > lastScrollPosition && document.documentElement.clientHeight + currentScrollPosition < document.documentElement.offsetHeight) { + 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); + + document.querySelectorAll('.post-year').forEach((ele)=> { + ele.addEventListener('click', () => { + window.location.hash = '#' + ele.id; + }); + }); + + window.addEventListener('scroll', throttle(() => { + autoHideHeader(); + + if (mobileMenuVisible == true) { + toggleMobileMenu(); + } + }, 450)); + } + \ No newline at end of file