pinafore/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html

51 lines
1.4 KiB
HTML
Raw Normal View History

<div class="pseudo-virtual-list-item"
2018-01-31 06:02:07 +01:00
aria-hidden="{{hide}}"
pseudo-virtual-list-key="{{key}}"
2018-01-31 06:17:01 +01:00
style="height: {{shouldHide ? `${height}px` : ''}};"
ref:node>
2018-01-31 06:17:01 +01:00
{{#if !shouldHide}}
<:Component {component}
virtualProps="{{props}}"
virtualIndex="{{index}}"
2018-02-04 19:05:01 +01:00
virtualLength="{{length}}"
/>
{{/if}}
</div>
<script>
2018-01-31 06:17:01 +01:00
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks'
export default {
2018-04-20 06:38:01 +02:00
oncreate () {
2018-01-31 06:17:01 +01:00
this.observe('isIntersecting', isIntersecting => {
if (isIntersecting) {
mark('render')
this.set({hide: false})
stop('render')
} else {
// unrender lazily; it's not a critical UI task
scheduleIdleTask(() => {
mark('unrender')
let { isIntersecting } = this.get() || {} // TODO: wtf svelte?
if (!isIntersecting) {
2018-01-31 06:17:01 +01:00
this.set({hide: true})
}
stop('unrender')
})
}
})
let { intersectionObserver } = this.get()
intersectionObserver.observe(this.refs.node)
2018-01-31 06:17:01 +01:00
},
computed: {
shouldHide: (isIntersecting, isCached, hide) => {
if (isCached) {
return true // if it's cached, always unrender immediately until proven it's intersecting
}
return !isIntersecting && hide
}
}
}
</script>