123 lines
3.9 KiB
HTML
123 lines
3.9 KiB
HTML
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
|
|
{{#each wrappedItems as wrappedItem, i @item}}
|
|
<PseudoVirtualListLazyItem
|
|
component="{{component}}"
|
|
index="{{i}}"
|
|
length="{{items.length}}"
|
|
makeProps="{{makeProps}}"
|
|
key="{{wrappedItem.item}}"
|
|
intersectionObserver="{{intersectionObserver}}"
|
|
hide="{{shouldHide(wrappedItem.item, intersectionStates)}}"
|
|
height="{{getHeight(wrappedItem.item, intersectionStates)}}"
|
|
on:renderedListItem="onRenderedListItem()"
|
|
/>
|
|
{{/each}}
|
|
</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'
|
|
|
|
export default {
|
|
oncreate() {
|
|
this.set({
|
|
intersectionObserver: new IntersectionObserver(this.onIntersection.bind(this), {
|
|
root: document.getElementsByClassName('container')[0], // TODO: fix this
|
|
rootMargin: '300% 0px'
|
|
}),
|
|
intersectionStates: {}
|
|
})
|
|
this.observe('allItemsHaveHeight', allItemsHaveHeight => {
|
|
console.log('allItemsHaveHeight', allItemsHaveHeight)
|
|
if (allItemsHaveHeight && !this.get('initialized')) {
|
|
this.set({initialized: true})
|
|
console.log('initializedVisibleItems')
|
|
this.fire('initializedVisibleItems')
|
|
}
|
|
})
|
|
},
|
|
ondestroy() {
|
|
let intersectionObserver = this.get('intersectionObserver')
|
|
if (intersectionObserver) {
|
|
intersectionObserver.disconnect()
|
|
}
|
|
},
|
|
data: () => ({
|
|
intersectionStates: {}
|
|
}),
|
|
helpers: {
|
|
shouldHide(key, intersectionStates) {
|
|
return !!(intersectionStates[key] && !intersectionStates[key].isIntersecting)
|
|
},
|
|
getHeight(key, intersectionStates) {
|
|
return intersectionStates[key] && intersectionStates[key].rect.height
|
|
}
|
|
},
|
|
methods: {
|
|
scrollToPosition(rect) {
|
|
if (this.get('scrolledToPosition')) {
|
|
return
|
|
}
|
|
this.set({scrolledToPosition: true})
|
|
console.log('scrollToPosition', rect)
|
|
// TODO: there should be some cleaner way to grab the container element
|
|
let container = document.getElementsByClassName('container')[0]
|
|
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')
|
|
let intersectionStates = this.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,
|
|
rect: rect
|
|
}
|
|
if (scrollToItem === key) {
|
|
this.scrollToPosition(rect)
|
|
}
|
|
}
|
|
intersectionStates = Object.assign(intersectionStates, newIntersectionStates)
|
|
this.set({intersectionStates: intersectionStates})
|
|
stop('onIntersection')
|
|
}
|
|
},
|
|
computed: {
|
|
wrappedItems: (items) => items.map(item => ({item: item})),
|
|
allItemsHaveHeight: (items, intersectionStates) => {
|
|
if (!items.length) {
|
|
return false
|
|
}
|
|
for (let item of items) {
|
|
if (!intersectionStates[item]) {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
},
|
|
components: {
|
|
PseudoVirtualListLazyItem
|
|
}
|
|
}
|
|
</script> |