From 7682015cda7d6e37e167e5870a94e5ee318bac2b Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 15 Jan 2018 16:12:07 -0800
Subject: [PATCH] kinda sorta working

---
 routes/_components/Timeline.html        |  2 +-
 routes/_components/VirtualList.html     | 28 ++++++++++++++++------
 routes/_components/VirtualListItem.html |  7 +-----
 routes/_utils/virtualListStore.js       | 31 +++++++++++++++++++------
 4 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 59d6188..2817f86 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -17,7 +17,7 @@
 
   let i = -1
 
-  const createData = () => fixture.slice(0, 5).map(_ => ({
+  const createData = () => fixture.slice(0, 20).map(_ => ({
     key: `${++i}`,
     props: _
   }))
diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html
index 3480ecb..708734e 100644
--- a/routes/_components/VirtualList.html
+++ b/routes/_components/VirtualList.html
@@ -1,11 +1,12 @@
-<:Window bind:scrollY='scrollY'/>
+<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight' />
 <div class="virtual-list" ref:node style="height: {{$height}}px;">
   <!-- <div class="virtual-list-viewport" ref:viewport></div> -->
-  {{#each $virtualItems as virtualItem, virtualIndex}}
+  {{#each $visibleItems as item, virtualIndex}}
     <VirtualListItem :component
-                     props="{{virtualItem.props}}"
-                     index="{{virtualItem.index}}"
-                     key="{{virtualItem.key}}"
+                     offset="{{item.offset}}"
+                     props="{{item.item.props}}"
+                     index="{{item.item.index}}"
+                     key="{{item.item.key}}"
     />
   {{/each}}
 </div>
@@ -20,12 +21,25 @@
 
   export default {
     oncreate() {
+      console.log('scrollHeight', this.refs.node.scrollHeight)
+      this.store.set({
+        scrollHeight: this.refs.node.scrollHeight,
+      })
+      this.observe('innerHeight', innerHeight => {
+        this.store.set({
+          innerHeight: innerHeight
+        })
+      })
       this.observe('items', (items) => {
-        this.store.set({'items': items})
+        this.store.set({
+          'items': items
+        })
       })
       this.observe('scrollY', (scrollY) => {
         console.log('scrollY', scrollY)
-        this.store.set({scrollTop: scrollY})
+        this.store.set({
+          scrollTop: scrollY
+        })
       })
     },
     data: () => ({
diff --git a/routes/_components/VirtualListItem.html b/routes/_components/VirtualListItem.html
index 3f9056f..b63bb6a 100644
--- a/routes/_components/VirtualListItem.html
+++ b/routes/_components/VirtualListItem.html
@@ -1,6 +1,6 @@
 <div class="virtual-list-item"
      ref:node
-     style="transform: translate3d(0, {{itemOffset}}px, 0);"
+     style="transform: translate3d(0, {{offset}}px, 0);"
      data-virtual-index="{{index}}"
      data-virtual-key="{{key}}"
 >
@@ -22,11 +22,6 @@
       itemHeights[this.get('key')] = this.refs.node.offsetHeight
       this.store.set({itemHeights: itemHeights})
     },
-    computed: {
-      itemOffset: ($itemOffsets, key) => {
-        return $itemOffsets[key] || 0
-      }
-    },
     store: () => virtualListStore
   }
 </script>
\ No newline at end of file
diff --git a/routes/_utils/virtualListStore.js b/routes/_utils/virtualListStore.js
index d3cd887..3e4747d 100644
--- a/routes/_utils/virtualListStore.js
+++ b/routes/_utils/virtualListStore.js
@@ -1,6 +1,8 @@
 import { Store } from 'svelte/store.js'
 import { splice } from 'svelte-extras'
 
+const RENDER_BUFFER = 1000
+
 class VirtualListStore extends Store {
 }
 
@@ -9,7 +11,8 @@ VirtualListStore.prototype.splice = splice
 const virtualListStore = new VirtualListStore({
   items: [],
   itemHeights: {},
-  scrollTop: 0
+  scrollTop: 0,
+  scrollHeight: 0
 })
 
 virtualListStore.compute('virtualItems', ['items'], (items) => {
@@ -20,15 +23,29 @@ virtualListStore.compute('virtualItems', ['items'], (items) => {
   }))
 })
 
-virtualListStore.compute('itemOffsets', ['virtualItems', 'itemHeights'], (virtualItems, itemHeights) => {
-  let itemOffsets = {}
-  let totalHeight = 0
+virtualListStore.compute('visibleItems',
+    ['virtualItems', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
+    (virtualItems, scrollTop, height, itemHeights, innerHeight) => {
+  let visibleItems = []
+  let currentOffset = 0
   virtualItems.forEach(item => {
     let height = itemHeights[item.key] || 0
-    itemOffsets[item.key] = totalHeight
-    totalHeight += height
+    console.log(item.key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
+    if (
+      ((currentOffset < scrollTop)  && (scrollTop - RENDER_BUFFER < currentOffset)) ||
+      ((currentOffset >= scrollTop) && (currentOffset < (scrollTop + innerHeight + RENDER_BUFFER)))
+    ) {
+      console.log('    rendering', item)
+      visibleItems.push({
+        item: item,
+        offset: currentOffset
+      })
+    } else {
+      console.log('not rendering', item)
+    }
+    currentOffset += height
   })
-  return itemOffsets
+  return visibleItems
 })
 
 virtualListStore.compute('height', ['virtualItems', 'itemHeights'], (virtualItems, itemHeights) => {