-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
92 lines (78 loc) · 2.5 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
const postActionsControllers = document.querySelectorAll(
".post-actions-controller"
);
// When post action controllers are clicked, the action content is opened and closed
postActionsControllers.forEach((btn) => {
btn.addEventListener("click", () => {
const targetId = btn.getAttribute("data-target");
const postActionsContent = document.getElementById(targetId);
if (postActionsContent) {
const isVisible = postActionsContent.getAttribute("data-visible");
if (isVisible === "false") {
postActionsContent.setAttribute("data-visible", "true");
postActionsContent.setAttribute("aria-hidden", "false");
btn.setAttribute("aria-expanded", "true");
} else {
postActionsContent.setAttribute("data-visible", "false");
postActionsContent.setAttribute("aria-hidden", "true");
btn.setAttribute("aria-expanded", "false");
}
}
});
});
// If the action content is opened, it is closed by clicking outside of it
function handleClickOutside(event) {
postActionsControllers.forEach((btn) => {
const targetId = btn.getAttribute("data-target");
const postActionsContent = document.getElementById(targetId);
if (postActionsContent && postActionsContent.getAttribute("data-visible") === "true") {
if (!postActionsContent.contains(event.target) && event.target !== btn) {
postActionsContent.setAttribute("data-visible", "false");
postActionsContent.setAttribute("aria-hidden", "true");
btn.setAttribute("aria-expanded", "false");
}
}
});
}
document.addEventListener("click", handleClickOutside);
postActionsControllers.forEach((btn) => {
btn.addEventListener("click", (event) => {
event.stopPropagation();
});
});
const likeBtns = document.querySelectorAll(".post-like");
// When the like buttons are clicked, they are colored red or this action is undone
likeBtns.forEach((likeBtn) => {
likeBtn.addEventListener("click", () => {
if (likeBtn.classList.contains("active")) {
likeBtn.classList.remove("active");
} else {
likeBtn.classList.add("active");
}
});
});
// Swiper
var swiper = new Swiper(".swiper", {
grabCursor: true,
speed: 400,
mousewheel: {
invert: false,
},
scrollbar: {
el: ".swiper-scrollbar",
draggable: true,
},
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
900: {
slidesPerView: 2,
spaceBetween: 20,
},
1200: {
slidesPerView: 3,
spaceBetween: 20,
},
},
});