MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dynamically calculate number of track elements in DOM

This commit is contained in:
wvffle 2022-07-24 22:27:41 +00:00 committed by Georg Krause
parent 63fbf286a2
commit 11b67919c8
1 changed files with 3 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/components/vui/list/VirtualList.vue
View File

@ -137,6 +137,7 @@ watchEffect(() => {
scrollDirection.value = undefined scrollDirection.value = undefined
}) })
const keeps = ref(30)
const el = useCurrentElement() const el = useCurrentElement()
useResizeObserver(el as unknown as MaybeElementRef<MaybeElement>, ([entry]) => { useResizeObserver(el as unknown as MaybeElementRef<MaybeElement>, ([entry]) => {
const height = entry.borderBoxSize?.[0]?.blockSize ?? 0 const height = entry.borderBoxSize?.[0]?.blockSize ?? 0
@ -144,6 +145,7 @@ useResizeObserver(el as unknown as MaybeElementRef<MaybeElement>, ([entry]) => {
if (height !== 0) { if (height !== 0) {
containerSize.top = (entry.target as HTMLElement).offsetTop containerSize.top = (entry.target as HTMLElement).offsetTop
containerSize.bottom = height + containerSize.top containerSize.bottom = height + containerSize.top
keeps.value = (containerSize.bottom - containerSize.top) / props.size * 2 | 0
} }
}) })
@ -177,6 +179,7 @@ export default {
class="virtual-list" class="virtual-list"
wrap-class="drag-container" wrap-class="drag-container"
item-class="drag-item" item-class="drag-item"
:keeps="keeps"
:data-key="dataKey" :data-key="dataKey"
:data-sources="list" :data-sources="list"
:data-component="VirtualItem" :data-component="VirtualItem"