-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
121 lines (110 loc) · 3.7 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
"use strict";
const sections = document.querySelectorAll(".section");
const navList = document.querySelectorAll(".nav-list");
const mobileNavList = document.querySelector(".mobile-nav-list");
const navCloseBtn = document.querySelector(".btn-close-mobile-nav");
const menuBtn = document.querySelector(".menu-btn");
const navMobileBtn = document.querySelector(".btn-mobile-nav");
const flavorsSection = document.querySelector(".section-flavors");
const hasLazyImg = document.querySelectorAll(".has-lazy-img");
// general toggle nav function
const mobileNavToggle = function () {
// move the body and show the nav
mobileNavList.classList.toggle("mobile-nav-list-active");
sections.forEach((sec) => sec.classList.toggle("nav-open"));
// hide the nav menu button
menuBtn.classList.toggle("open");
};
// show nav when menu is clicked
navMobileBtn.addEventListener("click", () => {
mobileNavToggle();
});
// close nav when cross is clicked
navCloseBtn.addEventListener("click", function (e) {
mobileNavToggle();
});
// smooth scrolling
navList.forEach((list) => {
list.addEventListener("click", function (e) {
e.preventDefault();
if (!e.target.classList.contains("nav-link")) return;
const sectionId = e.target.getAttribute("href").split("#")[1];
const section = document.getElementById(sectionId);
section.scrollIntoView({ behavior: "smooth" });
if (list.classList.contains("main-nav-list")) {
return;
}
mobileNavToggle();
});
});
// section reveal
const revealSection = function (entries, observer) {
const [entry] = entries;
if (!entry.isIntersecting) return;
entry.target.classList.remove("section--hidden");
observer.unobserve(entry.target);
};
const sectionObserver = new IntersectionObserver(revealSection, {
root: null,
threshold: [0.01],
});
sections.forEach(function (section) {
// avoiding nav and header when revealing sections
if (
section.classList.contains("header") ||
section.classList.contains("section-hero") ||
section.classList.contains("footer") ||
section.classList.contains("section-flavors")
) {
return;
}
sectionObserver.observe(section);
section.classList.add("section--hidden");
});
// Lazy loading images
// another way to fixing the problem of images not loading when the user refresh the site and the images are already in view
// const imgTargets = document.querySelectorAll("img[data-src]");
// const flavor = document.querySelector(".flavor");
// const loadImg = function (entries, observer) {
// const [entry] = entries;
// if (!entry.isIntersecting) {
// return;
// }
// // Replace src with data-src
// imgTargets.forEach((img) => {
// img.src = img.dataset.src;
// });
// imgTargets.forEach((img) => {
// img.addEventListener("load", function (e) {
// console.log(e.target);
// e.target.closest(".flavor-img").classList.remove("lazy-img");
// });
// });
// observer.unobserve(entry.target);
// };
// ----------------------------------------------
// solution one not that optimal
const loadImg = function (entries, observer) {
const [entry] = entries;
if (!entry.isIntersecting) {
return;
}
const imgTargets = entry.target.querySelectorAll("img[data-src]");
// Replace src with data-src
imgTargets.forEach((img) => {
img.src = img.dataset.src;
});
imgTargets.forEach((img) => {
img.addEventListener("load", function (e) {
e.target.closest(".lazy-img").classList.remove("lazy-img");
});
});
observer.unobserve(entry.target);
};
const initIntersection = function () {};
const imgObserver = new IntersectionObserver(loadImg, {
root: null,
threshold: [0, 1],
});
imgObserver.observe(flavorsSection);
hasLazyImg.forEach((section) => imgObserver.observe(section));