pinafore/routes/_components/VirtualList.html

69 lines
1.9 KiB
HTML
Raw Normal View History

2018-01-16 02:29:28 +00:00
<:Window bind:innerHeight='innerHeight'/>
<div class="virtual-list" style="height: {{$height}}px;">
<!-- <div class="virtual-list-viewport" ref:viewport></div> -->
2018-01-16 01:25:32 +00:00
{{#each $visibleItems as item @key}}
<VirtualListItem :component
offset="{{item.offset}}"
props="{{item.props}}"
key="{{item.key}}"
/>
2018-01-15 18:54:02 +00:00
{{/each}}
</div>
<style>
.virtual-list {
position: relative;
}
</style>
<script>
import VirtualListItem from './VirtualListItem'
import { virtualListStore } from '../_utils/virtualListStore'
2018-01-17 01:33:47 +00:00
import throttle from 'lodash/throttle'
2018-01-15 18:54:02 +00:00
2018-01-17 01:33:47 +00:00
const THROTTLE_TIME = 500
2018-01-17 05:43:31 +00:00
const DISTANCE_FROM_BOTTOM_TO_FIRE = 400
2018-01-16 01:25:32 +00:00
2018-01-15 18:54:02 +00:00
export default {
2018-01-16 01:25:32 +00:00
oncreate () {
2018-01-17 05:43:31 +00:00
let container = document.body.querySelector('.container')
this.observe('innerHeight', throttle(() => {
// respond to window resize events
2018-01-16 00:12:07 +00:00
this.store.set({
2018-01-17 05:43:31 +00:00
offsetHeight: container.offsetHeight
2018-01-16 00:12:07 +00:00
})
2018-01-17 01:33:47 +00:00
}, THROTTLE_TIME))
this.observe('items', (items) => {
2018-01-16 00:12:07 +00:00
this.store.set({
'items': items
})
2018-01-15 18:54:02 +00:00
})
2018-01-17 05:43:31 +00:00
this.store.observe('distanceFromBottom', distanceFromBottom => {
console.log('distanceFromBottom', distanceFromBottom)
if (distanceFromBottom >= 0 &&
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
this.fire('scrollToBottom')
}
})
container.addEventListener('scroll', throttle((e) => {
2018-01-16 00:12:07 +00:00
this.store.set({
2018-01-17 05:43:31 +00:00
scrollTop: e.target.scrollTop,
scrollHeight: e.target.scrollHeight
2018-01-17 01:33:47 +00:00
}, {
leading: false,
trailing: true
2018-01-16 00:12:07 +00:00
})
2018-01-17 01:33:47 +00:00
}, THROTTLE_TIME))
2018-01-17 05:43:31 +00:00
this.store.set({
scrollTop: container.scrollTop,
scrollHeight: container.scrollHeight,
offsetHeight: container.offsetHeight
})
2018-01-16 02:29:28 +00:00
},
2018-01-15 18:54:02 +00:00
data: () => ({
component: null
2018-01-15 18:54:02 +00:00
}),
store: () => virtualListStore,
2018-01-15 18:54:02 +00:00
components: {
VirtualListItem
}
}
</script>