1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!--
- Copyright (c) 2022. The Nextcloud Bookmarks contributors.
-
- This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
-->
<script>
import Vue from 'vue'
import ItemSkeleton from './ItemSkeleton.vue'
const GRID_ITEM_HEIGHT = 200 + 10
// const GRID_ITEM_WIDTH = 250 + 10
const LIST_ITEM_HEIGHT = 45 + 1
export default Vue.extend({
name: 'VirtualScroll',
props: {
reachedEnd: {
type: Boolean,
required: true,
},
fetchKey: {
type: String,
required: true,
},
},
data() {
return {
viewport: { width: 0, height: 0 },
scrollTop: 0,
scrollHeight: 500,
initialLoadingSkeleton: false,
initialLoadingTimeout: null,
}
},
computed: {
fetching() {
return this.$store.state.items.fetchingItems[this.key]
},
},
watch: {
newBookmark() {
this.$el.scrollTop = 0
},
newFolder() {
this.$el.scrollTop = 0
},
},
mounted() {
this.onScroll()
window.addEventListener('resize', this.onScroll)
},
destroyed() {
window.removeEventListener('resize', this.onScroll)
},
methods: {
onScroll() {
this.scrollTop = this.$el.scrollTop
this.scrollHeight = this.$el.scrollHeight
},
},
render(h) {
let children = []
let renderedItems = 0
let upperPaddingItems = 0
let lowerPaddingItems = 0
let itemHeight = 1
const padding = GRID_ITEM_HEIGHT
if (this.$slots.default && this.$el && this.$el.getBoundingClientRect) {
const childComponents = this.$slots.default.filter(child => !!child.componentOptions)
const viewport = this.$el.getBoundingClientRect()
itemHeight = LIST_ITEM_HEIGHT
renderedItems = Math.floor((viewport.height + padding + padding) / itemHeight)
upperPaddingItems = Math.floor(Math.max(this.scrollTop - padding, 0) / itemHeight)
children = childComponents.slice(upperPaddingItems, upperPaddingItems + renderedItems)
renderedItems = children.length
lowerPaddingItems = Math.max(childComponents.length - upperPaddingItems - renderedItems, 0)
}
if (!this.reachedEnd && lowerPaddingItems === 0) {
if (!this.fetching) {
this.$emit('load-more')
}
if (upperPaddingItems + renderedItems + lowerPaddingItems === 0) {
if (!this.initialLoadingSkeleton) {
// The first 350ms don't display skeletons
this.initialLoadingTimeout = setTimeout(() => {
this.initialLoadingSkeleton = true
this.$forceUpdate()
}, 350)
return h('div', { class: 'virtual-scroll' })
}
}
children = [...children, ...Array(40).fill(0).map(() =>
h(ItemSkeleton),
)]
}
if (upperPaddingItems + renderedItems + lowerPaddingItems > 0) {
this.initialLoadingSkeleton = false
if (this.initialLoadingTimeout) {
clearTimeout(this.initialLoadingTimeout)
}
}
const scrollTop = this.scrollTop
this.$nextTick(() => {
this.$el.scrollTop = scrollTop
})
return h('div', {
class: 'virtual-scroll',
on: { scroll: () => this.onScroll() },
},
[
h('div', { class: 'upper-padding', style: { height: Math.max((upperPaddingItems) * itemHeight, 0) + 'px' } }),
h('div', { class: 'container-window', style: { height: Math.max((renderedItems) * itemHeight, 0) + 'px' } }, children),
h('div', { class: 'lower-padding', style: { height: Math.max((lowerPaddingItems) * itemHeight, 0) + 'px' } }),
])
},
})
</script>
<style scoped>
.virtual-scroll {
height: calc(100vh - 50px - 50px - 10px);
position: relative;
overflow-y: scroll;
}
</style>
|
