Refactor client (#3178)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

15 files changed, 98 insertions, 115 deletions

diff --git a/src/client/app/mobile/api/choose-drive-file.ts b/src/client/app/mobile/api/choose-drive-file.ts
deleted file mode 100644
index b1a78f2364..0000000000
--- a/src/client/app/mobile/api/choose-drive-file.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Chooser from '../views/components/drive-file-chooser.vue';
-
-export default function(opts) {
-	return new Promise((res, rej) => {
-		const o = opts || {};
-		const w = new Chooser({
-			propsData: {
-				title: o.title,
-				multiple: o.multiple,
-				initFolder: o.currentFolder
-			}
-		}).$mount();
-		w.$once('selected', file => {
-			res(file);
-		});
-		document.body.appendChild(w.$el);
-	});
-}
diff --git a/src/client/app/mobile/api/choose-drive-folder.ts b/src/client/app/mobile/api/choose-drive-folder.ts
deleted file mode 100644
index d1f97d1487..0000000000
--- a/src/client/app/mobile/api/choose-drive-folder.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import Chooser from '../views/components/drive-folder-chooser.vue';
-
-export default function(opts) {
-	return new Promise((res, rej) => {
-		const o = opts || {};
-		const w = new Chooser({
-			propsData: {
-				title: o.title,
-				initFolder: o.currentFolder
-			}
-		}).$mount();
-		w.$once('selected', folder => {
-			res(folder);
-		});
-		document.body.appendChild(w.$el);
-	});
-}
diff --git a/src/client/app/mobile/api/dialog.ts b/src/client/app/mobile/api/dialog.ts
deleted file mode 100644
index 23f35b7aa9..0000000000
--- a/src/client/app/mobile/api/dialog.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import OS from '../../mios';
-import Dialog from '../views/components/dialog.vue';
-
-export default (os: OS) => opts => {
-	return new Promise<string>((res, rej) => {
-		const o = opts || {};
-		const d = os.new(Dialog, {
-			title: o.title,
-			text: o.text,
-			modal: o.modal,
-			buttons: o.actions
-		});
-		d.$once('clicked', id => {
-			res(id);
-		});
-		document.body.appendChild(d.$el);
-	});
-};
diff --git a/src/client/app/mobile/api/input.ts b/src/client/app/mobile/api/input.ts
deleted file mode 100644
index 38d0fb61eb..0000000000
--- a/src/client/app/mobile/api/input.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function(opts) {
-	return new Promise<string>((res, rej) => {
-		const x = window.prompt(opts.title);
-		if (x) {
-			res(x);
-		}
-	});
-}
diff --git a/src/client/app/mobile/api/notify.ts b/src/client/app/mobile/api/notify.ts
deleted file mode 100644
index 82780d196f..0000000000
--- a/src/client/app/mobile/api/notify.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function(message) {
-	alert(message);
-}
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
deleted file mode 100644
index a64ed1c43e..0000000000
--- a/src/client/app/mobile/api/post.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import PostForm from '../views/components/post-form-dialog.vue';
-
-export default (os) => (opts) => {
-	const o = opts || {};
-
-	document.documentElement.style.overflow = 'hidden';
-
-	function recover() {
-		document.documentElement.style.overflow = 'auto';
-	}
-
-	const vm = new PostForm({
-		parent: os.app,
-		propsData: {
-			reply: o.reply,
-			renote: o.renote
-		}
-	}).$mount();
-	vm.$once('cancel', recover);
-	vm.$once('posted', recover);
-	if (o.cb) vm.$once('closed', o.cb);
-	document.body.appendChild(vm.$el);
-	(vm as any).focus();
-};
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 9412c85980..707aae087b 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -2,6 +2,7 @@
  * Mobile Client
  */
 
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 // Style
@@ -9,13 +10,6 @@ import './style.styl';
 
 import init from '../init';
 
-import chooseDriveFolder from './api/choose-drive-folder';
-import chooseDriveFile from './api/choose-drive-file';
-import dialog from './api/dialog';
-import input from './api/input';
-import post from './api/post';
-import notify from './api/notify';
-
 import MkIndex from './views/pages/index.vue';
 import MkSignup from './views/pages/signup.vue';
 import MkUser from './views/pages/user.vue';
@@ -39,10 +33,94 @@ import MkTag from './views/pages/tag.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
 
+import PostForm from './views/components/post-form-dialog.vue';
+import FileChooser from './views/components/drive-file-chooser.vue';
+import FolderChooser from './views/components/drive-folder-chooser.vue';
+import Dialog from './views/components/dialog.vue';
+
 /**
  * init
  */
 init((launch) => {
+	Vue.mixin({
+		methods: {
+			$post(opts) {
+				const o = opts || {};
+
+				document.documentElement.style.overflow = 'hidden';
+
+				function recover() {
+					document.documentElement.style.overflow = 'auto';
+				}
+
+				const vm = this.$root.new(PostForm, {
+					reply: o.reply,
+					renote: o.renote
+				});
+
+				vm.$once('cancel', recover);
+				vm.$once('posted', recover);
+				if (o.cb) vm.$once('closed', o.cb);
+				(vm as any).focus();
+			},
+
+			$chooseDriveFile(opts) {
+				return new Promise((res, rej) => {
+					const o = opts || {};
+					const vm = this.$root.new(FileChooser, {
+						title: o.title,
+						multiple: o.multiple,
+						initFolder: o.currentFolder
+					});
+					vm.$once('selected', file => {
+						res(file);
+					});
+				});
+			},
+
+			$chooseDriveFolder(opts) {
+				return new Promise((res, rej) => {
+					const o = opts || {};
+					const vm = this.$root.new(FolderChooser, {
+						title: o.title,
+						initFolder: o.currentFolder
+					});
+					vm.$once('selected', folder => {
+						res(folder);
+					});
+				});
+			},
+
+			$input(opts) {
+				return new Promise<string>((res, rej) => {
+					const x = window.prompt(opts.title);
+					if (x) {
+						res(x);
+					}
+				});
+			},
+
+			$dialog(opts) {
+				return new Promise<string>((res, rej) => {
+					const o = opts || {};
+					const d = this.$root.new(Dialog, {
+						title: o.title,
+						text: o.text,
+						modal: o.modal,
+						buttons: o.actions
+					});
+					d.$once('clicked', id => {
+						res(id);
+					});
+				});
+			},
+
+			$notify(message) {
+				alert(message);
+			}
+		}
+	});
+
 	// Register directives
 	require('./views/directives');
 
@@ -85,12 +163,5 @@ init((launch) => {
 	});
 
 	// Launch the app
-	launch(router, os => ({
-		chooseDriveFolder,
-		chooseDriveFile,
-		dialog: dialog(os),
-		input,
-		post: post(os),
-		notify
-	}));
+	launch(router);
 }, true);
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index 68a16a8350..3aa04d045c 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -101,7 +101,7 @@ export default Vue.extend({
 		},
 
 		move() {
-			this.$root.apis.chooseDriveFolder().then(folder => {
+			this.$chooseDriveFolder().then(folder => {
 				this.$root.api('drive/files/update', {
 					fileId: this.file.id,
 					folderId: folder == null ? null : folder.id
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 90e2a325ca..e7a5d99832 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -439,7 +439,7 @@ export default Vue.extend({
 				alert(this.$t('root-move-alert'));
 				return;
 			}
-			this.$root.apis.chooseDriveFolder().then(folder => {
+			this.$chooseDriveFolder().then(folder => {
 				this.$root.api('drive/folders/update', {
 					parentId: folder ? folder.id : null,
 					folderId: this.folder.id
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index bd9bc0a4d0..4f5d160542 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -196,13 +196,13 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$root.apis.post({
+			this.$post({
 				reply: this.p
 			});
 		},
 
 		renote() {
-			this.$root.apis.post({
+			this.$post({
 				renote: this.p
 			});
 		},
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index b1914d4afb..ca6c0b41fa 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -220,7 +220,7 @@ export default Vue.extend({
 		},
 
 		chooseFileFromDrive() {
-			this.$root.apis.chooseDriveFile({
+			this.$chooseDriveFile({
 				multiple: true
 			}).then(files => {
 				files.forEach(this.attachMedia);
@@ -279,7 +279,7 @@ export default Vue.extend({
 		},
 
 		addVisibleUser() {
-			this.$root.apis.input({
+			this.$input({
 				title: this.$t('username-prompt')
 			}).then(acct => {
 				if (acct.startsWith('@')) acct = acct.substr(1);
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index f5b9161286..2bd472f38e 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -7,7 +7,7 @@
 			<button class="nav" @click="$parent.isDrawerOpening = true"><fa icon="bars"/></button>
 			<i v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation" class="circle"><fa icon="circle"/></i>
 			<h1>
-				<slot>{{ os.instanceName }}</slot>
+				<slot>{{ $root.instanceName }}</slot>
 			</h1>
 			<slot name="func"></slot>
 		</div>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index dd4785e0ad..ed057c2207 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -139,7 +139,7 @@ export default Vue.extend({
 
 	methods: {
 		fn() {
-			this.$root.apis.post();
+			this.$post();
 		},
 
 		saveSrc() {
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 1158e45094..445471200a 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -339,16 +339,16 @@ export default Vue.extend({
 
 		checkForUpdate() {
 			this.checkingForUpdate = true;
-			checkForUpdate((this as any).os, true, true).then(newer => {
+			checkForUpdate(this.$root, true, true).then(newer => {
 				this.checkingForUpdate = false;
 				this.latestVersion = newer;
 				if (newer == null) {
-					this.$root.apis.dialog({
+					this.$dialog({
 						title: this.$t('no-updates'),
 						text: this.$t('no-updates-desc')
 					});
 				} else {
-					this.$root.apis.dialog({
+					this.$dialog({
 						title: this.$t('update-available'),
 						text: this.$t('update-available-desc')
 					});
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index 2f0c25b4a8..2222a22487 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 	},
 	methods: {
 		fn() {
-			this.$root.apis.input({
+			this.$input({
 				title: this.$t('enter-list-name'),
 			}).then(async title => {
 				const list = await this.$root.api('users/lists/create', {