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
-					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
-					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
-					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
-					reply: this.p
+			});
-				}
-			}).$mount().$el);
 		},
 		repost() {
-			document.body.appendChild(new MkRepostFormWindow({
+			(this as any).os.new(MkRepostFormWindow, {
-				propsData: {
+				post: this.p
-					post: this.p
+			});
-				}
-			}).$mount().$el);
 		},
 		react() {
-			document.body.appendChild(new MkReactionPicker({
+			(this as any).os.new(MkReactionPicker, {
-				propsData: {
+				source: this.$refs.reactButton,
-					source: this.$refs.reactButton,
+				post: this.p
-					post: this.p
+			});
-				}
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
+				source: this.$refs.menuButton,
-					source: this.$refs.menuButton,
+				post: this.p
-					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
-					reply: this.p
+			});
-				}
-			}).$mount().$el);
 		},
 		repost() {
-			document.body.appendChild(new MkRepostFormWindow({
+			(this as any).os.new(MkRepostFormWindow, {
-				propsData: {
+				post: this.p
-					post: this.p
+			});
-				}
-			}).$mount().$el);
 		},
 		react() {
-			document.body.appendChild(new MkReactionPicker({
+			(this as any).os.new(MkReactionPicker, {
-				propsData: {
+				source: this.$refs.reactButton,
-					source: this.$refs.reactButton,
+				post: this.p
-					post: this.p
+			});
-				}
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
+				source: this.$refs.menuButton,
-					source: this.$refs.menuButton,
+				post: this.p
-					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
-					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,
+				user: this.user
-				propsData: {
+			});
-					user: this.user
-				}
-			}).$mount().$el);
 		},
 
 		showFollowers() {
-			document.body.appendChild(new MkFollowersWindow({
+			(this as any).os.new(MkFollowersWindow, {
-				parent: this,
+				user: this.user
-				propsData: {
+			});
-					user: this.user
-				}
-			}).$mount().$el);
 		},
 
 		mute() {

src/web/app/init.ts

@@ -87,8 +87,26 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v
 		// アプリ基底要素マウント
 		document.body.innerHTML = '<div id="app"></div>';
 
+		const app = new Vue({
+			router: new VueRouter({
+				mode: 'history'
+			}),
+			created() {
+				this.$watch('os.i', i => {
+					// キャッシュ更新
+					localStorage.setItem('me', JSON.stringify(i));
+				}, {
+					deep: true
+				});
+			},
+			render: createEl => createEl(App)
+		});
+
+		os.app = app;
+
 		const launch = (api: (os: MiOS) => API) => {
 			os.apis = api(os);
+
 			Vue.mixin({
 				data() {
 					return {
@@ -99,20 +117,8 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v
 				}
 			});
 
-			const app = new Vue({
+			// マウント
-				router: new VueRouter({
+			app.$mount('#app');
-					mode: 'history'
-				}),
-				created() {
-					this.$watch('os.i', i => {
-						// キャッシュ更新
-						localStorage.setItem('me', JSON.stringify(i));
-					}, {
-						deep: true
-					});
-				},
-				render: createEl => createEl(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,
-					source: this.$refs.reactButton,
+				post: this.p,
-					post: this.p,
+				compact: true
-					compact: true
+			});
-				}
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
+				source: this.$refs.menuButton,
-					source: this.$refs.menuButton,
+				post: this.p,
-					post: this.p,
+				compact: true
-					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,
-					source: this.$refs.reactButton,
+				post: this.p,
-					post: this.p,
+				compact: true
-					compact: true
+			});
-				}
-			}).$mount().$el);
 		},
 		menu() {
-			document.body.appendChild(new MkPostMenu({
+			(this as any).os.new(MkPostMenu, {
-				propsData: {
+				source: this.$refs.menuButton,
-					source: this.$refs.menuButton,
+				post: this.p,
-					post: this.p,
+				compact: true
-					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
-					notification
+			});
-				}
-			}).$mount().$el);
 		}
 	}
 });