1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
/*
* Utils
*/
// Throttle
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);
}
};
// FUNCTIONS
// 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);
}
};
// Execute setup function when DOM is fully loaded
document.addEventListener('DOMContentLoaded', setupEventListeners);
|
