versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ♻️ Only use a single localStorage key for scroll position

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-20 19:12:04 -10:00
parent bba222a2fc
commit e74dbe3d59
No known key found for this signature in database
3 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/timelines/account.vue
View file

@ -13,7 +13,7 @@ const client = useClient();
const timelineParameters = ref({}); const timelineParameters = ref({});
const { timeline, loadNext, loadPrev } = useAccountTimeline( const { timeline, loadNext, loadPrev } = useAccountTimeline(
client.value, client.value,
props.id ?? null, props.id || null,
timelineParameters, timelineParameters,
); );

13
components/timelines/timeline-scroller.vue
View file

@ -3,21 +3,24 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const root = useParentElement(); const root = useParentElement(useParentElement());
// Store and keep y to restore it on page change // Store and keep y to restore it on page change
const route = useRoute(); const route = useRoute();
const yStored = useLocalStorage(`lysand:scroll-${route.fullPath}`, 0); const yStored = useLocalStorage("lysand:scroll", {
[route.fullPath]: 0,
});
const { y } = useScroll(root); const { y } = useScroll(root);
useEventListener("popstate", async (event) => { useEventListener("popstate", async (event) => {
if (yStored.value !== null) { if (yStored.value[route.fullPath] !== undefined) {
// Wait for the Vue component to load // Wait for the Vue component to load
await new Promise((resolve) => setTimeout(resolve, 100)); await new Promise((resolve) => setTimeout(resolve, 100));
y.value = yStored.value; y.value = yStored.value[route.fullPath] ?? 0;
} }
}); });
onBeforeRouteLeave(() => { onBeforeRouteLeave(() => {
yStored.value = y.value; yStored.value[route.fullPath] = y.value;
yStored.value = { ...yStored.value };
}); });
</script> </script>

2
pages/[username]/index.vue
View file

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Account } from "@lysand-org/client/types"; import type { Account } from "@lysand-org/client/types";
import ErrorBoundary from "~/components/errors/ErrorBoundary.vue"; import ErrorBoundary from "~/components/errors/ErrorBoundary.vue";
import AccountProfile from "~/components/timelines/account.vue"; import AccountProfile from "~/components/social-elements/users/Account.vue";
import AccountTimeline from "~/components/timelines/account.vue"; import AccountTimeline from "~/components/timelines/account.vue";
import TimelineScroller from "~/components/timelines/timeline-scroller.vue"; import TimelineScroller from "~/components/timelines/timeline-scroller.vue";