nextcloud
/
bookmarks
mirror of https://github.com/nextcloud/bookmarks
0
0
Fork 0
Code Issues Releases Wiki Activity

Fix BookmarksList with VirtualScroll 

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
This commit is contained in:
Marcel Klehr 2022-07-02 15:10:24 +02:00
parent b278af62b2
commit 5fa9e11ec7
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BookmarksList.vue
View File

@ -30,7 +30,7 @@
t('bookmarks', 'One bookmark can be in multiple folders at once. Updating it will update all copies. All duplicated bookmarks are listed here for convenience.')
}}
</div>
<VirtualScroll :end-reached="reachedEnd" @load-more="loadMore">
<VirtualScroll :reached-end="reachedEnd" @load-more="loadMore">
<CreateBookmark v-if="newBookmark" />
<CreateFolder v-if="newFolder" />
<template v-if="$route.name === routes.FOLDER || $route.name === routes.HOME">
@ -48,7 +48,7 @@
</template>
</template>
<!-- FOLDER VIEW WITH NORMAL SORTING -->
<template v-else-if="(subFolders.length || bookmarks.length) && !showLoading">
<template v-else-if="(subFolders.length || bookmarks.length) && !loading">
<Folder
v-for="folder in subFolders"
:key="'folder' + folder.id"

10
src/components/VirtualScroll.vue
View File

@ -13,7 +13,7 @@ const LIST_ITEM_HEIGHT = 45 + 1
export default {
name: 'VirtualScroll',
props: {
endReached: {
reachedEnd: {
type: Boolean,
required: true,
},
@ -65,21 +65,19 @@ export default {
let lowerPaddingItems = 0
let itemHeight = 1
if (this.$slots.default) {
this.updateViewport()
itemHeight = this.viewMode === 'grid' ? GRID_ITEM_HEIGHT : LIST_ITEM_HEIGHT
itemsPerRow = this.viewMode === 'grid' ? Math.floor(this.viewport.width / GRID_ITEM_WIDTH) : 1
renderedItems = itemsPerRow * Math.ceil((this.viewport.height + 2 * 500) / itemHeight)
upperPaddingItems = itemsPerRow * Math.floor(Math.max(this.scrollTop - 500, 0) / itemHeight)
lowerPaddingItems = Math.max(this.$slots.default.length - renderedItems - upperPaddingItems, 0)
children = this.$slots.default.slice(upperPaddingItems, upperPaddingItems + renderedItems)
if (this.endReached && renderedItems > this.$slots.default.length) {
renderedItems = this.$slots.default.length
}
renderedItems = children.length
setImmediate(() => { this.$el.scrollTop = this.scrollTop })
}
if (!this.endReached && upperPaddingItems + renderedItems > (this.$slots.default ? this.$slots.default.length : 0)) {
if (!this.reachedEnd && upperPaddingItems + renderedItems > (this.$slots.default ? this.$slots.default.length : 0)) {
this.$emit('load-more')
children = [...children, ...Array(upperPaddingItems + renderedItems - (this.$slots.default ? this.$slots.default.length : 0)).fill(0).map(() =>
h(ItemSkeleton)