pinafore/routes/_components/virtualList/VirtualListContainer.html

119 lines
4 KiB
HTML
Raw Normal View History

<slot></slot>
2018-01-23 05:30:14 +00:00
<script>
2018-01-25 16:23:14 +00:00
import { virtualListStore } from './virtualListStore'
import throttle from 'lodash-es/throttle'
2018-01-25 16:23:14 +00:00
import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../../_utils/fullscreen'
import { mark, stop } from '../../_utils/marks'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
2018-03-23 05:53:50 +00:00
import { isMobile } from '../../_utils/isMobile'
import { doubleRAF } from '../../_utils/doubleRAF'
2018-01-23 05:30:14 +00:00
const SCROLL_EVENT_DELAY = 300
export default {
oncreate() {
mark('onCreate VirtualListContainer')
let {
realm,
containerQuery
} = this.get()
this.store.setCurrentRealm(realm)
let node = document.querySelector(containerQuery)
this.setupScroll(node)
this.setupFullscreen()
let { scrollTop } = this.store.get()
2018-01-27 16:13:28 +00:00
if (scrollTop > 0) {
2018-01-25 02:58:10 +00:00
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
2018-01-27 16:22:23 +00:00
console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
let { initializedScrollTop } = this.get()
if (!initializedScrollTop && allVisibleItemsHaveHeight && node) {
2018-01-27 16:13:28 +00:00
this.set({'initializedScrollTop': true})
mark('set scrollTop')
console.log('forcing scroll top to ', scrollTop)
node.scrollTop = scrollTop
stop('set scrollTop')
doubleRAF(() => {
console.log('initialized VirtualList')
this.fire('initialized')
})
2018-01-25 02:58:10 +00:00
}
})
2018-01-24 17:47:31 +00:00
} else {
this.fire('noNeedToScroll')
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
console.log('initialized VirtualList')
this.fire('initialized')
}
})
this.store.setForRealm({
scrollHeight: node.scrollHeight,
offsetHeight: node.offsetHeight
2018-01-24 17:47:31 +00:00
})
}
2018-01-23 05:30:14 +00:00
stop('onCreate VirtualListContainer')
},
ondestroy() {
this.teardownScroll()
this.teardownFullscreen()
2018-02-13 06:47:25 +00:00
this.store.setCurrentRealm(null)
},
2018-01-23 05:30:14 +00:00
store: () => virtualListStore,
methods: {
setupScroll(node) {
if (!node) {
return
}
this.scrollListener = throttle(event => {
let { fullscreen } = this.get()
if (fullscreen) {
2018-01-23 05:30:14 +00:00
return
}
this.onScroll(event)
2018-01-23 05:30:14 +00:00
}, SCROLL_EVENT_DELAY, {
leading: true,
trailing: true
})
node.addEventListener('scroll', this.scrollListener)
2018-01-23 05:30:14 +00:00
},
teardownScroll() {
let { containerQuery } = this.get()
let node = document.querySelector(containerQuery)
if (node) {
node.removeEventListener('scroll', this.scrollListener)
2018-01-23 05:30:14 +00:00
}
},
setupFullscreen() {
this.onFullscreenChange = this.onFullscreenChange.bind(this)
attachFullscreenListener(this.onFullscreenChange)
},
teardownFullscreen() {
detachFullscreenListener(this.onFullscreenChange)
},
2018-01-23 05:30:14 +00:00
onScroll(event) {
let { scrollTop, scrollHeight } = event.target
2018-03-23 05:53:50 +00:00
// On mobile devices, this can make scrolling more responsive. On
// desktop browsers... it's probably overkill, and can lead to a
// checkerboarding issue ("I just scrolled, why is it blank for 5 seconds?").
let runTask = isMobile() ? scheduleIdleTask : requestAnimationFrame
runTask(() => {
mark('onScroll -> setForRealm()')
this.store.setForRealm({scrollTop, scrollHeight})
stop('onScroll -> setForRealm()')
2018-01-23 05:30:14 +00:00
})
},
onFullscreenChange() {
mark('onFullscreenChange')
2018-01-27 16:22:23 +00:00
console.log('is fullscreen? ', isFullscreen())
2018-01-23 05:30:14 +00:00
this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange')
}
2018-01-25 02:58:10 +00:00
},
computed: {
// TODO: bug in svelte/store the observer in oncreate() never get removed without this hack
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
2018-01-23 05:30:14 +00:00
}
};
</script>