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,25 +206,7 @@ function redrawMessages() {
         authorSpan.innerText = message['author']
         authorDiv.appendChild(authorSpan)
 
-        authorSpan.addEventListener('contextmenu', (menu_event) => {
+        registerSendPrivateMessageContextMenu(message, authorSpan)
-            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'],
-                }))
-            })
-        })
 
         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