pinafore/routes/_components/virtualList/VirtualListContainer.html

96 lines
3.2 KiB
HTML
Raw Normal View History

<slot></slot>
2018-01-23 06:30:14 +01:00
<script>
2018-01-25 17:23:14 +01:00
import { virtualListStore } from './virtualListStore'
2018-01-23 06:30:14 +01:00
import throttle from 'lodash/throttle'
2018-01-25 17:23:14 +01:00
import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../../_utils/fullscreen'
import { mark, stop } from '../../_utils/marks'
2018-01-23 06:30:14 +01:00
const SCROLL_EVENT_DELAY = 300
export default {
oncreate() {
mark('onCreate VirtualListContainer')
2018-02-13 07:47:25 +01:00
this.store.setCurrentRealm(this.get('realm'))
2018-02-13 07:32:56 +01:00
let node = document.querySelector(this.get('containerQuery'))
this.setupScroll(node)
this.setupFullscreen()
2018-01-27 17:13:28 +01:00
let scrollTop = this.store.get('scrollTop')
if (scrollTop > 0) {
2018-01-25 03:58:10 +01:00
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
2018-01-27 17:22:23 +01:00
console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
2018-01-27 17:13:28 +01:00
if (!this.get('initializedScrollTop') && allVisibleItemsHaveHeight && node) {
this.set({'initializedScrollTop': true})
2018-01-25 03:58:10 +01:00
requestAnimationFrame(() => {
mark('set scrollTop')
2018-01-27 17:22:23 +01:00
console.log('forcing scroll top to ', scrollTop)
2018-01-27 17:13:28 +01:00
node.scrollTop = scrollTop
2018-01-25 03:58:10 +01:00
stop('set scrollTop')
})
}
})
2018-01-24 18:47:31 +01:00
} else {
2018-02-26 07:50:50 +01:00
requestAnimationFrame(() => {
this.store.setForRealm({
scrollHeight: node.scrollHeight,
offsetHeight: node.offsetHeight
})
2018-01-24 18:47:31 +01:00
})
}
2018-01-23 06:30:14 +01:00
stop('onCreate VirtualListContainer')
},
ondestroy() {
this.teardownScroll()
this.teardownFullscreen()
2018-02-13 07:47:25 +01:00
this.store.setCurrentRealm(null)
},
2018-01-23 06:30:14 +01:00
store: () => virtualListStore,
methods: {
setupScroll(node) {
if (!node) {
return
}
this.scrollListener = throttle(event => {
2018-01-23 06:30:14 +01:00
if (this.get('fullscreen')) {
return
}
this.onScroll(event)
2018-01-23 06:30:14 +01:00
}, SCROLL_EVENT_DELAY, {
leading: true,
trailing: true
})
node.addEventListener('scroll', this.scrollListener)
2018-01-23 06:30:14 +01:00
},
teardownScroll() {
2018-02-13 07:32:56 +01:00
let node = document.querySelector(this.get('containerQuery'))
if (node) {
node.removeEventListener('scroll', this.scrollListener)
2018-01-23 06:30:14 +01:00
}
},
setupFullscreen() {
this.onFullscreenChange = this.onFullscreenChange.bind(this)
attachFullscreenListener(this.onFullscreenChange)
},
teardownFullscreen() {
detachFullscreenListener(this.onFullscreenChange)
},
2018-01-23 06:30:14 +01:00
onScroll(event) {
let { scrollTop, scrollHeight } = event.target
requestAnimationFrame(() => { // delay slightly to improve scroll perf
mark('onScroll -> setForRealm()')
this.store.setForRealm({scrollTop, scrollHeight})
stop('onScroll -> setForRealm()')
2018-01-23 06:30:14 +01:00
})
},
onFullscreenChange() {
mark('onFullscreenChange')
2018-01-27 17:22:23 +01:00
console.log('is fullscreen? ', isFullscreen())
2018-01-23 06:30:14 +01:00
this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange')
}
2018-01-25 03:58:10 +01:00
},
computed: {
// TODO: bug in svelte/store the observer in oncreate() never get removed without this hack
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
2018-01-23 06:30:14 +01:00
}
};
</script>