more refactoring

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -43,7 +43,7 @@
       this.store.setForRealm({intersectionStates: intersectionStates})
 
       this.set({intersectionObserver: new IntersectionObserver(this.onIntersection.bind(this), {
-        root: document.querySelector('.container'),
+        root: document.querySelector(this.get('containerQuery')),
         rootMargin: '300% 0px'
       })})
       this.observe('allItemsHaveHeight', allItemsHaveHeight => {
@@ -80,7 +80,7 @@
         }
         this.set({scrolledToPosition: true})
         console.log('scrollToPosition', rect.top)
-        let container = document.querySelector('.container')
+        let container = document.querySelector(this.get('containerQuery'))
         if (!container) {
           return
         }

routes/_components/timeline/Timeline.html

@@ -7,46 +7,33 @@
   {{#if !$initialized}}
     <LoadingPage />
   {{/if}}
-  {{#if timelineType === 'notifications'}}
+  {{#if virtual}}
-    <VirtualList component="{{NotificationVirtualListItem}}"
+    <VirtualList component="{{VirtualListComponent}}"
-                 :makeProps
-                 items="{{$timelineItemIds}}"
-                 on:scrollToBottom="onScrollToBottom()"
-                 on:scrollToTop="onScrollToTop()"
-                 shown="{{$initialized}}"
-                 footerComponent="{{LoadingFooter}}"
-                 showFooter="{{$initialized && $runningUpdate}}"
-                 showHeader="{{$showHeader}}"
-                 headerComponent="{{MoreHeaderVirtualWrapper}}"
-                 :headerProps
                  realm="{{$currentInstance + '/' + timeline}}"
-                 on:initializedVisibleItems="initialize()"
+                 containerQuery=".container"
-  />
-  {{elseif virtual}}
-    <VirtualList component="{{StatusVirtualListItem}}"
                  :makeProps
                  items="{{$timelineItemIds}}"
-                 on:scrollToBottom="onScrollToBottom()"
-                 on:scrollToTop="onScrollToTop()"
                  shown="{{$initialized}}"
+                 showFooter="{{$initialized && $runningUpdate}}"
                  footerComponent="{{LoadingFooter}}"
                  showHeader="{{$showHeader}}"
                  headerComponent="{{MoreHeaderVirtualWrapper}}"
                  :headerProps
-                 showFooter="{{$initialized && $runningUpdate}}"
+                 on:scrollToBottom="onScrollToBottom()"
-                 realm="{{$currentInstance + '/' + timeline}}"
+                 on:scrollToTop="onScrollToTop()"
                  on:initializedVisibleItems="initialize()"
     />
   {{else}}
     <!-- if this is a status thread, it's easier to just render the
          whole thing rather than use a virtual list -->
-    <PseudoVirtualList component="{{StatusVirtualListItem}}"
+    <PseudoVirtualList component="{{VirtualListComponent}}"
+                       realm="{{$currentInstance + '/' + timeline}}"
+                       containerQuery=".container"
                        :makeProps
                        items="{{$timelineItemIds}}"
                        shown="{{$initialized}}"
-                       on:initializedVisibleItems="initialize()"
                        scrollToItem="{{scrollToItem}}"
-                       realm="{{$currentInstance + '/' + timeline}}"
+                       on:initializedVisibleItems="initialize()"
     />
   {{/if}}
 </div>
@@ -90,13 +77,14 @@
       this.teardownFocus()
     },
     data: () => ({
-      StatusVirtualListItem,
-      NotificationVirtualListItem,
       LoadingFooter,
       MoreHeaderVirtualWrapper,
       Status
     }),
     computed: {
+      VirtualListComponent: (timelineType) => {
+        return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
+      },
       makeProps: ($currentInstance, timelineType, timelineValue) => async (itemId) => {
         let res = { timelineType, timelineValue }
         if (timelineType === 'notifications') {

routes/_components/virtualList/VirtualList.html

@@ -1,4 +1,4 @@
-<VirtualListContainer :realm >
+<VirtualListContainer :realm :containerQuery >
   <div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
     <VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
     {{#if $visibleItems}}

routes/_components/virtualList/VirtualListContainer.html

@@ -10,7 +10,7 @@
   export default {
     oncreate() {
       mark('onCreate VirtualListContainer')
-      let node = document.querySelector('.container')
+      let node = document.querySelector(this.get('containerQuery'))
       this.setupScroll(node)
       this.setupFullscreen()
       this.store.setCurrentRealm(this.get('realm'))
@@ -58,7 +58,7 @@
         node.addEventListener('scroll', this.scrollListener)
       },
       teardownScroll() {
-        let node = document.querySelector('.container')
+        let node = document.querySelector(this.get('containerQuery'))
         if (node) {
           node.removeEventListener('scroll', this.scrollListener)
         }