pinafore/routes/_components/pseudoVirtualList/PseudoVirtualList.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>