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 6e35ad4241..af9c95eeaf 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 5763c84e81..76b1559a30 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 3a03444de2..5a92507bce 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 0413307955..9d730171eb 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 9ae43c39d3..4f80e8cbbb 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);