From 7bc2b02a1bf0306811299b25ebef8ccb335fe231 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 14 May 2022 12:54:04 -0700
Subject: [PATCH] try to implement load more without scrolling

---
 src/intl/en-US.js                             |  1 +
 .../_actions/showMoreWithoutScrollingToTop.js | 23 +++++++++++++++++++
 src/routes/_components/timeline/Timeline.html |  5 +++-
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/_actions/showMoreWithoutScrollingToTop.js

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index e0cb576d..9ac8db43 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -149,6 +149,7 @@ export default {
     <li><kbd>j</kbd> or <kbd>↓</kbd> to activate the next toot</li>
     <li><kbd>k</kbd> or <kbd>↑</kbd> to activate the previous toot</li>
     <li><kbd>.</kbd> to show more and scroll to top</li>
+    <li><kbd>,</kbd> to show more without scrolling</li>
     <li><kbd>o</kbd> to open</li>
     <li><kbd>f</kbd> to favorite</li>
     <li><kbd>b</kbd> to boost</li>
diff --git a/src/routes/_actions/showMoreWithoutScrollingToTop.js b/src/routes/_actions/showMoreWithoutScrollingToTop.js
new file mode 100644
index 00000000..4bb10173
--- /dev/null
+++ b/src/routes/_actions/showMoreWithoutScrollingToTop.js
@@ -0,0 +1,23 @@
+import { showMoreItemsForCurrentTimeline } from './timeline.js'
+import { getScrollContainer } from '../_utils/scrollContainer.js'
+import { tryToFocusElement } from '../_utils/tryToFocusElement.js'
+import { doubleRAF } from '../_utils/doubleRAF.js'
+
+export async function showMoreWithoutScrollingToTop () {
+  // Similar to "." (showMoreAndScrollToTop), except it doesn't scroll to the top
+  const id = document.activeElement && document.activeElement.id
+  const { scrollHeight, scrollTop } = getScrollContainer()
+  await showMoreItemsForCurrentTimeline()
+  // There seems to be some kind of race condition with what the timeline is doing. This is a best
+  // effort to maintain scroll position.
+  await new Promise(resolve => doubleRAF(resolve))
+  await new Promise(resolve => doubleRAF(resolve))
+  // restore scroll position
+  const { scrollHeight: newScrollHeight } = getScrollContainer()
+  const newScrollTop = scrollTop + (newScrollHeight - scrollHeight)
+  console.log({ scrollHeight, scrollTop, newScrollHeight, newScrollTop })
+  getScrollContainer().scrollTop = newScrollTop
+  if (id) {
+    await tryToFocusElement(id)
+  }
+}
diff --git a/src/routes/_components/timeline/Timeline.html b/src/routes/_components/timeline/Timeline.html
index 6cf1bf84..90b785bc 100644
--- a/src/routes/_components/timeline/Timeline.html
+++ b/src/routes/_components/timeline/Timeline.html
@@ -23,6 +23,7 @@
   </div>
 </FocusRestoration>
 <Shortcut scope="global" key="." on:pressed="showMoreAndScrollToTop()" />
+<Shortcut scope="global" key="," on:pressed="showMoreWithoutScrollingToTop()" />
 <ScrollListShortcuts />
 <script>
   import { store } from '../../_store/store.js'
@@ -50,6 +51,7 @@
   import { observe } from 'svelte-extras'
   import { createMakeProps } from '../../_actions/createMakeProps.js'
   import { showMoreAndScrollToTop } from '../../_actions/showMoreAndScrollToTop.js'
+  import { showMoreWithoutScrollingToTop } from '../../_actions/showMoreWithoutScrollingToTop.js'
   import FocusRestoration from '../FocusRestoration.html'
 
   export default {
@@ -227,7 +229,8 @@
         console.log('timeline preinitialized')
         this.store.set({ timelinePreinitialized: true })
       },
-      showMoreAndScrollToTop
+      showMoreAndScrollToTop,
+      showMoreWithoutScrollingToTop
     },
     components: {
       ScrollListShortcuts,