iceshrimp/packages/client/src/router.ts

254 lines
8.0 KiB
TypeScript
Raw Normal View History

import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
import { Router } from '@/nirax';
import { $i, iAmModerator } from '@/account';
2021-11-12 02:02:25 +09:00
import MkLoading from '@/pages/_loading_.vue';
import MkError from '@/pages/_error_.vue';
import { ui } from '@/config';
const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
loader: loader,
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 20:12:00 +09:00
loadingComponent: MkLoading,
errorComponent: MkError,
});
2020-02-05 14:39:52 +09:00
export const routes = [{
name: 'user',
path: '/@:acct/:page?',
component: page(() => import('./pages/user/index.vue')),
}, {
path: '/@:initUser/pages/:initPageName/view-source',
component: page(() => import('./pages/page-editor/page-editor.vue')),
}, {
path: '/@:username/pages/:pageName',
component: page(() => import('./pages/page.vue')),
}, {
name: 'note',
path: '/notes/:noteId',
component: page(() => import('./pages/note.vue')),
}, {
path: '/clips/:clipId',
component: page(() => import('./pages/clip.vue')),
}, {
path: '/user-info/:userId',
component: page(() => import('./pages/user-info.vue')),
}, {
path: '/instance-info/:host',
component: page(() => import('./pages/instance-info.vue')),
}, {
name: 'settings',
path: '/settings/:initialPage(*)?',
component: page(() => import('./pages/settings/index.vue')),
}, {
path: '/reset-password/:token?',
component: page(() => import('./pages/reset-password.vue')),
}, {
path: '/signup-complete/:code',
component: page(() => import('./pages/signup-complete.vue')),
}, {
path: '/announcements',
component: page(() => import('./pages/announcements.vue')),
}, {
path: '/about',
component: page(() => import('./pages/about.vue')),
}, {
path: '/about-misskey',
component: page(() => import('./pages/about-misskey.vue')),
}, {
path: '/featured',
component: page(() => import('./pages/featured.vue')),
}, {
path: '/theme-editor',
component: page(() => import('./pages/theme-editor.vue')),
}, {
path: '/explore/tags/:tag',
component: page(() => import('./pages/explore.vue')),
}, {
path: '/explore',
component: page(() => import('./pages/explore.vue')),
}, {
path: '/federation',
component: page(() => import('./pages/federation.vue')),
}, {
path: '/emojis',
component: page(() => import('./pages/emojis.vue')),
}, {
path: '/search',
component: page(() => import('./pages/search.vue')),
query: {
q: 'query',
channel: 'channel',
},
}, {
path: '/authorize-follow',
component: page(() => import('./pages/follow.vue')),
}, {
path: '/share',
component: page(() => import('./pages/share.vue')),
}, {
path: '/api-console',
component: page(() => import('./pages/api-console.vue')),
}, {
path: '/mfm-cheat-sheet',
component: page(() => import('./pages/mfm-cheat-sheet.vue')),
}, {
path: '/scratchpad',
component: page(() => import('./pages/scratchpad.vue')),
}, {
path: '/preview',
component: page(() => import('./pages/preview.vue')),
}, {
path: '/auth/:token',
component: page(() => import('./pages/auth.vue')),
}, {
path: '/miauth/:session',
component: page(() => import('./pages/miauth.vue')),
query: {
callback: 'callback',
name: 'name',
icon: 'icon',
permission: 'permission',
},
}, {
path: '/tags/:tag',
component: page(() => import('./pages/tag.vue')),
}, {
path: '/pages/new',
component: page(() => import('./pages/page-editor/page-editor.vue')),
}, {
path: '/pages/edit/:initPageId',
component: page(() => import('./pages/page-editor/page-editor.vue')),
}, {
path: '/pages',
component: page(() => import('./pages/pages.vue')),
}, {
path: '/gallery/:postId/edit',
component: page(() => import('./pages/gallery/edit.vue')),
}, {
path: '/gallery/new',
component: page(() => import('./pages/gallery/edit.vue')),
}, {
path: '/gallery/:postId',
component: page(() => import('./pages/gallery/post.vue')),
}, {
path: '/gallery',
component: page(() => import('./pages/gallery/index.vue')),
}, {
path: '/channels/:channelId/edit',
component: page(() => import('./pages/channel-editor.vue')),
}, {
path: '/channels/new',
component: page(() => import('./pages/channel-editor.vue')),
}, {
path: '/channels/:channelId',
component: page(() => import('./pages/channel.vue')),
}, {
path: '/channels',
component: page(() => import('./pages/channels.vue')),
}, {
path: '/admin/file/:fileId',
component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),
}, {
path: '/admin/:initialPage(*)?',
component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page(() => import('./pages/not-found.vue')),
}, {
path: '/my/notifications',
component: page(() => import('./pages/notifications.vue')),
}, {
path: '/my/favorites',
component: page(() => import('./pages/favorites.vue')),
}, {
path: '/my/messages',
component: page(() => import('./pages/messages.vue')),
}, {
path: '/my/mentions',
component: page(() => import('./pages/mentions.vue')),
}, {
name: 'messaging',
path: '/my/messaging',
component: page(() => import('./pages/messaging/index.vue')),
}, {
path: '/my/messaging/:userAcct',
component: page(() => import('./pages/messaging/messaging-room.vue')),
}, {
path: '/my/messaging/group/:groupId',
component: page(() => import('./pages/messaging/messaging-room.vue')),
}, {
path: '/my/drive/folder/:folder',
component: page(() => import('./pages/drive.vue')),
}, {
path: '/my/drive',
component: page(() => import('./pages/drive.vue')),
}, {
path: '/my/follow-requests',
component: page(() => import('./pages/follow-requests.vue')),
}, {
path: '/my/lists/:listId',
component: page(() => import('./pages/my-lists/list.vue')),
}, {
path: '/my/lists',
component: page(() => import('./pages/my-lists/index.vue')),
}, {
path: '/my/clips',
component: page(() => import('./pages/my-clips/index.vue')),
}, {
path: '/my/antennas/create',
component: page(() => import('./pages/my-antennas/create.vue')),
}, {
path: '/my/antennas/:antennaId',
component: page(() => import('./pages/my-antennas/edit.vue')),
}, {
path: '/my/antennas',
component: page(() => import('./pages/my-antennas/index.vue')),
}, {
path: '/timeline/list/:listId',
component: page(() => import('./pages/user-list-timeline.vue')),
}, {
path: '/timeline/antenna/:antennaId',
component: page(() => import('./pages/antenna-timeline.vue')),
}, {
name: 'index',
path: '/',
component: $i ? page(() => import('./pages/timeline.vue')) : page(() => import('./pages/welcome.vue')),
globalCacheKey: 'index',
}, {
path: '/(*)',
component: page(() => import('./pages/not-found.vue')),
}];
2020-02-06 22:10:33 +09:00
export const mainRouter = new Router(routes, location.pathname + location.search);
2021-08-07 19:19:31 +09:00
window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
2021-08-07 19:19:31 +09:00
// TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
// スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
2021-08-07 19:19:31 +09:00
const scrollPosStore = new Map<string, number>();
window.setInterval(() => {
scrollPosStore.set(window.history.state?.key, window.scrollY);
}, 1000);
2020-02-06 22:10:33 +09:00
mainRouter.addListener('push', ctx => {
window.history.pushState({ key: ctx.key }, '', ctx.path);
const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
window.scroll({ top: scrollPos, behavior: 'instant' });
if (scrollPos !== 0) {
window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
window.scroll({ top: scrollPos, behavior: 'instant' });
}, 1000);
2020-02-06 22:10:33 +09:00
}
});
window.addEventListener('popstate', (event) => {
mainRouter.change(location.pathname + location.search, event.state?.key);
const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
window.scroll({ top: scrollPos, behavior: 'instant' });
window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
window.scroll({ top: scrollPos, behavior: 'instant' });
}, 1000);
});
export function useRouter(): Router {
return inject<Router | null>('router', null) ?? mainRouter;
}