pinafore/routes/_components/virtualList/VirtualListContainer.html

119 lines
3.9 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 { doubleRAF } from '../../_utils/doubleRAF'
import { observe } from 'svelte-extras'
import {
addScrollListener,
removeScrollListener,
getScrollContainer,
getOffsetHeight
} from '../../_utils/scrollContainer'
import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
2018-01-23 05:30:14 +00:00
const SCROLL_EVENT_DELAY = 300
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
2018-01-23 05:30:14 +00:00
mark('onCreate VirtualListContainer')
let {
realm
} = this.get()
this.store.setCurrentRealm(realm)
this.setupScroll()
this.setupFullscreen()
this.onResize = this.onResize.bind(this)
let { scrollTop } = this.store.get()
let scrollContainer = getScrollContainer()
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) {
this.set({ 'initializedScrollTop': true })
mark('set scrollTop')
console.log('forcing scroll top to ', scrollTop)
scrollContainer.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.onResize()
2018-01-24 17:47:31 +00:00
}
registerResizeListener(this.onResize)
2018-01-23 05:30:14 +00:00
stop('onCreate VirtualListContainer')
},
2018-04-20 04:38:01 +00:00
ondestroy () {
this.teardownScroll()
this.teardownFullscreen()
2018-02-13 06:47:25 +00:00
this.store.setCurrentRealm(null)
unregisterResizeListener(this.onResize)
},
2018-01-23 05:30:14 +00:00
store: () => virtualListStore,
methods: {
observe,
setupScroll () {
this.scrollListener = throttle(event => {
let { fullscreen } = this.get()
if (fullscreen) {
2018-01-23 05:30:14 +00:00
return
}
this.onScroll()
2018-01-23 05:30:14 +00:00
}, SCROLL_EVENT_DELAY, {
leading: true,
trailing: true
})
addScrollListener(this.scrollListener)
2018-01-23 05:30:14 +00:00
},
2018-04-20 04:38:01 +00:00
teardownScroll () {
removeScrollListener(this.scrollListener)
},
2018-04-20 04:38:01 +00:00
setupFullscreen () {
this.onFullscreenChange = this.onFullscreenChange.bind(this)
attachFullscreenListener(this.onFullscreenChange)
},
2018-04-20 04:38:01 +00:00
teardownFullscreen () {
detachFullscreenListener(this.onFullscreenChange)
},
onScroll () {
let { scrollTop, scrollHeight } = getScrollContainer()
2018-03-23 05:53:50 +00:00
doubleRAF(() => {
mark('onScroll -> setForRealm()')
this.store.setForRealm({ scrollTop, scrollHeight })
stop('onScroll -> setForRealm()')
2018-01-23 05:30:14 +00:00
})
},
2018-04-20 04:38:01 +00:00
onFullscreenChange () {
2018-01-23 05:30:14 +00:00
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')
},
onResize () {
this.store.setForRealm({
scrollHeight: getScrollContainer().scrollHeight,
offsetHeight: getOffsetHeight()
})
2018-01-23 05:30:14 +00:00
}
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
}
2018-04-20 04:38:01 +00:00
}
2018-01-23 05:30:14 +00:00
</script>