diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 57a965b..a72c7a4 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -3,7 +3,11 @@
class="stacked-note"
:class="{ [className]: true, overlay: displayNoteOverlay }"
>
-
{{ title }}
+
@@ -13,6 +17,7 @@ import { computed, defineComponent, nextTick, watch } from 'vue'
import { useFile } from '@/hooks/useFile.hook'
import { useLinks } from '@/hooks/useLinks.hook'
import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
+import { useFocus } from '@/hooks/useFocus.hook'
export default defineComponent({
name: 'StackedNote',
@@ -26,6 +31,7 @@ export default defineComponent({
setup(props) {
const { content } = useFile(props.user, props.repo, props.sha)
const { listenToClick } = useLinks('stacked-note', props.sha)
+ const { scrollToFocusedNote } = useFocus()
const className = computed(() => `stacked-note-${props.index}`)
const titleClassName = computed(() => `title-${className.value}`)
@@ -39,7 +45,13 @@ export default defineComponent({
}
})
- return { content, titleClassName, className, displayNoteOverlay }
+ return {
+ content,
+ titleClassName,
+ className,
+ displayNoteOverlay,
+ focus: () => scrollToFocusedNote(props.sha)
+ }
}
})
@@ -64,6 +76,10 @@ $border-color: rgba(18, 19, 58, 0.2);
top: 1rem;
left: 1.5rem;
direction: rtl;
+
+ a {
+ color: #363636;
+ }
}
@media screen and (max-width: 768px) {
diff --git a/src/hooks/useFocus.hook.ts b/src/hooks/useFocus.hook.ts
index 5117eb7..df633b6 100644
--- a/src/hooks/useFocus.hook.ts
+++ b/src/hooks/useFocus.hook.ts
@@ -1,14 +1,23 @@
import { NOTE_WIDTH } from '@/constants/note-width'
import { useOverlay } from '@/hooks/useOverlay.hook'
-import { nextTick } from 'vue'
-import { LocationQueryValue } from 'vue-router'
+import { computed, nextTick } from 'vue'
+import { LocationQueryValue, useRoute } from 'vue-router'
export const useFocus = () => {
const { scrollToNote } = useOverlay(false)
+ const { query } = useRoute()
+
+ const initialStackedNotes = computed(() =>
+ query.stackedNotes
+ ? Array.isArray(query.stackedNotes)
+ ? query.stackedNotes
+ : [query.stackedNotes]
+ : []
+ )
const scrollToFocusedNote = (
- stackedNotes: LocationQueryValue[],
- sha?: string
+ sha?: string,
+ stackedNotes: LocationQueryValue[] = initialStackedNotes.value
) => {
if (!sha) {
return
diff --git a/src/hooks/useNote.hook.ts b/src/hooks/useNote.hook.ts
index 0a5a4fd..c0899b3 100644
--- a/src/hooks/useNote.hook.ts
+++ b/src/hooks/useNote.hook.ts
@@ -61,7 +61,7 @@ export const useNote = (
}, {})
)
- const unsubscribe = noteEventBus.addEventBusListener(
+ const unsubscribeLink = noteEventBus.addEventBusListener(
({ path, currentNoteSHA }) => {
const currentFile = tree.value.find((file) => file.sha === currentNoteSHA)
@@ -76,7 +76,7 @@ export const useNote = (
const file = tree.value.find((file) => file.path === finalPath)
if (!file?.sha || stackedNotes.value.includes(file.sha)) {
- scrollToFocusedNote(stackedNotes.value, file?.sha)
+ scrollToFocusedNote(file?.sha, stackedNotes.value)
return
}
@@ -115,7 +115,7 @@ export const useNote = (
stackedNotes.value = newStackedNotes
- scrollToFocusedNote(stackedNotes.value, file.sha)
+ scrollToFocusedNote(file.sha, stackedNotes.value)
}
)
@@ -140,7 +140,7 @@ export const useNote = (
})
onUnmounted(() => {
- unsubscribe()
+ unsubscribeLink()
})
watch(stackedNotes, resizeContainer, {