wip

src/client/components/autocomplete.vue

@@ -376,7 +376,7 @@ export default defineComponent({
 
 		chooseUser() {
 			this.close();
-			const vm = this.$root.new(MkUserSelect, {});
+			const vm = os.popup(MkUserSelect, {});
 			vm.$once('selected', user => {
 				this.complete('user', user);
 			});

src/client/components/deck/notifications-column.vue

@@ -43,7 +43,7 @@ export default defineComponent({
 			icon: faCog,
 			text: this.$t('notificationSetting'),
 			action: async () => {
-				this.$root.new(await import('../notification-setting-window.vue'), {
+				os.popup(await import('../notification-setting-window.vue'), {
 					includingTypes: this.column.includingTypes,
 				}).$on('ok', async ({ includingTypes }) => {
 					this.$set(this.column, 'includingTypes', includingTypes);

src/client/components/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal ref="modal" @closed="$store.commit('removePopup', id)" @click="onBgClick" :showing="showing">
+<x-modal ref="modal" @closed="destroy" @click="onBgClick" :showing="showing">
 	<div class="mk-dialog" :class="{ iconOnly }">
 		<template v-if="type == 'signin'">
 			<mk-signin/>
@@ -65,7 +65,10 @@ export default defineComponent({
 	},
 
 	props: {
-		id: {
+		destroy: {
+			required: true
+		},
+		emit: {
 			required: true
 		},
 		type: {
@@ -160,7 +163,7 @@ export default defineComponent({
 	methods: {
 		done(canceled, result?) {
 			this.showing = false;
-			os.dialogCallbacks[this.id]({ canceled, result });
+			this.emit({ canceled, result });
 		},
 
 		async ok() {

src/client/components/media-image.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = this.$root.new(ImageViewer, {
+				const viewer = os.popup(ImageViewer, {
 					image: this.image
 				});
 				this.$once('hook:beforeDestroy', () => {

src/client/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$store.commit('removePopup', id)" :showing="showing">
+<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="destroy" :showing="showing">
 	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items" :style="{ width: width + 'px' }">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>
@@ -44,7 +44,7 @@ export default defineComponent({
 		XModal
 	},
 	props: {
-		id: {
+		destroy: {
 			required: true
 		},
 		source: {

src/client/components/note.vue

@@ -110,7 +110,7 @@ import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
 import MkUrlPreview from './url-preview.vue';
 import MkReactionPicker from './reaction-picker.vue';
-import pleaseLogin from '@/scripts/please-login';
+import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import { url } from '@/config';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
@@ -441,7 +441,7 @@ export default defineComponent({
 		},
 
 		reply(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.$root.post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
@@ -451,7 +451,7 @@ export default defineComponent({
 		},
 
 		renote(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
 			os.menu({
 				items: [{
@@ -483,21 +483,19 @@ export default defineComponent({
 		},
 
 		react(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			const picker = this.$root.new(MkReactionPicker, {
+			const close = os.popup(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				showFocus: viaKeyboard,
-			});
+			}, reaction => {
-			picker.$once('chosen', reaction => {
 				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction
 				}).then(() => {
-					picker.close();
+					close();
 				});
-			});
+			}, this.focus);
-			picker.$once('closed', this.focus);
 		},
 
 		reactDirectly(reaction) {
@@ -516,7 +514,7 @@ export default defineComponent({
 		},
 
 		favorite() {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			os.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {

src/client/components/particle.vue

@@ -8,14 +8,16 @@
 				calcMode="spline"
 				keyTimes="0; 1"
 				keySplines="0.165, 0.84, 0.44, 1"
-					repeatCount="1" />
+				repeatCount="1"
+			/>
 			<animate attributeName="stroke-width"
 				begin="0s" dur="0.5s"
 				values="16; 0"
 				calcMode="spline"
 				keyTimes="0; 1"
 				keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1" />
+				repeatCount="1"
+			/>
 		</circle>
 		<g fill="none" fill-rule="evenodd">
 			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
@@ -25,21 +27,24 @@
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.165, 0.84, 0.44, 1"
-						repeatCount="1" />
+					repeatCount="1"
+				/>
 				<animate attributeName="cx"
 					begin="0s" dur="0.8s"
 					:values="`${particle.xA}; ${particle.xB}`"
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.3, 0.61, 0.355, 1"
-						repeatCount="1" />
+					repeatCount="1"
+				/>
 				<animate attributeName="cy"
 					begin="0s" dur="0.8s"
 					:values="`${particle.yA}; ${particle.yB}`"
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.3, 0.61, 0.355, 1"
-						repeatCount="1" />
+					repeatCount="1"
+				/>
 			</circle>
 		</g>
 	</svg>
@@ -52,6 +57,9 @@ import * as os from '@/os';
 
 export default defineComponent({
 	props: {
+		destroy: {
+			required: true
+		},
 		x: {
 			type: Number,
 			required: true
@@ -86,7 +94,7 @@ export default defineComponent({
 	},
 	mounted() {
 		setTimeout(() => {
-			this.destroyDom();
+			this.destroy();
 		}, 1100);
 	}
 });

src/client/components/post-form.vue

@@ -417,7 +417,7 @@ export default defineComponent({
 				// TODO: information dialog
 				return;
 			}
-			const w = this.$root.new(MkVisibilityChooser, {
+			const w = os.popup(MkVisibilityChooser, {
 				source: this.$refs.visibilityButton,
 				currentVisibility: this.visibility,
 				currentLocalOnly: this.localOnly
@@ -433,7 +433,7 @@ export default defineComponent({
 		},
 
 		addVisibleUser() {
-			const vm = this.$root.new(MkUserSelect, {});
+			const vm = os.popup(MkUserSelect, {});
 			vm.$once('selected', user => {
 				this.visibleUsers.push(user);
 			});
@@ -597,14 +597,14 @@ export default defineComponent({
 		},
 
 		insertMention() {
-			const vm = this.$root.new(MkUserSelect, {});
+			const vm = os.popup(MkUserSelect, {});
 			vm.$once('selected', user => {
 				insertTextAtCursor(this.$refs.text, getAcct(user) + ' ');
 			});
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('./emoji-picker.vue'), {
+			const vm = os.popup(await import('./emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);

src/client/components/reactions-viewer.reaction.vue

@@ -111,7 +111,7 @@ export default defineComponent({
 
 				this.closeDetails();
 				if (!this.isHovering) return;
-				this.details = this.$root.new(XDetails, {
+				this.details = os.popup(XDetails, {
 					reaction: this.reaction,
 					users,
 					count: this.count,

src/client/components/sidebar.vue

@@ -276,7 +276,7 @@ export default defineComponent({
 		},
 
 		async addAcount() {
-			this.$root.new(await import('./signin-dialog.vue')).$once('login', res => {
+			os.popup(await import('./signin-dialog.vue')).$once('login', res => {
 				this.$store.dispatch('addAcount', res);
 				os.dialog({
 					type: 'success',
@@ -286,7 +286,7 @@ export default defineComponent({
 		},
 
 		async createAccount() {
-			this.$root.new(await import('./signup-dialog.vue')).$once('signup', res => {
+			os.popup(await import('./signup-dialog.vue')).$once('signup', res => {
 				this.$store.dispatch('addAcount', res);
 				this.switchAccountWithToken(res.i);
 			});

src/client/deck.vue

@@ -166,7 +166,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				this.$root.new(await import('@/components/toast.vue'), {
+				os.popup(await import('@/components/toast.vue'), {
 					notification
 				});
 			}

src/client/default.vue

@@ -335,7 +335,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				this.$root.new(await import('@/components/toast.vue'), {
+				os.popup(await import('@/components/toast.vue'), {
 					notification
 				});
 			}

src/client/directives/index.ts

@@ -11,6 +11,6 @@ export default function(app: App) {
 	app.directive('userPreview', userPreview);
 	app.directive('user-preview', userPreview);
 	app.directive('size', size);
-	//app.directive('particle', particle);
+	app.directive('particle', particle);
 	app.directive('tooltip', tooltip);
 }

src/client/directives/particle.ts

@@ -1,24 +1,18 @@
 import Particle from '@/components/particle.vue';
+import { popup } from '@/os';
 
 export default {
-	bind(el, binding, vn) {
+	mounted(el, binding, vn) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
+
 		el.addEventListener('click', () => {
 			const rect = el.getBoundingClientRect();
 
 			const x = rect.left + (el.clientWidth / 2);
 			const y = rect.top + (el.clientHeight / 2);
 
-			const particle = new Particle({
+			popup(Particle, { x, y });
-				parent: vn.context,
-				propsData: {
-					x,
-					y
-				}
-			}).$mount();
-
-			document.body.appendChild(particle.$el);
 		});
 	}
 };

src/client/os.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent } from 'vue';
+import { Component, defineAsyncComponent } from 'vue';
 import Stream from '@/scripts/stream';
 import { store } from '@/store';
 import { apiUrl } from '@/config';
@@ -8,8 +8,6 @@ export const isMobile = /mobile|iphone|ipad|android/.test(ua);
 
 export const stream = new Stream();
 
-export const dialogCallbacks = {};
-
 export function api(endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) {
 	store.commit('beginApiRequest');
 
@@ -46,17 +44,36 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
 	return promise;
 }
 
+export function popup(component: Component, props: Record<string, any>, eventHandler?: Function, closedCallback?: Function) {
+	const id = Math.random().toString(); // TODO: uuidとか使う
+	const destroy = () => {
+		store.commit('removePopup', id);
+		if (closedCallback) closedCallback();
+	};
+	const popup = {
+		component,
+		props: {
+			...props,
+			destroy,
+			emit: (...args) => {
+				if (eventHandler) eventHandler(...args);
+			}
+		},
+		id,
+	};
+	store.commit('addPopup', popup);
+	return destroy;
+}
+
 export function dialog(props: Record<string, any>) {
-	return store.dispatch('popup', {
+	return new Promise((res, rej) => {
-		component: defineAsyncComponent(() => import('@/components/dialog.vue')),
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, res);
-		props
 	});
 }
 
 export function menu(props: Record<string, any>) {
-	return store.dispatch('popup', {
+	return new Promise((res, rej) => {
-		component: defineAsyncComponent(() => import('@/components/menu.vue')),
+		return popup(defineAsyncComponent(() => import('@/components/menu.vue')), props, res);
-		props
 	});
 }
 

src/client/pages/index.welcome.entrance.vue

@@ -54,13 +54,13 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			this.$root.new(XSigninDialog, {
+			os.popup(XSigninDialog, {
 				autoSet: true
 			});
 		},
 
 		signup() {
-			this.$root.new(XSignupDialog, {
+			os.popup(XSignupDialog, {
 				autoSet: true
 			});
 		}

src/client/pages/instance/federation.vue

@@ -125,7 +125,7 @@ export default defineComponent({
 		},
 
 		info(instance) {
-			this.$root.new(MkInstanceInfo, {
+			os.popup(MkInstanceInfo, {
 				instance: instance
 			});
 		}

src/client/pages/instance/index.vue

@@ -550,7 +550,7 @@ export default defineComponent({
 					host: q
 				});
 			}
-			this.$root.new(MkInstanceInfo, {
+			os.popup(MkInstanceInfo, {
 				instance: instance
 			});
 		},

src/client/pages/instance/instance.vue

@@ -439,7 +439,7 @@ export default defineComponent({
 		},
 
 		showFollowing() {
-			this.$root.new(MkUsersDialog, {
+			os.popup(MkUsersDialog, {
 				title: this.$t('instanceFollowing'),
 				pagination: {
 					endpoint: 'federation/following',
@@ -453,7 +453,7 @@ export default defineComponent({
 		},
 
 		showFollowers() {
-			this.$root.new(MkUsersDialog, {
+			os.popup(MkUsersDialog, {
 				title: this.$t('instanceFollowers'),
 				pagination: {
 					endpoint: 'federation/followers',
@@ -467,7 +467,7 @@ export default defineComponent({
 		},
 
 		showUsers() {
-			this.$root.new(MkUsersDialog, {
+			os.popup(MkUsersDialog, {
 				title: this.$t('instanceUsers'),
 				pagination: {
 					endpoint: 'federation/users',

src/client/pages/instance/settings.vue

@@ -452,7 +452,7 @@ export default defineComponent({
 		},
 
 		addPinUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.pinnedUsers = this.pinnedUsers.trim();
 				this.pinnedUsers += '\n@' + getAcct(user);
 				this.pinnedUsers = this.pinnedUsers.trim();
@@ -460,7 +460,7 @@ export default defineComponent({
 		},
 
 		chooseProxyAccount() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.proxyAccount = user;
 				this.proxyAccountId = user.id;
 				this.save(true);

src/client/pages/instance/users.vue

@@ -180,7 +180,7 @@ export default defineComponent({
 		},
 
 		searchUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.show(user);
 			});
 		},

src/client/pages/messaging/index.vue

@@ -132,7 +132,7 @@ export default defineComponent({
 		},
 
 		async startUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.$router.push(`/my/messaging/${getAcct(user)}`);
 			});
 		},

src/client/pages/messaging/messaging-room.form.vue

@@ -220,7 +220,7 @@ export default defineComponent({
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('@/components/emoji-picker.vue'), {
+			const vm = os.popup(await import('@/components/emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);

src/client/pages/my-antennas/index.antenna.vue

@@ -177,7 +177,7 @@ export default defineComponent({
 		},
 
 		addUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.users = this.users.trim();
 				this.users += '\n@' + getAcct(user);
 				this.users = this.users.trim();

src/client/pages/my-groups/group.vue

@@ -89,7 +89,7 @@ export default defineComponent({
 		},
 
 		invite() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				os.api('users/groups/invite', {
 					groupId: this.group.id,
 					userId: user.id
@@ -134,7 +134,7 @@ export default defineComponent({
 		},
 
 		transfer() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				os.api('users/groups/transfer', {
 					groupId: this.group.id,
 					userId: user.id

src/client/pages/my-lists/list.vue

@@ -88,7 +88,7 @@ export default defineComponent({
 		},
 
 		addUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				os.api('users/lists/push', {
 					listId: this.list.id,
 					userId: user.id

src/client/pages/my-settings/api.vue

@@ -26,7 +26,7 @@ export default defineComponent({
 	},
 	methods: {
 		async generateToken() {
-			this.$root.new(await import('@/components/token-generate-window.vue'), {
+			os.popup(await import('@/components/token-generate-window.vue'), {
 			}).$on('ok', async ({ name, permissions }) => {
 				const { token } = await os.api('miauth/gen-token', {
 					session: null,

src/client/pages/my-settings/index.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 		},
 
 		async configure() {
-			this.$root.new(await import('@/components/notification-setting-window.vue'), {
+			os.popup(await import('@/components/notification-setting-window.vue'), {
 				includingTypes: this.$store.state.i.includingNotificationTypes,
 				showGlobalToggle: false,
 			}).$on('ok', async ({ includingTypes: value }: any) => {

src/client/pages/my-settings/reaction.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 		},
 
 		preview(ev) {
-			const picker = this.$root.new(MkReactionPicker, {
+			const picker = os.popup(MkReactionPicker, {
 				source: ev.currentTarget || ev.target,
 				reactions: this.splited,
 				showFocus: false,
@@ -73,7 +73,7 @@ export default defineComponent({
 		},
 
 		async chooseEmoji(ev) {
-			const vm = this.$root.new(await import('@/components/emoji-picker.vue'), {
+			const vm = os.popup(await import('@/components/emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				this.reactions += emoji;

src/client/pages/preferences/plugins.vue

@@ -118,7 +118,7 @@ export default defineComponent({
 			}
 
 			const token = permissions == null || permissions.length === 0 ? null : await new Promise(async (res, rej) => {
-				this.$root.new(await import('@/components/token-generate-window.vue'), {
+				os.popup(await import('@/components/token-generate-window.vue'), {
 					title: this.$t('tokenRequested'),
 					information: this.$t('pluginTokenRequestedDescription'),
 					initialName: name,

src/client/pages/share.vue

@@ -60,7 +60,7 @@ export default defineComponent({
 			if (this.title) text += `【${this.title}】\n`;
 			if (this.text) text += `${this.text}\n`;
 			if (this.url) text += `${this.url}`;
-			this.$root.new(PostFormDialog, {
+			os.popup(PostFormDialog, {
 				instant: true,
 				initialText: text.trim()
 			}).$once('posted', () => {

src/client/pages/user/index.vue

@@ -189,7 +189,7 @@ export default defineComponent({
 		},
 
 		menu() {
-			this.$root.new(XUserMenu, {
+			os.popup(XUserMenu, {
 				source: this.$refs.menu,
 				user: this.user
 			});

src/client/scripts/please-login.ts

@@ -1,10 +1,14 @@
-export default ($root: any) => {
+import { locale } from '@/i18n';
-	if ($root.$store.getters.isSignedIn) return;
+import { dialog } from '@/os';
+import { store } from '@/store';
 
-	os.dialog({
+export function pleaseLogin() {
-		title: $root.$t('signinRequired'),
+	if (store.getters.isSignedIn) return;
+
+	dialog({
+		title: locale['signinRequired'],
 		text: null
 	});
 
 	throw new Error('signin required');
-};
+}

src/client/store.ts

@@ -5,7 +5,7 @@ import { faSatelliteDish, faTerminal, faHashtag, faBroadcastTower, faFireAlt, fa
 import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
 import { AiScript, utils, values } from '@syuilo/aiscript';
 import { deckmode } from '@/config';
-import { api, dialogCallbacks } from '@/os';
+import { api } from '@/os';
 import { erase } from '../prelude/array';
 
 export const defaultSettings = {
@@ -371,25 +371,6 @@ export const store = createStore({
 				ctx.commit('settings/init', me.clientData);
 			}
 		},
-
-		popup(ctx, { component, props }) {
-			return new Promise((res, rej) => {
-				const id = Math.random().toString(); // TODO: uuidとか使う
-				const popup = {
-					component,
-					props: {
-						...props,
-						id
-					},
-					id,
-				};
-				dialogCallbacks[id] = result => {
-					delete dialogCallbacks[id];
-					res(result);
-				};
-				ctx.commit('addPopup', popup);
-			});
-		},
 	},
 
 	modules: {

src/client/widgets/notifications.vue

@@ -51,7 +51,7 @@ export default defineComponent({
 
 	methods: {
 		async configure() {
-			this.$root.new(await import('@/components/notification-setting-window.vue'), {
+			os.popup(await import('@/components/notification-setting-window.vue'), {
 				includingTypes: this.props.includingTypes,
 			}).$on('ok', async ({ includingTypes }) => {
 				this.props.includingTypes = includingTypes;

src/client/widgets/welcome.vue

@@ -52,13 +52,13 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			this.$root.new(XSigninDialog, {
+			os.popup(XSigninDialog, {
 				autoSet: true
 			});
 		},
 
 		signup() {
-			this.$root.new(XSignupDialog, {
+			os.popup(XSignupDialog, {
 				autoSet: true
 			});
 		}