diff options
Diffstat (limited to 'static/js/main.js')
-rw-r--r-- | static/js/main.js | 142 |
1 files changed, 71 insertions, 71 deletions
diff --git a/static/js/main.js b/static/js/main.js index a40c504..6432eae 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,98 +1,98 @@ -/** +/* * Utils */ // Throttle -// -const throttle = (callback, limit) => { - let timeoutHandler = null; - return () => { - if (timeoutHandler == null) { - timeoutHandler = setTimeout(() => { - callback(); - timeoutHandler = null; - }, limit); - } - }; +var 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); - } +var listen = (ele, e, callback) => { + if (document.querySelector(ele) !== null) { + document.querySelector(ele).addEventListener(e, callback); + } }; -/** - * Functions - */ +// 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; +var header = document.getElementById('site-header'); +var lastScrollPosition = window.pageYOffset; + +var 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; - } +var mobileMenuVisible = false; + +var 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'); + document.querySelector('.bg-img').classList.add('show-bg-img'); }; -const hideImg = () => { - document.querySelector('.bg-img').classList.remove('show-bg-img'); +var hideImg = () => { + document.querySelector('.bg-img').classList.remove('show-bg-img'); }; // ToC Toggle -// -const toggleToc = () => { - document.getElementById('toc').classList.toggle('show-toc'); +var 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); - - window.addEventListener( - 'scroll', - throttle(() => { - autoHideHeader(); - - if (mobileMenuVisible == true) { - toggleMobileMenu(); - } - }, 250) - ); + const throttledAutoHideHeader = throttle(() => { + autoHideHeader(); + + if (mobileMenuVisible) { + toggleMobileMenu(); + } + }, 250); + + // Check if showImg function already exists + //const showImg = () => { + // document.querySelector('.bg-img').classList.add('show-bg-img'); + //}; + + listen('#menu-btn', 'click', toggleMobileMenu); + listen('#toc-btn', 'click', toggleToc); + listen('#img-btn', 'click', showImg); + listen('.bg-img', 'click', hideImg); + + window.addEventListener( + 'scroll', + throttledAutoHideHeader + ); } |