more refactoring
This commit is contained in:
parent
acc1ce396d
commit
2db4236761
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue