117 lines
3.5 KiB
TypeScript
117 lines
3.5 KiB
TypeScript
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
|
|
|
export const VISIBLE_ROWS = 5
|
|
export const CENTER_OFFSET = (VISIBLE_ROWS - 1) / 2 // 2
|
|
|
|
/** Index de valeur logique (0..length-1) centré pour un scrollTop donné. */
|
|
export function valueIndexFromScroll(scrollTop: number, itemHeight: number, length: number): number {
|
|
const flat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
|
return ((flat % length) + length) % length
|
|
}
|
|
|
|
/** scrollTop qui centre l'index donné dans la copie du milieu (buffer à 3 copies). */
|
|
export function scrollTopForValueIndex(valueIndex: number, itemHeight: number, length: number): number {
|
|
const flat = length + valueIndex - CENTER_OFFSET
|
|
return flat * itemHeight
|
|
}
|
|
|
|
/** Recentre le scrollTop dans la copie du milieu [length, 2*length) si on a dérivé. */
|
|
export function loopCorrection(scrollTop: number, itemHeight: number, length: number): number {
|
|
const block = length * itemHeight
|
|
const centeredFlat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
|
if (centeredFlat < length) return scrollTop + block
|
|
if (centeredFlat >= 2 * length) return scrollTop - block
|
|
return scrollTop
|
|
}
|
|
|
|
export interface UseInfiniteWheelOptions {
|
|
length: number
|
|
itemHeight: number
|
|
initialIndex: () => number
|
|
onChange: (index: number) => void
|
|
}
|
|
|
|
export function useInfiniteWheel(
|
|
containerRef: Ref<HTMLElement | null>,
|
|
options: UseInfiniteWheelOptions,
|
|
) {
|
|
const centeredIndex = ref(options.initialIndex())
|
|
let programmatic = false
|
|
let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
|
|
|
|
function readCentered() {
|
|
const el = containerRef.value
|
|
if (!el) return
|
|
centeredIndex.value = valueIndexFromScroll(el.scrollTop, options.itemHeight, options.length)
|
|
}
|
|
|
|
function settle() {
|
|
const el = containerRef.value
|
|
if (!el) return
|
|
const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
|
|
if (corrected !== el.scrollTop) {
|
|
programmatic = true
|
|
el.scrollTop = corrected
|
|
}
|
|
readCentered()
|
|
options.onChange(centeredIndex.value)
|
|
}
|
|
|
|
function onScroll() {
|
|
if (programmatic) {
|
|
programmatic = false
|
|
return
|
|
}
|
|
readCentered()
|
|
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
|
scrollEndTimer = setTimeout(settle, 120)
|
|
}
|
|
|
|
function scrollToIndex(index: number, smooth = true) {
|
|
const el = containerRef.value
|
|
centeredIndex.value = index
|
|
if (el) {
|
|
programmatic = true
|
|
const top = scrollTopForValueIndex(index, options.itemHeight, options.length)
|
|
if (smooth && typeof el.scrollTo === 'function') {
|
|
el.scrollTo({top, behavior: 'smooth'})
|
|
}
|
|
else {
|
|
el.scrollTop = top
|
|
}
|
|
}
|
|
options.onChange(index)
|
|
}
|
|
|
|
function step(delta: number) {
|
|
const next = (((centeredIndex.value + delta) % options.length) + options.length) % options.length
|
|
scrollToIndex(next)
|
|
}
|
|
|
|
function onKeydown(event: KeyboardEvent) {
|
|
if (event.key === 'ArrowUp') {
|
|
event.preventDefault()
|
|
step(-1)
|
|
}
|
|
else if (event.key === 'ArrowDown') {
|
|
event.preventDefault()
|
|
step(1)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
const el = containerRef.value
|
|
if (!el) return
|
|
el.addEventListener('scroll', onScroll, {passive: true})
|
|
programmatic = true
|
|
el.scrollTop = scrollTopForValueIndex(options.initialIndex(), options.itemHeight, options.length)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
containerRef.value?.removeEventListener('scroll', onScroll)
|
|
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
|
})
|
|
|
|
return {centeredIndex, scrollToIndex, step, onKeydown}
|
|
}
|