|
| 1 | +/* |
| 2 | + * This file is part of the QuestionPy SDK. (https://questionpy.org) |
| 3 | + * The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md. |
| 4 | + * (c) Technische Universität Berlin, innoCampus <[email protected]> |
| 5 | + */ |
| 6 | + |
| 7 | +import { nextTick, onMounted, type Ref, ref, watch } from 'vue' |
| 8 | + |
| 9 | +/** |
| 10 | + * Composable for scrolling to and temporarily highlighting items when they are added or referenced in history. |
| 11 | + * |
| 12 | + * The composable tracks items by ID, scrolls them into view, and exposes which IDs are currently highlighted. |
| 13 | + * |
| 14 | + * @template T - Type of the items in the collection. |
| 15 | + * @param items Reactive object mapping IDs to items. |
| 16 | + * @param idGenerator Function to generate the HTML element ID from an item ID. |
| 17 | + * @param options Optional configuration: |
| 18 | + * - `historyStateKey`: Key in `history.state` to check for an initial item to highlight (default: `'highlightId'`). |
| 19 | + * - `scrollBehavior`: Scroll options for `scrollIntoView` (default: `{ behavior: 'smooth', block: 'center' }`). |
| 20 | + * - `highlightDelay`: Time to wait before highlighting to compensate for scrolling delay. |
| 21 | + * @returns Object with: |
| 22 | + * - `handleNewItem(id: string)`: Add an ID to be scrolled to and highlighted when it appears. |
| 23 | + * - `highlightedIds`: Reactive set of IDs currently highlighted. |
| 24 | + */ |
| 25 | +function useHighlightOnInsert<T>( |
| 26 | + items: Ref<Record<string, T>>, |
| 27 | + idGenerator: (id: string) => string, |
| 28 | + options: { |
| 29 | + historyStateKey?: string |
| 30 | + scrollBehavior?: ScrollIntoViewOptions |
| 31 | + highlightDelay?: 600 |
| 32 | + } = {}, |
| 33 | +) { |
| 34 | + // Default options |
| 35 | + const { |
| 36 | + historyStateKey = 'highlightId', |
| 37 | + scrollBehavior = { |
| 38 | + behavior: 'smooth', |
| 39 | + block: 'center', |
| 40 | + }, |
| 41 | + } = options |
| 42 | + |
| 43 | + const pendingIds = ref<Set<string>>(new Set()) |
| 44 | + const highlightedIds = ref<Set<string>>(new Set()) |
| 45 | + |
| 46 | + // Handle highlighting after navigation |
| 47 | + onMounted(() => { |
| 48 | + const highlightId = history.state?.[historyStateKey] |
| 49 | + if (typeof highlightId === 'string') { |
| 50 | + pendingIds.value.add(highlightId) |
| 51 | + } |
| 52 | + }) |
| 53 | + |
| 54 | + // Watch for pending items to appear in the list |
| 55 | + watch(items, async (newItems, oldItems) => { |
| 56 | + for (const id of pendingIds.value) { |
| 57 | + if (newItems[id] && !oldItems?.[id]) { |
| 58 | + pendingIds.value.delete(id) |
| 59 | + await nextTick() |
| 60 | + |
| 61 | + const el = document.getElementById(idGenerator(id)) |
| 62 | + if (el) { |
| 63 | + el.scrollIntoView(scrollBehavior) |
| 64 | + // Unfortunately, scrollIntoView does not return a Promise |
| 65 | + setTimeout(() => { |
| 66 | + highlightedIds.value.add(id) |
| 67 | + el.addEventListener( |
| 68 | + 'animationend', |
| 69 | + () => { |
| 70 | + highlightedIds.value.delete(id) |
| 71 | + }, |
| 72 | + { once: true }, |
| 73 | + ) |
| 74 | + }, options.highlightDelay) |
| 75 | + } |
| 76 | + } |
| 77 | + } |
| 78 | + }) |
| 79 | + |
| 80 | + return { |
| 81 | + handleNewItem: (id: string) => { |
| 82 | + pendingIds.value.add(id) |
| 83 | + }, |
| 84 | + highlightedIds, |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +export default useHighlightOnInsert |
0 commit comments