2018-02-13 06:06:05 +00:00
|
|
|
|
<slot></slot>
|
2018-01-23 05:30:14 +00:00
|
|
|
|
<script>
|
2018-01-25 16:23:14 +00:00
|
|
|
|
import { virtualListStore } from './virtualListStore'
|
2018-01-23 05:30:14 +00:00
|
|
|
|
import throttle from 'lodash/throttle'
|
2018-01-25 16:23:14 +00:00
|
|
|
|
import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../../_utils/fullscreen'
|
|
|
|
|
import { mark, stop } from '../../_utils/marks'
|
2018-01-23 05:30:14 +00:00
|
|
|
|
|
|
|
|
|
const SCROLL_EVENT_DELAY = 300
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
oncreate() {
|
|
|
|
|
mark('onCreate VirtualListContainer')
|
2018-02-13 06:47:25 +00:00
|
|
|
|
this.store.setCurrentRealm(this.get('realm'))
|
2018-02-13 06:32:56 +00:00
|
|
|
|
let node = document.querySelector(this.get('containerQuery'))
|
2018-02-13 06:06:05 +00:00
|
|
|
|
this.setupScroll(node)
|
|
|
|
|
this.setupFullscreen()
|
2018-01-27 16:13:28 +00:00
|
|
|
|
let scrollTop = this.store.get('scrollTop')
|
|
|
|
|
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)
|
2018-01-27 16:13:28 +00:00
|
|
|
|
if (!this.get('initializedScrollTop') && allVisibleItemsHaveHeight && node) {
|
|
|
|
|
this.set({'initializedScrollTop': true})
|
2018-01-25 02:58:10 +00:00
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
|
mark('set scrollTop')
|
2018-01-27 16:22:23 +00:00
|
|
|
|
console.log('forcing scroll top to ', scrollTop)
|
2018-01-27 16:13:28 +00:00
|
|
|
|
node.scrollTop = scrollTop
|
2018-01-25 02:58:10 +00:00
|
|
|
|
stop('set scrollTop')
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
2018-01-24 17:47:31 +00:00
|
|
|
|
} else {
|
2018-01-27 16:13:28 +00:00
|
|
|
|
this.store.setForRealm({
|
2018-01-24 17:47:31 +00:00
|
|
|
|
scrollHeight: node.scrollHeight,
|
|
|
|
|
offsetHeight: node.offsetHeight
|
|
|
|
|
})
|
|
|
|
|
}
|
2018-01-23 05:30:14 +00:00
|
|
|
|
stop('onCreate VirtualListContainer')
|
|
|
|
|
},
|
2018-02-13 06:06:05 +00:00
|
|
|
|
ondestroy() {
|
|
|
|
|
this.teardownScroll()
|
|
|
|
|
this.teardownFullscreen()
|
2018-02-13 06:47:25 +00:00
|
|
|
|
this.store.setCurrentRealm(null)
|
2018-02-13 06:06:05 +00:00
|
|
|
|
},
|
2018-01-23 05:30:14 +00:00
|
|
|
|
store: () => virtualListStore,
|
2018-02-13 06:06:05 +00:00
|
|
|
|
methods: {
|
|
|
|
|
setupScroll(node) {
|
|
|
|
|
if (!node) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.scrollListener = throttle(event => {
|
2018-01-23 05:30:14 +00:00
|
|
|
|
if (this.get('fullscreen')) {
|
|
|
|
|
return
|
|
|
|
|
}
|
2018-02-13 06:06:05 +00:00
|
|
|
|
this.onScroll(event)
|
2018-01-23 05:30:14 +00:00
|
|
|
|
}, SCROLL_EVENT_DELAY, {
|
|
|
|
|
leading: true,
|
|
|
|
|
trailing: true
|
|
|
|
|
})
|
2018-02-13 06:06:05 +00:00
|
|
|
|
node.addEventListener('scroll', this.scrollListener)
|
2018-01-23 05:30:14 +00:00
|
|
|
|
},
|
2018-02-13 06:06:05 +00:00
|
|
|
|
teardownScroll() {
|
2018-02-13 06:32:56 +00:00
|
|
|
|
let node = document.querySelector(this.get('containerQuery'))
|
2018-02-13 06:06:05 +00:00
|
|
|
|
if (node) {
|
|
|
|
|
node.removeEventListener('scroll', this.scrollListener)
|
2018-01-23 05:30:14 +00:00
|
|
|
|
}
|
2018-02-13 06:06:05 +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) {
|
2018-02-13 06:06:05 +00:00
|
|
|
|
mark('onScroll')
|
2018-01-27 16:13:28 +00:00
|
|
|
|
this.store.setForRealm({
|
2018-01-23 05:30:14 +00:00
|
|
|
|
scrollTop: event.target.scrollTop,
|
|
|
|
|
scrollHeight: event.target.scrollHeight
|
|
|
|
|
})
|
2018-02-13 06:06:05 +00:00
|
|
|
|
stop('onScroll')
|
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>
|