-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
82 lines (76 loc) · 2.24 KB
/
main.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
const slider = document.querySelector(".cards");
let isDown = false;
let startX;
let scrollLeft;
const cards = document.querySelectorAll(".card");
const btnShowMore = document.querySelector(".btnShowMore");
let cardsCounter = 3;
let cardsCounterStart = 3;
let viewportWidth = window.innerWidth;
const hamburgerMenuIcon = document.querySelector(".hamburgerMenuIcon");
const mobileMenu = document.querySelector(".mobileMenu");
let isActive = false;
slider.addEventListener("mousedown", (e) => {
isDown = true;
slider.style.cursor = "grabbing";
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
slider.style.cursor = "grab";
});
slider.addEventListener("mouseup", () => {
isDown = false;
slider.style.cursor = "grab";
});
slider.addEventListener("mousemove", (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = x - startX;
slider.scrollLeft = scrollLeft - walk;
});
btnShowMore.addEventListener("click", () => {
while (cardsCounter < cardsCounterStart + 3) {
cards[cardsCounter].classList.remove("hidden");
cardsCounter++;
}
cardsCounterStart = cardsCounter;
});
window.addEventListener("resize", () => {
viewportWidth = window.innerWidth;
if (viewportWidth >= 640) {
cards.forEach(card => {
card.classList.remove("hidden");
});
} else {
cards.forEach(card => {
card.classList.add("hidden");
});
cardsCounter = 0;
cardsCounterStart = 0;
while (cardsCounter < cardsCounterStart + 3) {
cards[cardsCounter].classList.remove("hidden");
cardsCounter++;
}
cardsCounterStart = cardsCounter;
}
});
window.onload = function cardsOnLoad() {
viewportWidth = window.innerWidth;
if (viewportWidth >= 640) {
cards.forEach(card => {
card.classList.remove("hidden");
});
}
};
hamburgerMenuIcon.addEventListener("click", () => {
if (!isActive) {
mobileMenu.classList.add("activeMenu");
isActive = true;
} else {
mobileMenu.classList.remove("activeMenu");
isActive = false;
}
});