pinafore/routes/_components/virtualList/VirtualList.html

118 lines
3.6 KiB
HTML
Raw Normal View History

<VirtualListContainer {realm} on:initialized on:noNeedToScroll >
<div class="virtual-list"
style="height: {$height}px;"
ref:node >
<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}
/>
{/each}
{/if}
{#if $showFooter}
<VirtualListFooter component={footerComponent} />
{/if}
</div>
</VirtualListContainer>
2018-01-15 18:54:02 +00:00
<style>
.virtual-list {
position: relative;
}
</style>
<script>
import VirtualListContainer from './VirtualListContainer.html'
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'
import throttle from 'lodash-es/throttle'
2018-01-25 16:23:14 +00:00
import { mark, stop } from '../../_utils/marks'
import isEqual from 'lodash-es/isEqual'
import { observe } from 'svelte-extras'
2018-01-15 18:54:02 +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 () {
this.fireScrollToBottom = throttle(() => {
this.fire('scrollToBottom')
}, SCROLL_EVENT_THROTTLE)
this.fireScrollToTop = throttle(() => {
this.fire('scrollToTop')
}, SCROLL_EVENT_THROTTLE)
this.observe('showFooter', showFooter => {
mark('set showFooter')
this.store.setForRealm({ showFooter: showFooter })
mark('set showFooter')
2018-01-22 00:07:11 +00:00
})
2018-02-12 03:15:21 +00:00
this.observe('showHeader', showHeader => {
mark('set showHeader')
this.store.setForRealm({ showHeader: showHeader })
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')
this.store.setForRealm({ items: newItems })
2018-01-17 08:59:15 +00:00
stop('set items')
2018-01-15 18:54:02 +00:00
})
this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
this.fire('initializedVisibleItems')
}
})
this.observe('distanceFromBottom', (distanceFromBottom) => {
2018-01-17 08:06:24 +00:00
if (distanceFromBottom >= 0 &&
2018-01-17 05:43:31 +00:00
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
this.fireScrollToBottom()
2018-01-17 05:43:31 +00:00
}
}, { init: false })
2018-02-12 03:15:21 +00:00
this.store.observe('scrollTop', (scrollTop) => {
2018-02-13 17:15:10 +00:00
this.fire('scrollTopChanged', scrollTop)
if (scrollTop === 0) {
2018-02-12 03:15:21 +00:00
this.fireScrollToTop()
}
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: () => ({
component: null
2018-01-15 18:54:02 +00:00
}),
store: () => virtualListStore,
2018-01-15 18:54:02 +00:00
components: {
VirtualListContainer,
VirtualListLazyItem,
2018-02-12 03:15:21 +00:00
VirtualListFooter,
VirtualListHeader
2018-01-17 07:16:15 +00:00
},
computed: {
distanceFromBottom: ({ $scrollHeight, $scrollTop, $offsetHeight }) => {
2018-01-17 07:16:15 +00:00
return $scrollHeight - $scrollTop - $offsetHeight
}
},
methods: {
observe,
2018-04-20 04:38:01 +00:00
calculateListOffset () {
// 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>