implement intersection observer-based pseudo virtual list

This commit is contained in:
Nolan Lawson 2018-01-30 09:38:14 -08:00
parent 6f69bf89c5
commit 98b22e0243
3 changed files with 88 additions and 39 deletions

View file

@ -1,4 +1,4 @@
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems> <div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
{{#each wrappedItems as wrappedItem, i @item}} {{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem <PseudoVirtualListLazyItem
component="{{component}}" component="{{component}}"
@ -6,8 +6,9 @@
length="{{items.length}}" length="{{items.length}}"
makeProps="{{makeProps}}" makeProps="{{makeProps}}"
key="{{wrappedItem.item}}" key="{{wrappedItem.item}}"
scrollToThisItem="{{wrappedItem.item === scrollToItem}}" intersectionObserver="{{intersectionObserver}}"
on:scrollToPosition="onScrollToPosition(event)" hide="{{shouldHide(wrappedItem.item, intersectionStates)}}"
height="{{getHeight(wrappedItem.item, intersectionStates)}}"
on:renderedListItem="onRenderedListItem()" on:renderedListItem="onRenderedListItem()"
/> />
{{/each}} {{/each}}
@ -21,23 +22,53 @@
<script> <script>
import PseudoVirtualListLazyItem from './PseudoVirtualListLazyItem.html' import PseudoVirtualListLazyItem from './PseudoVirtualListLazyItem.html'
import { getRectFromEntry } from '../../_utils/getRectFromEntry'
import { mark, stop } from '../../_utils/marks'
export default { export default {
oncreate() { oncreate() {
this.observe('numRenderedListItems', numRenderedListItems => { this.set({
let items = this.get('items') intersectionObserver: new IntersectionObserver(this.onIntersection.bind(this), {
if (items.length && items.length === numRenderedListItems && !this.get('initialized')) { 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}) this.set({initialized: true})
console.log('fire initialized') console.log('initializedVisibleItems')
this.fire('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: { methods: {
onScrollToPosition(rect) { scrollToPosition(rect) {
console.log('onScrollToPosition', 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 // TODO: there should be some cleaner way to grab the container element
let container = document.querySelector('.container') let container = document.getElementsByClassName('container')[0]
if (!container) { if (!container) {
return return
} }
@ -50,13 +81,40 @@
}) })
} }
}, },
onRenderedListItem() { onIntersection(entries) {
let numRenderedListItems = this.get('numRenderedListItems') || 0 mark('onIntersection')
this.set({numRenderedListItems: numRenderedListItems + 1}) 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: { computed: {
wrappedItems: (items) => items.map(item => ({item: item})) 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: { components: {
PseudoVirtualListLazyItem PseudoVirtualListLazyItem

View file

@ -1,32 +1,21 @@
<div class="pseudo-virtual-list-item" pseudo-virtual-list-key="{{index}}" ref:node> <div class="pseudo-virtual-list-item"
<:Component {component} pseudo-virtual-list-key="{{key}}"
virtualProps="{{props}}" style="height: {{hide ? `${height}px` : ''}};"
virtualIndex="{{index}}" ref:node>
virtualLength="{length}}" {{#if !hide}}
on:renderedListItem <:Component {component}
on:scrollToPosition virtualProps="{{props}}"
/> virtualIndex="{{index}}"
virtualLength="{length}}"
/>
{{/if}}
</div> </div>
<script> <script>
import { AsyncLayout } from '../../_utils/AsyncLayout'
export default { export default {
oncreate() { oncreate() {
this.fire('renderedListItem') let intersectionObserver = this.get('intersectionObserver')
if (this.get('scrollToThisItem')) { intersectionObserver.observe(this.refs.node)
if (this.get('firedScrollToPosition')) {
return
}
this.set({firedScrollToPosition: true})
let node = this.refs.node
let asyncLayout = new AsyncLayout(node => node.getAttribute('pseudo-virtual-list-key'))
let key = this.get('index')
asyncLayout.observe(key, this.refs.node, (rect) => {
asyncLayout.disconnect()
this.fire('scrollToPosition', rect)
})
}
} }
} }
</script> </script>

View file

@ -4,7 +4,9 @@
:key :key
:index :index
:scrollToThisItem :scrollToThisItem
on:renderedListItem :intersectionObserver
:hide
:height
on:scrollToPosition on:scrollToPosition
/> />
{{/if}} {{/if}}