Skip to content

Commit f45ac70

Browse files
CSP02CSP02
committedJan 27, 2025
improvements.. maybe
1 parent 0f78642 commit f45ac70

File tree

7 files changed

+75
-34
lines changed

7 files changed

+75
-34
lines changed
 

‎@me/script.js

+22-4
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ fileUploadInp.addEventListener("change", e => {
159159
document.getElementById("file_indicator").innerHTML = "";
160160
document.getElementById("file_indicator").classList.remove("show_ind");
161161
})
162-
162+
163163
const reader = new FileReader();
164164
if (file.type.includes("image")) {
165165
const img = new Image();
@@ -168,7 +168,7 @@ fileUploadInp.addEventListener("change", e => {
168168
}
169169
reader.readAsDataURL(file);
170170
fileHolder.append(...[img, removeFile])
171-
}else if(file.type === "text/plain"){
171+
} else if (file.type === "text/plain") {
172172
const linkFileHolder = document.createElement("div");
173173
const fileIcon = document.createElement("i");
174174
fileIcon.classList.add(...["fa-solid", "fa-file-lines"]);
@@ -181,7 +181,8 @@ fileUploadInp.addEventListener("change", e => {
181181
nameHolder.focus();
182182
nameHolder.addEventListener("input", e => {
183183
file.modfilename = nameHolder.innerText.trim();
184-
if (e.inputType === "insertParagraph" || (e.inputType === "insertText" && e.data === null) && !isLineBreak){
184+
if (e.inputType === "insertParagraph" || (e.inputType === "insertText" && e.data === null) && !isLineBreak) {
185+
e.preventDefault();
185186
nameHolder.contentEditable = false;
186187
nameHolder.removeEventListener("input", r => {
187188
console.log("removed the event listener")
@@ -230,14 +231,24 @@ document.getElementById("emojis_click").addEventListener("click", e => {
230231
messageBox.append(emojiDup);
231232
})
232233

233-
window.addEventListener("keydown", e => {
234+
window.addEventListener("keydown", async e => {
234235
if (e.ctrlKey && e.key === "c") {
235236
e.preventDefault();
236237
const selection = window.getSelection().toString();
237238
const text = selection.replace(/<[^>]*>/g, '');
238239

239240
navigator.clipboard.writeText(text);
240241
}
242+
243+
if (e.ctrlKey && e.key === "v") {
244+
e.preventDefault();
245+
// const selection = window.getSelection().toString();
246+
const text = navigator.clipboard.readText();
247+
// const text = selection.replace(/<[^>]*>/g, '');
248+
console.log(text)
249+
messageBox.innerText = await text;
250+
messageBox.focus()
251+
}
241252
})
242253

243254
/**
@@ -284,6 +295,13 @@ messageBox.addEventListener("drop", e => {
284295
})
285296

286297
messageBox.addEventListener("keydown", key => {
298+
if (key.key.toLowerCase() === "enter") {
299+
key.preventDefault();
300+
301+
sendMessage.click();
302+
sendMessage.disabled = true;
303+
}
304+
287305
if (key.shiftKey) isLineBreak = true;
288306
else isLineBreak = false;
289307
})

‎@me/style.css

+17-3
Original file line numberDiff line numberDiff line change
@@ -831,7 +831,7 @@ button#new_message_popup:hover {
831831

832832
.component_image {
833833
border-radius: .6rem;
834-
margin: .5rem;
834+
margin: .5rem 0;
835835
max-width: 40%;
836836
}
837837

@@ -1064,6 +1064,11 @@ button#new_message_popup:hover {
10641064
display: grid;
10651065
}
10661066

1067+
.message_has_component{
1068+
display: flex;
1069+
flex-direction: column;
1070+
}
1071+
10671072
.mentioned b {
10681073
padding: 0px .4rem;
10691074
border-radius: .3rem;
@@ -1121,7 +1126,16 @@ button#new_message_popup:hover {
11211126
box-shadow: black 0 0 2px;
11221127
}
11231128

1124-
.file_component_holder::before{
1129+
.fa-turn-down {
1130+
position: absolute;
1131+
left: 32px;
1132+
top: 11px;
1133+
font-size: 20pt;
1134+
color: #414141;
1135+
transform: rotate(270deg);
1136+
}
1137+
1138+
.file_component_holder::before {
11251139
content: "\f0c6";
11261140
font: var(--fa-font-solid);
11271141
color: white;
@@ -1229,7 +1243,7 @@ span.reply_content {
12291243

12301244
.embed {
12311245
padding: .5rem;
1232-
margin: .5rem;
1246+
margin: .5rem 0;
12331247
border-radius: .6rem;
12341248
background-color: #272727;
12351249
max-width: 40%;

‎ChatterBox/Channel.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,26 @@ export async function CreateChannel(params) {
1212
formData.append("channelName", channelName);
1313
formData.append("channelIcon", channelIcon);
1414

15-
const body = formData;
1615
const url = `${apiURL}/channels`;
17-
18-
const { response, status } = await fetchData(url, "POST", body);
16+
const { response, status } = await fetchData(url, "POST", formData);
1917
if (status !== 200) return HandleErrors(status);
2018
AddToChannels([response.channel]);
2119
}
2220

2321
export async function GetChannels(params) {
2422
const apiURL = params.apiURL;
2523
const url = `${apiURL}/channels`;
26-
24+
2725
const { response, status } = await fetchData(url);
2826
if (status !== 200) return HandleErrors(status);
2927
if (await response.channels.length <= 0) return;
3028
const channels = await response.channels;
31-
29+
3230
AddToChannels(channels, params.socket);
3331
window.sessionStorage.setItem("channels", JSON.stringify(channels));
3432
}
3533

36-
export async function UpdateChannel(params){
34+
export async function UpdateChannel(params) {
3735
const apiURL = params.apiURL;
3836
const activeChannelId = JSON.parse(window.sessionStorage.getItem("active_channel"))._id;
3937
const newChnlName = document.getElementById("new_channel_name").value;
@@ -80,7 +78,7 @@ function AddToChannels(channels, socket) {
8078
nameButton.classList.add("channel");
8179
nameButton.id = channel._id;
8280
nameButton.append(channelIcon);
83-
81+
8482
nameButton.addEventListener("click", click => {
8583
if (location.pathname.split("/").join(" ").trim().split(" ").reverse()[0] !== "@me") {
8684
socket.emit("LEAVE_CHANNEL", { channel: { _id: location.pathname.split("/").join(" ").trim().split(" ").reverse()[0] }, user: loggedUser });

‎ChatterBox/Message.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export async function SendMessage(message, params) {
2323
formData.append("channel", message.channel);
2424
formData.append("components", message.components);
2525
formData.append("content", message.content);
26-
if (file.modfilename !== null)
26+
if (file && file.modfilename !== null)
2727
formData.append("custom_name", file.modfilename);
2828
if (message.repliedTo)
2929
formData.append("repliedTo", message.repliedTo);

‎ChatterBox/User.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,23 @@ export async function UpdateUser(params) {
5757
const uploadButton = document.getElementById("upload");
5858

5959
const pfp = pfpUpload.files[0];
60-
const formData = new FormData();
61-
formData.append("pfp", pfp);
62-
formData.append("username", updateUsername.value);
63-
formData.append("color", updateColor.value);
60+
let body = {
61+
username: updateUsername.value,
62+
color: updateColor.value
63+
};
64+
if (pfp && pfp !== null) {
65+
const formData = new FormData();
66+
formData.append("pfp", pfp);
67+
formData.append("username", updateUsername.value);
68+
formData.append("color", updateColor.value);
69+
body = formData;
70+
}
6471

6572
pfpUpload.addEventListener("change", e => {
6673
document.getElementById("avatar").src = URL.createObjectURL(pfp);
6774
});
6875

69-
const { response, status } = await fetchData(url, "PUT", formData);
76+
const { response, status } = await fetchData(url, "PUT", body);
7077
if (status !== 200) return HandleErrors(status);
7178

7279
const updatedUsername = response.updatedUser.username;
@@ -80,7 +87,7 @@ export async function UpdateUser(params) {
8087

8188
window.sessionStorage.setItem("user", JSON.stringify(response.updatedUser));
8289
document.getElementById("success_notif").innerText = "Updated successfully";
83-
90+
8491
location = "/@me";
8592
}
8693

@@ -92,7 +99,7 @@ export function UpdateUserdetails(user) {
9299
const profilePageUsername = document.getElementById("profile_username");
93100
const profilePageColor = document.getElementById("profile_color");
94101
const prefColorSel = document.getElementById("color_pref_selected");
95-
102+
96103
const updatedUsername = user.username;
97104
const updatedColor = user.color;
98105
const updatedPfp = user.avatarURL;

‎ChatterBox/Utility.js

+15-10
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,19 @@ export async function AddToMessages(messages, hasMore, params) {
116116
}
117117

118118
usernameHolder.style = "display: flex; align-items: center;";
119-
119+
120120
pfp.src = avatarURL;
121121
pfp.height = "50px";
122122
pfp.width = "50px";
123123
pfp.classList.add("pfp");
124-
124+
125125
const pfpButton = document.createElement("button");
126126
pfpButton.className = "open_profile_card";
127+
if(repliedTo){
128+
const replyMIconInd = document.createElement("i");
129+
replyMIconInd.classList.add(...["fa-solid","fa-turn-down"]);
130+
pfpButton.appendChild(replyMIconInd);
131+
}
127132
pfpButton.appendChild(pfp);
128133

129134
pfpButton.addEventListener("click", e => {
@@ -147,19 +152,19 @@ export async function AddToMessages(messages, hasMore, params) {
147152

148153
contentHolder.classList.add("message_db");
149154
contentHolder.id = messageId;
150-
if (repliedTo !== undefined && repliedTo.username !== "" && repliedTo.username !== undefined) {
155+
if (repliedTo !== undefined && repliedTo.user.username !== "" && repliedTo.user.username !== undefined) {
151156
const replyIndicator = document.createElement("button");
152157
const userPfp = document.createElement("img");
153158
const username = document.createElement("span");
154159
const content = document.createElement("span");
155160

156-
username.innerText = repliedTo.username;
161+
username.innerText = repliedTo.user.username;
157162
content.innerText = repliedTo.content.trim().slice("0, 32").split("\n")[0] + "...";
158163
content.classList.add("reply_content");
159-
userPfp.src = repliedTo.avatarURL;
164+
userPfp.src = repliedTo.user.avatarURL;
160165
userPfp.style = "height:25px;width:25px;border-radius:50%;";
161166

162-
username.style.color = repliedTo.color;
167+
username.style.color = repliedTo.user.color;
163168

164169
replyIndicator.append(...[userPfp, username, content]);
165170
replyIndicator.classList.add("replied_to");
@@ -338,11 +343,11 @@ async function ResolveContent(content, contentHolder, message) {
338343
let repliedToUName
339344

340345
if (typeof message.repliedTo === "string")
341-
if (document.getElementById(message.repliedTo).parentElement.firstChild.tagName.toLowerCase() === 'button')
342-
repliedToUName = document.getElementById(message.repliedTo).parentElement.children[1].firstChild.innerText.trim();
346+
if (document.getElementById(message.repliedTo._id).parentElement.firstChild.tagName.toLowerCase() === 'button')
347+
repliedToUName = document.getElementById(message.repliedTo._id).parentElement.children[1].firstChild.innerText.trim();
343348
else
344-
repliedToUName = document.getElementById(message.repliedTo).parentElement.firstChild.firstChild.innerText.trim();
345-
if ((repliedToUName && repliedToUName === loggedUser.username) || (message.repliedTo && message.repliedTo.username === loggedUser.username)) {
349+
repliedToUName = document.getElementById(message.repliedTo._id).parentElement.firstChild.firstChild.innerText.trim();
350+
if ((repliedToUName && repliedToUName === loggedUser.username) || (message.repliedTo && message.repliedTo.user.username === loggedUser.username)) {
346351
setTimeout(() => {
347352
const messageHolder = contentHolder.parentElement.parentElement;
348353
messageHolder.classList.add("mentioned");

‎ChatterBox/types.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ export default class Types {
2525
CHANNEL_LIMIT: 11,
2626
ALREADY_EXISTS: 12,
2727
INVALID_FILE: 13,
28-
INVALID_CHANNEL: 14,
29-
CHANNEL_LIMIT: 15,
28+
INVALID_CHANNEL: 14
3029
});
3130

3231
this.SuccessTypes = Object.freeze({

0 commit comments

Comments
 (0)
Please sign in to comment.