diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html index 5ce39d7..f8f759f 100644 --- a/routes/_components/virtualList/VirtualList.html +++ b/routes/_components/virtualList/VirtualList.html @@ -63,20 +63,26 @@ this.store.setForRealm({ items: newItems }) stop('set items') }) - this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { if (allVisibleItemsHaveHeight) { this.fire('initializedVisibleItems') } }) + let observedOnce = false + this.observe('distanceFromBottom', (distanceFromBottom) => { + if (!observedOnce) { + observedOnce = true // TODO: the first time is always 0... need better way to handle this + return + } if (distanceFromBottom >= 0 && distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) { this.fireScrollToBottom() } - }, { init: false }) + }) - this.store.observe('scrollTop', (scrollTop) => { + this.observe('scrollTop', (scrollTop) => { this.fire('scrollTopChanged', scrollTop) if (scrollTop === 0) { this.fireScrollToTop() @@ -97,7 +103,10 @@ computed: { distanceFromBottom: ({ $scrollHeight, $scrollTop, $offsetHeight }) => { return $scrollHeight - $scrollTop - $offsetHeight - } + }, + scrollTop: ({ $scrollTop }) => $scrollTop, + // TODO: bug in svelte store, shouldn't need to do this + allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight }, methods: { observe, @@ -114,4 +123,4 @@ } } } - + \ No newline at end of file diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html index ffb5578..23a69d1 100644 --- a/routes/_components/virtualList/VirtualListContainer.html +++ b/routes/_components/virtualList/VirtualListContainer.html @@ -29,7 +29,7 @@ let { scrollTop } = this.store.get() let scrollContainer = getScrollContainer() if (scrollTop > 0) { - this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight) let { initializedScrollTop } = this.get() if (!initializedScrollTop && allVisibleItemsHaveHeight) { @@ -46,7 +46,7 @@ }) } else { this.fire('noNeedToScroll') - this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { if (allVisibleItemsHaveHeight) { console.log('initialized VirtualList') this.fire('initialized') @@ -110,6 +110,10 @@ offsetHeight: getOffsetHeight() }) } + }, + computed: { + // TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack + allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight } } - + \ No newline at end of file diff --git a/routes/_components/virtualList/virtualListStore.js b/routes/_components/virtualList/virtualListStore.js index 0df2985..c7a2a6c 100644 --- a/routes/_components/virtualList/virtualListStore.js +++ b/routes/_components/virtualList/virtualListStore.js @@ -1,7 +1,6 @@ import { mark, stop } from '../../_utils/marks' import { RealmStore } from '../../_utils/RealmStore' import { reselect } from '../../_utils/reselect' -import { observe } from 'svelte-extras' const RENDER_BUFFER_FACTOR = 2.5 @@ -11,8 +10,6 @@ class VirtualListStore extends RealmStore { } } -VirtualListStore.prototype.observe = observe - const virtualListStore = new VirtualListStore() virtualListStore.computeForRealm('items', null)