From 784002c085144ef58e7f632523272e8e29b98ba1 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy.danello@animath.fr>
Date: Sun, 28 Apr 2024 12:55:25 +0200
Subject: [PATCH] Open channels list by swiping

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
---
 chat/static/chat.js              | 70 +++++++++++++++++++++++---------
 chat/templates/chat/content.html |  2 +-
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/chat/static/chat.js b/chat/static/chat.js
index 43dd347..bc74972 100644
--- a/chat/static/chat.js
+++ b/chat/static/chat.js
@@ -260,26 +260,56 @@ document.addEventListener('DOMContentLoaded', () => {
         })
     }
 
-    setupSocket()
+    function setupSwipeOffscreen() {
+        const offcanvas = new bootstrap.Offcanvas(document.getElementById('channelSelector'))
 
-    let deferredPrompt = null
-
-    window.addEventListener("beforeinstallprompt", (e) => {
-        e.preventDefault()
-        deferredPrompt = e
-        let btn = document.getElementById('install-app-home-screen')
-        let alert = document.getElementById('alert-download-chat-app')
-        btn.classList.remove('d-none')
-        alert.classList.remove('d-none')
-        btn.onclick = function () {
-            deferredPrompt.prompt()
-            deferredPrompt.userChoice.then((choiceResult) => {
-                if (choiceResult.outcome === 'accepted') {
-                    deferredPrompt = null
-                    btn.classList.add('d-none')
-                    alert.classList.add('d-none')
+        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) => {
+            e.preventDefault()
+            deferredPrompt = e
+            let btn = document.getElementById('install-app-home-screen')
+            let alert = document.getElementById('alert-download-chat-app')
+            btn.classList.remove('d-none')
+            alert.classList.remove('d-none')
+            btn.onclick = function () {
+                deferredPrompt.prompt()
+                deferredPrompt.userChoice.then((choiceResult) => {
+                    if (choiceResult.outcome === 'accepted') {
+                        deferredPrompt = null
+                        btn.classList.add('d-none')
+                        alert.classList.add('d-none')
+                    }
+                })
+            }
+        })
+    }
+
+    setupSocket()
+    setupSwipeOffscreen()
+    setupPWAPrompt()
 })
diff --git a/chat/templates/chat/content.html b/chat/templates/chat/content.html
index 12bf52c..e712e14 100644
--- a/chat/templates/chat/content.html
+++ b/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()">