bf73f08cb2
Read note width from the CSS custom property at runtime (cached on first call) instead of duplicating the value in a JS constant.
38 lines
843 B
TypeScript
38 lines
843 B
TypeScript
import { onMounted, watch, type Ref } 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}vh`
|
|
} else {
|
|
container.style.width = `${
|
|
getNoteWidth() * (stackedNotes.value.length + 1)
|
|
}px`
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
resizeContainer()
|
|
})
|
|
|
|
watch(stackedNotes, resizeContainer, {
|
|
immediate: true,
|
|
})
|
|
}
|