pinafore/routes/_components/virtualList/VirtualList.html

95 lines
2.9 KiB
HTML
Raw Normal View History

2018-01-17 09:13:36 +01:00
<!-- TODO: setting height is hacky, just make this element the scroller -->
2018-01-21 23:31:59 +01:00
<div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
2018-02-09 03:54:48 +01: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 01:07:11 +01:00
{{#if $showFooter}}
<VirtualListFooter component="{{footerComponent}}"/>
{{/if}}
2018-01-15 19:54:02 +01:00
</div>
<style>
.virtual-list {
position: relative;
2018-01-21 23:31:59 +01:00
transition: opacity 0.25s linear;
2018-01-15 19:54:02 +01:00
}
</style>
<script>
import VirtualListLazyItem from './VirtualListLazyItem'
2018-01-22 01:07:11 +01:00
import VirtualListFooter from './VirtualListFooter.html'
2018-01-25 17:23:14 +01:00
import { virtualListStore } from './virtualListStore'
import throttle from 'lodash/throttle'
2018-01-25 17:23:14 +01:00
import { mark, stop } from '../../_utils/marks'
2018-01-15 19:54:02 +01:00
const DISTANCE_FROM_BOTTOM_TO_FIRE = 400
const SCROLL_TO_BOTTOM_DELAY = 1000
2018-01-16 02:25:32 +01:00
2018-01-15 19:54:02 +01:00
export default {
2018-01-16 02:25:32 +01:00
oncreate () {
2018-02-11 20:57:18 +01:00
this.observeSafely('showFooter', showFooter => {
2018-01-27 17:13:28 +01:00
this.store.setForRealm({showFooter: showFooter})
2018-01-22 01:07:11 +01:00
})
2018-02-11 20:57:18 +01:00
this.observeSafely('items', (items) => {
2018-01-17 09:59:15 +01:00
mark('set items')
2018-01-27 17:13:28 +01:00
this.store.setForRealm({items: items})
2018-01-17 09:59:15 +01:00
stop('set items')
this.fireScrollToBottom = throttle(() => {
this.fire('scrollToBottom')
}, SCROLL_TO_BOTTOM_DELAY)
2018-01-15 19:54:02 +01:00
})
2018-01-17 08:16:15 +01:00
2018-02-11 20:57:18 +01:00
this.observeSafely('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
this.fire('initializedVisibleItems')
}
})
2018-01-17 09:06:24 +01:00
let observedOnce = false
2018-02-11 20:57:18 +01:00
this.observeSafely('distanceFromBottom', (distanceFromBottom) => {
2018-01-17 09:06:24 +01: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 06:43:31 +01:00
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
this.fireScrollToBottom()
2018-01-17 06:43:31 +01:00
}
})
2018-01-16 03:29:28 +01:00
},
2018-01-15 19:54:02 +01:00
data: () => ({
component: null
2018-01-15 19:54:02 +01:00
}),
store: () => virtualListStore,
2018-01-15 19:54:02 +01:00
components: {
VirtualListLazyItem,
2018-01-22 01:07:11 +01:00
VirtualListFooter
2018-01-17 08:16:15 +01:00
},
computed: {
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
return $scrollHeight - $scrollTop - $offsetHeight
},
// TODO: bug in svelte store, shouldn't need to do this
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
2018-02-11 20:57:18 +01: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 19:54:02 +01:00
}
}
</script>