From f76bb30987b108eeb204f8fba218ebb4c8ed2cff Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@disroot.org>
Date: Tue, 27 Sep 2022 21:56:22 +0530
Subject: [PATCH] Scroll through entire element before moving to next

This is primarily so that we can read the entire chat message that
comes in, not just the beginning part that fits on the screen. The
implementation is still a bit jumpy and needs some work, but at
least you can now use it to have a functional conversation.

Addresses #3 but maybe needs more work.
---
 src/App.svelte | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index 48bbbfd..91a61fc 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -55,6 +55,54 @@
     targetElement.focus()
   }
 
+  /**
+   * Okay, so here's a slightly complicated function.
+   * What we're trying to do is scroll down (in the case
+   * of a long element that overflows the screen), or, if
+   * we've got to the end of that element, then to move on
+   * to the next one. This may not be the neatest way to
+   * do it but let's start with this and see how it goes...
+   */
+  function navDown() {
+      // list.scrollTop > dong.offsetTop + dong.offsetHeight - (list.offsetHeight) // when this turns true, it means we've gone past
+
+      // Check if the parent scrolls
+      if (document.activeElement?.parentElement?.scrollTop > 0) {
+
+        // Yes it does! Okay, we've got to handle this carefully
+        let el = document.activeElement
+        let scrollEl = el.parentElement
+
+        // If we're already maxed out, time to navigate on
+        if (scrollEl.scrollTop == scrollEl.scrollTopMax) {
+          nav(1)
+          return
+        }
+
+        // First, scroll down a bit
+        scrollEl.scrollTop += scrollEl.offsetHeight * 0.5
+
+        // Now, check if we're still in view
+        if (scrollEl.scrollTop > // current scroll greater than
+          el.offsetTop            // place where element starts
+          + el.offsetHeight           // plus height of element
+          - (scrollEl.offsetHeight * 0.4)    // minus a wee bit
+        ) {
+          // Now the previous thing's scrolled reasonably away
+          // so we can safely focus on the next one
+          nav(1)
+
+          // But let's just scroll back up a bit to make sure
+          // everything's still in view
+          scrollEl.scrollTop -= scrollEl.offsetHeight * 0.5
+        }
+      } else {
+        // Viewport not scrollable; just navigate without
+        // any funky stuff
+        nav(1)
+      }
+  }
+
   // Key-down handler
   function handleKeydown(e) {
     switch(e.key) {
@@ -62,7 +110,7 @@
         nav(-1)
         break
       case 'ArrowDown':
-        nav(1)
+        navDown()
         break
       case 'SoftLeft':
       case '[':