pinafore/routes/_utils/virtualListStore.js

62 lines
1.5 KiB
JavaScript
Raw Normal View History

import { Store } from 'svelte/store.js'
class VirtualListStore extends Store {
}
const virtualListStore = new VirtualListStore({
items: [],
itemHeights: {},
2018-01-16 00:35:08 +00:00
scrollTop: 0
})
2018-01-16 00:12:07 +00:00
virtualListStore.compute('visibleItems',
2018-01-16 00:35:08 +00:00
['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
(items, scrollTop, height, itemHeights, innerHeight) => {
2018-01-16 02:29:28 +00:00
let renderBuffer = 2 * innerHeight
2018-01-16 00:12:07 +00:00
let visibleItems = []
2018-01-16 01:25:32 +00:00
let totalOffset = 0
let len = items.length
let i = -1
while (++i < len) {
let { props, key } = items[i]
2018-01-16 00:35:08 +00:00
let height = itemHeights[key] || 0
2018-01-16 01:25:32 +00:00
let currentOffset = totalOffset
totalOffset += height
//console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
let isBelowViewport = (currentOffset < scrollTop)
if (isBelowViewport) {
2018-01-16 02:29:28 +00:00
if (scrollTop - renderBuffer > currentOffset) {
2018-01-16 01:25:32 +00:00
continue // below the area we want to render
}
2018-01-16 00:12:07 +00:00
} else {
2018-01-16 02:29:28 +00:00
if (currentOffset > (scrollTop + innerHeight + renderBuffer)) {
2018-01-16 01:25:32 +00:00
break // above the area we want to render
}
2018-01-16 00:12:07 +00:00
}
2018-01-16 01:25:32 +00:00
visibleItems.push({
offset: currentOffset,
props: props,
key: key,
index: i
})
}
2018-01-16 00:12:07 +00:00
return visibleItems
})
2018-01-16 00:35:08 +00:00
virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights) => {
let sum = 0
2018-01-16 01:25:32 +00:00
let i = -1
let len = items.length
while (++i < len) {
sum += itemHeights[items[i].key] || 0
}
return sum
})
if (process.browser && process.env.NODE_ENV !== 'production') {
window.virtualListStore = virtualListStore
}
export {
virtualListStore
}