diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html index f8f759f..5ce39d7 100644 --- a/routes/_components/virtualList/VirtualList.html +++ b/routes/_components/virtualList/VirtualList.html @@ -63,26 +63,20 @@ this.store.setForRealm({ items: newItems }) stop('set items') }) - this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + this.store.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.observe('scrollTop', (scrollTop) => { + this.store.observe('scrollTop', (scrollTop) => { this.fire('scrollTopChanged', scrollTop) if (scrollTop === 0) { this.fireScrollToTop() @@ -103,10 +97,7 @@ 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, @@ -123,4 +114,4 @@ } } } - \ No newline at end of file + diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html index 23a69d1..ffb5578 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.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight) let { initializedScrollTop } = this.get() if (!initializedScrollTop && allVisibleItemsHaveHeight) { @@ -46,7 +46,7 @@ }) } else { this.fire('noNeedToScroll') - this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { if (allVisibleItemsHaveHeight) { console.log('initialized VirtualList') this.fire('initialized') @@ -110,10 +110,6 @@ 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 c7a2a6c..0df2985 100644 --- a/routes/_components/virtualList/virtualListStore.js +++ b/routes/_components/virtualList/virtualListStore.js @@ -1,6 +1,7 @@ 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 @@ -10,6 +11,8 @@ class VirtualListStore extends RealmStore { } } +VirtualListStore.prototype.observe = observe + const virtualListStore = new VirtualListStore() virtualListStore.computeForRealm('items', null)