|
| 1 | +<!-- |
| 2 | + - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors |
| 3 | + - SPDX-License-Identifier: AGPL-3.0-or-later |
| 4 | +--> |
| 5 | + |
| 6 | +<template> |
| 7 | + <li |
| 8 | + v-if="readOnly" |
| 9 | + ref="stickySentinel" |
| 10 | + class="question-section__sentinel" |
| 11 | + aria-hidden="true" /> |
| 12 | + <Question |
| 13 | + v-bind="{ ...questionProps, ...$attrs }" |
| 14 | + ref="questionElement" |
| 15 | + :class="{ 'question--section-stuck': isStuck }" |
| 16 | + :titlePlaceholder="answerType.titlePlaceholder" |
| 17 | + :warningInvalid="answerType.warningInvalid" |
| 18 | + :errorMessage="errorMessage" |
| 19 | + v-on="commonListeners" |
| 20 | + @click="onSectionClick"> |
| 21 | + <template #insert> |
| 22 | + <slot name="insert" /> |
| 23 | + </template> |
| 24 | + </Question> |
| 25 | +</template> |
| 26 | + |
| 27 | +<script lang="ts"> |
| 28 | +import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue' |
| 29 | +import Question from './Question.vue' |
| 30 | +import { |
| 31 | + QUESTION_EMITS, |
| 32 | + QUESTION_PROPS, |
| 33 | + useQuestion, |
| 34 | +} from '../../composables/useQuestion.ts' |
| 35 | +
|
| 36 | +export default defineComponent({ |
| 37 | + name: 'QuestionSection', |
| 38 | +
|
| 39 | + components: { |
| 40 | + Question, |
| 41 | + }, |
| 42 | +
|
| 43 | + // The sentinel <li> must stay a sibling of the section, so attributes are |
| 44 | + // forwarded to the inner Question element explicitly. |
| 45 | + inheritAttrs: false, |
| 46 | +
|
| 47 | + props: QUESTION_PROPS, |
| 48 | + emits: QUESTION_EMITS, |
| 49 | +
|
| 50 | + setup(props, { emit }) { |
| 51 | + const stickySentinel = ref<HTMLElement | null>(null) |
| 52 | + const questionElement = ref<{ $el: HTMLElement } | null>(null) |
| 53 | + const question = useQuestion(props, { |
| 54 | + emit, |
| 55 | + rootElement: questionElement, |
| 56 | + }) |
| 57 | + const isStuck = ref(false) |
| 58 | + let observer: IntersectionObserver | null = null |
| 59 | +
|
| 60 | + /** |
| 61 | + * Watch the sentinel right before the sticky section to detect when it |
| 62 | + * is stuck to the top, so the description can be limited while scrolling |
| 63 | + */ |
| 64 | + onMounted(() => { |
| 65 | + if (!props.readOnly || !stickySentinel.value) { |
| 66 | + return |
| 67 | + } |
| 68 | + const top = |
| 69 | + parseFloat( |
| 70 | + getComputedStyle( |
| 71 | + questionElement.value?.$el ?? stickySentinel.value, |
| 72 | + ).top, |
| 73 | + ) || 0 |
| 74 | + observer = new IntersectionObserver( |
| 75 | + ([entry]) => { |
| 76 | + // Once the sentinel scrolled past the sticky offset the |
| 77 | + // section is stuck to the top |
| 78 | + isStuck.value = entry.boundingClientRect.top < top |
| 79 | + }, |
| 80 | + { rootMargin: `-${top + 1}px 0px 0px 0px` }, |
| 81 | + ) |
| 82 | + observer.observe(stickySentinel.value) |
| 83 | + }) |
| 84 | +
|
| 85 | + onBeforeUnmount(() => { |
| 86 | + observer?.disconnect() |
| 87 | + }) |
| 88 | +
|
| 89 | + /** |
| 90 | + * Sections cannot be answered, they are always valid |
| 91 | + */ |
| 92 | + const validate = async (): Promise<boolean> => true |
| 93 | +
|
| 94 | + /** |
| 95 | + * Scrolling the sentinel into view un-sticks the section so the full |
| 96 | + * description becomes visible again |
| 97 | + */ |
| 98 | + const onSectionClick = (): void => { |
| 99 | + if (isStuck.value) { |
| 100 | + stickySentinel.value?.scrollIntoView({ behavior: 'smooth' }) |
| 101 | + } |
| 102 | + } |
| 103 | +
|
| 104 | + return { |
| 105 | + ...question, |
| 106 | + isStuck, |
| 107 | + stickySentinel, |
| 108 | + questionElement, |
| 109 | + validate, |
| 110 | + onSectionClick, |
| 111 | + } |
| 112 | + }, |
| 113 | +}) |
| 114 | +</script> |
| 115 | + |
| 116 | +<style lang="scss" scoped> |
| 117 | +.question-section__sentinel { |
| 118 | + height: 0; |
| 119 | + margin: 0; |
| 120 | + padding: 0; |
| 121 | + list-style: none; |
| 122 | + // Land below the sticky top offset when scrolling up to the section |
| 123 | + scroll-margin-block-start: calc( |
| 124 | + var(--default-clickable-area) + 2 * var(--app-navigation-padding, 0px) + |
| 125 | + var(--default-grid-baseline, 4px) |
| 126 | + ); |
| 127 | +} |
| 128 | +</style> |
0 commit comments