more refactoring

This commit is contained in:
Nolan Lawson 2018-02-12 22:32:56 -08:00
parent acc1ce396d
commit 2db4236761
4 changed files with 18 additions and 30 deletions

View file

@ -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
}

View file

@ -7,46 +7,33 @@
{{#if !$initialized}}
<LoadingPage />
{{/if}}
{{#if timelineType === 'notifications'}}
<VirtualList component="{{NotificationVirtualListItem}}"
:makeProps
items="{{$timelineItemIds}}"
on:scrollToBottom="onScrollToBottom()"
on:scrollToTop="onScrollToTop()"
shown="{{$initialized}}"
footerComponent="{{LoadingFooter}}"
showFooter="{{$initialized && $runningUpdate}}"
showHeader="{{$showHeader}}"
headerComponent="{{MoreHeaderVirtualWrapper}}"
:headerProps
{{#if virtual}}
<VirtualList component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
on:initializedVisibleItems="initialize()"
/>
{{elseif virtual}}
<VirtualList component="{{StatusVirtualListItem}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
on:scrollToBottom="onScrollToBottom()"
on:scrollToTop="onScrollToTop()"
shown="{{$initialized}}"
showFooter="{{$initialized && $runningUpdate}}"
footerComponent="{{LoadingFooter}}"
showHeader="{{$showHeader}}"
headerComponent="{{MoreHeaderVirtualWrapper}}"
:headerProps
showFooter="{{$initialized && $runningUpdate}}"
realm="{{$currentInstance + '/' + timeline}}"
on:scrollToBottom="onScrollToBottom()"
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') {

View file

@ -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}}

View file

@ -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)
}