Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

chore: avoid scroll to top when switching tabs

Browse source
This commit is contained in:
userquin 2023-01-08 17:33:19 +01:00
parent cd03f3fa1e
commit be30faaa0f
3 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/common/CommonRouteTabs.vue
View file

@ -15,6 +15,7 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
}>() }>()
const router = useRouter() const router = useRouter()
const nuxtApp = useNuxtApp()
useCommands(() => command useCommands(() => command
? options.map(tab => ({ ? options.map(tab => ({
@ -24,7 +25,15 @@ useCommands(() => command
icon: tab.icon ?? 'i-ri:file-list-2-line', icon: tab.icon ?? 'i-ri:file-list-2-line',
onActivate: () => router.replace(tab.to), onActivate: () => router.replace(tab.to),
})) }))
: []) : [],
)
const handleClick = (to: RouteLocationRaw) => {
if (preventScrollTop || nuxtApp.$preventScrollToTop(router.resolve(to).fullPath))
return
nuxtApp.$scrollToTop()
}
</script> </script>
<template> <template>
@ -41,7 +50,7 @@ useCommands(() => command
tabindex="1" tabindex="1"
hover:bg-active transition-100 hover:bg-active transition-100
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)" exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
@click="!preventScrollTop && $scrollToTop()" @click="handleClick(option.to)"
> >
<span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span> <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
</NuxtLink> </NuxtLink>

2
components/notification/NotificationCard.vue
View file

@ -14,7 +14,7 @@ function click() {
<template> <template>
<article flex flex-col relative> <article flex flex-col relative>
<template v-if="notification.type === 'follow'"> <template v-if="notification.type === 'follow'">
<NuxtLink :to="getAccountRoute(notification.account)" @click.capture="click"> <NuxtLink :to="getAccountRoute(notification.account)" @click="click">
<div <div
flex items-center absolute flex items-center absolute
ps-3 pe-4 inset-is-0 ps-3 pe-4 inset-is-0

3
plugins/remember-scroll-position.client.ts
View file

@ -6,6 +6,7 @@ interface RestoreScroll {
id: string id: string
type: 'status' | 'follow' type: 'status' | 'follow'
} }
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {
const lastStatus = useSessionStorage<Record<string, RestoreScroll>>(STORAGE_KEY_LAST_SCROLL_POSITION, {}) const lastStatus = useSessionStorage<Record<string, RestoreScroll>>(STORAGE_KEY_LAST_SCROLL_POSITION, {})
return { return {
@ -20,7 +21,7 @@ export default defineNuxtPlugin(() => {
? document.getElementById(`status-${restore.id}`) ? document.getElementById(`status-${restore.id}`)
: document.querySelector(`a[href="${restore.id}"]`) : document.querySelector(`a[href="${restore.id}"]`)
if (el) if (el)
nextTick().then(() => el?.scrollIntoView()) el.scrollIntoView()
else else
delete lastStatus.value[useRoute().fullPath] delete lastStatus.value[useRoute().fullPath]
} }