wip

src/web/app/common/mios.ts

@@ -67,6 +67,16 @@ export default class MiOS extends EventEmitter {
 
 	private isMetaFetching = false;
 
+	public app: Vue;
+
+	public new(vm, props) {
+		const w = new vm({
+			parent: this.app,
+			propsData: props
+		}).$mount();
+		document.body.appendChild(w.$el);
+	}
+
 	/**
 	 * A signing user
 	 */

src/web/app/desktop/views/components/drive.vue

@@ -376,11 +376,9 @@ export default Vue.extend({
 		},
 
 		newWindow(folder) {
-			document.body.appendChild(new MkDriveWindow({
+			(this as any).os.new(MkDriveWindow, {
-				propsData: {
 				folder: folder
-				}
+			});
-			}).$mount().$el);
 		},
 
 		move(target) {

src/web/app/desktop/views/components/images-image.vue

@@ -39,11 +39,9 @@ export default Vue.extend({
 		},
 
 		onClick() {
-			document.body.appendChild(new MkImagesImageDialog({
+			(this as any).os.new(MkImagesImageDialog, {
-				propsData: {
 				image: this.image
-				}
+			});
-			}).$mount().$el);
 		}
 	}
 });

src/web/app/desktop/views/components/messaging-window.vue

@@ -12,11 +12,9 @@ import MkMessagingRoomWindow from './messaging-room-window.vue';
 export default Vue.extend({
 	methods: {
 		navigate(user) {
-			document.body.appendChild(new MkMessagingRoomWindow({
+			(this as any).os.new(MkMessagingRoomWindow, {
-				propsData: {
 				user: user
-				}
+			});
-			}).$mount().$el);
 		}
 	}
 });

src/web/app/desktop/views/components/post-detail.vue

@@ -148,34 +148,26 @@ export default Vue.extend({
 			});
 		},
 		reply() {
-			document.body.appendChild(new MkPostFormWindow({
+			(this as any).os.new(MkPostFormWindow, {
-				propsData: {
 				reply: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		repost() {
-			document.body.appendChild(new MkRepostFormWindow({
+			(this as any).os.new(MkRepostFormWindow, {
-				propsData: {
 				post: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		react() {
-			document.body.appendChild(new MkReactionPicker({
+			(this as any).os.new(MkReactionPicker, {
-				propsData: {
 				source: this.$refs.reactButton,
 				post: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
 				source: this.$refs.menuButton,
 				post: this.p
-				}
+			});
-			}).$mount().$el);
 		}
 	}
 });

src/web/app/desktop/views/components/posts.post.vue

@@ -186,34 +186,26 @@ export default Vue.extend({
 			}
 		},
 		reply() {
-			document.body.appendChild(new MkPostFormWindow({
+			(this as any).os.new(MkPostFormWindow, {
-				propsData: {
 				reply: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		repost() {
-			document.body.appendChild(new MkRepostFormWindow({
+			(this as any).os.new(MkRepostFormWindow, {
-				propsData: {
 				post: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		react() {
-			document.body.appendChild(new MkReactionPicker({
+			(this as any).os.new(MkReactionPicker, {
-				propsData: {
 				source: this.$refs.reactButton,
 				post: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
 				source: this.$refs.menuButton,
 				post: this.p
-				}
+			});
-			}).$mount().$el);
 		},
 		onKeydown(e) {
 			let shouldBeCancel = true;

src/web/app/desktop/views/components/ui.header.account.vue

@@ -70,11 +70,11 @@ export default Vue.extend({
 		},
 		drive() {
 			this.close();
-			document.body.appendChild(new MkDriveWindow().$mount().$el);
+			(this as any).os.new(MkDriveWindow);
 		},
 		settings() {
 			this.close();
-			document.body.appendChild(new MkSettingsWindow().$mount().$el);
+			(this as any).os.new(MkSettingsWindow);
 		}
 	}
 });

src/web/app/desktop/views/components/ui.header.nav.vue

@@ -79,7 +79,7 @@ export default Vue.extend({
 		},
 
 		messaging() {
-			document.body.appendChild(new MkMessagingWindow().$mount().$el);
+			(this as any).os.new(MkMessagingWindow);
 		}
 	}
 });

src/web/app/desktop/views/components/widgets/messaging.vue

@@ -17,11 +17,9 @@ export default define({
 }).extend({
 	methods: {
 		navigate(user) {
-			document.body.appendChild(new MkMessagingRoomWindow({
+			(this as any).os.new(MkMessagingRoomWindow, {
-				propsData: {
 				user: user
-				}
+			});
-			}).$mount().$el);
 		},
 		func() {
 			if (this.props.design == 1) {

src/web/app/desktop/views/pages/user/user.profile.vue

@@ -36,21 +36,15 @@ export default Vue.extend({
 	},
 	methods: {
 		showFollowing() {
-			document.body.appendChild(new MkFollowingWindow({
+			(this as any).os.new(MkFollowingWindow, {
-				parent: this,
-				propsData: {
 				user: this.user
-				}
+			});
-			}).$mount().$el);
 		},
 
 		showFollowers() {
-			document.body.appendChild(new MkFollowersWindow({
+			(this as any).os.new(MkFollowersWindow, {
-				parent: this,
-				propsData: {
 				user: this.user
-				}
+			});
-			}).$mount().$el);
 		},
 
 		mute() {

src/web/app/init.ts

@@ -87,18 +87,6 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v
 		// アプリ基底要素マウント
 		document.body.innerHTML = '<div id="app"></div>';
 
-		const launch = (api: (os: MiOS) => API) => {
-			os.apis = api(os);
-			Vue.mixin({
-				data() {
-					return {
-						os,
-						api: os.api,
-						apis: os.apis
-					};
-				}
-			});
-
 		const app = new Vue({
 			router: new VueRouter({
 				mode: 'history'
@@ -112,7 +100,25 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v
 				});
 			},
 			render: createEl => createEl(App)
-			}).$mount('#app');
+		});
+
+		os.app = app;
+
+		const launch = (api: (os: MiOS) => API) => {
+			os.apis = api(os);
+
+			Vue.mixin({
+				data() {
+					return {
+						os,
+						api: os.api,
+						apis: os.apis
+					};
+				}
+			});
+
+			// マウント
+			app.$mount('#app');
 
 			return [app, os] as [Vue, MiOS];
 		};

src/web/app/mobile/views/components/post-detail.vue

@@ -154,22 +154,18 @@ export default Vue.extend({
 			});
 		},
 		react() {
-			document.body.appendChild(new MkReactionPicker({
+			(this as any).os.new(MkReactionPicker, {
-				propsData: {
 				source: this.$refs.reactButton,
 				post: this.p,
 				compact: true
-				}
+			});
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
 				source: this.$refs.menuButton,
 				post: this.p,
 				compact: true
-				}
+			});
-			}).$mount().$el);
 		}
 	}
 });

src/web/app/mobile/views/components/posts.post.vue

@@ -169,22 +169,18 @@ export default Vue.extend({
 			});
 		},
 		react() {
-			document.body.appendChild(new MkReactionPicker({
+			(this as any).os.new(MkReactionPicker, {
-				propsData: {
 				source: this.$refs.reactButton,
 				post: this.p,
 				compact: true
-				}
+			});
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
 				source: this.$refs.menuButton,
 				post: this.p,
 				compact: true
-				}
+			});
-			}).$mount().$el);
 		}
 	}
 });

src/web/app/mobile/views/components/ui.vue

@@ -53,11 +53,9 @@ export default Vue.extend({
 				id: notification.id
 			});
 
-			document.body.appendChild(new MkNotify({
+			(this as any).os.new(MkNotify, {
-				propsData: {
 				notification
-				}
+			});
-			}).$mount().$el);
 		}
 	}
 });