diff options
Diffstat (limited to 'apps/files_versions/src/components')
| -rw-r--r-- | apps/files_versions/src/components/Version.vue | 457 | ||||
| -rw-r--r-- | apps/files_versions/src/components/VersionLabelDialog.vue | 123 | ||||
| -rw-r--r-- | apps/files_versions/src/components/VirtualScrolling.vue | 346 |
3 files changed, 712 insertions, 214 deletions
diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue index 5f4e7b447ea..dc36e4134f9 100644 --- a/apps/files_versions/src/components/Version.vue +++ b/apps/files_versions/src/components/Version.vue @@ -1,188 +1,177 @@ <!-- - - @copyright 2022 Carl Schwan <carl@carlschwan.eu> - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - --> + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <div> - <NcListItem class="version" - :name="versionLabel" - :force-display-actions="true" - data-files-versions-version - @click="click"> - <template #icon> - <div v-if="!(loadPreview || previewLoaded)" class="version__image" /> - <img v-else-if="(isCurrent || version.hasPreview) && !previewErrored" - :src="version.previewUrl" - alt="" - decoding="async" - fetchpriority="low" - loading="lazy" - class="version__image" - @load="previewLoaded = true" - @error="previewErrored = true"> - <div v-else - class="version__image"> - <ImageOffOutline :size="20" /> - </div> - </template> - <template #subname> - <div class="version__info"> - <span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span> - <!-- Separate dot to improve alignement --> - <span class="version__info__size">•</span> - <span class="version__info__size">{{ version.size | humanReadableSize }}</span> + <NcListItem class="version" + :force-display-actions="true" + :actions-aria-label="t('files_versions', 'Actions for version from {versionHumanExplicitDate}', { versionHumanExplicitDate })" + :data-files-versions-version="version.fileVersion" + @click="click"> + <!-- Icon --> + <template #icon> + <div v-if="!(loadPreview || previewLoaded)" class="version__image" /> + <img v-else-if="version.previewUrl && !previewErrored" + :src="version.previewUrl" + alt="" + decoding="async" + fetchpriority="low" + loading="lazy" + class="version__image" + @load="previewLoaded = true" + @error="previewErrored = true"> + <div v-else + class="version__image"> + <ImageOffOutline :size="20" /> + </div> + </template> + + <!-- author --> + <template #name> + <div class="version__info"> + <div v-if="versionLabel" + class="version__info__label" + data-cy-files-version-label + :title="versionLabel"> + {{ versionLabel }} </div> - </template> - <template #actions> - <NcActionButton v-if="enableLabeling" - :close-after-click="true" - @click="openVersionLabelModal"> - <template #icon> - <Pencil :size="22" /> - </template> - {{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }} - </NcActionButton> - <NcActionButton v-if="!isCurrent && canView && canCompare" - :close-after-click="true" - @click="compareVersion"> - <template #icon> - <FileCompare :size="22" /> - </template> - {{ t('files_versions', 'Compare to current version') }} - </NcActionButton> - <NcActionButton v-if="!isCurrent" - :close-after-click="true" - @click="restoreVersion"> - <template #icon> - <BackupRestore :size="22" /> - </template> - {{ t('files_versions', 'Restore version') }} - </NcActionButton> - <NcActionLink :href="downloadURL" - :close-after-click="true" - :download="downloadURL"> - <template #icon> - <Download :size="22" /> - </template> - {{ t('files_versions', 'Download version') }} - </NcActionLink> - <NcActionButton v-if="!isCurrent && enableDeletion" - :close-after-click="true" - @click="deleteVersion"> - <template #icon> - <Delete :size="22" /> - </template> - {{ t('files_versions', 'Delete version') }} - </NcActionButton> - </template> - </NcListItem> - <NcModal v-if="showVersionLabelForm" - :title="t('files_versions', 'Name this version')" - @close="showVersionLabelForm = false"> - <form class="version-label-modal" - @submit.prevent="setVersionLabel(formVersionLabelValue)"> - <label> - <div class="version-label-modal__title">{{ t('files_versions', 'Version name') }}</div> - <NcTextField ref="labelInput" - :value.sync="formVersionLabelValue" - :placeholder="t('files_versions', 'Version name')" - :label-outside="true" /> - </label> - - <div class="version-label-modal__info"> - {{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }} + <div v-if="versionAuthor" + class="version__info" + data-cy-files-version-author-name> + <span v-if="versionLabel">•</span> + <NcAvatar class="avatar" + :user="version.author" + :size="20" + disable-menu + disable-tooltip + :show-user-status="false" /> + <div class="version__info__author_name" + :title="versionAuthor"> + {{ versionAuthor }} + </div> </div> + </div> + </template> - <div class="version-label-modal__actions"> - <NcButton :disabled="formVersionLabelValue.trim().length === 0" @click="setVersionLabel('')"> - {{ t('files_versions', 'Remove version name') }} - </NcButton> - <NcButton type="primary" native-type="submit"> - <template #icon> - <Check /> - </template> - {{ t('files_versions', 'Save version name') }} - </NcButton> - </div> - </form> - </NcModal> - </div> + <!-- Version file size as subline --> + <template #subname> + <div class="version__info version__info__subline"> + <NcDateTime class="version__info__date" + relative-time="short" + :timestamp="version.mtime" /> + <!-- Separate dot to improve alignment --> + <span>•</span> + <span>{{ humanReadableSize }}</span> + </div> + </template> + + <!-- Actions --> + <template #actions> + <NcActionButton v-if="enableLabeling && hasUpdatePermissions" + data-cy-files-versions-version-action="label" + :close-after-click="true" + @click="labelUpdate"> + <template #icon> + <Pencil :size="22" /> + </template> + {{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }} + </NcActionButton> + <NcActionButton v-if="!isCurrent && canView && canCompare" + data-cy-files-versions-version-action="compare" + :close-after-click="true" + @click="compareVersion"> + <template #icon> + <FileCompare :size="22" /> + </template> + {{ t('files_versions', 'Compare to current version') }} + </NcActionButton> + <NcActionButton v-if="!isCurrent && hasUpdatePermissions" + data-cy-files-versions-version-action="restore" + :close-after-click="true" + @click="restoreVersion"> + <template #icon> + <BackupRestore :size="22" /> + </template> + {{ t('files_versions', 'Restore version') }} + </NcActionButton> + <NcActionLink v-if="isDownloadable" + data-cy-files-versions-version-action="download" + :href="downloadURL" + :close-after-click="true" + :download="downloadURL"> + <template #icon> + <Download :size="22" /> + </template> + {{ t('files_versions', 'Download version') }} + </NcActionLink> + <NcActionButton v-if="!isCurrent && enableDeletion && hasDeletePermissions" + data-cy-files-versions-version-action="delete" + :close-after-click="true" + @click="deleteVersion"> + <template #icon> + <Delete :size="22" /> + </template> + {{ t('files_versions', 'Delete version') }} + </NcActionButton> + </template> + </NcListItem> </template> +<script lang="ts"> +import type { PropType } from 'vue' +import type { Version } from '../utils/versions' + +import { getCurrentUser } from '@nextcloud/auth' +import { Permission, formatFileSize } from '@nextcloud/files' +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' +import { joinPaths } from '@nextcloud/paths' +import { getRootUrl, generateUrl } from '@nextcloud/router' +import { defineComponent } from 'vue' + +import axios from '@nextcloud/axios' +import moment from '@nextcloud/moment' +import logger from '../utils/logger' -<script> import BackupRestore from 'vue-material-design-icons/BackupRestore.vue' +import Delete from 'vue-material-design-icons/Delete.vue' import Download from 'vue-material-design-icons/Download.vue' import FileCompare from 'vue-material-design-icons/FileCompare.vue' -import Pencil from 'vue-material-design-icons/Pencil.vue' -import Check from 'vue-material-design-icons/Check.vue' -import Delete from 'vue-material-design-icons/Delete.vue' import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js' -import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js' -import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' -import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' -import moment from '@nextcloud/moment' -import { translate as t } from '@nextcloud/l10n' -import { joinPaths } from '@nextcloud/paths' -import { getRootUrl } from '@nextcloud/router' -import { loadState } from '@nextcloud/initial-state' +import Pencil from 'vue-material-design-icons/PencilOutline.vue' -export default { +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcActionLink from '@nextcloud/vue/components/NcActionLink' +import NcAvatar from '@nextcloud/vue/components/NcAvatar' +import NcDateTime from '@nextcloud/vue/components/NcDateTime' +import NcListItem from '@nextcloud/vue/components/NcListItem' +import Tooltip from '@nextcloud/vue/directives/Tooltip' + +const hasPermission = (permissions: number, permission: number): boolean => (permissions & permission) !== 0 + +export default defineComponent({ name: 'Version', + components: { NcActionLink, NcActionButton, + NcAvatar, + NcDateTime, NcListItem, - NcModal, - NcButton, - NcTextField, BackupRestore, Download, FileCompare, Pencil, - Check, Delete, ImageOffOutline, }, + directives: { tooltip: Tooltip, }, - filters: { - /** - * @param {number} bytes - * @return {string} - */ - humanReadableSize(bytes) { - return OC.Util.humanFileSize(bytes) - }, - /** - * @param {number} timestamp - * @return {string} - */ - humanDateFromNow(timestamp) { - return moment(timestamp).fromNow() - }, - }, + props: { - /** @type {Vue.PropOptions<import('../utils/versions.js').Version>} */ version: { - type: Object, + type: Object as PropType<Version>, required: true, }, fileInfo: { @@ -210,20 +199,24 @@ export default { default: false, }, }, + + emits: ['click', 'compare', 'restore', 'delete', 'label-update-request'], + data() { return { previewLoaded: false, previewErrored: false, - showVersionLabelForm: false, - formVersionLabelValue: this.version.label, capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }), + versionAuthor: '' as string | null, } }, + computed: { - /** - * @return {string} - */ - versionLabel() { + humanReadableSize() { + return formatFileSize(this.version.size) + }, + + versionLabel(): string { const label = this.version.label ?? '' if (this.isCurrent) { @@ -241,10 +234,11 @@ export default { return label }, - /** - * @return {string} - */ - downloadURL() { + versionHumanExplicitDate(): string { + return moment(this.version.mtime).format('LLLL') + }, + + downloadURL(): string { if (this.isCurrent) { return getRootUrl() + joinPaths('/remote.php/webdav', this.fileInfo.path, this.fileInfo.name) } else { @@ -252,46 +246,83 @@ export default { } }, - /** @return {string} */ - formattedDate() { - return moment(this.version.mtime).format('LLL') - }, - - /** @return {boolean} */ - enableLabeling() { + enableLabeling(): boolean { return this.capabilities.files.version_labeling === true }, - /** @return {boolean} */ - enableDeletion() { + enableDeletion(): boolean { return this.capabilities.files.version_deletion === true }, + + hasDeletePermissions(): boolean { + return hasPermission(this.fileInfo.permissions, Permission.DELETE) + }, + + hasUpdatePermissions(): boolean { + return hasPermission(this.fileInfo.permissions, Permission.UPDATE) + }, + + isDownloadable(): boolean { + if ((this.fileInfo.permissions & Permission.READ) === 0) { + return false + } + + // If the mount type is a share, ensure it got download permissions. + if (this.fileInfo.mountType === 'shared') { + const downloadAttribute = this.fileInfo.shareAttributes + .find((attribute) => attribute.scope === 'permissions' && attribute.key === 'download') || {} + // If the download attribute is set to false, the file is not downloadable + if (downloadAttribute?.value === false) { + return false + } + } + + return true + }, + }, + + created() { + this.fetchDisplayName() }, + methods: { - openVersionLabelModal() { - this.showVersionLabelForm = true - this.$nextTick(() => { - this.$refs.labelInput.$el.getElementsByTagName('input')[0].focus() - }) + labelUpdate() { + this.$emit('label-update-request') }, restoreVersion() { this.$emit('restore', this.version) }, - setVersionLabel(label) { - this.formVersionLabelValue = label - this.showVersionLabelForm = false - this.$emit('label-update', this.version, label) + async deleteVersion() { + // Let @nc-vue properly remove the popover before we delete the version. + // This prevents @nc-vue from throwing a error. + await this.$nextTick() + await this.$nextTick() + this.$emit('delete', this.version) }, - deleteVersion() { - this.$emit('delete', this.version) + async fetchDisplayName() { + this.versionAuthor = null + if (!this.version.author) { + return + } + + if (this.version.author === getCurrentUser()?.uid) { + this.versionAuthor = t('files_versions', 'You') + } else { + try { + const { data } = await axios.post(generateUrl('/displaynames'), { users: [this.version.author] }) + this.versionAuthor = data.users[this.version.author] + } catch (error) { + logger.warn('Could not load user display name', { error }) + } + } }, click() { if (!this.canView) { - window.location = this.downloadURL + window.location.href = this.downloadURL return } this.$emit('click', { version: this.version }) @@ -306,7 +337,7 @@ export default { t, }, -} +}) </script> <style scoped lang="scss"> @@ -319,9 +350,31 @@ export default { flex-direction: row; align-items: center; gap: 0.5rem; + color: var(--color-main-text); + font-weight: 500; + overflow: hidden; + + &__label { + font-weight: 700; + // Fix overflow on narrow screens + overflow: hidden; + text-overflow: ellipsis; + min-width: 110px; + } + + &__author_name { + overflow: hidden; + text-overflow: ellipsis; + } - &__size { - color: var(--color-text-lighter); + &__date { + // Fix overflow on narrow screens + overflow: hidden; + text-overflow: ellipsis; + } + + &__subline { + color: var(--color-text-maxcontrast) } } @@ -337,28 +390,4 @@ export default { color: var(--color-text-light); } } - -.version-label-modal { - display: flex; - justify-content: space-between; - flex-direction: column; - height: 250px; - padding: 16px; - - &__title { - margin-bottom: 12px; - font-weight: 600; - } - - &__info { - margin-top: 12px; - color: var(--color-text-maxcontrast); - } - - &__actions { - display: flex; - justify-content: space-between; - margin-top: 64px; - } -} </style> diff --git a/apps/files_versions/src/components/VersionLabelDialog.vue b/apps/files_versions/src/components/VersionLabelDialog.vue new file mode 100644 index 00000000000..760780cae61 --- /dev/null +++ b/apps/files_versions/src/components/VersionLabelDialog.vue @@ -0,0 +1,123 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcDialog :buttons="dialogButtons" + content-classes="version-label-modal" + is-form + :open="open" + size="normal" + :name="t('files_versions', 'Name this version')" + @update:open="$emit('update:open', $event)" + @submit="setVersionLabel(editedVersionLabel)"> + <NcTextField ref="labelInput" + class="version-label-modal__input" + :label="t('files_versions', 'Version name')" + :placeholder="t('files_versions', 'Version name')" + :value.sync="editedVersionLabel" /> + + <p class="version-label-modal__info"> + {{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }} + </p> + </NcDialog> +</template> + +<script lang="ts"> +import { t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' +import svgCheck from '@mdi/svg/svg/check.svg?raw' + +import NcDialog from '@nextcloud/vue/components/NcDialog' +import NcTextField from '@nextcloud/vue/components/NcTextField' + +type Focusable = Vue & { focus: () => void } + +export default defineComponent({ + name: 'VersionLabelDialog', + components: { + NcDialog, + NcTextField, + }, + props: { + open: { + type: Boolean, + default: false, + }, + versionLabel: { + type: String, + default: '', + }, + }, + data() { + return { + editedVersionLabel: '', + } + }, + computed: { + dialogButtons() { + const buttons: unknown[] = [] + if (this.versionLabel.trim() === '') { + // If there is no label just offer a cancel action that just closes the dialog + buttons.push({ + label: t('files_versions', 'Cancel'), + }) + } else { + // If there is already a label set, offer to remove the version label + buttons.push({ + label: t('files_versions', 'Remove version name'), + type: 'error', + nativeType: 'reset', + callback: () => { this.setVersionLabel('') }, + }) + } + return [ + ...buttons, + { + label: t('files_versions', 'Save version name'), + type: 'primary', + nativeType: 'submit', + icon: svgCheck, + }, + ] + }, + }, + watch: { + versionLabel: { + immediate: true, + handler(label) { + this.editedVersionLabel = label ?? '' + }, + }, + open: { + immediate: true, + handler(open) { + if (open) { + this.$nextTick(() => (this.$refs.labelInput as Focusable).focus()) + } + this.editedVersionLabel = this.versionLabel + }, + }, + }, + methods: { + setVersionLabel(label: string) { + this.$emit('label-update', label) + }, + + t, + }, +}) +</script> + +<style scoped lang="scss"> +.version-label-modal { + &__info { + color: var(--color-text-maxcontrast); + margin-block: calc(3 * var(--default-grid-baseline)); + } + + &__input { + margin-block-start: calc(2 * var(--default-grid-baseline)); + } +} +</style> diff --git a/apps/files_versions/src/components/VirtualScrolling.vue b/apps/files_versions/src/components/VirtualScrolling.vue new file mode 100644 index 00000000000..5a502036839 --- /dev/null +++ b/apps/files_versions/src/components/VirtualScrolling.vue @@ -0,0 +1,346 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <div v-if="!useWindow && containerElement === null" ref="container" class="vs-container"> + <div ref="rowsContainer" + class="vs-rows-container" + :style="rowsContainerStyle"> + <slot :visible-sections="visibleSections" /> + <slot name="loader" /> + </div> + </div> + <div v-else + ref="rowsContainer" + class="vs-rows-container" + :style="rowsContainerStyle"> + <slot :visible-sections="visibleSections" /> + <slot name="loader" /> + </div> +</template> + +<script lang="ts"> +import { defineComponent, type PropType } from 'vue' + +import logger from '../utils/logger.js' + +interface RowItem { + id: string // Unique id for the item. + key?: string // Unique key for the item. +} + +interface Row { + key: string // Unique key for the row. + height: number // The height of the row. + sectionKey: string // Unique key for the row. + items: RowItem[] // List of items in the row. +} + +interface VisibleRow extends Row { + distance: number // The distance from the visible viewport +} + +interface Section { + key: string, // Unique key for the section. + rows: Row[], // The height of the row. + height: number, // Height of the section, excluding the header. +} + +interface VisibleSection extends Section { + rows: VisibleRow[], // The height of the row. +} + +export default defineComponent({ + name: 'VirtualScrolling', + + props: { + sections: { + type: Array as PropType<Section[]>, + required: true, + }, + + containerElement: { + type: HTMLElement, + default: null, + }, + + useWindow: { + type: Boolean, + default: false, + }, + + headerHeight: { + type: Number, + default: 75, + }, + renderDistance: { + type: Number, + default: 0.5, + }, + bottomBufferRatio: { + type: Number, + default: 2, + }, + scrollToKey: { + type: String, + default: '', + }, + }, + + data() { + return { + scrollPosition: 0, + containerHeight: 0, + rowsContainerHeight: 0, + resizeObserver: null as ResizeObserver|null, + } + }, + + computed: { + visibleSections(): VisibleSection[] { + logger.debug('[VirtualScrolling] Computing visible section', { sections: this.sections }) + + // Optimization: get those computed properties once to not go through vue's internal every time we need them. + const containerHeight = this.containerHeight + const containerTop = this.scrollPosition + const containerBottom = containerTop + containerHeight + + let currentRowTop = 0 + let currentRowBottom = 0 + + // Compute whether a row should be included in the DOM (shouldRender) + // And how visible the row is. + const visibleSections = this.sections + .map(section => { + currentRowBottom += this.headerHeight + + return { + ...section, + rows: section.rows.reduce((visibleRows, row) => { + currentRowTop = currentRowBottom + currentRowBottom += row.height + + let distance = 0 + + if (currentRowBottom < containerTop) { + distance = (containerTop - currentRowBottom) / containerHeight + } else if (currentRowTop > containerBottom) { + distance = (currentRowTop - containerBottom) / containerHeight + } + + if (distance > this.renderDistance) { + return visibleRows + } + + return [ + ...visibleRows, + { + ...row, + distance, + }, + ] + }, [] as VisibleRow[]), + } + }) + .filter(section => section.rows.length > 0) + + // To allow vue to recycle the DOM elements instead of adding and deleting new ones, + // we assign a random key to each items. When a item removed, we recycle its key for new items, + // so vue can replace the content of removed DOM elements with the content of new items, but keep the other DOM elements untouched. + const visibleItems = visibleSections + .flatMap(({ rows }) => rows) + .flatMap(({ items }) => items) + + const rowIdToKeyMap = this._rowIdToKeyMap as {[key: string]: string} + + visibleItems.forEach(item => (item.key = rowIdToKeyMap[item.id])) + + const usedTokens = visibleItems + .map(({ key }) => key) + .filter(key => key !== undefined) + + const unusedTokens = Object.values(rowIdToKeyMap).filter(key => !usedTokens.includes(key)) + + visibleItems + .filter(({ key }) => key === undefined) + .forEach(item => (item.key = unusedTokens.pop() ?? Math.random().toString(36).substr(2))) + + // this._rowIdToKeyMap is created in the beforeCreate hook, so value changes are not tracked. + // Therefore, we wont trigger the computation of visibleSections again if we alter the value of this._rowIdToKeyMap. + // eslint-disable-next-line vue/no-side-effects-in-computed-properties + this._rowIdToKeyMap = visibleItems.reduce((finalMapping, { id, key }) => ({ ...finalMapping, [`${id}`]: key }), {}) + + return visibleSections + }, + + /** + * Total height of all the rows + some room for the loader. + */ + totalHeight(): number { + const loaderHeight = 0 + + return this.sections + .map(section => this.headerHeight + section.height) + .reduce((totalHeight, sectionHeight) => totalHeight + sectionHeight, 0) + loaderHeight + }, + + paddingTop(): number { + if (this.visibleSections.length === 0) { + return 0 + } + + let paddingTop = 0 + + for (const section of this.sections) { + if (section.key !== this.visibleSections[0].rows[0].sectionKey) { + paddingTop += this.headerHeight + section.height + continue + } + + for (const row of section.rows) { + if (row.key === this.visibleSections[0].rows[0].key) { + return paddingTop + } + + paddingTop += row.height + } + + paddingTop += this.headerHeight + } + + return paddingTop + }, + + /** + * padding-top is used to replace not included item in the container. + */ + rowsContainerStyle(): { height: string; paddingTop: string } { + return { + height: `${this.totalHeight}px`, + paddingTop: `${this.paddingTop}px`, + } + }, + + /** + * Whether the user is near the bottom. + * If true, then the need-content event will be emitted. + */ + isNearBottom(): boolean { + const buffer = this.containerHeight * this.bottomBufferRatio + return this.scrollPosition + this.containerHeight >= this.totalHeight - buffer + }, + + container() { + logger.debug('[VirtualScrolling] Computing container') + if (this.containerElement !== null) { + return this.containerElement + } else if (this.useWindow) { + return window + } else { + return this.$refs.container as Element + } + }, + }, + + watch: { + isNearBottom(value) { + logger.debug('[VirtualScrolling] isNearBottom changed', { value }) + if (value) { + this.$emit('need-content') + } + }, + + visibleSections() { + // Re-emit need-content when rows is updated and isNearBottom is still true. + // If the height of added rows is under `bottomBufferRatio`, `isNearBottom` will still be true so we need more content. + if (this.isNearBottom) { + this.$emit('need-content') + } + }, + + scrollToKey(key) { + let currentRowTopDistanceFromTop = 0 + + for (const section of this.sections) { + if (section.key !== key) { + currentRowTopDistanceFromTop += this.headerHeight + section.height + continue + } + + break + } + + logger.debug('[VirtualScrolling] Scrolling to', { currentRowTopDistanceFromTop }) + this.container.scrollTo({ top: currentRowTopDistanceFromTop, behavior: 'smooth' }) + }, + }, + + beforeCreate() { + this._rowIdToKeyMap = {} + }, + + mounted() { + this.resizeObserver = new ResizeObserver(entries => { + for (const entry of entries) { + const cr = entry.contentRect + if (entry.target === this.container) { + this.containerHeight = cr.height + } + if (entry.target.classList.contains('vs-rows-container')) { + this.rowsContainerHeight = cr.height + } + } + }) + + if (this.useWindow) { + window.addEventListener('resize', this.updateContainerSize, { passive: true }) + this.containerHeight = window.innerHeight + } else { + this.resizeObserver.observe(this.container as HTMLElement|Element) + } + + this.resizeObserver.observe(this.$refs.rowsContainer as Element) + this.container.addEventListener('scroll', this.updateScrollPosition, { passive: true }) + }, + + beforeDestroy() { + if (this.useWindow) { + window.removeEventListener('resize', this.updateContainerSize) + } + + this.resizeObserver?.disconnect() + this.container.removeEventListener('scroll', this.updateScrollPosition) + }, + + methods: { + updateScrollPosition() { + this._onScrollHandle ??= requestAnimationFrame(() => { + this._onScrollHandle = null + if (this.useWindow) { + this.scrollPosition = (this.container as Window).scrollY + } else { + this.scrollPosition = (this.container as HTMLElement|Element).scrollTop + } + }) + }, + + updateContainerSize() { + this.containerHeight = window.innerHeight + }, + }, +}) +</script> + +<style scoped lang="scss"> +.vs-container { + overflow-y: scroll; + height: 100%; +} + +.vs-rows-container { + box-sizing: border-box; + will-change: scroll-position, padding; + contain: layout paint style; +} +</style> |