Open channels list by swiping

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

chat/static/chat.js

@@ -260,8 +260,33 @@ document.addEventListener('DOMContentLoaded', () => {
         })
     }
 
-    setupSocket()
+    function setupSwipeOffscreen() {
+        const offcanvas = new bootstrap.Offcanvas(document.getElementById('channelSelector'))
 
+        let lastX = null
+        document.addEventListener('touchstart', (event) => {
+            if (event.touches.length === 1)
+                lastX = event.touches[0].clientX
+        })
+        document.addEventListener('touchmove', (event) => {
+            if (event.touches.length === 1 && lastX !== null) {
+                const diff = event.touches[0].clientX - lastX
+                if (diff > window.innerWidth / 10 && lastX < window.innerWidth / 4) {
+                    offcanvas.show()
+                    lastX = null
+                }
+                else if (diff < -window.innerWidth / 10) {
+                    offcanvas.hide()
+                    lastX = null
+                }
+            }
+        })
+        document.addEventListener('touchend', () => {
+            lastX = null
+        })
+    }
+
+    function setupPWAPrompt() {
         let deferredPrompt = null
 
         window.addEventListener("beforeinstallprompt", (e) => {
@@ -282,4 +307,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 })
             }
         })
+    }
+
+    setupSocket()
+    setupSwipeOffscreen()
+    setupPWAPrompt()
 })

chat/templates/chat/content.html

@@ -49,13 +49,13 @@
         </h3>
     </div>
     <div class="card-body d-flex flex-column-reverse flex-grow-0 overflow-y-scroll" id="chat-messages">
+        <ul class="list-group list-group-flush" id="message-list"></ul>
         <div class="text-center d-none" id="fetch-previous-messages">
             <a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
                 {% trans "Fetch previous messages…" %}
             </a>
             <hr>
         </div>
-        <ul class="list-group list-group-flush" id="message-list"></ul>
     </div>
     <div class="card-footer mt-auto">
         <form onsubmit="event.preventDefault(); sendMessage()">