41 lines
987 B
TypeScript
41 lines
987 B
TypeScript
import { computed, onMounted, ref } from '@vue/runtime-core'
|
|
|
|
import { NOTE_WIDTH } from '@/constants/note-width'
|
|
import { useOverlay } from '@/hooks/useOverlay.hook'
|
|
|
|
const BOOKMARK_WIDTH = 2
|
|
const BOOKMARK_HEIGHT = 2.5
|
|
|
|
export const useNoteOverlay = (className: string, index: number) => {
|
|
const { x, y, isMobile } = useOverlay()
|
|
const noteHeight = ref(0)
|
|
const displayNoteOverlay = computed(() => {
|
|
if (isMobile.value) {
|
|
return y.value > index * noteHeight.value
|
|
} else {
|
|
return x.value > index * NOTE_WIDTH
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
const noteElement = document.querySelector(
|
|
`.${className}`
|
|
) as HTMLElement | null
|
|
|
|
if (!noteElement) {
|
|
return
|
|
}
|
|
noteHeight.value = noteElement.clientHeight
|
|
|
|
if (isMobile.value) {
|
|
noteElement.style.top = `${(index + 1) * BOOKMARK_HEIGHT}rem`
|
|
} else {
|
|
noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
|
|
}
|
|
})
|
|
|
|
return {
|
|
displayNoteOverlay
|
|
}
|
|
}
|