From e7251220d5624b9b210a0c4a0b3e33da96e5ccc6 Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 17 Jul 2023 08:46:32 +0000 Subject: [PATCH] =?UTF-8?q?RouterView=E3=81=ABScrollPositiionManager?= =?UTF-8?q?=E3=82=92=E5=9F=8B=E3=82=81=E8=BE=BC=E3=82=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/MkPageWindow.vue | 7 +- .../src/components/global/RouterView.vue | 46 +++++++++++-- packages/frontend/src/nirax.ts | 66 +++++++------------ packages/frontend/src/ui/deck/main-column.vue | 6 +- packages/frontend/src/ui/universal.vue | 5 +- 5 files changed, 69 insertions(+), 61 deletions(-) diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue index 6e35ad424..af9c95eea 100644 --- a/packages/frontend/src/components/MkPageWindow.vue +++ b/packages/frontend/src/components/MkPageWindow.vue @@ -18,7 +18,7 @@
- +
@@ -32,12 +32,11 @@ import copyToClipboard from '@/scripts/copy-to-clipboard'; import { url } from '@/config'; import { mainRouter, routes, page } from '@/router'; import { $i } from '@/account'; -import { Router, useScrollPositionManager } from '@/nirax'; +import { Router } from '@/nirax'; import { i18n } from '@/i18n'; import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata'; import { openingWindowsCount } from '@/os'; import { claimAchievement } from '@/scripts/achievements'; -import { getScrollContainer } from '@/scripts/scroll'; const props = defineProps<{ initialPath: string; @@ -141,8 +140,6 @@ function popout() { windowEl.close(); } -useScrollPositionManager(() => getScrollContainer(contents.value), router); - onMounted(() => { openingWindowsCount.value++; if (openingWindowsCount.value >= 3) { diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue index 5763c84e8..76b1559a3 100644 --- a/packages/frontend/src/components/global/RouterView.vue +++ b/packages/frontend/src/components/global/RouterView.vue @@ -11,12 +11,18 @@ diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts index 3a03444de..5a92507bc 100644 --- a/packages/frontend/src/nirax.ts +++ b/packages/frontend/src/nirax.ts @@ -49,24 +49,30 @@ function parsePath(path: string): ParsedPath { return res; } +export type NiraxChangeEvent = { + beforePath: string; + path: string; + resolved: Resolved; + key: string; +}; + +export type NiraxExportEvent = { + path: string; + key: string; +}; + +export type NiraxPushEvent = { + beforePath: string; + path: string; + route: RouteDef | null; + props: Map | null; + key: string; +}; + export class Router extends EventEmitter<{ - change: (ctx: { - beforePath: string; - path: string; - resolved: Resolved; - key: string; - }) => void; - replace: (ctx: { - path: string; - key: string; - }) => void; - push: (ctx: { - beforePath: string; - path: string; - route: RouteDef | null; - props: Map | null; - key: string; - }) => void; + change: (ctx: NiraxChangeEvent) => void; + replace: (ctx: NiraxExportEvent) => void; + push: (ctx: NiraxExportEvent) => void; same: () => void; }> { private routes: RouteDef[]; @@ -271,29 +277,3 @@ export class Router extends EventEmitter<{ this.navigate(path, key); } } - -export function useScrollPositionManager(getScrollContainer: () => HTMLElement, router: Router) { - const scrollPosStore = new Map(); - - onMounted(() => { - const scrollContainer = getScrollContainer(); - - scrollContainer.addEventListener('scroll', () => { - scrollPosStore.set(router.getCurrentKey(), scrollContainer.scrollTop); - }, { passive: true }); - - router.addListener('change', ctx => { - const scrollPos = scrollPosStore.get(ctx.key) ?? 0; - scrollContainer.scroll({ top: scrollPos, behavior: 'instant' }); - if (scrollPos !== 0) { - window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール - scrollContainer.scroll({ top: scrollPos, behavior: 'instant' }); - }, 100); - } - }); - - router.addListener('same', () => { - scrollContainer.scroll({ top: 0, behavior: 'smooth' }); - }); - }); -} diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue index 041330795..9d730171e 100644 --- a/packages/frontend/src/ui/deck/main-column.vue +++ b/packages/frontend/src/ui/deck/main-column.vue @@ -8,7 +8,7 @@
- +
@@ -21,8 +21,6 @@ import * as os from '@/os'; import { i18n } from '@/i18n'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata'; -import { useScrollPositionManager } from '@/nirax'; -import { getScrollContainer } from '@/scripts/scroll'; defineProps<{ column: Column; @@ -66,6 +64,4 @@ function onContextmenu(ev: MouseEvent) { }, }], ev); } - -useScrollPositionManager(() => getScrollContainer(contents.value), mainRouter); diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 9ae43c39d..4f80e8cbb 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -4,7 +4,7 @@ - +
@@ -95,7 +95,6 @@ import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata'; import { deviceKind } from '@/scripts/device-kind'; import { miLocalStorage } from '@/local-storage'; import { CURRENT_STICKY_BOTTOM } from '@/const'; -import { useScrollPositionManager } from '@/nirax'; const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); @@ -214,8 +213,6 @@ watch($$(navFooter), () => { }, { immediate: true, }); - -useScrollPositionManager(() => contents.value.rootEl, mainRouter);