Add fullscreen mode for chat

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

chat/static/chat.js

@@ -33,6 +33,8 @@ function selectChannel(channel_id) {
 
     selected_channel_id = channel_id
 
+    window.history.replaceState({}, null, `#channel-${channel['id']}`)
+
     let channelTitle = document.getElementById('channel-title')
     channelTitle.innerText = channel['name']
 
@@ -84,9 +86,13 @@ function setChannels(new_channels) {
         fetchMessages(channel['id'])
     }
 
-    if (new_channels && (!selected_channel_id || !channels[selected_channel_id]))
+    if (new_channels && (!selected_channel_id || !channels[selected_channel_id])) {
+        if (window.location.hash)
+            selectChannel(window.location.hash.substring(9))
+        else
             selectChannel(Object.keys(channels)[0])
     }
+}
 
 function receiveMessage(message) {
     messages[message['channel_id']].set(message['id'], message)
@@ -180,6 +186,20 @@ function redrawMessages() {
         fetchMoreButton.classList.remove('d-none')
 }
 
+function toggleFullscreen() {
+    let chatContainer = document.getElementById('chat-container')
+    if (!chatContainer.getAttribute('data-fullscreen')) {
+        chatContainer.setAttribute('data-fullscreen', 'true')
+        chatContainer.classList.add('position-absolute', 'top-0', 'start-0', 'vh-100', 'z-3')
+        window.history.replaceState({}, null, `?fullscreen=1#channel-${selected_channel_id}`)
+    }
+    else {
+        chatContainer.removeAttribute('data-fullscreen')
+        chatContainer.classList.remove('position-absolute', 'top-0', 'start-0', 'vh-100', 'z-3')
+        window.history.replaceState({}, null, `?fullscreen=0#channel-${selected_channel_id}`)
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     /**
      * Process the received data from the server.

chat/templates/chat/chat.html

@@ -3,6 +3,8 @@
 {% load static %}
 {% load i18n %}
 
+{% block content-title %}{% endblock %}
+
 {% block content %}
     <noscript>
         {% trans "JavaScript must be enabled on your browser to access chat." %}
@@ -17,7 +19,8 @@
         </div>
     </div>
 
-    <div class="card tab-content w-100 mh-100" style="height: 95vh" id="nav-channels-content">
+    <div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
+         style="height: 95vh" id="chat-container">
         <div class="card-header">
             <h3>
                 <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
@@ -25,6 +28,9 @@
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <span id="channel-title"></span>
+                <button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
+                    <i class="fas fa-expand"></i>
+                </button>
             </h3>
         </div>
         <div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">

chat/views.py

@@ -2,10 +2,9 @@
 # SPDX-License-Identifier: GPL-3.0-or-later
 
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.utils.translation import gettext_lazy as _
 from django.views.generic import TemplateView
 
-from chat.models import Channel
-
 
 class ChatView(LoginRequiredMixin, TemplateView):
     """
@@ -13,9 +12,4 @@ class ChatView(LoginRequiredMixin, TemplateView):
     with Javascript and websockets.
     """
     template_name = "chat/chat.html"
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        from asgiref.sync import async_to_sync
-        context['channels'] = async_to_sync(Channel.get_accessible_channels)(self.request.user, 'read')
-        return context
+    extra_context = {'title': _("Chat")}

locale/fr/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: TFJM\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-04-27 14:10+0200\n"
+"POT-Creation-Date: 2024-04-27 16:15+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: Emmy D'Anello <emmy.danello@animath.fr>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -143,22 +143,30 @@ msgstr "message"
 msgid "messages"
 msgstr "messages"
 
-#: chat/templates/chat/chat.html:8
+#: chat/templates/chat/chat.html:10
 msgid "JavaScript must be enabled on your browser to access chat."
 msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat."
 
-#: chat/templates/chat/chat.html:12
+#: chat/templates/chat/chat.html:14
 msgid "Chat channels"
 msgstr "Canaux de chat"
 
-#: chat/templates/chat/chat.html:40
+#: chat/templates/chat/chat.html:31
+msgid "Toggle fullscreen mode"
+msgstr "Inverse le mode plein écran"
+
+#: chat/templates/chat/chat.html:39
 msgid "Fetch previous messages…"
 msgstr "Récupérer les messages précédents…"
 
-#: chat/templates/chat/chat.html:52
+#: chat/templates/chat/chat.html:51
 msgid "Send message…"
 msgstr "Envoyer un message…"
 
+#: chat/views.py:15 tfjm/templates/navbar.html:67
+msgid "Chat"
+msgstr "Chat"
+
 #: draw/admin.py:39 draw/admin.py:57 draw/admin.py:75
 #: participation/admin.py:109 participation/models.py:253
 #: participation/tables.py:88
@@ -3720,10 +3728,6 @@ msgstr "Mon équipe"
 msgid "My participation"
 msgstr "Ma participation"
 
-#: tfjm/templates/navbar.html:67
-msgid "Chat"
-msgstr "Chat"
-
 #: tfjm/templates/navbar.html:72
 msgid "Administration"
 msgstr "Administration"