-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
93 lines (73 loc) · 2.53 KB
/
script.js
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
// ==Start splide slider
// initialize
const splide = new Splide('.splide', {
type: 'loop',
autoplay: true,
interval: 3000,
});
document.addEventListener('DOMContentLoaded', () => {
splide.mount();
});
// Handle custom arrows
document.querySelector('.custom__arrow--prev').addEventListener('click', function () {
splide.go('-');
});
document.querySelector('.custom__arrow--next').addEventListener('click', function () {
splide.go('+');
});
// ==End splide slider
// ==Start nav handler
let prevScrollpos = window.pageYOffset;
window.onscroll = () => {
let currentScrollPos = window.pageYOffset;
const nav = document.querySelector(".navbar");
const scrollUpBtn = document.querySelector(".back-to-btn");
if (window.innerWidth > 480) {
if (currentScrollPos < 250) {
scrollUpBtn.style.opacity = '0';
scrollUpBtn.style.visibility = 'hidden';
} else {
scrollUpBtn.style.opacity = '1';
scrollUpBtn.style.visibility = 'visible';
}
if (prevScrollpos > currentScrollPos) {
nav.style.opacity = "1";
nav.style.visibility = 'visible';
} else {
nav.style.opacity = "0";
nav.style.visibility = 'hidden';
}
prevScrollpos = currentScrollPos;
}
}
// ==Start nav handler
// ==Start handle nav visibility in mobile
const menuIcon = document.querySelector('.menu-icon');
const nav = document.querySelector(".navbar");
menuIcon.addEventListener('mouseup', () => {
nav.classList.contains('active') ? nav.classList.remove('active') : nav.classList.add('active');
menuIcon.classList.contains('active') ? menuIcon.classList.remove('active') : menuIcon.classList.add('active');
menuIcon.classList.contains('active') ? menuIcon.classList.replace('fa-bars', 'fa-minus') : menuIcon.classList.replace('fa-minus', 'fa-bars');
})
const childsArr = Array.from(nav.children);
childsArr.map(child => {
!child.classList.contains('search-box') &&
child.addEventListener('mouseup', () => {
menuIcon.classList.replace('fa-minus', 'fa-bars');
menuIcon.classList.remove('active');
nav.classList.remove('active');
})
})
// ==End handle nav visibility in mobile
// ==Start handle loading screen
window.addEventListener('load', () => {
const body = document.body;
const loadScreen = document.querySelector('.loading-screen');
const shadowCircle = document.querySelector('.shadow-circle');
setTimeout(() => {
body.classList.remove('loading');
loadScreen.classList.remove('loading');
shadowCircle.classList.remove('loading');
}, 3000)
})
// ==End handle loading screen