diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue index 1983d22..b2aa1de 100644 --- a/src/components/FluxNote.vue +++ b/src/components/FluxNote.vue @@ -14,7 +14,7 @@ import StackedNote from '@/components/StackedNote.vue' import { useLinks } from '@/hooks/useLinks.hook' import { useMarkdown } from '@/hooks/useMarkdown.hook' import { useNote } from '@/hooks/useNote.hook' -import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook' +import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook' import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook' @@ -49,7 +49,7 @@ useUserSettings() const { visitRepo } = useVisitRepo({ user: user, repo: repo }) const { toHTML } = useMarkdown(repo) const { listenToClick } = useLinks('note-display') -const { stackedNotes, resetStackedNotes, scrollToTop } = useQueryStackedNotes() +const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes() const { titles } = useNote('note-container') @@ -85,7 +85,6 @@ onMounted(() => visitRepo()) onUnmounted(() => { store.resetFiles() - resetStackedNotes() }) const focusREADME = () => scrollToTop() @@ -100,10 +99,7 @@ const focusREADME = () => scrollToTop()

- + {{ repo }}

diff --git a/src/components/LinkedNotes.vue b/src/components/LinkedNotes.vue index 4631cdc..48bbf31 100644 --- a/src/components/LinkedNotes.vue +++ b/src/components/LinkedNotes.vue @@ -2,7 +2,7 @@ import { computed } from 'vue' import { useBacklinks } from '@/hooks/useBacklinks.hook' -import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook' +import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' const props = defineProps<{ sha: string @@ -11,7 +11,7 @@ const props = defineProps<{ const shaProp = computed((props) => props.sha) const { backlink } = useBacklinks(shaProp) -const { addStackedNote } = useQueryStackedNotes() +const { addStackedNote } = useRouteQueryStackedNotes() const hasBacklinks = computed(() => (backlink.value?.links.length ?? 0) > 0) const emitNote = (sha: string) => { diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index 9955bf9..59b2662 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -5,7 +5,7 @@ import { useFile } from '@/hooks/useFile.hook' import { useImages } from '@/hooks/useImages.hook' import { useLinks } from '@/hooks/useLinks.hook' import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook' -import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook' +import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { useTitleNotes } from '@/hooks/useTitleNotes.hook' import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' import { filenameToNoteTitle } from '@/utils/noteTitle' @@ -27,7 +27,7 @@ const sha = computed(() => props.sha) const index = computed(() => props.index) const repo = computed(() => props.repo) -const { scrollToFocusedNote } = useQueryStackedNotes() +const { scrollToFocusedNote } = useRouteQueryStackedNotes() const { content } = useFile(sha) const className = computed(() => `stacked-note-${props.index}`) diff --git a/src/hooks/useNote.hook.ts b/src/hooks/useNote.hook.ts index e09c72d..b6f466e 100644 --- a/src/hooks/useNote.hook.ts +++ b/src/hooks/useNote.hook.ts @@ -3,7 +3,7 @@ import { computed, onMounted, onUnmounted, watch } from 'vue' import { noteEventBus } from '@/bus/noteEventBus' import { NOTE_WIDTH } from '@/constants/note-width' import { useOverlay } from '@/hooks/useOverlay.hook' -import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook' +import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { resolvePath } from '@/modules/repo/services/resolvePath' import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' import { pathToNotePathTitle } from '@/utils/noteTitle' @@ -11,7 +11,7 @@ import { pathToNotePathTitle } from '@/utils/noteTitle' export const useNote = (containerClass: string) => { const store = useUserRepoStore() const { isMobile } = useOverlay(false) - const { stackedNotes, addStackedNote } = useQueryStackedNotes() + const { stackedNotes, addStackedNote } = useRouteQueryStackedNotes() const titles = computed(() => stackedNotes.value?.reduce((obj: Record, note) => { diff --git a/src/hooks/useNoteOverlay.hook.ts b/src/hooks/useNoteOverlay.hook.ts index a852c72..f6129e3 100644 --- a/src/hooks/useNoteOverlay.hook.ts +++ b/src/hooks/useNoteOverlay.hook.ts @@ -2,7 +2,7 @@ import { computed, onMounted, Ref, ref, toValue } from 'vue' import { NOTE_WIDTH } from '@/constants/note-width' import { useOverlay } from '@/hooks/useOverlay.hook' -import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook' +import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' const BOOKMARK_WIDTH = 2 @@ -22,7 +22,7 @@ export const useNoteOverlay = ( }) onMounted(() => { - const { stackedNotes } = useQueryStackedNotes() + const { stackedNotes } = useRouteQueryStackedNotes() const noteElement = document.querySelector( `.${className}` ) as HTMLElement | null diff --git a/src/hooks/useQueryStackedNotes.hook.ts b/src/hooks/useQueryStackedNotes.hook.ts deleted file mode 100644 index 8364d25..0000000 --- a/src/hooks/useQueryStackedNotes.hook.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { useWindowSize } from '@vueuse/core' -import { nextTick, readonly, ref } from 'vue' -import { useRoute, useRouter } from 'vue-router' - -import { NOTE_WIDTH } from '@/constants/note-width' -import { useOverlay } from '@/hooks/useOverlay.hook' -import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' - -const stackedNotes = ref([]) - -let initial = true - -export const useQueryStackedNotes = () => { - const { query } = useRoute() - const { push, currentRoute } = useRouter() - const store = useUserRepoStore() - const { height } = useWindowSize() - const { scrollToNote, isMobile } = useOverlay(false) - - const scrollToFocusedNote = (sha: string) => { - nextTick(() => { - const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha) - - const hasOneStackedNote = stackedNotes.value.length === 1 - - if (isMobile.value) { - const element = document.querySelector(`.note-${sha}`) as HTMLElement - const top = (index + 1) * (element?.clientHeight ?? height.value) - scrollToNote(top, hasOneStackedNote) - } else { - const margin = index * 44 - const left = (index + 1) * NOTE_WIDTH - margin - scrollToNote(left, hasOneStackedNote) - } - }) - } - - const resetStackedNotes = () => { - stackedNotes.value = Array.isArray(query.stackedNotes) - ? (query.stackedNotes as string[]) - : ([query.stackedNotes] - .map((n) => n?.toString()) - .filter((n) => !!n) as string[]) - } - - if (initial) { - initial = false - resetStackedNotes() - } - - const updateQueryStackedNotes = (newStackedNotes: string[]) => - (stackedNotes.value = newStackedNotes) - - const addStackedNote = (currentSHA: string, sha: string) => { - if (stackedNotes.value.includes(sha)) { - scrollToFocusedNote(sha) - return - } - - const getStackedNotes = () => { - if (!currentSHA) { - return [sha] - } - - const [splittedStackedNotes] = stackedNotes.value - .join(';') - .split(currentSHA) - - return [ - ...splittedStackedNotes.replaceAll(';;', ';').split(';'), - currentSHA, - sha - ].filter((sha) => !!sha) - } - - const newStackedNotes = getStackedNotes() - - push({ - name: currentRoute.value.name ?? 'FluxNoteView', - params: { - user: store.user, - repo: store.repo - }, - query: { - stackedNotes: newStackedNotes - } - }) - - updateQueryStackedNotes(newStackedNotes) - scrollToFocusedNote(sha) - } - - return { - stackedNotes: readonly(stackedNotes), - updateQueryStackedNotes, - addStackedNote, - resetStackedNotes, - scrollToFocusedNote, - scrollToTop: () => scrollToNote(0) - } -} diff --git a/src/hooks/useRouteQueryStackedNotes.hook.ts b/src/hooks/useRouteQueryStackedNotes.hook.ts new file mode 100644 index 0000000..4e4d215 --- /dev/null +++ b/src/hooks/useRouteQueryStackedNotes.hook.ts @@ -0,0 +1,80 @@ +import { useWindowSize } from '@vueuse/core' +import { useRouteQuery } from '@vueuse/router' +import { nextTick, readonly, watch } from 'vue' + +import { NOTE_WIDTH } from '@/constants/note-width' +import { useOverlay } from '@/hooks/useOverlay.hook' + +export const useRouteQueryStackedNotes = () => { + const stackedNotes = useRouteQuery('stackedNotes', undefined, { + transform: (value: string | string[] | undefined) => { + if (!value) { + return [] + } + + return Array.isArray(value) ? value : [value] + } + }) + const { height } = useWindowSize() + + const { scrollToNote, isMobile } = useOverlay(false) + + watch(stackedNotes, (val) => console.log(val)) + + const scrollToFocusedNote = ( + sha: string, + notes: string[] = stackedNotes.value + ) => { + nextTick(() => { + const index = notes.findIndex((noteSHA) => noteSHA === sha) + + const hasOneStackedNote = notes.length === 1 + + if (isMobile.value) { + const element = document.querySelector(`.note-${sha}`) as HTMLElement + const top = (index + 1) * (element?.clientHeight ?? height.value) + scrollToNote(top, hasOneStackedNote) + } else { + const margin = index * 44 + const left = (index + 1) * NOTE_WIDTH - margin + scrollToNote(left, hasOneStackedNote) + } + }) + } + + const addStackedNote = (currentSHA: string, sha: string) => { + if (!stackedNotes.value) { + return + } + + if (stackedNotes.value.includes(sha)) { + scrollToFocusedNote(sha) + return + } + + if (!currentSHA) { + stackedNotes.value = [sha] + } else { + const [splittedStackedNotes] = stackedNotes.value + .join(';') + .split(currentSHA) + + const newStackedNotes = [ + ...splittedStackedNotes.replaceAll(';;', ';').split(';'), + currentSHA, + sha + ].filter((sha) => !!sha) + + stackedNotes.value = newStackedNotes + } + + scrollToFocusedNote(sha, stackedNotes.value) + } + + return { + stackedNotes: readonly(stackedNotes), + addStackedNote, + scrollToFocusedNote, + scrollToTop: () => scrollToNote(0) + } +} diff --git a/src/hooks/useTitleNotes.hook.ts b/src/hooks/useTitleNotes.hook.ts index ff14f81..c2d8634 100644 --- a/src/hooks/useTitleNotes.hook.ts +++ b/src/hooks/useTitleNotes.hook.ts @@ -1,14 +1,14 @@ import { useTitle } from '@vueuse/core' import { computed, Ref, toValue, watch } from 'vue' -import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook' +import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { useNotes } from '@/modules/note/hooks/useNotes' import { pathToNoteTitle } from '@/utils/noteTitle' export const generateTitle = (titles: string[]) => titles.join(' | ') export const useTitleNotes = (prefix: Ref | string) => { - const { stackedNotes } = useQueryStackedNotes() + const { stackedNotes } = useRouteQueryStackedNotes() const { notes } = useNotes() const titleNotes = computed(() => notes.value diff --git a/src/views/ShareNotes.vue b/src/views/ShareNotes.vue index 3e502c1..295d29d 100644 --- a/src/views/ShareNotes.vue +++ b/src/views/ShareNotes.vue @@ -1,20 +1,14 @@