55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import { expandNav, closeNav, show } from "./functions.js";
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Variables
|
|
const nodes = {
|
|
burgerBtn: document.querySelector(".burger-btn"),
|
|
closeNavBtn: document.querySelector("#expanded-nav .close-btn"),
|
|
expandedNav: document.querySelector("#expanded-nav"),
|
|
main: document.querySelector("main"),
|
|
footer: document.querySelector(".main-footer"),
|
|
nav: document.querySelector(".main-nav"),
|
|
jsLinks: document.querySelectorAll(".js-link"),
|
|
images: document.querySelectorAll("img"),
|
|
};
|
|
|
|
console.log(nodes.images);
|
|
|
|
// Listeners
|
|
nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
|
|
nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
|
|
nodes.jsLinks.forEach((jsLink) => {
|
|
const to = jsLink.dataset.href;
|
|
jsLink.addEventListener("click", () => (location.href = to));
|
|
});
|
|
|
|
nodes.images.forEach((image) => {
|
|
if (image.complete) {
|
|
show(image);
|
|
} else {
|
|
image.addEventListener("load", () => {
|
|
show(image);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Key shortcuts
|
|
window.addEventListener("keyup", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeNav(nodes);
|
|
}
|
|
});
|
|
window.addEventListener("scroll", (event) => {
|
|
if (nodes.expandedNav.classList.contains("open")) {
|
|
closeNav(nodes);
|
|
}
|
|
if (
|
|
(window.scrollY > 120) &
|
|
!nodes.nav.classList.contains("main-nav--small")
|
|
) {
|
|
nodes.nav.classList.add("main-nav--small");
|
|
} else if (window.scrollY < 100) {
|
|
nodes.nav.classList.remove("main-nav--small");
|
|
}
|
|
});
|
|
});
|