pinafore/routes/_components/pseudoVirtualList/PseudoVirtualList.html

129 lines
4.2 KiB
HTML
Raw Normal View History

<div class="pseudo-virtual-list" on:initialized ref:node>
{{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem
:component
index={{i}}
length={{wrappedItems.length}}
:makeProps
key={{wrappedItem.item}}
:intersectionObserver
isIntersecting={{isIntersecting(wrappedItem.item, $intersectionStates)}}
isCached={{isCached(wrappedItem.item, $intersectionStates)}}
height={{getHeight(wrappedItem.item, $intersectionStates)}}
/>
{{/each}}
</div>
<style>
.pseudo-virtual-list {
position: relative;
}
</style>
<script>
import PseudoVirtualListLazyItem from './PseudoVirtualListLazyItem.html'
import { getRectFromEntry } from '../../_utils/getRectFromEntry'
import { mark, stop } from '../../_utils/marks'
2018-01-31 02:26:13 +00:00
import { pseudoVirtualListStore } from './pseudoVirtualListStore'
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
2018-01-31 02:26:13 +00:00
mark('PseudoVirtualList oncreate()')
let { realm } = this.get()
this.store.setCurrentRealm(realm)
2018-01-31 02:26:13 +00:00
// When re-rendering, assume all items are non-intersecting until told otherwise.
// We already have the heights cached.
let { intersectionStates } = this.store.get()
2018-01-31 02:26:13 +00:00
let keys = Object.keys(intersectionStates)
for (let key of keys) {
2018-01-31 05:17:01 +00:00
intersectionStates[key].isCached = true
2018-01-31 02:26:13 +00:00
}
this.store.setForRealm({intersectionStates: intersectionStates})
let { containerQuery } = this.get()
2018-03-05 01:16:33 +00:00
let intersectionObserver = new IntersectionObserver(this.onIntersection.bind(this), {
root: document.querySelector(containerQuery),
2018-01-31 02:26:13 +00:00
rootMargin: '300% 0px'
2018-03-05 01:16:33 +00:00
})
this.set({intersectionObserver})
this.observe('allItemsHaveHeight', allItemsHaveHeight => {
console.log('allItemsHaveHeight', allItemsHaveHeight)
let { initialized } = this.get()
if (allItemsHaveHeight && !initialized) {
this.set({initialized: true})
console.log('initialized PseudoVirtualList')
this.fire('initialized')
}
})
2018-01-31 02:26:13 +00:00
stop('PseudoVirtualList oncreate()')
},
2018-04-20 04:38:01 +00:00
ondestroy () {
let { intersectionObserver } = this.get()
if (intersectionObserver) {
intersectionObserver.disconnect()
}
2018-02-13 06:47:25 +00:00
this.store.setCurrentRealm(null)
},
helpers: {
2018-04-20 04:38:01 +00:00
isIntersecting (key, $intersectionStates) {
2018-01-31 05:17:01 +00:00
return !!($intersectionStates[key] && $intersectionStates[key].isIntersecting)
},
2018-04-20 04:38:01 +00:00
isCached (key, $intersectionStates) {
2018-01-31 05:17:01 +00:00
return !!($intersectionStates[key] && $intersectionStates[key].isCached)
},
2018-04-20 04:38:01 +00:00
getHeight (key, $intersectionStates) {
2018-01-31 05:34:35 +00:00
return $intersectionStates[key] && $intersectionStates[key].height
}
},
methods: {
2018-04-20 04:38:01 +00:00
scrollToPosition (element) {
let { scrolledToPosition } = this.get()
if (scrolledToPosition) {
return
}
this.set({scrolledToPosition: true})
requestAnimationFrame(() => {
console.log('scrolling element into view')
element.scrollIntoView(true)
})
},
2018-04-20 04:38:01 +00:00
onIntersection (entries) {
mark('onIntersection')
let newIntersectionStates = {}
let { scrollToItem } = this.get()
let { intersectionStates } = this.store.get()
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 05:34:35 +00:00
height: rect.height
}
if (scrollToItem === key) {
this.scrollToPosition(entry.target)
}
}
intersectionStates = Object.assign(intersectionStates, newIntersectionStates)
2018-01-31 02:26:13 +00:00
this.store.setForRealm({intersectionStates: intersectionStates})
stop('onIntersection')
}
},
computed: {
wrappedItems: (items) => items ? items.map(item => ({item})) : [],
2018-01-31 02:26:13 +00:00
allItemsHaveHeight: (items, $intersectionStates) => {
2018-02-09 02:54:48 +00:00
if (!items) {
return false
}
for (let item of items) {
2018-01-31 02:26:13 +00:00
if (!$intersectionStates[item]) {
return false
}
}
return true
}
},
components: {
PseudoVirtualListLazyItem
2018-01-31 02:26:13 +00:00
},
store: () => pseudoVirtualListStore
}
</script>