Add popovers to edit and delete messages

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

chat/static/chat.js

@@ -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,13 +206,42 @@ function redrawMessages() {
         authorSpan.innerText = message['author']
         authorDiv.appendChild(authorSpan)
 
-        authorSpan.addEventListener('contextmenu', (menu_event) => {
+        registerSendPrivateMessageContextMenu(message, authorSpan)
+
+        let dateSpan = document.createElement('span')
+        dateSpan.classList.add('text-muted', 'float-end')
+        dateSpan.innerText = new Date(message['timestamp']).toLocaleString()
+        authorDiv.appendChild(dateSpan)
+
+        let contentDiv = document.createElement('div')
+        messageElement.appendChild(contentDiv)
+
+        let messageContentDiv = document.createElement('div')
+        contentDiv.appendChild(messageContentDiv)
+        let messageContentSpan = document.createElement('span')
+        messageContentSpan.innerText = message['content']
+        messageContentDiv.appendChild(messageContentSpan)
+
+        registerMessageContextMenu(message, messageContentSpan)
+
+        lastMessage = message
+        lastContentDiv = contentDiv
+    }
+
+    let fetchMoreButton = document.getElementById('fetch-previous-messages')
+    if (!messages[selected_channel_id].size || messages[selected_channel_id].size % MAX_MESSAGES !== 0)
+        fetchMoreButton.classList.add('d-none')
+    else
+        fetchMoreButton.classList.remove('d-none')
+}
+
+function registerSendPrivateMessageContextMenu(message, element) {
+    element.addEventListener('contextmenu', (menu_event) => {
         menu_event.preventDefault()
-            const popover = bootstrap.Popover.getOrCreateInstance(authorSpan, {
+        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,
-                'placement': "bottom",
         })
         popover.show()
 
@@ -221,28 +254,31 @@ function redrawMessages() {
             }))
         })
     })
-
-        let dateSpan = document.createElement('span')
-        dateSpan.classList.add('text-muted', 'float-end')
-        dateSpan.innerText = new Date(message['timestamp']).toLocaleString()
-        authorDiv.appendChild(dateSpan)
-
-        let contentDiv = document.createElement('div')
-        messageElement.appendChild(contentDiv)
-
-        let messageContentDiv = document.createElement('div')
-        messageContentDiv.innerText = message['content']
-        contentDiv.appendChild(messageContentDiv)
-
-        lastMessage = message
-        lastContentDiv = contentDiv
 }
 
-    let fetchMoreButton = document.getElementById('fetch-previous-messages')
+function registerMessageContextMenu(message, element) {
-    if (!messages[selected_channel_id].size || messages[selected_channel_id].size % MAX_MESSAGES !== 0)
+    element.addEventListener('contextmenu', (menu_event) => {
-        fetchMoreButton.classList.add('d-none')
+        menu_event.preventDefault()
-    else
+        let content = `<a id="send-private-message-link-msg-${message['id']}" class="nav-link" href="#" tabindex="0">Envoyer un message privé</a>`
-        fetchMoreButton.classList.remove('d-none')
+        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() {
@@ -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