pinafore/routes/_components/VirtualListContainer.html

131 lines
3.8 KiB
HTML
Raw Normal View History

<div class="container"
on:scroll="onScroll(event)"
on:fullscreen="onFullscreenChange()"
ref:node>
2018-01-23 05:30:14 +00:00
<slot></slot>
</div>
<script>
import { virtualListStore } from '../_utils/virtualListStore'
import throttle from 'lodash/throttle'
import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../_utils/fullscreen'
import { mark, stop } from '../_utils/marks'
const SCROLL_EVENT_DELAY = 300
2018-01-24 17:47:31 +00:00
const cachedVirtualStores = {}
if (process.browser && process.env.NODE_ENV !== 'production') {
window.cachedVirtualStores = cachedVirtualStores
}
2018-01-23 05:30:14 +00:00
export default {
oncreate() {
mark('onCreate VirtualListContainer')
let node = this.refs.node
2018-01-24 17:47:31 +00:00
let storeKey = this.get('storeKey')
let cachedStore
if (storeKey && (cachedStore = cachedVirtualStores[storeKey])) {
this.store.set({
scrollTop: cachedStore.state.scrollTop,
scrollHeight: cachedStore.state.scrollHeight,
offsetHeight: cachedStore.state.offsetHeight
})
this.rehydrateScrollTop(cachedStore)
this.store.set(cachedStore.state)
} else {
this.store.set({
scrollTop: 0,
scrollHeight: node.scrollHeight,
offsetHeight: node.offsetHeight
})
}
2018-01-23 05:30:14 +00:00
stop('onCreate VirtualListContainer')
},
2018-01-24 17:47:31 +00:00
ondestroy() {
let storeKey = this.get('storeKey')
if (storeKey) {
2018-01-25 02:04:25 +00:00
let clonedState = this.store.cloneState()
if (process.env.NODE_ENV !== 'production') {
console.log('caching scroll top', clonedState.scrollTop)
}
2018-01-24 17:47:31 +00:00
cachedVirtualStores[storeKey] = {
2018-01-25 02:04:25 +00:00
state: clonedState
2018-01-24 17:47:31 +00:00
}
}
},
2018-01-23 05:30:14 +00:00
store: () => virtualListStore,
events: {
scroll(node, callback) {
const onScroll = throttle(event => {
mark('onScroll')
if (this.get('fullscreen')) {
return
}
callback(event)
stop('onScroll')
}, SCROLL_EVENT_DELAY, {
leading: true,
trailing: true
})
node.addEventListener('scroll', onScroll)
return {
teardown() {
node.removeEventListener('scroll', onScroll)
}
}
},
fullscreen(node, callback) {
const onFullscreen = (() => {
callback()
})
attachFullscreenListener(onFullscreen)
return {
teardown() {
detachFullscreenListener(onFullscreen)
}
}
}
},
methods: {
onScroll(event) {
this.store.set({
scrollTop: event.target.scrollTop,
scrollHeight: event.target.scrollHeight
})
},
onFullscreenChange() {
mark('onFullscreenChange')
2018-01-25 02:04:25 +00:00
if (process.env.NODE_ENV !== 'production') {
console.log('is fullscreen? ', isFullscreen())
}
2018-01-23 05:30:14 +00:00
this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange')
2018-01-24 17:47:31 +00:00
},
rehydrateScrollTop(cachedStore) {
let cachedScrollTop = cachedStore.state.scrollTop || 0
if (cachedScrollTop === 0) {
2018-01-25 02:04:25 +00:00
if (process.env.NODE_ENV !== 'production') {
console.log('no need to force scroll top')
}
2018-01-24 17:47:31 +00:00
}
let initializedScrollTop = false
let node = this.refs.node
2018-01-25 02:04:25 +00:00
this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (!initializedScrollTop && allVisibleItemsHaveHeight && node) {
2018-01-24 17:47:31 +00:00
initializedScrollTop = true
requestAnimationFrame(() => {
mark('set scrollTop')
2018-01-25 02:04:25 +00:00
if (process.env.NODE_ENV !== 'production') {
console.log('forcing scroll top to ', cachedScrollTop)
}
2018-01-24 17:47:31 +00:00
node.scrollTop = cachedScrollTop
stop('set scrollTop')
})
}
})
2018-01-23 05:30:14 +00:00
}
}
};
</script>