forked from cybrespace/pinafore
properly cache scroll top
This commit is contained in:
parent
fb234adb79
commit
754bbf0d46
|
@ -8,7 +8,6 @@
|
||||||
footerComponent="{{LoadingFooter}}"
|
footerComponent="{{LoadingFooter}}"
|
||||||
showFooter="{{initialized && runningUpdate}}"
|
showFooter="{{initialized && runningUpdate}}"
|
||||||
storeKey="{{timeline}}"
|
storeKey="{{timeline}}"
|
||||||
initialized="{{initialized}}"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -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')
|
||||||
})
|
})
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue