swarmchat/popUp.js at main · Codesamp-Rohan/swarmchat · GitHub

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
const detailsShowBtn = document.querySelector(".details--btn");
const detailsPopUp = document.querySelector(".details--popUp");
const outerScreen = document.querySelector(".outerScreen");

outerScreen.addEventListener("click", (e) => {
  e.preventDefault();
  whiteBoard.classList.add("hidden");
  whiteBoardControl.classList.add("hidden");
  detailsPopUp.classList.add("hidden");
  membersList.classList.add("hidden");
});

detailsShowBtn.addEventListener("click", (e) => {
  e.preventDefault();
  detailsPopUp.classList.toggle("hidden");
  outerScreen.classList.toggle("hidden");
});

const addPopUp = document.querySelector(".add--popUp");

document.querySelector(".add--btn").addEventListener("click", () => {
  addPopUp.classList.toggle("hidden");
});
addPopUp.addEventListener("click", () => {
  addPopUp.classList.add("hidden");
});

document.addEventListener("click", (e) => {
  if (
    !addPopUp.contains(e.target) &&
    !document.querySelector(".add--btn").contains(e.target)
  ) {
    addPopUp.classList.add("hidden");
  }
});

const termsPopUp = document.querySelector(".terms--popUp");
const termsShowBtn = document.querySelector(".terms--btn");
const termsCloseBtn = document.querySelector(".terms--close--btn");

termsShowBtn.addEventListener("click", (e) => {
  e.preventDefault();
  document.querySelector("#chat").classList.add("hidden");
  termsPopUp.classList.remove("hidden");
  document.querySelector("#popup").classList.toggle("hidden");
  outerScreen.classList.add("hidden");
});

termsCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  document.querySelector("#chat").classList.remove("hidden");
  termsPopUp.classList.add("hidden");
});

const whiteBoard = document.querySelector("#whiteboard");
const whiteBoardBtn = document.querySelector(".whiteboard--btn");
const whiteBoardCloseBtn = document.querySelector(".whiteboard--close--btn");
const whiteBoardControl = document.querySelector(".canva--div");

whiteBoardBtn.addEventListener("click", (e) => {
  e.preventDefault();
  whiteBoard.classList.remove("hidden");
  outerScreen.classList.toggle("hidden");
  whiteBoardControl.classList.remove("hidden");
});

whiteBoardCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  whiteBoard.classList.add("hidden");
  outerScreen.classList.toggle("hidden");
  whiteBoardControl.classList.add("hidden");
});

const membersOpenBtn = document.querySelector(".peer--btn");
const membersList = document.querySelector(".members--list");
const memberListCloseBtn = document.querySelector(".members--close--btn");

membersOpenBtn.addEventListener("click", (e) => {
  e.preventDefault();
  membersList.classList.remove("hidden");
  outerScreen.classList.remove("hidden");
  detailsPopUp.classList.add("hidden");
});

memberListCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  membersList.classList.add("hidden");
  outerScreen.classList.add("hidden");
});

// Voice chat

const voiceRoomBtn = document.querySelector("#create--voice--room");
const voiceRoom = document.querySelector("#voiceRoom");
const voiceChatMic = document.querySelector(".voice--button");
const voiceChatMicImg = document.querySelector(".voice--chat--mic");
const voiceCloseBtn = document.querySelector(".closeVoice");

voiceRoomBtn.addEventListener("click", (e) => {
  e.preventDefault();
  voiceRoom.classList.remove("hidden");
});

voiceCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  voiceRoom.classList.add("hidden");
});