From 93635fee6aa1066a4d229d0c1ee7a607a4d5f3b8 Mon Sep 17 00:00:00 2001 From: Nolan Lawson 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