scripts.js
2.48 KB
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
/*!
* Start Bootstrap - Stylish Portfolio v6.0.4 (https://startbootstrap.com/theme/stylish-portfolio)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-stylish-portfolio/blob/master/LICENSE)
*/
window.addEventListener("DOMContentLoaded", (event) => {
const sidebarWrapper = document.getElementById("sidebar-wrapper");
let scrollToTopVisible = false;
// Closes the sidebar menu
const menuToggle = document.body.querySelector(".menu-toggle");
menuToggle.addEventListener("click", (event) => {
event.preventDefault();
sidebarWrapper.classList.toggle("active");
_toggleMenuIcon();
menuToggle.classList.toggle("active");
});
// Closes responsive menu when a scroll trigger link is clicked
var scrollTriggerList = [].slice.call(
document.querySelectorAll("#sidebar-wrapper .js-scroll-trigger")
);
scrollTriggerList.map((scrollTrigger) => {
scrollTrigger.addEventListener("click", () => {
sidebarWrapper.classList.remove("active");
menuToggle.classList.remove("active");
_toggleMenuIcon();
});
});
function _toggleMenuIcon() {
const menuToggleBars = document.body.querySelector(
".menu-toggle > .fa-bars"
);
const menuToggleTimes = document.body.querySelector(
".menu-toggle > .fa-times"
);
if (menuToggleBars) {
menuToggleBars.classList.remove("fa-bars");
menuToggleBars.classList.add("fa-times");
}
if (menuToggleTimes) {
menuToggleTimes.classList.remove("fa-times");
menuToggleTimes.classList.add("fa-bars");
}
}
// Scroll to top button appear
document.addEventListener("scroll", () => {
const scrollToTop = document.body.querySelector(".scroll-to-top");
if (document.documentElement.scrollTop > 100) {
if (!scrollToTopVisible) {
fadeIn(scrollToTop);
scrollToTopVisible = true;
}
} else {
if (scrollToTopVisible) {
fadeOut(scrollToTop);
scrollToTopVisible = false;
}
}
});
});
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= 0.1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += 0.1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}