-
Notifications
You must be signed in to change notification settings - Fork 0
/
chatpage.js
200 lines (166 loc) · 6.84 KB
/
chatpage.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
// Wait for the DOM content to be fully loaded
document.addEventListener("DOMContentLoaded", () => {
// Reference to the send button and input field
const sendButton = document.getElementById('send-button');
const messageInput = document.getElementById('message-input');
// Event listener for the Send button click
sendButton.addEventListener('click', () => {
sendMessage();
});
// Allow sending messages with the Enter key
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// Function to send and display a new message
function sendMessage() {
// Get the input text
const messageText = messageInput.value.trim();
// If the message is not empty, display it
if (messageText !== "") {
addMessageToChat(messageText, 'sent'); // Add the sent message to the UI
messageInput.value = ""; // Clear the input field after sending
messageInput.focus(); // Keep the input field in focus
// Simulate receiving a response after a short delay
setTimeout(() => {
receiveMessage(`Received: ${messageText}`);
}, 1000);
}
}
// Function to display a received message
function receiveMessage(text) {
addMessageToChat(text, 'received');
}
// Function to dynamically add messages to the chat body
function addMessageToChat(text, messageType) {
// Reference to the chat body
const chatBody = document.getElementById('chat-body');
// Create a new message container
const messageDiv = document.createElement('div');
messageDiv.classList.add('message', messageType);
// Add message content and timestamp
messageDiv.innerHTML = `
<span>${text}</span>
<span class="timestamp">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
`;
// Append the new message to the chat body
chatBody.appendChild(messageDiv);
// Automatically scroll to the bottom of the chat body
chatBody.scrollTop = chatBody.scrollHeight;
}
});
function toggleSideNav(x) {
const sidenav = document.getElementById("mySidenav");
sidenav.style.width = sidenav.style.width === "250px" ? "0" : "250px";
x.classList.toggle("change");
}
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
// Toggle between light and dark mode
function toggleTheme() {
document.body.classList.toggle("dark-mode");
}
// Function to apply the theme based on localStorage value
function applySavedTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// Wait until the DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', function() {
// Function to apply the theme based on localStorage value
function applySavedTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// Call the function to apply theme when the page loads
applySavedTheme();
// Function to toggle theme and save the preference
window.toggleTheme = function() {
if (document.body.classList.contains('dark-mode')) {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light'); // Save light theme to localStorage
} else {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark'); // Save dark theme to localStorage
}
};
});
document.addEventListener('DOMContentLoaded', () => {
const emojiButton = document.querySelector('.emoji-button');
const attachButton = document.querySelector('.attach-button');
const cameraButton = document.querySelector('.camera-button');
const voiceButton = document.getElementById('voice-button');
const fileInput = document.getElementById('file-input');
const cameraInput = document.getElementById('camera-input');
const messageInput = document.getElementById('message');
let mediaRecorder;
let audioChunks = [];
// Emoji Button Click
emojiButton.addEventListener('click', () => {
alert('Open Emoji Picker'); // Placeholder - replace with emoji picker functionality
});
// Attach Button Click (Open File Selector)
attachButton.addEventListener('click', () => {
fileInput.click(); // Trigger file input click
});
// Handle File Selection
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
alert(`File selected: ${file.name}`);
}
});
// Camera Button Click (Open Camera)
cameraButton.addEventListener('click', () => {
cameraInput.click(); // Trigger camera input click
});
// Handle Camera Image Capture
cameraInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
alert(`Photo captured: ${file.name}`);
}
});
// Voice Button Click (Start/Stop Recording)
voiceButton.addEventListener('click', () => {
if (!mediaRecorder) {
// Start Recording
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
voiceButton.innerHTML = "🔴"; // Change button to indicate recording
audioChunks = [];
mediaRecorder.addEventListener('dataavailable', event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener('stop', () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
audio.play(); // Play the recorded audio
voiceButton.innerHTML = "🎤"; // Reset button after stopping
});
});
} else {
// Stop Recording
mediaRecorder.stop();
mediaRecorder = null;
}
});
// Auto-resize Textarea
messageInput.addEventListener('input', () => {
messageInput.style.height = 'auto';
messageInput.style.height = (messageInput.scrollHeight) + 'px';
});
});