2018-05-02 00:05:36 +00:00
|
|
|
<VirtualListContainer {realm} {containerQuery} on:initialized on:noNeedToScroll >
|
2018-03-30 06:16:53 +00:00
|
|
|
<div class="virtual-list"
|
2018-05-02 00:05:36 +00:00
|
|
|
style="height: {$height}px;"
|
2018-03-23 00:33:42 +00:00
|
|
|
ref:node >
|
2018-05-02 00:05:36 +00:00
|
|
|
<VirtualListHeader component={headerComponent} virtualProps={headerProps} shown={$showHeader}/>
|
|
|
|
{#if $visibleItems}
|
|
|
|
{#each $visibleItems as visibleItem (visibleItem.key)}
|
|
|
|
<VirtualListLazyItem {component}
|
|
|
|
offset={visibleItem.offset}
|
|
|
|
{makeProps}
|
|
|
|
key={visibleItem.key}
|
|
|
|
index={visibleItem.index}
|
2018-02-13 06:06:05 +00:00
|
|
|
/>
|
2018-05-02 00:05:36 +00:00
|
|
|
{/each}
|
|
|
|
{/if}
|
|
|
|
{#if $showFooter}
|
|
|
|
<VirtualListFooter component={footerComponent} />
|
|
|
|
{/if}
|
2018-02-13 06:06:05 +00:00
|
|
|
</div>
|
|
|
|
</VirtualListContainer>
|
2018-01-15 18:54:02 +00:00
|
|
|
<style>
|
|
|
|
.virtual-list {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
2018-02-13 06:06:05 +00:00
|
|
|
import VirtualListContainer from './VirtualListContainer.html'
|
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-02-12 03:15:21 +00:00
|
|
|
import VirtualListHeader from './VirtualListHeader.html'
|
2018-01-25 16:23:14 +00:00
|
|
|
import { virtualListStore } from './virtualListStore'
|
2018-04-06 00:57:36 +00:00
|
|
|
import throttle from 'lodash-es/throttle'
|
2018-01-25 16:23:14 +00:00
|
|
|
import { mark, stop } from '../../_utils/marks'
|
2018-04-06 00:57:36 +00:00
|
|
|
import isEqual from 'lodash-es/isEqual'
|
2018-04-30 15:29:04 +00:00
|
|
|
import { observe } from 'svelte-extras'
|
2018-01-15 18:54:02 +00:00
|
|
|
|
2018-03-21 03:28:53 +00:00
|
|
|
const DISTANCE_FROM_BOTTOM_TO_FIRE = 800
|
2018-02-12 03:15:21 +00:00
|
|
|
const SCROLL_EVENT_THROTTLE = 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-12 04:12:15 +00:00
|
|
|
this.fireScrollToBottom = throttle(() => {
|
|
|
|
this.fire('scrollToBottom')
|
|
|
|
}, SCROLL_EVENT_THROTTLE)
|
|
|
|
this.fireScrollToTop = throttle(() => {
|
|
|
|
this.fire('scrollToTop')
|
|
|
|
}, SCROLL_EVENT_THROTTLE)
|
2018-02-11 22:17:17 +00:00
|
|
|
this.observe('showFooter', showFooter => {
|
2018-02-12 04:12:15 +00:00
|
|
|
mark('set showFooter')
|
2018-01-27 16:13:28 +00:00
|
|
|
this.store.setForRealm({showFooter: showFooter})
|
2018-02-12 04:12:15 +00:00
|
|
|
mark('set showFooter')
|
2018-01-22 00:07:11 +00:00
|
|
|
})
|
2018-02-12 03:15:21 +00:00
|
|
|
this.observe('showHeader', showHeader => {
|
2018-02-12 04:12:15 +00:00
|
|
|
mark('set showHeader')
|
2018-02-12 03:15:21 +00:00
|
|
|
this.store.setForRealm({showHeader: showHeader})
|
2018-02-12 04:12:15 +00:00
|
|
|
stop('set showHeader')
|
2018-02-12 03:15:21 +00:00
|
|
|
})
|
2018-02-25 18:50:04 +00:00
|
|
|
this.observe('items', (newItems, oldItems) => {
|
|
|
|
if (!newItems || isEqual(newItems, oldItems)) {
|
|
|
|
return
|
|
|
|
}
|
2018-01-17 08:59:15 +00:00
|
|
|
mark('set items')
|
2018-02-25 18:50:04 +00:00
|
|
|
this.store.setForRealm({items: newItems})
|
2018-01-17 08:59:15 +00:00
|
|
|
stop('set items')
|
2018-01-15 18:54:02 +00:00
|
|
|
})
|
2018-02-11 22:17:17 +00:00
|
|
|
this.observe('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 22:17:17 +00:00
|
|
|
this.observe('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-02-12 03:15:21 +00:00
|
|
|
|
2018-02-13 17:15:10 +00:00
|
|
|
this.observe('scrollTop', (scrollTop) => {
|
|
|
|
this.fire('scrollTopChanged', scrollTop)
|
|
|
|
if (scrollTop === 0) {
|
2018-02-12 03:15:21 +00:00
|
|
|
this.fireScrollToTop()
|
|
|
|
}
|
2018-03-23 00:33:42 +00:00
|
|
|
this.calculateListOffset()
|
2018-02-12 03:15:21 +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-02-13 06:06:05 +00:00
|
|
|
VirtualListContainer,
|
2018-01-24 02:15:14 +00:00
|
|
|
VirtualListLazyItem,
|
2018-02-12 03:15:21 +00:00
|
|
|
VirtualListFooter,
|
|
|
|
VirtualListHeader
|
2018-01-17 07:16:15 +00:00
|
|
|
},
|
|
|
|
computed: {
|
2018-05-02 00:05:36 +00:00
|
|
|
distanceFromBottom: ({ $scrollHeight, $scrollTop, $offsetHeight }) => {
|
2018-01-17 07:16:15 +00:00
|
|
|
return $scrollHeight - $scrollTop - $offsetHeight
|
2018-01-25 03:26:08 +00:00
|
|
|
},
|
2018-05-02 00:05:36 +00:00
|
|
|
scrollTop: ({ $scrollTop }) => $scrollTop,
|
2018-01-25 03:26:08 +00:00
|
|
|
// TODO: bug in svelte store, shouldn't need to do this
|
2018-05-02 00:05:36 +00:00
|
|
|
allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
|
2018-03-23 00:33:42 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2018-04-30 15:29:04 +00:00
|
|
|
observe,
|
2018-04-20 04:38:01 +00:00
|
|
|
calculateListOffset () {
|
2018-03-23 00:33:42 +00:00
|
|
|
// TODO: better way to get the offset top?
|
|
|
|
let node = this.refs.node
|
|
|
|
if (!node) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
mark('calculateListOffset')
|
|
|
|
let listOffset = node.offsetParent.offsetTop
|
|
|
|
this.store.setForRealm({listOffset})
|
|
|
|
stop('calculateListOffset')
|
|
|
|
}
|
2018-01-15 18:54:02 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|