parent
							
								
									e3bad795e0
								
							
						
					
					
						commit
						17500fc9c9
					
				
					 2 changed files with 366 additions and 363 deletions
				
			
		|  | @ -39,9 +39,10 @@ import { reactionPicker } from '@/scripts/reaction-picker'; | ||||||
| import { getUrlWithoutLoginId } from '@/scripts/login-id'; | import { getUrlWithoutLoginId } from '@/scripts/login-id'; | ||||||
| import { getAccountFromId } from '@/scripts/get-account-from-id'; | import { getAccountFromId } from '@/scripts/get-account-from-id'; | ||||||
| 
 | 
 | ||||||
| console.info(`Misskey v${version}`); | (async () => { | ||||||
|  | 	console.info(`Misskey v${version}`); | ||||||
| 
 | 
 | ||||||
| if (_DEV_) { | 	if (_DEV_) { | ||||||
| 		console.warn('Development mode!!!'); | 		console.warn('Development mode!!!'); | ||||||
| 
 | 
 | ||||||
| 		console.info(`vue ${vueVersion}`); | 		console.info(`vue ${vueVersion}`); | ||||||
|  | @ -70,44 +71,44 @@ if (_DEV_) { | ||||||
| 			}); | 			}); | ||||||
| 			*/ | 			*/ | ||||||
| 		}); | 		}); | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| // タッチデバイスでCSSの:hoverを機能させる
 | 	// タッチデバイスでCSSの:hoverを機能させる
 | ||||||
| document.addEventListener('touchend', () => {}, { passive: true }); | 	document.addEventListener('touchend', () => {}, { passive: true }); | ||||||
| 
 | 
 | ||||||
| // 一斉リロード
 | 	// 一斉リロード
 | ||||||
| reloadChannel.addEventListener('message', path => { | 	reloadChannel.addEventListener('message', path => { | ||||||
| 		if (path !== null) location.href = path; | 		if (path !== null) location.href = path; | ||||||
| 		else location.reload(); | 		else location.reload(); | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 | 	//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 | ||||||
| // TODO: いつの日にか消したい
 | 	// TODO: いつの日にか消したい
 | ||||||
| const vh = window.innerHeight * 0.01; |  | ||||||
| document.documentElement.style.setProperty('--vh', `${vh}px`); |  | ||||||
| window.addEventListener('resize', () => { |  | ||||||
| 	const vh = window.innerHeight * 0.01; | 	const vh = window.innerHeight * 0.01; | ||||||
| 	document.documentElement.style.setProperty('--vh', `${vh}px`); | 	document.documentElement.style.setProperty('--vh', `${vh}px`); | ||||||
| }); | 	window.addEventListener('resize', () => { | ||||||
| //#endregion
 | 		const vh = window.innerHeight * 0.01; | ||||||
|  | 		document.documentElement.style.setProperty('--vh', `${vh}px`); | ||||||
|  | 	}); | ||||||
|  | 	//#endregion
 | ||||||
| 
 | 
 | ||||||
| // If mobile, insert the viewport meta tag
 | 	// If mobile, insert the viewport meta tag
 | ||||||
| if (['smartphone', 'tablet'].includes(deviceKind)) { | 	if (['smartphone', 'tablet'].includes(deviceKind)) { | ||||||
| 		const viewport = document.getElementsByName('viewport').item(0); | 		const viewport = document.getElementsByName('viewport').item(0); | ||||||
| 		viewport.setAttribute('content', | 		viewport.setAttribute('content', | ||||||
| 			`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); | 			`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| //#region Set lang attr
 | 	//#region Set lang attr
 | ||||||
| const html = document.documentElement; | 	const html = document.documentElement; | ||||||
| html.setAttribute('lang', lang); | 	html.setAttribute('lang', lang); | ||||||
| //#endregion
 | 	//#endregion
 | ||||||
| 
 | 
 | ||||||
| //#region loginId
 | 	//#region loginId
 | ||||||
| const params = new URLSearchParams(location.search); | 	const params = new URLSearchParams(location.search); | ||||||
| const loginId = params.get('loginId'); | 	const loginId = params.get('loginId'); | ||||||
| 
 | 
 | ||||||
| if (loginId) { | 	if (loginId) { | ||||||
| 		const target = getUrlWithoutLoginId(location.href); | 		const target = getUrlWithoutLoginId(location.href); | ||||||
| 
 | 
 | ||||||
| 		if (!$i || $i.id !== loginId) { | 		if (!$i || $i.id !== loginId) { | ||||||
|  | @ -118,18 +119,18 @@ if (loginId) { | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
| 		history.replaceState({ misskey: 'loginId' }, '', target); | 		history.replaceState({ misskey: 'loginId' }, '', target); | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| //#endregion
 | 	//#endregion
 | ||||||
| 
 | 
 | ||||||
| //#region Fetch user
 | 	//#region Fetch user
 | ||||||
| if ($i && $i.token) { | 	if ($i && $i.token) { | ||||||
| 		if (_DEV_) { | 		if (_DEV_) { | ||||||
| 			console.log('account cache found. refreshing...'); | 			console.log('account cache found. refreshing...'); | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
| 		refreshAccount(); | 		refreshAccount(); | ||||||
| } else { | 	} else { | ||||||
| 		if (_DEV_) { | 		if (_DEV_) { | ||||||
| 			console.log('no account cache found.'); | 			console.log('no account cache found.'); | ||||||
| 		} | 		} | ||||||
|  | @ -155,51 +156,51 @@ if ($i && $i.token) { | ||||||
| 				console.log('not signed in'); | 				console.log('not signed in'); | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| } | 	} | ||||||
| //#endregion
 | 	//#endregion
 | ||||||
| 
 | 
 | ||||||
| const fetchInstanceMetaPromise = fetchInstance(); | 	const fetchInstanceMetaPromise = fetchInstance(); | ||||||
| 
 | 
 | ||||||
| fetchInstanceMetaPromise.then(() => { | 	fetchInstanceMetaPromise.then(() => { | ||||||
| 		localStorage.setItem('v', instance.version); | 		localStorage.setItem('v', instance.version); | ||||||
| 
 | 
 | ||||||
| 		// Init service worker
 | 		// Init service worker
 | ||||||
| 		initializeSw(); | 		initializeSw(); | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| const app = createApp( | 	const app = createApp( | ||||||
| 		window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : | 		window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : | ||||||
| 		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : | 		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : | ||||||
| 		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : | 		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : | ||||||
| 		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) : | 		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) : | ||||||
| 		defineAsyncComponent(() => import('@/ui/universal.vue')), | 		defineAsyncComponent(() => import('@/ui/universal.vue')), | ||||||
| ); | 	); | ||||||
| 
 | 
 | ||||||
| if (_DEV_) { | 	if (_DEV_) { | ||||||
| 		app.config.performance = true; | 		app.config.performance = true; | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| app.config.globalProperties = { | 	app.config.globalProperties = { | ||||||
| 		$i, | 		$i, | ||||||
| 		$store: defaultStore, | 		$store: defaultStore, | ||||||
| 		$instance: instance, | 		$instance: instance, | ||||||
| 		$t: i18n.t, | 		$t: i18n.t, | ||||||
| 		$ts: i18n.ts, | 		$ts: i18n.ts, | ||||||
| }; | 	}; | ||||||
| 
 | 
 | ||||||
| widgets(app); | 	widgets(app); | ||||||
| directives(app); | 	directives(app); | ||||||
| components(app); | 	components(app); | ||||||
| 
 | 
 | ||||||
| const splash = document.getElementById('splash'); | 	const splash = document.getElementById('splash'); | ||||||
| // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
 | 	// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
 | ||||||
| if (splash) splash.addEventListener('transitionend', () => { | 	if (splash) splash.addEventListener('transitionend', () => { | ||||||
| 		splash.remove(); | 		splash.remove(); | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 | 	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 | ||||||
| // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 | 	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 | ||||||
| const rootEl = (() => { | 	const rootEl = (() => { | ||||||
| 		const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; | 		const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; | ||||||
| 
 | 
 | ||||||
| 		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); | 		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); | ||||||
|  | @ -213,24 +214,24 @@ const rootEl = (() => { | ||||||
| 		rootEl.id = MISSKEY_MOUNT_DIV_ID; | 		rootEl.id = MISSKEY_MOUNT_DIV_ID; | ||||||
| 		document.body.appendChild(rootEl); | 		document.body.appendChild(rootEl); | ||||||
| 		return rootEl; | 		return rootEl; | ||||||
| })(); | 	})(); | ||||||
| 
 | 
 | ||||||
| app.mount(rootEl); | 	app.mount(rootEl); | ||||||
| 
 | 
 | ||||||
| // boot.jsのやつを解除
 | 	// boot.jsのやつを解除
 | ||||||
| window.onerror = null; | 	window.onerror = null; | ||||||
| window.onunhandledrejection = null; | 	window.onunhandledrejection = null; | ||||||
| 
 | 
 | ||||||
| reactionPicker.init(); | 	reactionPicker.init(); | ||||||
| 
 | 
 | ||||||
| if (splash) { | 	if (splash) { | ||||||
| 		splash.style.opacity = '0'; | 		splash.style.opacity = '0'; | ||||||
| 		splash.style.pointerEvents = 'none'; | 		splash.style.pointerEvents = 'none'; | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| // クライアントが更新されたか?
 | 	// クライアントが更新されたか?
 | ||||||
| const lastVersion = localStorage.getItem('lastVersion'); | 	const lastVersion = localStorage.getItem('lastVersion'); | ||||||
| if (lastVersion !== version) { | 	if (lastVersion !== version) { | ||||||
| 		localStorage.setItem('lastVersion', version); | 		localStorage.setItem('lastVersion', version); | ||||||
| 
 | 
 | ||||||
| 		// テーマリビルドするため
 | 		// テーマリビルドするため
 | ||||||
|  | @ -245,62 +246,62 @@ if (lastVersion !== version) { | ||||||
| 			} | 			} | ||||||
| 		} catch (err) { | 		} catch (err) { | ||||||
| 		} | 		} | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
 | 	// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
 | ||||||
| watch(defaultStore.reactiveState.darkMode, (darkMode) => { | 	watch(defaultStore.reactiveState.darkMode, (darkMode) => { | ||||||
| 		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); | 		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); | ||||||
| }, { immediate: localStorage.theme == null }); | 	}, { immediate: localStorage.theme == null }); | ||||||
| 
 | 
 | ||||||
| const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme')); | 	const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme')); | ||||||
| const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme')); | 	const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme')); | ||||||
| 
 | 
 | ||||||
| watch(darkTheme, (theme) => { | 	watch(darkTheme, (theme) => { | ||||||
| 		if (defaultStore.state.darkMode) { | 		if (defaultStore.state.darkMode) { | ||||||
| 			applyTheme(theme); | 			applyTheme(theme); | ||||||
| 		} | 		} | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| watch(lightTheme, (theme) => { | 	watch(lightTheme, (theme) => { | ||||||
| 		if (!defaultStore.state.darkMode) { | 		if (!defaultStore.state.darkMode) { | ||||||
| 			applyTheme(theme); | 			applyTheme(theme); | ||||||
| 		} | 		} | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| //#region Sync dark mode
 | 	//#region Sync dark mode
 | ||||||
| if (ColdDeviceStorage.get('syncDeviceDarkMode')) { | 	if (ColdDeviceStorage.get('syncDeviceDarkMode')) { | ||||||
| 		defaultStore.set('darkMode', isDeviceDarkmode()); | 		defaultStore.set('darkMode', isDeviceDarkmode()); | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { | 	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { | ||||||
| 		if (ColdDeviceStorage.get('syncDeviceDarkMode')) { | 		if (ColdDeviceStorage.get('syncDeviceDarkMode')) { | ||||||
| 			defaultStore.set('darkMode', mql.matches); | 			defaultStore.set('darkMode', mql.matches); | ||||||
| 		} | 		} | ||||||
| }); | 	}); | ||||||
| //#endregion
 | 	//#endregion
 | ||||||
| 
 | 
 | ||||||
| fetchInstanceMetaPromise.then(() => { | 	fetchInstanceMetaPromise.then(() => { | ||||||
| 		if (defaultStore.state.themeInitial) { | 		if (defaultStore.state.themeInitial) { | ||||||
| 			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); | 			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); | ||||||
| 			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme)); | 			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme)); | ||||||
| 			defaultStore.set('themeInitial', false); | 			defaultStore.set('themeInitial', false); | ||||||
| 		} | 		} | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| watch(defaultStore.reactiveState.useBlurEffectForModal, v => { | 	watch(defaultStore.reactiveState.useBlurEffectForModal, v => { | ||||||
| 		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); | 		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); | ||||||
| }, { immediate: true }); | 	}, { immediate: true }); | ||||||
| 
 | 
 | ||||||
| watch(defaultStore.reactiveState.useBlurEffect, v => { | 	watch(defaultStore.reactiveState.useBlurEffect, v => { | ||||||
| 		if (v) { | 		if (v) { | ||||||
| 			document.documentElement.style.removeProperty('--blur'); | 			document.documentElement.style.removeProperty('--blur'); | ||||||
| 		} else { | 		} else { | ||||||
| 			document.documentElement.style.setProperty('--blur', 'none'); | 			document.documentElement.style.setProperty('--blur', 'none'); | ||||||
| 		} | 		} | ||||||
| }, { immediate: true }); | 	}, { immediate: true }); | ||||||
| 
 | 
 | ||||||
| let reloadDialogShowing = false; | 	let reloadDialogShowing = false; | ||||||
| stream.on('_disconnected_', async () => { | 	stream.on('_disconnected_', async () => { | ||||||
| 		if (defaultStore.state.serverDisconnectedBehavior === 'reload') { | 		if (defaultStore.state.serverDisconnectedBehavior === 'reload') { | ||||||
| 			location.reload(); | 			location.reload(); | ||||||
| 		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') { | 		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') { | ||||||
|  | @ -316,27 +317,27 @@ stream.on('_disconnected_', async () => { | ||||||
| 				location.reload(); | 				location.reload(); | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| stream.on('emojiAdded', emojiData => { | 	stream.on('emojiAdded', emojiData => { | ||||||
| 		// TODO
 | 		// TODO
 | ||||||
| 		//store.commit('instance/set', );
 | 		//store.commit('instance/set', );
 | ||||||
| }); | 	}); | ||||||
| 
 | 
 | ||||||
| for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) { | 	for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) { | ||||||
| 		import('./plugin').then(({ install }) => { | 		import('./plugin').then(({ install }) => { | ||||||
| 			install(plugin); | 			install(plugin); | ||||||
| 		}); | 		}); | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| const hotkeys = { | 	const hotkeys = { | ||||||
| 		'd': (): void => { | 		'd': (): void => { | ||||||
| 			defaultStore.set('darkMode', !defaultStore.state.darkMode); | 			defaultStore.set('darkMode', !defaultStore.state.darkMode); | ||||||
| 		}, | 		}, | ||||||
| 		's': search, | 		's': search, | ||||||
| }; | 	}; | ||||||
| 
 | 
 | ||||||
| if ($i) { | 	if ($i) { | ||||||
| 		// only add post shortcuts if logged in
 | 		// only add post shortcuts if logged in
 | ||||||
| 		hotkeys['p|n'] = post; | 		hotkeys['p|n'] = post; | ||||||
| 
 | 
 | ||||||
|  | @ -433,7 +434,8 @@ if ($i) { | ||||||
| 		main.on('myTokenRegenerated', () => { | 		main.on('myTokenRegenerated', () => { | ||||||
| 			signout(); | 			signout(); | ||||||
| 		}); | 		}); | ||||||
| } | 	} | ||||||
| 
 | 
 | ||||||
| // shortcut
 | 	// shortcut
 | ||||||
| document.addEventListener('keydown', makeHotkey(hotkeys)); | 	document.addEventListener('keydown', makeHotkey(hotkeys)); | ||||||
|  | })(); | ||||||
|  |  | ||||||
|  | @ -49,6 +49,7 @@ export default defineConfig(({ command, mode }) => { | ||||||
| 				'chrome100', | 				'chrome100', | ||||||
| 				'firefox100', | 				'firefox100', | ||||||
| 				'safari15', | 				'safari15', | ||||||
|  | 				'es2017', // TODO: そのうち消す
 | ||||||
| 			], | 			], | ||||||
| 			manifest: 'manifest.json', | 			manifest: 'manifest.json', | ||||||
| 			rollupOptions: { | 			rollupOptions: { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue