pinafore/routes/_components/pseudoVirtualList/PseudoVirtualList.html

136 lines
4.7 KiB
HTML
Raw Normal View History

<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
2018-02-09 03:54:48 +01:00
{{#if wrappedItems}}
{{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem
component="{{component}}"
index="{{i}}"
length="{{wrappedItems.length}}"
makeProps="{{makeProps}}"
key="{{wrappedItem.item}}"
intersectionObserver="{{intersectionObserver}}"
isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
/>
{{/each}}
{{/if}}
</div>
<style>
.pseudo-virtual-list {
position: relative;
transition: opacity 0.25s linear;
}
</style>
<script>
import PseudoVirtualListLazyItem from './PseudoVirtualListLazyItem.html'
import { getRectFromEntry } from '../../_utils/getRectFromEntry'
import { mark, stop } from '../../_utils/marks'
2018-01-31 03:26:13 +01:00
import { pseudoVirtualListStore } from './pseudoVirtualListStore'
export default {
oncreate() {
2018-01-31 03:26:13 +01:00
mark('PseudoVirtualList oncreate()')
2018-01-31 06:55:23 +01:00
this.store.setCurrentRealm(this.get('realm'))
2018-01-31 03:26:13 +01:00
// When re-rendering, assume all items are non-intersecting until told otherwise.
// We already have the heights cached.
let intersectionStates = this.store.get('intersectionStates')
let keys = Object.keys(intersectionStates)
for (let key of keys) {
2018-01-31 06:17:01 +01:00
intersectionStates[key].isCached = true
2018-01-31 03:26:13 +01:00
}
this.store.setForRealm({intersectionStates: intersectionStates})
this.set({intersectionObserver: new IntersectionObserver(this.onIntersection.bind(this), {
2018-02-13 07:32:56 +01:00
root: document.querySelector(this.get('containerQuery')),
2018-01-31 03:26:13 +01:00
rootMargin: '300% 0px'
})})
this.observe('allItemsHaveHeight', allItemsHaveHeight => {
console.log('allItemsHaveHeight', allItemsHaveHeight)
if (allItemsHaveHeight && !this.get('initialized')) {
this.set({initialized: true})
console.log('initializedVisibleItems')
this.fire('initializedVisibleItems')
}
})
2018-01-31 03:26:13 +01:00
stop('PseudoVirtualList oncreate()')
},
ondestroy() {
let intersectionObserver = this.get('intersectionObserver')
if (intersectionObserver) {
intersectionObserver.disconnect()
}
},
helpers: {
2018-01-31 06:17:01 +01:00
isIntersecting(key, $intersectionStates) {
return !!($intersectionStates[key] && $intersectionStates[key].isIntersecting)
},
isCached(key, $intersectionStates) {
return !!($intersectionStates[key] && $intersectionStates[key].isCached)
},
2018-01-31 03:26:13 +01:00
getHeight(key, $intersectionStates) {
2018-01-31 06:34:35 +01:00
return $intersectionStates[key] && $intersectionStates[key].height
}
},
methods: {
scrollToPosition(rect) {
if (this.get('scrolledToPosition')) {
return
}
this.set({scrolledToPosition: true})
2018-01-31 06:34:35 +01:00
console.log('scrollToPosition', rect.top)
2018-02-13 07:32:56 +01:00
let container = document.querySelector(this.get('containerQuery'))
if (!container) {
return
}
let containerRect = container.getBoundingClientRect()
let scrollTop = rect.top - containerRect.top
if (scrollTop !== 0) {
requestAnimationFrame(() => {
console.log('setting scrollTop to ', scrollTop)
container.scrollTop = scrollTop
})
}
},
onIntersection(entries) {
mark('onIntersection')
let newIntersectionStates = {}
let scrollToItem = this.get('scrollToItem')
2018-01-31 03:26:13 +01:00
let intersectionStates = this.store.get('intersectionStates')
for (let entry of entries) {
let key = entry.target.getAttribute('pseudo-virtual-list-key')
let rect = getRectFromEntry(entry)
newIntersectionStates[key] = {
isIntersecting: entry.isIntersecting,
2018-01-31 06:34:35 +01:00
height: rect.height
}
if (scrollToItem === key) {
this.scrollToPosition(rect)
}
}
intersectionStates = Object.assign(intersectionStates, newIntersectionStates)
2018-01-31 03:26:13 +01:00
this.store.setForRealm({intersectionStates: intersectionStates})
stop('onIntersection')
}
},
computed: {
2018-02-09 03:54:48 +01:00
wrappedItems: (items) => items && items.map(item => ({item: item})),
2018-01-31 03:26:13 +01:00
allItemsHaveHeight: (items, $intersectionStates) => {
2018-02-09 03:54:48 +01:00
if (!items) {
return false
}
for (let item of items) {
2018-01-31 03:26:13 +01:00
if (!$intersectionStates[item]) {
return false
}
}
return true
}
},
components: {
PseudoVirtualListLazyItem
2018-01-31 03:26:13 +01:00
},
store: () => pseudoVirtualListStore
}
</script>