-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
89 lines (76 loc) · 2.63 KB
/
index.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
const button = document.querySelector(".button");
const buttonIcon = document.querySelector("#button");
const desktopPopup = document.querySelector(".desktop");
const mobilePopup = document.querySelector(".mobile");
const description = document.querySelector('.author-details');
mobilePopup.style.display = 'none';
const contentTobeReplaced = document.querySelector(".author-details");
// check screen size
const mediaQuery = window.matchMedia("(max-width: 900px)");
mediaQuery.addEventListener("change", choosePopupStyle);
choosePopupStyle(mediaQuery);
function choosePopupStyle() {
if (mediaQuery.matches) {
checkTracesDesktop();
button.addEventListener('click', toggleMobilePopup);
} else {
checkTracesMobile();
button.addEventListener('click', toggleDesktopPopup);
}
}
// if there's no second click to close popup, removes previous style when screensize changes
function checkTracesDesktop() {
if (desktopPopup.style.display = "flex") {
makeDesktopPopupDissapear();
button.removeEventListener('click', toggleDesktopPopup);
}
}
function checkTracesMobile() {
if (mobilePopup.style.display = "flex") {
removeMobilePopupBlock();
button.removeEventListener('click', toggleMobilePopup);
}
}
// swtich to mobile
function toggleMobilePopup() {
if (button.classList.contains("button")) {
addMobilePopupBlock();
} else {
removeMobilePopupBlock();
}
}
//switch to desktop
function toggleDesktopPopup() {
if (button.classList.contains("button")) {
makeDesktopPopupVisible();
} else {
makeDesktopPopupDissapear();
}
}
// mobile styling
function addMobilePopupBlock() {
mobilePopup.style.display = "flex";
description.style.display = 'none'
button.classList.replace("button", "button-active-mobile");
buttonIcon.style.fill = "#ffffff";
document.querySelector(".author").style.backgroundColor =
"var(--dark-grayish)";
}
function removeMobilePopupBlock() {
mobilePopup.style.display = "none";
description.style.display = 'flex'
button.classList.replace("button-active-mobile", "button");
buttonIcon.style.fill = "var(--dark-blue)";
document.querySelector(".author").style.backgroundColor = "white";
}
// desktop styling
function makeDesktopPopupVisible() {
desktopPopup.style.display = "flex";
button.classList.replace("button", "button-active-desktop");
buttonIcon.style.fill = "#ffffff";
}
function makeDesktopPopupDissapear() {
desktopPopup.style.display = "none";
button.classList.replace("button-active-desktop", "button")
buttonIcon.style.fill = "var(--dark-blue)";
}