From 93635fee6aa1066a4d229d0c1ee7a607a4d5f3b8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 13 Feb 2018 09:15:10 -0800
Subject: [PATCH] refactor virtual list

---
 routes/_components/timeline/Timeline.html       | 10 +++++++---
 routes/_components/virtualList/VirtualList.html |  7 ++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 64de2d8d..87840847 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -21,6 +21,7 @@
                  :headerProps
                  on:scrollToBottom="onScrollToBottom()"
                  on:scrollToTop="onScrollToTop()"
+                 on:scrollTopChanged="onScrollTopChanged(event)"
                  on:initializedVisibleItems="initialize()"
     />
   {{else}}
@@ -58,7 +59,6 @@
   import LoadingPage from '../LoadingPage.html'
   import { focusWithCapture, blurWithCapture } from '../../_utils/events'
   import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
-  import { virtualListStore } from '../virtualList/virtualListStore' // TODO: hacky, need better way to expose scrollTop
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
 
@@ -79,7 +79,8 @@
     data: () => ({
       LoadingFooter,
       MoreHeaderVirtualWrapper,
-      Status
+      Status,
+      scrollTop: 0
     }),
     computed: {
       VirtualListComponent: (timelineType) => {
@@ -156,6 +157,9 @@
         console.log('timeline initialize()')
         initializeTimeline()
       },
+      onScrollTopChanged(scrollTop) {
+        this.set({scrollTop: scrollTop})
+      },
       onScrollToBottom() {
         if (!this.store.get('initialized') ||
             this.store.get('runningUpdate') ||
@@ -181,7 +185,7 @@
             return
           }
           mark('handleItemIdsToAdd')
-          let scrollTop = virtualListStore.get('scrollTop')
+          let scrollTop = this.get('scrollTop')
           let shouldShowHeader = this.store.get('shouldShowHeader')
           let showHeader = this.store.get('showHeader')
           //console.log('handleItemIdsToAdd', (itemIdsToAdd && itemIdsToAdd.length) || 0)
diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index 5f62c18b..c41a1540 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -78,8 +78,9 @@
         }
       })
 
-      this.observe('distanceFromTop', (distanceFromTop) => {
-        if (distanceFromTop === 0) {
+      this.observe('scrollTop', (scrollTop) => {
+        this.fire('scrollTopChanged', scrollTop)
+        if (scrollTop === 0) {
           this.fireScrollToTop()
         }
       })
@@ -98,7 +99,7 @@
       distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
         return $scrollHeight - $scrollTop - $offsetHeight
       },
-      distanceFromTop: ($scrollTop) => $scrollTop,
+      scrollTop: ($scrollTop) => $scrollTop,
       // TODO: bug in svelte store, shouldn't need to do this
       allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
       // TODO: hack to avoid getting called too often