Skip to content

Commit 81088a4

Browse files
Maxhu787Maxhu787
committed
update add mentioning and fix chat css
1 parent 176755d commit 81088a4

File tree

4 files changed

+90
-21
lines changed

4 files changed

+90
-21
lines changed

‎chat/chat.php‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,10 @@
5757
<script src="./index.js"></script>
5858
<script>
5959
$('main').hide();
60-
// const url = "https://g4o2-api.maxhu787.repl.co";
61-
const url = "http://localhost:3000";
60+
const url = "https://g4o2-api.maxhu787.repl.co";
61+
// const url = "http://localhost:3000";
62+
const chatURL = "https://PHP-SQL-Chat.maxhu787.repl.co";
63+
// const chatURL = "http://localhost/php-sql-chat";
6264
const socket = io(url);
6365
const messages = document.getElementById('messages');
6466
const form = document.getElementById('message-form');
@@ -93,15 +95,15 @@ function waitUntilTrue(variable, callback) {
9395
$("#loading-screen").hide();
9496
$("#copy-right").hide();
9597
$('main').show(1000);
96-
/*$('body').css({
98+
$('body').css({
9799
'background': 'url(../assets/backgrounds/burj-khalifa.jpg)',
98100
'background-repeat': 'no-repeat',
99101
'background-attachment': 'fixed',
100102
'background-size': '100% 100%'
101-
});*/
102-
$('body').css({
103-
'background-color': 'rgba(41, 41, 41)'
104103
});
104+
// $('body').css({
105+
// 'background': 'radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)'
106+
// });
105107
chatScroll();
106108
}
107109
}, 100);

‎chat/css/chat.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,41 @@ a:hover {
141141
font-size: 14px;
142142
}
143143

144+
.mention {
145+
background-color: #ff370041;
146+
border-radius: 8px;
147+
}
148+
149+
.mention-text {
150+
background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
151+
-webkit-background-clip: text;
152+
background-clip: text;
153+
color: transparent;
154+
animation: rainbow_animation 6s ease-in-out infinite;
155+
background-size: 400% 100%;
156+
}
157+
158+
.rainbow_text_animated {
159+
background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
160+
-webkit-background-clip: text;
161+
background-clip: text;
162+
color: transparent;
163+
animation: rainbow_animation 6s ease-in-out infinite;
164+
background-size: 400% 100%;
165+
}
166+
167+
@keyframes rainbow_animation {
168+
169+
0%,
170+
100% {
171+
background-position: 0 0;
172+
}
173+
174+
50% {
175+
background-position: 100% 0;
176+
}
177+
}
178+
144179
#message-form {
145180
flex: .7;
146181
display: flex;

‎chat/index.js‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,9 +1010,16 @@ class Message {
10101010
const messageHeaderDiv = document.createElement("div");
10111011
messageHeaderDiv.classList.add("message-header");
10121012

1013-
const messageSenderSpan = document.createElement("span");
1013+
// const messageSenderSpan = document.createElement("span");
1014+
// messageSenderSpan.classList.add("message-sender");
1015+
// messageSenderSpan.innerText = this.username.concat(" ");
1016+
1017+
const messageSenderSpan = document.createElement("a");
10141018
messageSenderSpan.classList.add("message-sender");
10151019
messageSenderSpan.innerText = this.username.concat(" ");
1020+
messageSenderSpan.setAttribute('href', chatURL.concat(`/profile.php?id=${this.user_id}`))
1021+
// messageSenderSpan.setAttribute('target', '_blank');
1022+
10161023

10171024
const messageDateTime = document.createElement("time");
10181025
messageDateTime.classList.add("message-datetime");
@@ -1024,14 +1031,6 @@ class Message {
10241031

10251032
const urlRegex = new RegExp('(https?://[^\\s]+\\.[^\\s]+)', 'gi');
10261033

1027-
const imageImbedRegex = new RegExp('https?:\/\/localhost:3000\/uploads\/\w+\.\w+$', 'gi');
1028-
1029-
const usernameRegex = new RegExp(`@${user}\\b`, "gi");
1030-
1031-
if(imageImbedRegex.test(this.message)) {
1032-
} else {
1033-
1034-
}
10351034
const messageBodyDiv = document.createElement("div");
10361035
messageBodyDiv.classList.add("message-body");
10371036

@@ -1046,12 +1045,22 @@ class Message {
10461045
return aTag.outerHTML;
10471046
});
10481047

1049-
const messageMentionUser = messageFiltered.match(usernameRegex); // search for the username in the message
1050-
1048+
const usernameRegex = new RegExp(`@${user}\\b`, "gi");
1049+
const messageMentionUser = messageFiltered.match(usernameRegex);
10511050
if (messageMentionUser) {
1051+
messageContentDiv.classList.add('mention');
1052+
messageSpan.innerHTML = messageFiltered.replace(usernameRegex, (text) => {
1053+
const spanTag = document.createElement('a');
1054+
spanTag.setAttribute('class', 'mention-text');
1055+
spanTag.setAttribute('href', chatURL.concat(`/profile.php?id=${this.user_id}`));
1056+
spanTag.innerText = text;
1057+
return spanTag.outerHTML;
1058+
});
1059+
10521060
}
1053-
1061+
10541062
messageBodyDiv.appendChild(messageSpan);
1063+
10551064
messageContentDiv.appendChild(messageHeaderDiv);
10561065
messageContentDiv.appendChild(messageBodyDiv);
10571066

@@ -1060,6 +1069,7 @@ class Message {
10601069

10611070
document.getElementById('messages').appendChild(div);
10621071
}
1072+
10631073
appendMessageBefore() {
10641074
const div = document.createElement("div");
10651075
div.classList.add("message-container");
@@ -1080,9 +1090,16 @@ class Message {
10801090
const messageHeaderDiv = document.createElement("div");
10811091
messageHeaderDiv.classList.add("message-header");
10821092

1083-
const messageSenderSpan = document.createElement("span");
1093+
// const messageSenderSpan = document.createElement("span");
1094+
// messageSenderSpan.classList.add("message-sender");
1095+
// messageSenderSpan.innerText = this.username.concat(" ");
1096+
1097+
const messageSenderSpan = document.createElement("a");
10841098
messageSenderSpan.classList.add("message-sender");
10851099
messageSenderSpan.innerText = this.username.concat(" ");
1100+
messageSenderSpan.setAttribute('href', chatURL.concat(`/profile.php?id=${this.user_id}`))
1101+
// messageSenderSpan.setAttribute('target', '_blank');
1102+
10861103

10871104
const messageDateTime = document.createElement("time");
10881105
messageDateTime.classList.add("message-datetime");
@@ -1108,6 +1125,20 @@ class Message {
11081125
return aTag.outerHTML;
11091126
});
11101127

1128+
const usernameRegex = new RegExp(`@${user}\\b`, "gi");
1129+
const messageMentionUser = messageFiltered.match(usernameRegex);
1130+
if (messageMentionUser) {
1131+
messageContentDiv.classList.add('mention');
1132+
messageSpan.innerHTML = messageFiltered.replace(usernameRegex, (text) => {
1133+
const spanTag = document.createElement('a');
1134+
spanTag.setAttribute('class', 'mention-text');
1135+
spanTag.setAttribute('href', chatURL.concat(`/profile.php?id=${this.user_id}`));
1136+
spanTag.innerText = text;
1137+
return spanTag.outerHTML;
1138+
});
1139+
1140+
}
1141+
11111142
messageBodyDiv.appendChild(messageSpan);
11121143

11131144
messageContentDiv.appendChild(messageHeaderDiv);

‎pdo.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
session_start();
33
ob_start();
44
ini_set('display_errors', 0);
5-
/*
5+
66
$HOST = 'sql12.freemysqlhosting.net';
77
$PORT = 3306;
88
$DB_NAME = 'sql12561191';
@@ -14,7 +14,7 @@
1414
$DB_PASSWORD
1515
);
1616
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
17-
*/
17+
/*
1818
$HOST = 'localhost';
1919
$PORT = 3306;
2020
$DB_NAME = 'sql12561191';
@@ -26,3 +26,4 @@
2626
$DB_PASSWORD
2727
);
2828
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
29+
*/

0 commit comments

Comments
 (0)