2018-01-17 08:13:36 +00:00
|
|
|
<!-- TODO: setting height is hacky, just make this element the scroller -->
|
2018-01-21 22:31:59 +00:00
|
|
|
<div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
|
2018-02-09 02:54:48 +00:00
|
|
|
{{#if $visibleItems}}
|
|
|
|
{{#each $visibleItems as visibleItem @key}}
|
|
|
|
<VirtualListLazyItem :component
|
|
|
|
offset="{{visibleItem.offset}}"
|
|
|
|
makeProps="{{makeProps}}"
|
|
|
|
key="{{visibleItem.key}}"
|
|
|
|
index="{{visibleItem.index}}"
|
|
|
|
/>
|
|
|
|
{{/each}}
|
|
|
|
{{/if}}
|
2018-01-22 00:07:11 +00:00
|
|
|
{{#if $showFooter}}
|
|
|
|
<VirtualListFooter component="{{footerComponent}}"/>
|
|
|
|
{{/if}}
|
2018-01-15 18:54:02 +00:00
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.virtual-list {
|
|
|
|
position: relative;
|
2018-01-21 22:31:59 +00:00
|
|
|
transition: opacity 0.25s linear;
|
2018-01-15 18:54:02 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
2018-01-24 02:15:14 +00:00
|
|
|
import VirtualListLazyItem from './VirtualListLazyItem'
|
2018-01-22 00:07:11 +00:00
|
|
|
import VirtualListFooter from './VirtualListFooter.html'
|
2018-01-25 16:23:14 +00:00
|
|
|
import { virtualListStore } from './virtualListStore'
|
2018-01-19 05:52:58 +00:00
|
|
|
import throttle from 'lodash/throttle'
|
2018-01-25 16:23:14 +00:00
|
|
|
import { mark, stop } from '../../_utils/marks'
|
2018-01-15 18:54:02 +00:00
|
|
|
|
2018-01-19 05:52:58 +00:00
|
|
|
const DISTANCE_FROM_BOTTOM_TO_FIRE = 400
|
|
|
|
const SCROLL_TO_BOTTOM_DELAY = 1000
|
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-02-11 19:57:18 +00:00
|
|
|
this.observeSafely('showFooter', showFooter => {
|
2018-01-27 16:13:28 +00:00
|
|
|
this.store.setForRealm({showFooter: showFooter})
|
2018-01-22 00:07:11 +00:00
|
|
|
})
|
2018-02-11 19:57:18 +00:00
|
|
|
this.observeSafely('items', (items) => {
|
2018-01-17 08:59:15 +00:00
|
|
|
mark('set items')
|
2018-01-27 16:13:28 +00:00
|
|
|
this.store.setForRealm({items: items})
|
2018-01-17 08:59:15 +00:00
|
|
|
stop('set items')
|
2018-01-19 05:52:58 +00:00
|
|
|
this.fireScrollToBottom = throttle(() => {
|
|
|
|
this.fire('scrollToBottom')
|
|
|
|
}, SCROLL_TO_BOTTOM_DELAY)
|
2018-01-15 18:54:02 +00:00
|
|
|
})
|
2018-01-17 07:16:15 +00:00
|
|
|
|
2018-02-11 19:57:18 +00:00
|
|
|
this.observeSafely('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
2018-01-25 03:26:08 +00:00
|
|
|
if (allVisibleItemsHaveHeight) {
|
|
|
|
this.fire('initializedVisibleItems')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2018-01-17 08:06:24 +00:00
|
|
|
let observedOnce = false
|
|
|
|
|
2018-02-11 19:57:18 +00:00
|
|
|
this.observeSafely('distanceFromBottom', (distanceFromBottom) => {
|
2018-01-17 08:06:24 +00:00
|
|
|
if (!observedOnce) {
|
|
|
|
observedOnce = true // TODO: the first time is always 0... need better way to handle this
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (distanceFromBottom >= 0 &&
|
2018-01-17 05:43:31 +00:00
|
|
|
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
|
2018-01-19 05:52:58 +00:00
|
|
|
this.fireScrollToBottom()
|
2018-01-17 05:43:31 +00:00
|
|
|
}
|
|
|
|
})
|
2018-01-16 02:29:28 +00:00
|
|
|
},
|
2018-01-15 18:54:02 +00:00
|
|
|
data: () => ({
|
2018-01-15 20:23:28 +00:00
|
|
|
component: null
|
2018-01-15 18:54:02 +00:00
|
|
|
}),
|
2018-01-15 20:23:28 +00:00
|
|
|
store: () => virtualListStore,
|
2018-01-15 18:54:02 +00:00
|
|
|
components: {
|
2018-01-24 02:15:14 +00:00
|
|
|
VirtualListLazyItem,
|
2018-01-22 00:07:11 +00:00
|
|
|
VirtualListFooter
|
2018-01-17 07:16:15 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
|
|
|
|
return $scrollHeight - $scrollTop - $offsetHeight
|
2018-01-25 03:26:08 +00:00
|
|
|
},
|
|
|
|
// TODO: bug in svelte store, shouldn't need to do this
|
|
|
|
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
|
2018-02-11 19:57:18 +00:00
|
|
|
},
|
|
|
|
ondestroy() {
|
|
|
|
this.__destroyed = true
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
observeSafely(val, callback) {
|
|
|
|
// TODO: feels like this shouldn't be necessary... bug in Svelte?
|
|
|
|
this.observe(val, val => {
|
|
|
|
if (!this.__destroyed) {
|
|
|
|
callback(val)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2018-01-15 18:54:02 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|