Merge pull request #561 from thecodingmachine/linkNotClickable

Verify URL in message
This commit is contained in:
grégoire parant 2021-01-12 11:30:11 +01:00 committed by GitHub
commit 648e6aef97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 8 deletions

View File

@ -1072,17 +1072,22 @@ div.modal-report-user{
} }
.discussion .messages .message p.body{ .discussion .messages .message p.body{
color: white;
font-size: 16px; font-size: 16px;
overflow: hidden; overflow: hidden;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
.discussion .messages .message p.a{
color: white;
}
.discussion .send-message{ .discussion .send-message{
position: absolute; position: absolute;
bottom: 45px; bottom: 45px;
width: 220px; width: 220px;
height: 26px; height: 26px;
margin-bottom: 10px;
} }
.discussion .send-message input{ .discussion .send-message input{

View File

@ -59,6 +59,16 @@ export class DiscussionManager {
const sendDivMessage: HTMLDivElement = document.createElement('div'); const sendDivMessage: HTMLDivElement = document.createElement('div');
sendDivMessage.classList.add('send-message'); sendDivMessage.classList.add('send-message');
const inputMessage: HTMLInputElement = document.createElement('input'); const inputMessage: HTMLInputElement = document.createElement('input');
inputMessage.onfocus = () => {
if(this.userInputManager) {
this.userInputManager.clearAllInputKeyboard();
}
}
inputMessage.onblur = () => {
if(this.userInputManager) {
this.userInputManager.initKeyBoardEvent();
}
}
inputMessage.type = "text"; inputMessage.type = "text";
inputMessage.addEventListener('keyup', (event: KeyboardEvent) => { inputMessage.addEventListener('keyup', (event: KeyboardEvent) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
@ -141,6 +151,15 @@ export class DiscussionManager {
this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`; this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`;
} }
private urlify(text: string) {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, (url: string) => {
return '<a href="' + url + '" target="_blank">' + url + '</a>';
})
// or alternatively
// return text.replace(urlRegex, '<a href="$1">$1</a>')
}
public addMessage(name: string, message: string, isMe: boolean = false) { public addMessage(name: string, message: string, isMe: boolean = false) {
const divMessage: HTMLDivElement = document.createElement('div'); const divMessage: HTMLDivElement = document.createElement('div');
divMessage.classList.add('message'); divMessage.classList.add('message');
@ -160,11 +179,18 @@ export class DiscussionManager {
divMessage.appendChild(pMessage); divMessage.appendChild(pMessage);
const userMessage: HTMLParagraphElement = document.createElement('p'); const userMessage: HTMLParagraphElement = document.createElement('p');
userMessage.innerText = message; userMessage.innerHTML = this.urlify(message);
userMessage.classList.add('body'); userMessage.classList.add('body');
divMessage.appendChild(userMessage); divMessage.appendChild(userMessage);
this.divMessages?.appendChild(divMessage); this.divMessages?.appendChild(divMessage);
//automatic scroll when there are new message
setTimeout(() => {
this.divMessages?.scroll({
top: this.divMessages?.scrollTop + divMessage.getBoundingClientRect().y,
behavior: 'smooth'
});
}, 200);
} }
public removeParticipant(userId: number|string){ public removeParticipant(userId: number|string){
@ -188,17 +214,11 @@ export class DiscussionManager {
private showDiscussion(){ private showDiscussion(){
this.activeDiscussion = true; this.activeDiscussion = true;
if(this.userInputManager) {
this.userInputManager.clearAllInputKeyboard();
}
this.divDiscuss?.classList.add('active'); this.divDiscuss?.classList.add('active');
} }
private hideDiscussion(){ private hideDiscussion(){
this.activeDiscussion = false; this.activeDiscussion = false;
if(this.userInputManager) {
this.userInputManager.initKeyBoardEvent();
}
this.divDiscuss?.classList.remove('active'); this.divDiscuss?.classList.remove('active');
} }