From ae9c1e9fc9bfac5c710187c71044c9d9808369e8 Mon Sep 17 00:00:00 2001
From: Alokg252 <alokg252@gmail.com>
Date: Sat, 13 Jul 2024 19:41:47 +0530
Subject: [PATCH] now can identify hyperlinks
---
src/main/resources/static/css/main.css | 9 ++++++++
src/main/resources/static/index.html | 2 +-
src/main/resources/static/js/main.js | 31 +++++++++++++++++++++-----
3 files changed, 35 insertions(+), 7 deletions(-)
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index 384b3cd8..628c4453 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -218,6 +218,15 @@ button.accent {
color: #43464b;
}
+.linkify{
+ color: rgb(67, 84, 209);
+ text-decoration: none;
+ cursor: pointer;
+}
+a:hover{text-decoration: underline;}
+a:visited{color: rgb(88, 14, 137);}
+
+
#messageForm .input-group input {
float: left;
width: calc(100% - 85px);
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index ae533794..b8ccb382 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -15,7 +15,7 @@ <h2>Sorry! Your browser doesn't support Javascript</h2>
<h1 class="title">Type your username</h1>
<form id="usernameForm" name="usernameForm">
<div class="form-group">
- <input type="text" id="name" placeholder="Username" autocomplete="off" class="form-control" />
+ <input type="text" id="name" placeholder="Username" autocomplete="off" autofocus class="form-control" />
</div>
<div class="form-group">
<button type="submit" class="accent username-submit">Start Chatting</button>
diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js
index 0582ba3e..0e582169 100644
--- a/src/main/resources/static/js/main.js
+++ b/src/main/resources/static/js/main.js
@@ -68,7 +68,6 @@ function sendMessage(event) {
event.preventDefault();
}
-
function onMessageReceived(payload) {
var message = JSON.parse(payload.body);
@@ -82,22 +81,38 @@ function onMessageReceived(payload) {
message.content = message.sender + ' left!';
} else {
messageElement.classList.add('chat-message');
-
+
var avatarElement = document.createElement('i');
var avatarText = document.createTextNode(message.sender[0]);
avatarElement.appendChild(avatarText);
avatarElement.style['background-color'] = getAvatarColor(message.sender);
-
+
messageElement.appendChild(avatarElement);
-
+
var usernameElement = document.createElement('span');
var usernameText = document.createTextNode(message.sender);
usernameElement.appendChild(usernameText);
messageElement.appendChild(usernameElement);
}
-
+
var textElement = document.createElement('p');
- var messageText = document.createTextNode(message.content);
+ var messageText;
+
+ if(isURL(message.content)){
+ var hyperlink = message.content;
+ if(!hyperlink.match(/^https?:\/\//i)){
+ hyperlink = 'http://' + hyperlink;
+ }
+ messageText = document.createElement("a");
+ messageText.classList.add('linkify');
+ messageText.href = hyperlink;
+ messageText.target = "_blank";
+ messageText.innerHTML = message.content;
+ }
+ else{
+ messageText = document.createTextNode(message.content);
+ }
+
textElement.appendChild(messageText);
messageElement.appendChild(textElement);
@@ -106,6 +121,10 @@ function onMessageReceived(payload) {
messageArea.scrollTop = messageArea.scrollHeight;
}
+function isURL(text){
+ const urlPattern = /^(https?:\/\/)?(([a-zA-Z0-9]+\.)+[a-zA-Z]{2,})((\/[^\s]*)*)$/i;
+ return urlPattern.test(text.trim());
+}
function getAvatarColor(messageSender) {
var hash = 0;