ynerant
/
plateforme-tfjm2
mirror of https://gitlab.com/animath/si/plateforme.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add popovers to edit and delete messages 

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
This commit is contained in:
Emmy D'Anello 2024-04-28 16:28:39 +02:00
parent 3b3dcff28b
commit a771710094
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
1 changed files with 65 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
chat/static/chat.js
View File

@ -184,8 +184,12 @@ function redrawMessages() {
let newTimestamp = new Date(message['timestamp'])
if ((newTimestamp - lastTimestamp) / 1000 < 60 * 10) {
let messageContentDiv = document.createElement('div')
messageContentDiv.innerText = message['content']
lastContentDiv.appendChild(messageContentDiv)
let messageContentSpan = document.createElement('span')
messageContentSpan.innerText = message['content']
messageContentDiv.appendChild(messageContentSpan)
registerMessageContextMenu(message, messageContentSpan)
continue
}
}
@ -202,25 +206,7 @@ function redrawMessages() {
authorSpan.innerText = message['author']
authorDiv.appendChild(authorSpan)
authorSpan.addEventListener('contextmenu', (menu_event) => {
menu_event.preventDefault()
const popover = bootstrap.Popover.getOrCreateInstance(authorSpan, {
'title': message['author'],
'content': `<a id="send-private-message-link-${message['id']}" class="nav-link" href="#" tabindex="0">Envoyer un message privé</a>`,
'html': true,
'placement': "bottom",
})
popover.show()
document.getElementById('send-private-message-link-' + message['id']).addEventListener('click', event => {
event.preventDefault()
popover.hide()
socket.send(JSON.stringify({
'type': 'start_private_chat',
'user_id': message['author_id'],
}))
})
})
registerSendPrivateMessageContextMenu(message, authorSpan)
let dateSpan = document.createElement('span')
dateSpan.classList.add('text-muted', 'float-end')
@ -231,8 +217,12 @@ function redrawMessages() {
messageElement.appendChild(contentDiv)
let messageContentDiv = document.createElement('div')
messageContentDiv.innerText = message['content']
contentDiv.appendChild(messageContentDiv)
let messageContentSpan = document.createElement('span')
messageContentSpan.innerText = message['content']
messageContentDiv.appendChild(messageContentSpan)
registerMessageContextMenu(message, messageContentSpan)
lastMessage = message
lastContentDiv = contentDiv
@ -245,6 +235,52 @@ function redrawMessages() {
fetchMoreButton.classList.remove('d-none')
}
function registerSendPrivateMessageContextMenu(message, element) {
element.addEventListener('contextmenu', (menu_event) => {
menu_event.preventDefault()
const popover = bootstrap.Popover.getOrCreateInstance(element, {
'title': message['author'],
'content': `<a id="send-private-message-link-${message['id']}" class="nav-link" href="#" tabindex="0">Envoyer un message privé</a>`,
'html': true,
})
popover.show()
document.getElementById('send-private-message-link-' + message['id']).addEventListener('click', event => {
event.preventDefault()
popover.hide()
socket.send(JSON.stringify({
'type': 'start_private_chat',
'user_id': message['author_id'],
}))
})
})
}
function registerMessageContextMenu(message, element) {
element.addEventListener('contextmenu', (menu_event) => {
menu_event.preventDefault()
let content = `<a id="send-private-message-link-msg-${message['id']}" class="nav-link" href="#" tabindex="0">Envoyer un message privé</a>`
content += `<hr class="my-1">`
content += `<a class="nav-link" href="#" tabindex="0">Modifier</a>`
content += `<a class="nav-link" href="#" tabindex="0">Supprimer</a>`
const popover = bootstrap.Popover.getOrCreateInstance(element, {
'content': content,
'html': true,
'placement': 'bottom',
})
popover.show()
document.getElementById('send-private-message-link-msg-' + message['id']).addEventListener('click', event => {
event.preventDefault()
popover.hide()
socket.send(JSON.stringify({
'type': 'start_private_chat',
'user_id': message['author_id'],
}))
})
})
}
function toggleFullscreen() {
let chatContainer = document.getElementById('chat-container')
if (!chatContainer.getAttribute('data-fullscreen')) {
@ -260,6 +296,14 @@ function toggleFullscreen() {
}
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('click', () => {
for (let popover of document.querySelectorAll('span[aria-describedby*="popover"]')) {
let instance = bootstrap.Popover.getInstance(popover)
if (instance)
instance.hide()
}
})
/**
* Process the received data from the server.
* @param data The received message