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
|
/**
* Utils
*/
// 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 = 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;
}
}
// 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);
window.addEventListener('scroll', throttle(() => {
autoHideHeader();
if (mobileMenuVisible == true) {
mobileMenuToggle();
}
}, 250));
}
|
