-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
116 lines (108 loc) · 5.65 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
const fullMsgTitle = document.getElementById("fullMsgTitle");
const fullMsgBody = document.getElementById("fullMsgBody");
const fullMsgName = document.getElementById("fullMsgName");
const fullMsgDate = document.getElementById("fullMsgDate");
//cards is an array containing all message cards in the message list
let cards = document.querySelectorAll("div.card.w-100");
/* when an element in the html body is clicked, loops over elements (cards) of the 'cards' array, if any of them
is the element that was clicked on (containing event.target attribute), then that element's content is displayed
in the email message text container (on the right) */
document.body.addEventListener('click', function(event){
event.preventDefault();
cards.forEach((card) => {
if(card.contains (event.target)){
fullMsgTitle.textContent = card.querySelector("div div h5").textContent;
fullMsgBody.textContent = card.querySelector("div div p").textContent;
fullMsgName.textContent = card.querySelector("div div h6").textContent;
fullMsgDate.textContent = card.querySelector("div div h6:nth-child(3)").textContent;
if((window.innerWidth >= 576) && (window.innerWidth < 768)){
document.getElementById("message-list-col").classList.add("d-sm-none");
document.getElementById("message-body-col").classList.add("d-sm-block");
}
if(window.innerWidth < 576){
document.getElementById("message-list-col").classList.add("d-none");
document.getElementById("message-body-col").classList.remove("d-none");
}
}
});
});
var navbarToggleBtns = document.getElementsByClassName("navbarToggleBtn");
var navbarColumn = document.getElementById("navbarCol");
var nonNavbarColumn = document.getElementById("nonNavbarCol");
//makes both hamburger menu toggle buttons work; when clicked, each button collapses or hides the vertical navbar
//(depending on whether the navbar is currently showing or not); the logic is different for extra small screen
//size compared to other screen sizes
for(var i = 0; i < navbarToggleBtns.length; i++) {
navbarToggleBtns[i].onclick = function() {
if (window.innerWidth < 576){
if (navbarColumn.classList.contains("d-none")){
navbarColumn.classList.remove("d-none");
navbarColumn.classList.add("d-block");
nonNavbarColumn.classList.remove("d-block");
nonNavbarColumn.classList.add("d-none");
} else {
navbarColumn.classList.add("d-none");
navbarColumn.classList.remove("d-block");
nonNavbarColumn.classList.add("d-block");
nonNavbarColumn.classList.remove("d-none");
}
} else {
if (navbarColumn.classList.contains("d-sm-block")){
navbarColumn.classList.remove("d-sm-block");
navbarColumn.classList.add("d-sm-none");
nonNavbarColumn.classList.remove("col-sm-10");
nonNavbarColumn.classList.add("col-sm");
} else {
navbarColumn.classList.add("d-sm-block");
navbarColumn.classList.remove("d-sm-none");
nonNavbarColumn.classList.add("col-sm-10");
nonNavbarColumn.classList.remove("col-sm");
}
}
}
}
let buttonIds = ["inbox-btn", "tagged-btn", "important-btn", "sent-btn", "drafts-btn",
"trash-btn", "scheduled-btn", "spam-btn"];
//show message list when corresponding message category button is clicked
for(let btn of buttonIds){
document.getElementById(btn).onclick = function() {
let folders = document.getElementsByClassName("email-list");
console.log(folders);
for(var i = 0; i < folders.length; i++) {
if(!(folders[i].classList.contains("d-none"))){
folders[i].classList.add("d-none")
}
}
document.getElementsByClassName(btn.slice(0, -4))[0].classList.remove("d-none");
if((window.innerWidth >= 576) && (window.innerWidth < 768)){
document.getElementById("message-list-col").classList.remove("d-none");
document.getElementById("message-body-col").classList.add("d-none");
if(document.getElementById("message-list-col").classList.contains("d-sm-none") &&
document.getElementById("message-body-col").classList.contains("d-sm-block")){
document.getElementById("message-list-col").classList.remove("d-sm-none");
document.getElementById("message-body-col").classList.remove("d-sm-block");
}
}
if(window.innerWidth < 576) {
if (navbarColumn.classList.contains("d-none")){
navbarColumn.classList.remove("d-none");
navbarColumn.classList.add("d-block");
nonNavbarColumn.classList.remove("d-block");
nonNavbarColumn.classList.add("d-none");
} else {
navbarColumn.classList.add("d-none");
navbarColumn.classList.remove("d-block");
nonNavbarColumn.classList.add("d-block");
nonNavbarColumn.classList.remove("d-none");
}
document.getElementById("message-list-col").classList.remove("d-none");
document.getElementById("message-body-col").classList.add("d-none");
}
};
}
//clears new message input fields when page is reloaded
window.onload = function(){
document.getElementById("exampleFormControlTextarea1").value = "";
document.getElementById("new-msg-subject").value = "";
document.getElementById("new-msg-email").value = "";
}