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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
/*
* Utils
*/
// Throttle
var throttle = (callback, limit) => {
let timeoutHandler = null;
return () => {
if (timeoutHandler == null) {
timeoutHandler = setTimeout(() => {
callback();
timeoutHandler = null;
}, limit);
}
};
};
// addEventListener Helper
var listen = (ele, e, callback) => {
if (document.querySelector(ele) !== null) {
document.querySelector(ele).addEventListener(e, callback);
}
};
// FUNCTIONS
// Auto Hide Header
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
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');
};
var hideImg = () => {
document.querySelector('.bg-img').classList.remove('show-bg-img');
};
// ToC Toggle
var toggleToc = () => {
document.getElementById('toc').classList.toggle('show-toc');
};
if (header !== null) {
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
);
}
|
