diff options
Diffstat (limited to 'static/js/main.js')
-rw-r--r-- | static/js/main.js | 75 |
1 files changed, 11 insertions, 64 deletions
diff --git a/static/js/main.js b/static/js/main.js index 18316e0..b4bcc4f 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,75 +1,22 @@ /* - * Utils + * Minimal JS for Mobile Menu and Table of Contents Toggle */ -// Throttle Helper -const throttle = (callback, limit) => { - let timeoutHandler = null; - return () => { - if (timeoutHandler === null) { - timeoutHandler = setTimeout(() => { - callback(); - timeoutHandler = null; - }, limit); - } - }; -}; - -// addEventListener Helper -const listen = (selector, eventType, callback) => { - const element = document.querySelector(selector); - if (element) { - element.addEventListener(eventType, callback); - } -}; - -// Auto Hide Header -const header = document.getElementById('site-header'); -let lastScrollPosition = window.scrollY; - -const autoHideHeader = () => { - const currentScrollPosition = window.scrollY; - - header.classList.toggle('slideInUp', currentScrollPosition <= lastScrollPosition); - header.classList.toggle('slideOutDown', currentScrollPosition > lastScrollPosition); - - lastScrollPosition = currentScrollPosition; -}; - -// Mobile Menu Toggle -let mobileMenuVisible = false; -const mobileMenu = document.getElementById('mobile-menu'); - -const toggleMobileMenu = () => { - const animationName = mobileMenuVisible ? 'bounceOutRight' : 'bounceInRight'; - mobileMenu.style.animationName = animationName; - mobileMenu.style.display = mobileMenuVisible ? 'none' : 'block'; - mobileMenuVisible = !mobileMenuVisible; -}; - -// Featured Image Toggle -const toggleImg = () => { - document.querySelector('.bg-img').classList.toggle('show-bg-img'); -}; - // Table of Contents Toggle const toggleToc = () => { document.getElementById('toc').classList.toggle('show-toc'); }; -// Event Listeners -const setupEventListeners = () => { - if (header) { - const throttledAutoHideHeader = throttle(autoHideHeader, 250); - - listen('#menu-btn', 'click', toggleMobileMenu); - listen('#toc-btn', 'click', toggleToc); - listen('#img-btn', 'click', toggleImg); - listen('.bg-img', 'click', toggleImg); - - window.addEventListener('scroll', throttledAutoHideHeader); +// Mobile Menu Toggle +let mobileMenuVisible = false; +const toggleMobileMenu = () => { + const mobileMenu = document.getElementById('mobile-menu'); + if (mobileMenu) { + mobileMenu.style.display = mobileMenuVisible ? 'none' : 'block'; + mobileMenuVisible = !mobileMenuVisible; } }; -// Execute setup function when DOM is fully loaded -document.addEventListener('DOMContentLoaded', setupEventListeners); +// Event Listeners +document.querySelector('#toc-btn')?.addEventListener('click', toggleToc); +document.querySelector('#menu-btn')?.addEventListener('click', toggleMobileMenu); |