68022971cd
Re-pin .note and .stacked-note to 100dvh on mobile and bring back the container height in useResizeContainer so (index + 1) * height has a reachable scroll target. Switch the polled scroll helper to that same formula instead of offsetTop.
43 lines
998 B
TypeScript
43 lines
998 B
TypeScript
import { onMounted, onUnmounted, type Ref, watch } from "vue"
|
|
|
|
import { getNoteWidth } from "@/constants/note-width"
|
|
import { useOverlay } from "@/hooks/useOverlay.hook"
|
|
|
|
export const useResizeContainer = (
|
|
containerClass: string,
|
|
stackedNotes: Readonly<Ref<readonly string[]>>
|
|
) => {
|
|
const { isMobile } = useOverlay(false)
|
|
|
|
const resizeContainer = () => {
|
|
const container = document.querySelector(
|
|
`.${containerClass}`
|
|
) as HTMLElement | null
|
|
|
|
if (!container) {
|
|
return
|
|
}
|
|
|
|
if (isMobile.value) {
|
|
container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh`
|
|
} else {
|
|
container.style.minWidth = `${
|
|
getNoteWidth() * (stackedNotes.value.length + 1)
|
|
}px`
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
resizeContainer()
|
|
window.addEventListener("resize", resizeContainer)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", resizeContainer)
|
|
})
|
|
|
|
watch(stackedNotes, resizeContainer, {
|
|
immediate: true
|
|
})
|
|
}
|