-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
101 lines (79 loc) · 2.71 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
94
95
96
97
98
99
const nav = document.querySelector(".nav");
const navMenu = document.querySelector(".nav-items");
const btnToggleNav = document.querySelector(".menu-btn");
const workEls = document.querySelectorAll(".work-box");
const workImgs = document.querySelectorAll(".work-img");
const mainEl = document.querySelector("main");
const yearEl = document.querySelector(".footer-text span");
const emailId = '[email protected]';
yearEl.textContent = new Date().getFullYear();
function onSendEmailClick() {
window.open(`mailto:${emailId}`);
}
const toggleNav = () => {
nav.classList.toggle("hidden");
// Prevent screen from scrolling when menu is opened
document.body.classList.toggle("lock-screen");
if (nav.classList.contains("hidden")) {
btnToggleNav.textContent = "menu";
} else {
// When menu is opened after transition change text respectively
setTimeout(() => {
btnToggleNav.textContent = "close";
}, 475);
}
};
btnToggleNav.addEventListener("click", toggleNav);
navMenu.addEventListener("click", (e) => {
if (e.target.localName === "a") {
toggleNav();
}
});
document.body.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !nav.classList.contains("hidden")) {
toggleNav();
}
});
// Animating work instances on scroll
workImgs.forEach((workImg) => workImg.classList.add("transform"));
let observer = new IntersectionObserver(
(entries) => {
const [entry] = entries;
const [textbox, picture] = Array.from(entry.target.children);
if (entry.isIntersecting) {
picture.classList.remove("transform");
Array.from(textbox.children).forEach(
(el) => (el.style.animationPlayState = "running")
);
}
},
{ threshold: 0.3 }
);
workEls.forEach((workEl) => {
observer.observe(workEl);
});
// Toggle theme and store user preferred theme for future
const switchThemeEl = document.querySelector('input[type="checkbox"]');
const storedTheme = localStorage.getItem("theme");
switchThemeEl.checked = storedTheme === "dark" || storedTheme === null;
switchThemeEl.addEventListener("click", () => {
const isChecked = switchThemeEl.checked;
if (!isChecked) {
document.body.classList.remove("dark");
document.body.classList.add("light");
localStorage.setItem("theme", "light");
switchThemeEl.checked = false;
} else {
document.body.classList.add("dark");
document.body.classList.remove("light");
localStorage.setItem("theme", "dark");
}
});
// Trap the tab when menu is opened
const lastFocusedEl = document.querySelector('a[data-focused="last-focused"]');
document.body.addEventListener("keydown", (e) => {
if (e.key === "Tab" && document.activeElement === lastFocusedEl) {
e.preventDefault();
btnToggleNav.focus();
}
});