properly cache scroll top

This commit is contained in:
Nolan Lawson 2018-01-24 18:04:25 -08:00
parent fb234adb79
commit 754bbf0d46
3 changed files with 27 additions and 8 deletions

View file

@ -8,7 +8,6 @@
footerComponent="{{LoadingFooter}}" footerComponent="{{LoadingFooter}}"
showFooter="{{initialized && runningUpdate}}" showFooter="{{initialized && runningUpdate}}"
storeKey="{{timeline}}" storeKey="{{timeline}}"
initialized="{{initialized}}"
/> />
</div> </div>
<style> <style>

View file

@ -45,9 +45,12 @@
ondestroy() { ondestroy() {
let storeKey = this.get('storeKey') let storeKey = this.get('storeKey')
if (storeKey) { if (storeKey) {
let clonedState = this.store.cloneState()
if (process.env.NODE_ENV !== 'production') {
console.log('caching scroll top', clonedState.scrollTop)
}
cachedVirtualStores[storeKey] = { cachedVirtualStores[storeKey] = {
state: this.store.cloneState(), state: clonedState
height: this.store.get('height')
} }
} }
}, },
@ -94,23 +97,29 @@
}, },
onFullscreenChange() { onFullscreenChange() {
mark('onFullscreenChange') mark('onFullscreenChange')
if (process.env.NODE_ENV !== 'production') {
console.log('is fullscreen? ', isFullscreen()) console.log('is fullscreen? ', isFullscreen())
}
this.set({ fullscreen: isFullscreen() }) this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange') stop('onFullscreenChange')
}, },
rehydrateScrollTop(cachedStore) { rehydrateScrollTop(cachedStore) {
let cachedScrollTop = cachedStore.state.scrollTop || 0 let cachedScrollTop = cachedStore.state.scrollTop || 0
let cachedHeight = cachedStore.height
if (cachedScrollTop === 0) { if (cachedScrollTop === 0) {
return if (process.env.NODE_ENV !== 'production') {
console.log('no need to force scroll top')
}
} }
let initializedScrollTop = false let initializedScrollTop = false
let node = this.refs.node let node = this.refs.node
this.store.observe('height', height => { this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (!initializedScrollTop && height === cachedHeight && node) { if (!initializedScrollTop && allVisibleItemsHaveHeight && node) {
initializedScrollTop = true initializedScrollTop = true
requestAnimationFrame(() => { requestAnimationFrame(() => {
mark('set scrollTop') mark('set scrollTop')
if (process.env.NODE_ENV !== 'production') {
console.log('forcing scroll top to ', cachedScrollTop)
}
node.scrollTop = cachedScrollTop node.scrollTop = cachedScrollTop
stop('set scrollTop') stop('set scrollTop')
}) })

View file

@ -117,6 +117,17 @@ virtualListStore.compute('height',
virtualListStore.compute('numItems', ['items'], (items) => items.length) virtualListStore.compute('numItems', ['items'], (items) => items.length)
virtualListStore.compute('allVisibleItemsHaveHeight',
['visibleItems', 'itemHeights'],
(visibleItems, itemHeights) => {
for (let visibleItem of visibleItems) {
if (!itemHeights[visibleItem.key]) {
return false
}
}
return true
})
if (process.browser && process.env.NODE_ENV !== 'production') { if (process.browser && process.env.NODE_ENV !== 'production') {
window.virtualListStore = virtualListStore window.virtualListStore = virtualListStore
} }