From 2f8400fe4eab03c1249fcbd489871581ed6b1171 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 28 Jan 2018 22:50:14 -0800
Subject: [PATCH] try to get this feature working

---
 routes/_components/virtualList/VirtualList.html  |  7 ++++++-
 .../virtualList/VirtualListContainer.html        | 16 +++++++++++++---
 .../_components/virtualList/virtualListStore.js  | 13 ++++++-------
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index d26ed072..3b8c2f2b 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -1,5 +1,5 @@
 <!-- TODO: setting height is hacky, just make this element the scroller -->
-<div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
+<div ref:node class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
   {{#each $visibleItems as visibleItem @key}}
     <VirtualListLazyItem :component
                          offset="{{visibleItem.offset}}"
@@ -33,6 +33,7 @@
       this.fireScrollToBottom = throttle(() => {
         this.fire('scrollToBottom')
       }, SCROLL_TO_BOTTOM_DELAY)
+      let node = this.refs.node
       this.observe('showFooter', showFooter => {
         this.store.setForRealm({showFooter: showFooter})
       })
@@ -43,6 +44,10 @@
       })
       this.observe('scrollToItem', (scrollToItem) => {
         mark('scrollToItem')
+        if (scrollToItem && node && !this.store.get('virtualListTop')) {
+          // have to calculate difference between container and virtual list tops in order to scroll
+          this.store.set({virtualListTop: node.getBoundingClientRect().top})
+        }
         this.store.setForRealm({scrollToItem: scrollToItem})
         stop('scrollToItem')
       })
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index e6f770c1..a3ff8e7e 100644
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@@ -19,6 +19,14 @@
       let node = this.refs.node
       let realm = this.get('realm')
       this.store.set({currentRealm: realm})
+
+      this.observe('scrollToItem', scrollToItem => {
+        if (scrollToItem && node && !this.store.get('containerTop')) {
+          // have to calculate difference between container and virtual list tops in order to scroll
+          this.store.set({containerTop: node.getBoundingClientRect().top})
+        }
+      })
+
       let scrollTop = this.store.get('scrollTop')
       if (scrollTop > 0) {
         this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
@@ -27,7 +35,7 @@
             this.set({'initializedScrollTop': true})
             requestAnimationFrame(() => {
               mark('set scrollTop')
-              console.log('forcing scroll top to ', scrollTop)
+              console.log('forcing scrollTop to ', scrollTop)
               node.scrollTop = scrollTop
               stop('set scrollTop')
             })
@@ -44,7 +52,7 @@
             this.set({'initializedScrollTop': true})
             requestAnimationFrame(() => {
               mark('set scrollToItemOffset')
-              console.log('forcing scroll top to ', scrollToItemOffset)
+              console.log('forcing scrollItemOffset to ', scrollToItemOffset)
               node.scrollTop = scrollToItemOffset
               stop('set scrollToItemOffset')
             })
@@ -89,6 +97,7 @@
     },
     methods: {
       onScroll(event) {
+        console.log('onScroll', event.target.scrollTop)
         this.store.setForRealm({
           scrollTop: event.target.scrollTop,
           scrollHeight: event.target.scrollHeight
@@ -104,7 +113,8 @@
     computed: {
       // TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack
       allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
-      scrollToItemOffset: ($scrollToItemOffset) => $scrollToItemOffset
+      scrollToItemOffset: ($scrollToItemOffset) => $scrollToItemOffset,
+      scrollToItem: ($scrollToItem) => $scrollToItem
     }
   };
 </script>
\ No newline at end of file
diff --git a/routes/_components/virtualList/virtualListStore.js b/routes/_components/virtualList/virtualListStore.js
index 4d84c4f3..3858b620 100644
--- a/routes/_components/virtualList/virtualListStore.js
+++ b/routes/_components/virtualList/virtualListStore.js
@@ -92,12 +92,11 @@ virtualListStore.compute('visibleItems',
     let currentOffset = totalOffset
     totalOffset += height
     if (!itemsLeftToCalculateHeight) {
-      let isBelowViewport = (currentOffset < scrollTop)
-      if (!isBelowViewport) {
+      if (currentOffset < scrollTop) { // below viewport
         if (scrollTop - renderBuffer > currentOffset) {
           continue // below the area we want to render
         }
-      } else {
+      } else { // above or inside viewport
         if (currentOffset > (scrollTop + height + renderBuffer)) {
           break // above the area we want to render
         }
@@ -171,9 +170,9 @@ virtualListStore.compute('itemsLeftToCalculateHeight',
 })
 
 virtualListStore.compute('scrollToItemOffset',
-    ['mustCalculateAllItemHeights', 'itemsLeftToCalculateHeight', 'scrollToItem', 'items', 'itemHeights'],
-    (mustCalculateAllItemHeights, itemsLeftToCalculateHeight, scrollToItem, items, itemHeights) => {
-  if (!mustCalculateAllItemHeights || itemsLeftToCalculateHeight) {
+    ['mustCalculateAllItemHeights', 'itemsLeftToCalculateHeight', 'scrollToItem', 'items', 'itemHeights', 'containerTop', 'virtualListTop'],
+    (mustCalculateAllItemHeights, itemsLeftToCalculateHeight, scrollToItem, items, itemHeights, containerTop, virtualListTop) => {
+  if (!mustCalculateAllItemHeights || itemsLeftToCalculateHeight || !containerTop || !virtualListTop) {
     return null
   }
   let offset = 0
@@ -183,7 +182,7 @@ virtualListStore.compute('scrollToItemOffset',
     }
     offset += itemHeights[item]
   }
-  return offset
+  return offset + (virtualListTop - containerTop) // have to offset difference between container and virtual list
 })