From d0391a6c0f24c9481168604c94bf5202dc08f469 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 24 Jan 2018 18:58:10 -0800 Subject: [PATCH] fix observer bug in svelte store --- routes/_components/VirtualListContainer.html | 56 +++++++++++--------- routes/_utils/virtualListStore.js | 3 ++ 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/routes/_components/VirtualListContainer.html b/routes/_components/VirtualListContainer.html index 4ec7499..fb0e373 100644 --- a/routes/_components/VirtualListContainer.html +++ b/routes/_components/VirtualListContainer.html @@ -31,8 +31,34 @@ scrollHeight: cachedStore.state.scrollHeight, offsetHeight: cachedStore.state.offsetHeight }) - this.rehydrateScrollTop(cachedStore) this.store.set(cachedStore.state) + + // rehydrate scroll top + let cachedScrollTop = cachedStore.state.scrollTop || 0 + if (cachedScrollTop === 0) { + if (process.env.NODE_ENV !== 'production') { + console.log('no need to force scroll top') + } + return + } + let initializedScrollTop = false + let node = this.refs.node + this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { + if (process.env.NODE_ENV !== 'production') { + console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight) + } + if (!initializedScrollTop && allVisibleItemsHaveHeight && node) { + initializedScrollTop = true + requestAnimationFrame(() => { + mark('set scrollTop') + if (process.env.NODE_ENV !== 'production') { + console.log('forcing scroll top to ', cachedScrollTop) + } + node.scrollTop = cachedScrollTop + stop('set scrollTop') + }) + } + }) } else { this.store.set({ scrollTop: 0, @@ -102,31 +128,11 @@ } this.set({ fullscreen: isFullscreen() }) stop('onFullscreenChange') - }, - rehydrateScrollTop(cachedStore) { - let cachedScrollTop = cachedStore.state.scrollTop || 0 - if (cachedScrollTop === 0) { - if (process.env.NODE_ENV !== 'production') { - console.log('no need to force scroll top') - } - return - } - let initializedScrollTop = false - let node = this.refs.node - this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { - if (!initializedScrollTop && allVisibleItemsHaveHeight && node) { - initializedScrollTop = true - requestAnimationFrame(() => { - mark('set scrollTop') - if (process.env.NODE_ENV !== 'production') { - console.log('forcing scroll top to ', cachedScrollTop) - } - node.scrollTop = cachedScrollTop - stop('set scrollTop') - }) - } - }) } + }, + 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/_utils/virtualListStore.js b/routes/_utils/virtualListStore.js index f26cdab..5ab4a85 100644 --- a/routes/_utils/virtualListStore.js +++ b/routes/_utils/virtualListStore.js @@ -120,6 +120,9 @@ virtualListStore.compute('numItems', ['items'], (items) => items.length) virtualListStore.compute('allVisibleItemsHaveHeight', ['visibleItems', 'itemHeights'], (visibleItems, itemHeights) => { + if (!visibleItems.length) { + return false + } for (let visibleItem of visibleItems) { if (!itemHeights[visibleItem.key]) { return false