kinda really sorta working

This commit is contained in:
Nolan Lawson 2018-01-15 17:25:32 -08:00
parent 1528d51290
commit b09e8c85ab
4 changed files with 44 additions and 41 deletions

View file

@ -190,13 +190,10 @@
components: {
Avatar
},
data: () => ({
status: null,
}),
computed: {
relativeDate: (status) => {
let date = new Date(status.created_at)
return relativeFormat.format(date)
createdAtDate: (status) => status.created_at,
relativeDate: (createdAtDate) => {
return relativeFormat.format(new Date(createdAtDate))
},
original: (status) => status.reblog ? status.reblog.account : status.account
},

View file

@ -1,13 +1,12 @@
<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight' />
<: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 $visibleItems as item, index @key}}
<VirtualListItem :component
offset="{{item.offset}}"
props="{{item.props}}"
key="{{item.key}}"
index="{{item.index}}"
/>
{{#each $visibleItems as item @key}}
<VirtualListItem :component
offset="{{item.offset}}"
props="{{item.props}}"
key="{{item.key}}"
/>
{{/each}}
</div>
<style>
@ -20,14 +19,16 @@
import { virtualListStore } from '../_utils/virtualListStore'
import debounce from 'lodash/debounce'
const DEBOUNCE_TIME = 200
export default {
oncreate() {
this.observe('innerHeight', innerHeight => {
oncreate () {
this.observe('innerHeight', debounce(innerHeight => {
console.log('setting innerHeight', innerHeight)
this.store.set({
innerHeight: innerHeight
})
})
}, DEBOUNCE_TIME))
this.observe('items', (items) => {
console.log('setting items')
this.store.set({
@ -39,7 +40,7 @@
this.store.set({
scrollTop: scrollY
})
}, 2000))
}, DEBOUNCE_TIME))
},
data: () => ({
component: null

View file

@ -1,8 +1,6 @@
<div class="virtual-list-item"
ref:node
style="transform: translate3d(0, {{offset}}px, 0);"
data-virtual-key="{{key}}"
data-virtual-index="{{index}}"
>
<:Component {component} virtualProps="{{props}}" />
</div>

View file

@ -15,35 +15,42 @@ virtualListStore.compute('visibleItems',
['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
(items, scrollTop, height, itemHeights, innerHeight) => {
let visibleItems = []
let currentOffset = 0
items.forEach((item, index) => {
let { props, key } = item
let totalOffset = 0
let len = items.length
let i = -1
while (++i < len) {
let { props, key } = items[i]
let height = itemHeights[key] || 0
console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
if (
((currentOffset < scrollTop) && (scrollTop - RENDER_BUFFER < currentOffset)) ||
((currentOffset >= scrollTop) && (currentOffset < (scrollTop + innerHeight + RENDER_BUFFER)))
) {
console.log(' rendering', key)
visibleItems.push({
offset: currentOffset,
props: props,
key: key,
index: index
})
let currentOffset = totalOffset
totalOffset += height
//console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
let isBelowViewport = (currentOffset < scrollTop)
if (isBelowViewport) {
if (scrollTop - RENDER_BUFFER > currentOffset) {
continue // below the area we want to render
}
} else {
console.log('not rendering', key)
if (currentOffset > (scrollTop + innerHeight + RENDER_BUFFER)) {
break // above the area we want to render
}
}
currentOffset += height
})
visibleItems.push({
offset: currentOffset,
props: props,
key: key,
index: i
})
}
return visibleItems
})
virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights) => {
let sum = 0
items.forEach(item => {
sum += itemHeights[item.key] || 0
})
let i = -1
let len = items.length
while (++i < len) {
sum += itemHeights[items[i].key] || 0
}
return sum
})