wip

src/web/app/common/views/components/messaging-form.vue

@@ -62,7 +62,7 @@ export default Vue.extend({
 
 		send() {
 			this.sending = true;
-			this.$root.$data.os.api('messaging/messages/create', {
+			(this as any).api('messaging/messages/create', {
 				user_id: this.user.id,
 				text: this.text
 			}).then(message => {

src/web/app/common/views/components/messaging-message.vue

@@ -8,7 +8,7 @@
 			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
 			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%"><img src="/assets/desktop/messaging/delete.png" alt="Delete"/></button>
 			<div class="content" v-if="!message.is_deleted">
-				<mk-post-html v-if="message.ast" :ast="message.ast" :i="$root.$data.os.i"/>
+				<mk-post-html v-if="message.ast" :ast="message.ast" :i="os.i"/>
 				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				<div class="image" v-if="message.file"><img src={ message.file.url } alt="image" title={ message.file.name }/></div>
 			</div>
@@ -30,7 +30,7 @@ export default Vue.extend({
 	props: ['message'],
 	computed: {
 		isMe(): boolean {
-			return this.message.user_id == this.$root.$data.os.i.id;
+			return this.message.user_id == (this as any).os.i.id;
 		},
 		urls(): string[] {
 			if (this.message.ast) {

src/web/app/common/views/components/messaging-room.vue

@@ -48,7 +48,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = new MessagingStreamConnection(this.$root.$data.os.i, this.user.id);
+		this.connection = new MessagingStreamConnection((this as any).os.i, this.user.id);
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
@@ -72,7 +72,7 @@ export default Vue.extend({
 			return new Promise((resolve, reject) => {
 				const max = this.existMoreMessages ? 20 : 10;
 
-				this.$root.$data.os.api('messaging/messages', {
+				(this as any).api('messaging/messages', {
 					user_id: this.user.id,
 					limit: max + 1,
 					until_id: this.existMoreMessages ? this.messages[0].id : undefined
@@ -99,7 +99,7 @@ export default Vue.extend({
 			const isBottom = this.isBottom();
 
 			this.messages.push(message);
-			if (message.user_id != this.$root.$data.os.i.id && !document.hidden) {
+			if (message.user_id != (this as any).os.i.id && !document.hidden) {
 				this.connection.send({
 					type: 'read',
 					id: message.id
@@ -109,7 +109,7 @@ export default Vue.extend({
 			if (isBottom) {
 				// Scroll to bottom
 				this.scrollToBottom();
-			} else if (message.user_id != this.$root.$data.os.i.id) {
+			} else if (message.user_id != (this as any).os.i.id) {
 				// Notify
 				this.notify('%i18n:common.tags.mk-messaging-room.new-message%');
 			}
@@ -157,7 +157,7 @@ export default Vue.extend({
 		onVisibilitychange() {
 			if (document.hidden) return;
 			this.messages.forEach(message => {
-				if (message.user_id !== this.$root.$data.os.i.id && !message.is_read) {
+				if (message.user_id !== (this as any).os.i.id && !message.is_read) {
 					this.connection.send({
 						type: 'read',
 						id: message.id

src/web/app/common/views/components/messaging.vue

@@ -71,13 +71,13 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.streams.messagingIndexStream.getConnection();
+		this.connection = (this as any).os.streams.messagingIndexStream.getConnection();
-		this.connectionId = this.$root.$data.os.streams.messagingIndexStream.use();
+		this.connectionId = (this as any).os.streams.messagingIndexStream.use();
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
 
-		this.$root.$data.os.api('messaging/history').then(messages => {
+		(this as any).api('messaging/history').then(messages => {
 			this.fetching = false;
 			this.messages = messages;
 		});
@@ -85,11 +85,11 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('message', this.onMessage);
 		this.connection.off('read', this.onRead);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		isMe(message) {
-			return message.user_id == this.$root.$data.os.i.id;
+			return message.user_id == (this as any).os.i.id;
 		},
 		onMessage(message) {
 			this.messages = this.messages.filter(m => !(
@@ -109,7 +109,7 @@ export default Vue.extend({
 				this.result = [];
 				return;
 			}
-			this.$root.$data.os.api('users/search', {
+			(this as any).api('users/search', {
 				query: this.q,
 				max: 5
 			}).then(users => {

src/web/app/common/views/components/poll.vue

@@ -47,7 +47,7 @@
 			},
 			vote(id) {
 				if (this.poll.choices.some(c => c.is_voted)) return;
-				this.$root.$data.os.api('posts/polls/vote', {
+				(this as any).api('posts/polls/vote', {
 					post_id: this.post.id,
 					choice: id
 				}).then(() => {

src/web/app/common/views/components/post-menu.vue

@@ -48,7 +48,7 @@ export default Vue.extend({
 	},
 	methods: {
 		pin() {
-			this.$root.$data.os.api('i/pin', {
+			(this as any).api('i/pin', {
 				post_id: this.post.id
 			}).then(() => {
 				this.$destroy();

src/web/app/common/views/components/reaction-picker.vue

@@ -68,7 +68,7 @@ export default Vue.extend({
 	},
 	methods: {
 		react(reaction) {
-			this.$root.$data.os.api('posts/reactions/create', {
+			(this as any).api('posts/reactions/create', {
 				post_id: this.post.id,
 				reaction: reaction
 			}).then(() => {

src/web/app/common/views/components/signin.vue

@@ -28,7 +28,7 @@ export default Vue.extend({
 	},
 	methods: {
 		onUsernameChange() {
-			this.$root.$data.os.api('users/show', {
+			(this as any).api('users/show', {
 				username: this.username
 			}).then(user => {
 				this.user = user;
@@ -37,7 +37,7 @@ export default Vue.extend({
 		onSubmit() {
 			this.signing = true;
 
-			this.$root.$data.os.api('signin', {
+			(this as any).api('signin', {
 				username: this.username,
 				password: this.password,
 				token: this.user && this.user.two_factor_enabled ? this.token : undefined

src/web/app/common/views/components/signup.vue

@@ -88,7 +88,7 @@ export default Vue.extend({
 
 			this.usernameState = 'wait';
 
-			this.$root.$data.os.api('username/available', {
+			(this as any).api('username/available', {
 				username: this.username
 			}).then(result => {
 				this.usernameState = result.available ? 'ok' : 'unavailable';
@@ -115,12 +115,12 @@ export default Vue.extend({
 			this.passwordRetypeState = this.password == this.retypedPassword ? 'match' : 'not-match';
 		},
 		onSubmit() {
-			this.$root.$data.os.api('signup', {
+			(this as any).api('signup', {
 				username: this.username,
 				password: this.password,
 				'g-recaptcha-response': (window as any).grecaptcha.getResponse()
 			}).then(() => {
-				this.$root.$data.os.api('signin', {
+				(this as any).api('signin', {
 					username: this.username,
 					password: this.password
 				}).then(() => {

src/web/app/common/views/components/stream-indicator.vue

@@ -26,10 +26,10 @@ export default Vue.extend({
 		};
 	},
 	created() {
-		this.stream = this.$root.$data.os.stream.borrow();
+		this.stream = (this as any).os.stream.borrow();
 
-		this.$root.$data.os.stream.on('connected', this.onConnected);
+		(this as any).os.stream.on('connected', this.onConnected);
-		this.$root.$data.os.stream.on('disconnected', this.onDisconnected);
+		(this as any).os.stream.on('disconnected', this.onDisconnected);
 
 		this.$nextTick(() => {
 			if (this.stream.state == 'connected') {
@@ -38,12 +38,12 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		this.$root.$data.os.stream.off('connected', this.onConnected);
+		(this as any).os.stream.off('connected', this.onConnected);
-		this.$root.$data.os.stream.off('disconnected', this.onDisconnected);
+		(this as any).os.stream.off('disconnected', this.onDisconnected);
 	},
 	methods: {
 		onConnected() {
-			this.stream = this.$root.$data.os.stream.borrow();
+			this.stream = (this as any).os.stream.borrow();
 
 			setTimeout(() => {
 				anime({

src/web/app/common/views/components/uploader.vue

@@ -50,7 +50,7 @@ export default Vue.extend({
 			reader.readAsDataURL(file);
 
 			const data = new FormData();
-			data.append('i', this.$root.$data.os.i.token);
+			data.append('i', (this as any).os.i.token);
 			data.append('file', file);
 
 			if (folder) data.append('folder_id', folder);

src/web/app/common/views/components/widgets/photo-stream.vue

@@ -26,12 +26,12 @@ export default define({
 		};
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('drive_file_created', this.onDriveFileCreated);
 
-		this.$root.$data.os.api('drive/stream', {
+		(this as any).api('drive/stream', {
 			type: 'image/*',
 			limit: 9
 		}).then(images => {
@@ -41,7 +41,7 @@ export default define({
 	},
 	beforeDestroy() {
 		this.connection.off('drive_file_created', this.onDriveFileCreated);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		onDriveFileCreated(file) {

src/web/app/common/views/components/widgets/slideshow.vue

@@ -89,7 +89,7 @@ export default define({
 		fetch() {
 			this.fetching = true;
 
-			this.$root.$data.os.api('drive/files', {
+			(this as any).api('drive/files', {
 				folder_id: this.props.folder,
 				type: 'image/*',
 				limit: 100
@@ -102,7 +102,7 @@ export default define({
 			});
 		},
 		choose() {
-			this.$root.$data.api.chooseDriveFolder().then(folder => {
+			(this as any).apis.chooseDriveFolder().then(folder => {
 				this.props.folder = folder ? folder.id : null;
 				this.fetch();
 			});

src/web/app/desktop/-tags/drive/browser-window.tag

@@ -1,60 +0,0 @@
-<mk-drive-browser-window>
-	<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' } popout={ popout }>
-		<yield to="header">
-			<p class="info" v-if="parent.usage"><b>{ parent.usage.toFixed(1) }%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
-			%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%
-		</yield>
-		<yield to="content">
-			<mk-drive-browser multiple={ true } folder={ parent.folder } ref="browser"/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> .info
-						position absolute
-						top 0
-						left 16px
-						margin 0
-						font-size 80%
-
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					> mk-drive-browser
-						height 100%
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.folder = this.opts.folder ? this.opts.folder : null;
-
-		this.popout = () => {
-			const folder = this.$refs.window.refs.browser.folder;
-			if (folder) {
-				return `${_URL_}/i/drive/folder/${folder.id}`;
-			} else {
-				return `${_URL_}/i/drive`;
-			}
-		};
-
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-
-			this.$root.$data.os.api('drive').then(info => {
-				this.update({
-					usage: info.usage / info.capacity * 100
-				});
-			});
-		});
-
-		this.close = () => {
-			this.$refs.window.close();
-		};
-	</script>
-</mk-drive-browser-window>

src/web/app/desktop/-tags/drive/file-contextmenu.tag

@@ -1,99 +0,0 @@
-<mk-drive-browser-file-contextmenu>
-	<mk-contextmenu ref="ctx">
-		<ul>
-			<li @click="parent.rename">
-				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
-			</li>
-			<li @click="parent.copyUrl">
-				<p>%fa:link%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
-			</li>
-			<li><a href={ parent.file.url + '?download' } download={ parent.file.name } @click="parent.download">%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
-			<li class="separator"></li>
-			<li @click="parent.delete">
-				<p>%fa:R trash-alt%%i18n:common.delete%</p>
-			</li>
-			<li class="separator"></li>
-			<li class="has-child">
-				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%%fa:caret-right%</p>
-				<ul>
-					<li @click="parent.setAvatar">
-						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p>
-					</li>
-					<li @click="parent.setBanner">
-						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%</p>
-					</li>
-				</ul>
-			</li>
-			<li class="has-child">
-				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...%fa:caret-right%</p>
-				<ul>
-					<li @click="parent.addApp">
-						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p>
-					</li>
-				</ul>
-			</li>
-		</ul>
-	</mk-contextmenu>
-	<script lang="typescript">
-		import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
-		import dialog from '../../scripts/dialog';
-		import inputDialog from '../../scripts/input-dialog';
-		import updateAvatar from '../../scripts/update-avatar';
-		import NotImplementedException from '../../scripts/not-implemented-exception';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.browser = this.opts.browser;
-		this.file = this.opts.file;
-
-		this.on('mount', () => {
-			this.$refs.ctx.on('closed', () => {
-				this.$emit('closed');
-				this.$destroy();
-			});
-		});
-
-		this.open = pos => {
-			this.$refs.ctx.open(pos);
-		};
-
-		this.rename = () => {
-			this.$refs.ctx.close();
-
-			inputDialog('%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%', '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%', this.file.name, name => {
-				this.$root.$data.os.api('drive/files/update', {
-					file_id: this.file.id,
-					name: name
-				})
-			});
-		};
-
-		this.copyUrl = () => {
-			copyToClipboard(this.file.url);
-			this.$refs.ctx.close();
-			dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
-				'%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%', [{
-				text: '%i18n:common.ok%'
-			}]);
-		};
-
-		this.download = () => {
-			this.$refs.ctx.close();
-		};
-
-		this.setAvatar = () => {
-			this.$refs.ctx.close();
-			updateAvatar(this.I, null, this.file);
-		};
-
-		this.setBanner = () => {
-			this.$refs.ctx.close();
-			updateBanner(this.I, null, this.file);
-		};
-
-		this.addApp = () => {
-			NotImplementedException();
-		};
-	</script>
-</mk-drive-browser-file-contextmenu>

src/web/app/desktop/-tags/drive/folder-contextmenu.tag

@@ -1,63 +0,0 @@
-<mk-drive-browser-folder-contextmenu>
-	<mk-contextmenu ref="ctx">
-		<ul>
-			<li @click="parent.move">
-				<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
-			</li>
-			<li @click="parent.newWindow">
-				<p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
-			</li>
-			<li class="separator"></li>
-			<li @click="parent.rename">
-				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
-			</li>
-			<li class="separator"></li>
-			<li @click="parent.delete">
-				<p>%fa:R trash-alt%%i18n:common.delete%</p>
-			</li>
-		</ul>
-	</mk-contextmenu>
-	<script lang="typescript">
-		import inputDialog from '../../scripts/input-dialog';
-
-		this.mixin('api');
-
-		this.browser = this.opts.browser;
-		this.folder = this.opts.folder;
-
-		this.open = pos => {
-			this.$refs.ctx.open(pos);
-
-			this.$refs.ctx.on('closed', () => {
-				this.$emit('closed');
-				this.$destroy();
-			});
-		};
-
-		this.move = () => {
-			this.browser.move(this.folder.id);
-			this.$refs.ctx.close();
-		};
-
-		this.newWindow = () => {
-			this.browser.newWindow(this.folder.id);
-			this.$refs.ctx.close();
-		};
-
-		this.createFolder = () => {
-			this.browser.createFolder();
-			this.$refs.ctx.close();
-		};
-
-		this.rename = () => {
-			this.$refs.ctx.close();
-
-			inputDialog('%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%', '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%', this.folder.name, name => {
-				this.$root.$data.os.api('drive/folders/update', {
-					folder_id: this.folder.id,
-					name: name
-				});
-			});
-		};
-	</script>
-</mk-drive-browser-folder-contextmenu>

src/web/app/desktop/api/choose-drive-file.ts

@@ -0,0 +1,18 @@
+import MkChooseFileFromDriveWindow from '../views/components/choose-file-from-drive-window.vue';
+
+export default function(opts) {
+	return new Promise((res, rej) => {
+		const o = opts || {};
+		const w = new MkChooseFileFromDriveWindow({
+			propsData: {
+				title: o.title,
+				multiple: o.multiple,
+				initFolder: o.currentFolder
+			}
+		}).$mount();
+		w.$once('selected', file => {
+			res(file);
+		});
+		document.body.appendChild(w.$el);
+	});
+}

src/web/app/desktop/api/choose-drive-folder.ts

@@ -1,12 +1,12 @@
-import MkChooseFolderFromDriveWindow from '../../../common/views/components/choose-folder-from-drive-window.vue';
+import MkChooseFolderFromDriveWindow from '../views/components/choose-folder-from-drive-window.vue';
 
-export default function(this: any, opts) {
+export default function(opts) {
 	return new Promise((res, rej) => {
 		const o = opts || {};
 		const w = new MkChooseFolderFromDriveWindow({
-			parent: this,
 			propsData: {
-				title: o.title
+				title: o.title,
+				initFolder: o.currentFolder
 			}
 		}).$mount();
 		w.$once('selected', folder => {

src/web/app/desktop/api/contextmenu.ts

@@ -0,0 +1,16 @@
+import Ctx from '../views/components/context-menu.vue';
+
+export default function(e, menu, opts?) {
+	const o = opts || {};
+	const vm = new Ctx({
+		propsData: {
+			menu,
+			x: e.pageX - window.pageXOffset,
+			y: e.pageY - window.pageYOffset,
+		}
+	}).$mount();
+	vm.$once('closed', () => {
+		if (o.closed) o.closed();
+	});
+	document.body.appendChild(vm.$el);
+}

src/web/app/desktop/api/dialog.ts

@@ -0,0 +1,19 @@
+import Dialog from '../views/components/dialog.vue';
+
+export default function(opts) {
+	return new Promise<string>((res, rej) => {
+		const o = opts || {};
+		const d = new Dialog({
+			propsData: {
+				title: o.title,
+				text: o.text,
+				modal: o.modal,
+				buttons: o.actions
+			}
+		}).$mount();
+		d.$once('clicked', id => {
+			res(id);
+		});
+		document.body.appendChild(d.$el);
+	});
+}

src/web/app/desktop/api/input.ts

@@ -0,0 +1,19 @@
+import InputDialog from '../views/components/input-dialog.vue';
+
+export default function(opts) {
+	return new Promise<string>((res, rej) => {
+		const o = opts || {};
+		const d = new InputDialog({
+			propsData: {
+				title: o.title,
+				placeholder: o.placeholder,
+				default: o.default,
+				type: o.type || 'text'
+			}
+		}).$mount();
+		d.$once('done', text => {
+			res(text);
+		});
+		document.body.appendChild(d.$el);
+	});
+}

src/web/app/desktop/script.ts

@@ -11,6 +11,9 @@ import HomeStreamManager from '../common/scripts/streaming/home-stream-manager';
 import composeNotification from '../common/scripts/compose-notification';
 
 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 MkIndex from './views/pages/index.vue';
 
@@ -30,7 +33,10 @@ init(async (launch) => {
 	require('./views/components');
 
 	const app = launch({
-		chooseDriveFolder
+		chooseDriveFolder,
+		chooseDriveFile,
+		dialog,
+		input
 	});
 
 	/**

src/web/app/desktop/views/components/2fa-setting.vue

@@ -36,7 +36,7 @@ export default Vue.extend({
 	methods: {
 		register() {
 			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
-				this.$root.$data.os.api('i/2fa/register', {
+				(this as any).api('i/2fa/register', {
 					password: password
 				}).then(data => {
 					this.data = data;
@@ -46,21 +46,21 @@ export default Vue.extend({
 
 		unregister() {
 			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
-				this.$root.$data.os.api('i/2fa/unregister', {
+				(this as any).api('i/2fa/unregister', {
 					password: password
 				}).then(() => {
 					notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%');
-					this.$root.$data.os.i.two_factor_enabled = false;
+					(this as any).os.i.two_factor_enabled = false;
 				});
 			});
 		},
 
 		submit() {
-			this.$root.$data.os.api('i/2fa/done', {
+			(this as any).api('i/2fa/done', {
 				token: this.token
 			}).then(() => {
 				notify('%i18n:desktop.tags.mk-2fa-setting.success%');
-				this.$root.$data.os.i.two_factor_enabled = true;
+				(this as any).os.i.two_factor_enabled = true;
 			}).catch(() => {
 				notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
 			});

src/web/app/desktop/views/components/api-setting.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-api-setting">
-	<p>Token: <code>{{ $root.$data.os.i.token }}</code></p>
+	<p>Token: <code>{{ os.i.token }}</code></p>
 	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
 	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
@@ -16,7 +16,7 @@ export default Vue.extend({
 	methods: {
 		regenerateToken() {
 			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
-				this.$root.$data.os.api('i/regenerate_token', {
+				(this as any).api('i/regenerate_token', {
 					password: password
 				});
 			});

src/web/app/desktop/views/components/context-menu-menu.vue

@@ -0,0 +1,113 @@
+<template>
+<ul class="me-nu">
+	<li v-for="(item, i) in menu" :key="i" :class="item.type">
+		<template v-if="item.type == 'item'">
+			<p @click="click(item)"><span class="icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
+		</template>
+		<template v-else-if="item.type == 'nest'">
+			<p><span class="icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}...<span class="caret">%fa:caret-right%</span></p>
+			<me-nu :menu="item.menu" @x="click"/>
+		</template>
+	</li>
+</ul>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'me-nu',
+	props: ['menu'],
+	methods: {
+		click(item) {
+			this.$emit('x', item);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.me-nu
+	$width = 240px
+	$item-height = 38px
+	$padding = 10px
+
+	ul
+		display block
+		margin 0
+		padding $padding 0
+		list-style none
+
+	li
+		display block
+
+		&:empty
+			margin-top $padding
+			padding-top $padding
+			border-top solid 1px #eee
+
+		&.nest
+			> p
+				cursor default
+
+				> .caret
+					> *
+						position absolute
+						top 0
+						right 8px
+						line-height $item-height
+
+			&:hover > ul
+				visibility visible
+
+			&:active
+				> p, a
+					background $theme-color
+
+		> p, a
+			display block
+			z-index 1
+			margin 0
+			padding 0 32px 0 38px
+			line-height $item-height
+			color #868C8C
+			text-decoration none
+			cursor pointer
+
+			&:hover
+				text-decoration none
+
+			*
+				pointer-events none
+
+			> .icon
+				> *
+					width 28px
+					margin-left -28px
+					text-align center
+
+		&:hover
+			> p, a
+				text-decoration none
+				background $theme-color
+				color $theme-color-foreground
+
+		&:active
+			> p, a
+				text-decoration none
+				background darken($theme-color, 10%)
+				color $theme-color-foreground
+
+	li > ul
+		visibility hidden
+		position absolute
+		top 0
+		left $width
+		margin-top -($padding)
+		width $width
+		background #fff
+		border-radius 0 4px 4px 4px
+		box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+		transition visibility 0s linear 0.2s
+
+</style>
+

src/web/app/desktop/views/components/context-menu.vue

@@ -0,0 +1,74 @@
+<template>
+<div class="context-menu" :style="{ x: `${x}px`, y: `${y}px` }" @contextmenu.prevent="() => {}">
+	<me-nu :menu="menu" @x="click"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import contains from '../../../common/scripts/contains';
+import meNu from './context-menu-menu.vue';
+
+export default Vue.extend({
+	components: {
+		'me-nu': meNu
+	},
+	props: ['x', 'y', 'menu'],
+	mounted() {
+		this.$nextTick(() => {
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.addEventListener('mousedown', this.onMousedown);
+			});
+
+			this.$el.style.display = 'block';
+
+			anime({
+				targets: this.$el,
+				opacity: [0, 1],
+				duration: 100,
+				easing: 'linear'
+			});
+		});
+	},
+	methods: {
+		onMousedown(e) {
+			e.preventDefault();
+			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
+			return false;
+		},
+		click(item) {
+			if (item.onClick) item.onClick();
+			this.close();
+		},
+		close() {
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.removeEventListener('mousedown', this.onMousedown);
+			});
+
+			this.$emit('closed');
+			this.$destroy();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.context-menu
+	$width = 240px
+	$item-height = 38px
+	$padding = 10px
+
+	display none
+	position fixed
+	top 0
+	left 0
+	z-index 4096
+	width $width
+	font-size 0.8em
+	background #fff
+	border-radius 0 4px 4px 4px
+	box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+	opacity 0
+
+</style>

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

@@ -1,142 +0,0 @@
-<template>
-<div class="mk-contextmenu" @contextmenu.prevent="() => {}">
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-import contains from '../../../common/scripts/contains';
-
-export default Vue.extend({
-	props: ['x', 'y'],
-	mounted() {
-		document.querySelectorAll('body *').forEach(el => {
-			el.addEventListener('mousedown', this.onMousedown);
-		});
-
-		this.$el.style.display = 'block';
-		this.$el.style.left = this.x + 'px';
-		this.$el.style.top = this.y + 'px';
-
-		anime({
-			targets: this.$el,
-			opacity: [0, 1],
-			duration: 100,
-			easing: 'linear'
-		});
-	},
-	methods: {
-		onMousedown(e) {
-			e.preventDefault();
-			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
-			return false;
-		},
-		close() {
-			Array.from(document.querySelectorAll('body *')).forEach(el => {
-				el.removeEventListener('mousedown', this.onMousedown);
-			});
-
-			this.$emit('closed');
-			this.$destroy();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-contextmenu
-	$width = 240px
-	$item-height = 38px
-	$padding = 10px
-
-	display none
-	position fixed
-	top 0
-	left 0
-	z-index 4096
-	width $width
-	font-size 0.8em
-	background #fff
-	border-radius 0 4px 4px 4px
-	box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
-	opacity 0
-
-	ul
-		display block
-		margin 0
-		padding $padding 0
-		list-style none
-
-	li
-		display block
-
-		&.separator
-			margin-top $padding
-			padding-top $padding
-			border-top solid 1px #eee
-
-		&.has-child
-			> p
-				cursor default
-
-				> [data-fa]:last-child
-					position absolute
-					top 0
-					right 8px
-					line-height $item-height
-
-			&:hover > ul
-				visibility visible
-
-			&:active
-				> p, a
-					background $theme-color
-
-		> p, a
-			display block
-			z-index 1
-			margin 0
-			padding 0 32px 0 38px
-			line-height $item-height
-			color #868C8C
-			text-decoration none
-			cursor pointer
-
-			&:hover
-				text-decoration none
-
-			*
-				pointer-events none
-
-			> i
-				width 28px
-				margin-left -28px
-				text-align center
-
-		&:hover
-			> p, a
-				text-decoration none
-				background $theme-color
-				color $theme-color-foreground
-
-		&:active
-			> p, a
-				text-decoration none
-				background darken($theme-color, 10%)
-				color $theme-color-foreground
-
-	li > ul
-		visibility hidden
-		position absolute
-		top 0
-		left $width
-		margin-top -($padding)
-		width $width
-		background #fff
-		border-radius 0 4px 4px 4px
-		box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
-		transition visibility 0s linear 0.2s
-
-</style>

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

@@ -5,7 +5,7 @@
 		<header v-html="title"></header>
 		<div class="body" v-html="text"></div>
 		<div class="buttons">
-			<button v-for="(button, i) in buttons" @click="click(button)" :key="i">{{ button.text }}</button>
+			<button v-for="button in buttons" @click="click(button)" :key="button.id">{{ button.text }}</button>
 		</div>
 	</div>
 </div>
@@ -26,13 +26,9 @@ export default Vue.extend({
 		buttons: {
 			type: Array
 		},
-		canThrough: {
+		modal: {
 			type: Boolean,
-			default: true
+			default: false
-		},
-		onThrough: {
-			type: Function,
-			required: false
 		}
 	},
 	mounted() {
@@ -54,7 +50,7 @@ export default Vue.extend({
 	},
 	methods: {
 		click(button) {
-			if (button.onClick) button.onClick();
+			this.$emit('clicked', button.id);
 			this.close();
 		},
 		close() {
@@ -77,8 +73,7 @@ export default Vue.extend({
 			});
 		},
 		onBgClick() {
-			if (this.canThrough) {
+			if (!this.modal) {
-				if (this.onThrough) this.onThrough();
 				this.close();
 			}
 		}

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

@@ -1,46 +0,0 @@
-<template>
-<mk-contextmenu ref="menu" @closed="onClosed">
-	<ul>
-		<li @click="createFolder">
-			<p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
-		</li>
-		<li @click="upload">
-			<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
-		</li>
-		<li @click="urlUpload">
-			<p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
-		</li>
-	</ul>
-</mk-contextmenu>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['browser'],
-	mounted() {
-
-	},
-	methods: {
-		close() {
-			(this.$refs.menu as any).close();
-		},
-		onClosed() {
-			this.$emit('closed');
-			this.$destroy();
-		},
-		createFolder() {
-			this.browser.createFolder();
-			this.close();
-		},
-		upload() {
-			this.browser.selectLocalFile();
-			this.close();
-		},
-		urlUpload() {
-			this.browser.urlUpload();
-			this.close();
-		}
-	}
-});
-</script>

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

@@ -3,24 +3,24 @@
 	:data-is-selected="isSelected"
 	:data-is-contextmenu-showing="isContextmenuShowing"
 	@click="onClick"
-	@contextmenu.prevent.stop="onContextmenu"
 	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
+	@contextmenu.prevent.stop="onContextmenu"
 	:title="title"
 >
-	<div class="label" v-if="I.avatar_id == file.id"><img src="/assets/label.svg"/>
+	<div class="label" v-if="os.i.avatar_id == file.id"><img src="/assets/label.svg"/>
 		<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
 	</div>
-	<div class="label" v-if="I.banner_id == file.id"><img src="/assets/label.svg"/>
+	<div class="label" v-if="os.i.banner_id == file.id"><img src="/assets/label.svg"/>
 		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
 	</div>
-	<div class="thumbnail" ref="thumbnail" style="background-color:{ file.properties.average_color ? 'rgb(' + file.properties.average_color.join(',') + ')' : 'transparent' }">
+	<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
-		<img src={ file.url + '?thumbnail&size=128' } alt="" @load="onThumbnailLoaded"/>
+		<img :src="`${file.url}?thumbnail&size=128`" alt="" @load="onThumbnailLoaded"/>
 	</div>
 	<p class="name">
-		<span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span>
+		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{ file.name.substr(file.name.lastIndexOf('.')) }</span>
+		<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
 	</p>
 </div>
 </template>
@@ -28,10 +28,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
+import contextmenu from '../../api/contextmenu';
+import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
 import bytesToSize from '../../../common/scripts/bytes-to-size';
 
 export default Vue.extend({
-	props: ['file', 'browser'],
+	props: ['file'],
 	data() {
 		return {
 			isContextmenuShowing: false,
@@ -39,11 +41,19 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		browser(): any {
+			return this.$parent;
+		},
 		isSelected(): boolean {
 			return this.browser.selectedFiles.some(f => f.id == this.file.id);
 		},
 		title(): string {
 			return `${this.file.name}\n${this.file.type} ${bytesToSize(this.file.datasize)}`;
+		},
+		background(): string {
+			return this.file.properties.average_color
+				? `rgb(${this.file.properties.average_color.join(',')})'`
+				: 'transparent';
 		}
 	},
 	methods: {
@@ -53,18 +63,55 @@ export default Vue.extend({
 
 		onContextmenu(e) {
 			this.isContextmenuShowing = true;
-			const ctx = new MkDriveFileContextmenu({
+			contextmenu(e, [{
-				parent: this,
+				type: 'item',
-				propsData: {
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%',
-					browser: this.browser,
+				icon: '%fa:i-cursor%',
-					x: e.pageX - window.pageXOffset,
+				onClick: this.rename
-					y: e.pageY - window.pageYOffset
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%',
+				icon: '%fa:link%',
+				onClick: this.copyUrl
+			}, {
+				type: 'link',
+				href: `${this.file.url}?download`,
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%',
+				icon: '%fa:download%',
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:common.delete%',
+				icon: '%fa:R trash-alt%',
+				onClick: this.deleteFile
+			}, {
+				type: 'divider',
+			}, {
+				type: 'nest',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%',
+				menu: [{
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%',
+					onClick: this.setAsAvatar
+				}, {
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%',
+					onClick: this.setAsBanner
+				}]
+			}, {
+				type: 'nest',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%',
+				menu: [{
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...',
+					onClick: this.addApp
+				}]
+			}], {
+				closed: () => {
+					this.isContextmenuShowing = false;
 				}
-			}).$mount();
-			ctx.$once('closed', () => {
-				this.isContextmenuShowing = false;
 			});
-			document.body.appendChild(ctx.$el);
 		},
 
 		onDragstart(e) {
@@ -95,6 +142,46 @@ export default Vue.extend({
 					easing: 'linear'
 				});
 			}
+		},
+
+		rename() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%',
+				default: this.file.name
+			}).then(name => {
+				(this as any).api('drive/files/update', {
+					file_id: this.file.id,
+					name: name
+				})
+			});
+		},
+
+		copyUrl() {
+			copyToClipboard(this.file.url);
+			(this as any).apis.dialog({
+				title: '%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%',
+				actions: [{
+					text: '%i18n:common.ok%'
+				}]
+			});
+		},
+
+		setAsAvatar() {
+			(this as any).apis.updateAvatar(this.file);
+		},
+
+		setAsBanner() {
+			(this as any).apis.updateBanner(this.file);
+		},
+
+		addApp() {
+			alert('not implemented yet');
+		},
+
+		deleteFile() {
+			alert('not implemented yet');
 		}
 	}
 });

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

@@ -9,10 +9,10 @@
 	@dragenter.prevent="onDragenter"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
-	@contextmenu.prevent.stop="onContextmenu"
 	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
+	@contextmenu.prevent.stop="onContextmenu"
 	:title="title"
 >
 	<p class="name">
@@ -25,10 +25,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import dialog from '../../scripts/dialog';
+import contextmenu from '../../api/contextmenu';
 
 export default Vue.extend({
-	props: ['folder', 'browser'],
+	props: ['folder'],
 	data() {
 		return {
 			hover: false,
@@ -38,6 +38,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		browser(): any {
+			return this.$parent;
+		},
 		title(): string {
 			return this.folder.name;
 		}
@@ -47,6 +50,39 @@ export default Vue.extend({
 			this.browser.move(this.folder);
 		},
 
+		onContextmenu(e) {
+			this.isContextmenuShowing = true;
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%',
+				icon: '%fa:arrow-right%',
+				onClick: this.go
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%',
+				icon: '%fa:R window-restore%',
+				onClick: this.newWindow
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%',
+				icon: '%fa:i-cursor%',
+				onClick: this.rename
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:common.delete%',
+				icon: '%fa:R trash-alt%',
+				onClick: this.deleteFolder
+			}], {
+				closed: () => {
+					this.isContextmenuShowing = false;
+				}
+			});
+		},
+
 		onMouseover() {
 			this.hover = true;
 		},
@@ -102,7 +138,7 @@ export default Vue.extend({
 			if (obj.type == 'file') {
 				const file = obj.id;
 				this.browser.removeFile(file);
-				this.$root.$data.os.api('drive/files/update', {
+				(this as any).api('drive/files/update', {
 					file_id: file,
 					folder_id: this.folder.id
 				});
@@ -112,7 +148,7 @@ export default Vue.extend({
 				// 移動先が自分自身ならreject
 				if (folder == this.folder.id) return false;
 				this.browser.removeFolder(folder);
-				this.$root.$data.os.api('drive/folders/update', {
+				(this as any).api('drive/folders/update', {
 					folder_id: folder,
 					parent_id: this.folder.id
 				}).then(() => {
@@ -120,10 +156,13 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
+							(this as any).apis.dialog({
-								'%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%', [{
+								title: '%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
-								text: '%i18n:common.ok%'
+								text: '%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%',
-							}]);
+								actions: [{
+									text: '%i18n:common.ok%'
+								}]
+							});
 							break;
 						default:
 							alert('%i18n:desktop.tags.mk-drive-browser-folder.unhandled-error% ' + err);
@@ -152,21 +191,29 @@ export default Vue.extend({
 			this.browser.isDragSource = false;
 		},
 
-		onContextmenu(e) {
+		go() {
-			this.isContextmenuShowing = true;
+			this.browser.move(this.folder.id);
-			const ctx = new MkDriveFolderContextmenu({
+		},
-				parent: this,
+
-				propsData: {
+		newWindow() {
-					browser: this.browser,
+			this.browser.newWindow(this.folder.id);
-					x: e.pageX - window.pageXOffset,
+		},
-					y: e.pageY - window.pageYOffset
+
-				}
+		rename() {
-			}).$mount();
+			(this as any).apis.input({
-			ctx.$once('closed', () => {
+				title: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%',
-				this.isContextmenuShowing = false;
+				placeholder: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%',
+				default: this.folder.name
+			}).then(name => {
+				(this as any).api('drive/folders/update', {
+					folder_id: this.folder.id,
+					name: name
+				});
 			});
-			document.body.appendChild(ctx.$el);
+		},
-			return false;
+
+		deleteFolder() {
+			alert('not implemented yet');
 		}
 	}
 });

src/web/app/desktop/views/components/drive-nav-folder.vue

@@ -73,7 +73,7 @@ export default Vue.extend({
 			if (obj.type == 'file') {
 				const file = obj.id;
 				this.browser.removeFile(file);
-				this.$root.$data.os.api('drive/files/update', {
+				(this as any).api('drive/files/update', {
 					file_id: file,
 					folder_id: this.folder ? this.folder.id : null
 				});
@@ -83,7 +83,7 @@ export default Vue.extend({
 				// 移動先が自分自身ならreject
 				if (this.folder && folder == this.folder.id) return false;
 				this.browser.removeFolder(folder);
-				this.$root.$data.os.api('drive/folders/update', {
+				(this as any).api('drive/folders/update', {
 					folder_id: folder,
 					parent_id: this.folder ? this.folder.id : null
 				});

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

@@ -0,0 +1,53 @@
+<template>
+<mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout="popout">
+	<span slot="header" :class="$style.header">
+		<p class="info" v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
+		%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%
+	</span>
+	<mk-drive-browser multiple :folder="folder" ref="browser"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	props: ['folder'],
+	data() {
+		return {
+			usage: null
+		};
+	},
+	mounted() {
+		(this as any).api('drive').then(info => {
+			this.usage = info.usage / info.capacity * 100;
+		});
+	},
+	methods: {
+		popout() {
+			const folder = (this.$refs.browser as any).folder;
+			if (folder) {
+				return `${url}/i/drive/folder/${folder.id}`;
+			} else {
+				return `${url}/i/drive`;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.info
+	position absolute
+	top 0
+	left 16px
+	margin 0
+	font-size 80%
+
+</style>
+

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

@@ -2,17 +2,17 @@
 <div class="mk-drive">
 	<nav>
 		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<mk-drive-browser-nav-folder :class="{ current: folder == null }" folder={ null }/>
+			<mk-drive-nav-folder :class="{ current: folder == null }"/>
-			<template each={ folder in hierarchyFolders }>
+			<template v-for="folder in hierarchyFolders">
-				<span class="separator">%fa:angle-right%</span>
+				<span class="separator" :key="folder.id + '>'">%fa:angle-right%</span>
-				<mk-drive-browser-nav-folder folder={ folder }/>
+				<mk-drive-nav-folder :folder="folder" :key="folder.id"/>
 			</template>
 			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
-			<span class="folder current" v-if="folder != null">{ folder.name }</span>
+			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 		<input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/>
 	</nav>
-	<div class="main { uploading: uploads.length > 0, fetching: fetching }"
+	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
 		ref="main"
 		@mousedown="onMousedown"
 		@dragover.prevent.stop="onDragover"
@@ -24,19 +24,15 @@
 		<div class="selection" ref="selection"></div>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
-				<template each={ folder in folders }>
+				<mk-drive-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
-					<mk-drive-browser-folder class="folder" folder={ folder }/>
-				</template>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" each={ Array(10).fill(16) }></div>
+				<div class="padding" v-for="n in 16" :key="n"></div>
 				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="files" ref="filesContainer" v-if="files.length > 0">
-				<template each={ file in files }>
+				<mk-drive-file v-for="file in files" :key="file.id" class="file" :file="file"/>
-					<mk-drive-browser-file class="file" file={ file }/>
-				</template>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" each={ Array(10).fill(16) }></div>
+				<div class="padding" v-for="n in 16" :key="n"></div>
 				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
@@ -60,16 +56,18 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
-import dialog from '../../scripts/dialog';
+import contextmenu from '../../api/contextmenu';
-import inputDialog from '../../scripts/input-dialog';
 
 export default Vue.extend({
 	props: {
 		initFolder: {
+			type: Object,
 			required: false
 		},
 		multiple: {
+			type: Boolean,
 			default: false
 		}
 	},
@@ -106,8 +104,8 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.streams.driveStream.getConnection();
+		this.connection = (this as any).os.streams.driveStream.getConnection();
-		this.connectionId = this.$root.$data.os.streams.driveStream.use();
+		this.connectionId = (this as any).os.streams.driveStream.use();
 
 		this.connection.on('file_created', this.onStreamDriveFileCreated);
 		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
@@ -125,12 +123,32 @@ export default Vue.extend({
 		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
 		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
 		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
-		this.$root.$data.os.streams.driveStream.dispose(this.connectionId);
+		(this as any).os.streams.driveStream.dispose(this.connectionId);
 	},
 	methods: {
+		onContextmenu(e) {
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%',
+				icon: '%fa:R folder%',
+				onClick: this.createFolder
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%',
+				icon: '%fa:upload%',
+				onClick: this.selectLocalFile
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%',
+				icon: '%fa:cloud-upload-alt%',
+				onClick: this.urlUpload
+			}]);
+		},
+
 		onStreamDriveFileCreated(file) {
 			this.addFile(file, true);
 		},
+
 		onStreamDriveFileUpdated(file) {
 			const current = this.folder ? this.folder.id : null;
 			if (current != file.folder_id) {
@@ -139,9 +157,11 @@ export default Vue.extend({
 				this.addFile(file, true);
 			}
 		},
+
 		onStreamDriveFolderCreated(folder) {
 			this.addFolder(folder, true);
 		},
+
 		onStreamDriveFolderUpdated(folder) {
 			const current = this.folder ? this.folder.id : null;
 			if (current != folder.parent_id) {
@@ -150,12 +170,15 @@ export default Vue.extend({
 				this.addFolder(folder, true);
 			}
 		},
+
 		onChangeUploaderUploads(uploads) {
 			this.uploadings = uploads;
 		},
+
 		onUploaderUploaded(file) {
 			this.addFile(file, true);
 		},
+
 		onMousedown(e): any {
 			if (contains(this.$refs.foldersContainer, e.target) || contains(this.$refs.filesContainer, e.target)) return true;
 
@@ -202,6 +225,7 @@ export default Vue.extend({
 			document.documentElement.addEventListener('mousemove', move);
 			document.documentElement.addEventListener('mouseup', up);
 		},
+
 		onDragover(e): any {
 			// ドラッグ元が自分自身の所有するアイテムかどうか
 			if (!this.isDragSource) {
@@ -214,12 +238,15 @@ export default Vue.extend({
 				return false;
 			}
 		},
+
 		onDragenter(e) {
 			if (!this.isDragSource) this.draghover = true;
 		},
+
 		onDragleave(e) {
 			this.draghover = false;
 		},
+
 		onDrop(e): any {
 			this.draghover = false;
 
@@ -244,7 +271,7 @@ export default Vue.extend({
 				const file = obj.id;
 				if (this.files.some(f => f.id == file)) return false;
 				this.removeFile(file);
-				this.$root.$data.os.api('drive/files/update', {
+				(this as any).api('drive/files/update', {
 					file_id: file,
 					folder_id: this.folder ? this.folder.id : null
 				});
@@ -255,7 +282,7 @@ export default Vue.extend({
 				if (this.folder && folder == this.folder.id) return false;
 				if (this.folders.some(f => f.id == folder)) return false;
 				this.removeFolder(folder);
-				this.$root.$data.os.api('drive/folders/update', {
+				(this as any).api('drive/folders/update', {
 					folder_id: folder,
 					parent_id: this.folder ? this.folder.id : null
 				}).then(() => {
@@ -263,10 +290,13 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
+							(this as any).apis.dialog({
-								'%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%', [{
+								title: '%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
-								text: '%i18n:common.ok%'
+								text: '%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%',
-							}]);
+								actions: [{
+									text: '%i18n:common.ok%'
+								}]
+							});
 							break;
 						default:
 							alert('%i18n:desktop.tags.mk-drive-browser.unhandled-error% ' + err);
@@ -276,40 +306,37 @@ export default Vue.extend({
 
 			return false;
 		},
-		onContextmenu(e) {
-			document.body.appendChild(new MkDriveContextmenu({
-				propsData: {
-					browser: this,
-					x: e.pageX - window.pageXOffset,
-					y: e.pageY - window.pageYOffset
-				}
-			}).$mount().$el);
 
-			return false;
-		},
 		selectLocalFile() {
 			(this.$refs.fileInput as any).click();
 		},
-		urlUpload() {
-			inputDialog('%i18n:desktop.tags.mk-drive-browser.url-upload%',
-				'%i18n:desktop.tags.mk-drive-browser.url-of-file%', null, url => {
 
-				this.$root.$data.os.api('drive/files/upload_from_url', {
+		urlUpload() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser.url-upload%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser.url-of-file%'
+			}).then(url => {
+				(this as any).api('drive/files/upload_from_url', {
 					url: url,
 					folder_id: this.folder ? this.folder.id : undefined
 				});
 
-				dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
+				(this as any).apis.dialog({
-					'%i18n:desktop.tags.mk-drive-browser.may-take-time%', [{
+					title: '%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
-					text: '%i18n:common.ok%'
+					text: '%i18n:desktop.tags.mk-drive-browser.may-take-time%',
-				}]);
+					actions: [{
+						text: '%i18n:common.ok%'
+					}]
+				});
 			});
 		},
-		createFolder() {
-			inputDialog('%i18n:desktop.tags.mk-drive-browser.create-folder%',
-				'%i18n:desktop.tags.mk-drive-browser.folder-name%', null, name => {
 
-				this.$root.$data.os.api('drive/folders/create', {
+		createFolder() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser.create-folder%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser.folder-name%'
+			}).then(name => {
+				(this as any).api('drive/folders/create', {
 					name: name,
 					folder_id: this.folder ? this.folder.id : undefined
 				}).then(folder => {
@@ -317,15 +344,18 @@ export default Vue.extend({
 				});
 			});
 		},
+
 		onChangeFileInput() {
 			Array.from((this.$refs.fileInput as any).files).forEach(file => {
 				this.upload(file, this.folder);
 			});
 		},
+
 		upload(file, folder) {
 			if (folder && typeof folder == 'object') folder = folder.id;
 			(this.$refs.uploader as any).upload(file, folder);
 		},
+
 		chooseFile(file) {
 			const isAlreadySelected = this.selectedFiles.some(f => f.id == file.id);
 			if (this.multiple) {
@@ -344,6 +374,7 @@ export default Vue.extend({
 				}
 			}
 		},
+
 		newWindow(folderId) {
 			document.body.appendChild(new MkDriveWindow({
 				propsData: {
@@ -351,6 +382,7 @@ export default Vue.extend({
 				}
 			}).$mount().$el);
 		},
+
 		move(target) {
 			if (target == null) {
 				this.goRoot();
@@ -361,7 +393,7 @@ export default Vue.extend({
 
 			this.fetching = true;
 
-			this.$root.$data.os.api('drive/folders/show', {
+			(this as any).api('drive/folders/show', {
 				folder_id: target
 			}).then(folder => {
 				this.folder = folder;
@@ -378,6 +410,7 @@ export default Vue.extend({
 				this.fetch();
 			});
 		},
+
 		addFolder(folder, unshift = false) {
 			const current = this.folder ? this.folder.id : null;
 			if (current != folder.parent_id) return;
@@ -394,6 +427,7 @@ export default Vue.extend({
 				this.folders.push(folder);
 			}
 		},
+
 		addFile(file, unshift = false) {
 			const current = this.folder ? this.folder.id : null;
 			if (current != file.folder_id) return;
@@ -410,26 +444,33 @@ export default Vue.extend({
 				this.files.push(file);
 			}
 		},
+
 		removeFolder(folder) {
 			if (typeof folder == 'object') folder = folder.id;
 			this.folders = this.folders.filter(f => f.id != folder);
 		},
+
 		removeFile(file) {
 			if (typeof file == 'object') file = file.id;
 			this.files = this.files.filter(f => f.id != file);
 		},
+
 		appendFile(file) {
 			this.addFile(file);
 		},
+
 		appendFolder(folder) {
 			this.addFolder(folder);
 		},
+
 		prependFile(file) {
 			this.addFile(file, true);
 		},
+
 		prependFolder(folder) {
 			this.addFolder(folder, true);
 		},
+
 		goRoot() {
 			// 既にrootにいるなら何もしない
 			if (this.folder == null) return;
@@ -439,6 +480,7 @@ export default Vue.extend({
 			this.$emit('move-root');
 			this.fetch();
 		},
+
 		fetch() {
 			this.folders = [];
 			this.files = [];
@@ -453,7 +495,7 @@ export default Vue.extend({
 			const filesMax = 30;
 
 			// フォルダ一覧取得
-			this.$root.$data.os.api('drive/folders', {
+			(this as any).api('drive/folders', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: foldersMax + 1
 			}).then(folders => {
@@ -466,7 +508,7 @@ export default Vue.extend({
 			});
 
 			// ファイル一覧取得
-			this.$root.$data.os.api('drive/files', {
+			(this as any).api('drive/files', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: filesMax + 1
 			}).then(files => {
@@ -489,13 +531,14 @@ export default Vue.extend({
 				}
 			};
 		},
+
 		fetchMoreFiles() {
 			this.fetching = true;
 
 			const max = 30;
 
 			// ファイル一覧取得
-			this.$root.$data.os.api('drive/files', {
+			(this as any).api('drive/files', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: max + 1
 			}).then(files => {

src/web/app/desktop/views/components/follow-button.vue

@@ -29,8 +29,8 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('follow', this.onFollow);
 		this.connection.on('unfollow', this.onUnfollow);
@@ -38,7 +38,7 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('follow', this.onFollow);
 		this.connection.off('unfollow', this.onUnfollow);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 
@@ -57,7 +57,7 @@ export default Vue.extend({
 		onClick() {
 			this.wait = true;
 			if (this.user.is_following) {
-				this.$root.$data.os.api('following/delete', {
+				(this as any).api('following/delete', {
 					user_id: this.user.id
 				}).then(() => {
 					this.user.is_following = false;
@@ -67,7 +67,7 @@ export default Vue.extend({
 					this.wait = false;
 				});
 			} else {
-				this.$root.$data.os.api('following/create', {
+				(this as any).api('following/create', {
 					user_id: this.user.id
 				}).then(() => {
 					this.user.is_following = true;

src/web/app/desktop/views/components/friends-maker.vue

@@ -39,7 +39,7 @@ export default Vue.extend({
 			this.fetching = true;
 			this.users = [];
 
-			this.$root.$data.os.api('users/recommendation', {
+			(this as any).api('users/recommendation', {
 				limit: this.limit,
 				offset: this.limit * this.page
 			}).then(users => {

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

@@ -101,7 +101,7 @@ export default Vue.extend({
 	},
 	methods: {
 		bakeHomeData() {
-			return JSON.stringify(this.$root.$data.os.i.client_settings.home);
+			return JSON.stringify((this as any).os.i.client_settings.home);
 		},
 		onTlLoaded() {
 			this.$emit('loaded');
@@ -123,7 +123,7 @@ export default Vue.extend({
 				data: {}
 			};
 
-			this.$root.$data.os.i.client_settings.home.unshift(widget);
+			(this as any).os.i.client_settings.home.unshift(widget);
 
 			this.saveHome();
 		},
@@ -132,48 +132,48 @@ export default Vue.extend({
 
 			Array.from((this.$refs.left as Element).children).forEach(el => {
 				const id = el.getAttribute('data-widget-id');
-				const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
+				const widget = (this as any).os.i.client_settings.home.find(w => w.id == id);
 				widget.place = 'left';
 				data.push(widget);
 			});
 
 			Array.from((this.$refs.right as Element).children).forEach(el => {
 				const id = el.getAttribute('data-widget-id');
-				const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
+				const widget = (this as any).os.i.client_settings.home.find(w => w.id == id);
 				widget.place = 'right';
 				data.push(widget);
 			});
 
 			Array.from((this.$refs.maintop as Element).children).forEach(el => {
 				const id = el.getAttribute('data-widget-id');
-				const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
+				const widget = (this as any).os.i.client_settings.home.find(w => w.id == id);
 				widget.place = 'main';
 				data.push(widget);
 			});
 
-			this.$root.$data.os.api('i/update_home', {
+			(this as any).api('i/update_home', {
 				home: data
 			});
 		}
 	},
 	computed: {
 		leftWidgets(): any {
-			return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'left');
+			return (this as any).os.i.client_settings.home.filter(w => w.place == 'left');
 		},
 		centerWidgets(): any {
-			return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'center');
+			return (this as any).os.i.client_settings.home.filter(w => w.place == 'center');
 		},
 		rightWidgets(): any {
-			return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'right');
+			return (this as any).os.i.client_settings.home.filter(w => w.place == 'right');
 		}
 	},
 	created() {
 		this.bakedHomeData = this.bakeHomeData();
 	},
 	mounted() {
-		this.$root.$data.os.i.on('refreshed', this.onMeRefreshed);
+		(this as any).os.i.on('refreshed', this.onMeRefreshed);
 
-		this.home = this.$root.$data.os.i.client_settings.home;
+		this.home = (this as any).os.i.client_settings.home;
 
 		if (!this.customize) {
 			if ((this.$refs.left as Element).children.length == 0) {
@@ -214,14 +214,14 @@ export default Vue.extend({
 					const el = evt.item;
 					const id = el.getAttribute('data-widget-id');
 					el.parentNode.removeChild(el);
-					this.$root.$data.os.i.client_settings.home = this.$root.$data.os.i.client_settings.home.filter(w => w.id != id);
+					(this as any).os.i.client_settings.home = (this as any).os.i.client_settings.home.filter(w => w.id != id);
 					this.saveHome();
 				}
 			}));
 		}
 	},
 	beforeDestroy() {
-		this.$root.$data.os.i.off('refreshed', this.onMeRefreshed);
+		(this as any).os.i.off('refreshed', this.onMeRefreshed);
 
 		this.home.forEach(widget => {
 			widget.unmount();

src/web/app/desktop/views/components/index.ts

@@ -27,6 +27,10 @@ import postForm from './post-form.vue';
 import repostForm from './repost-form.vue';
 import followButton from './follow-button.vue';
 import postPreview from './post-preview.vue';
+import drive from './drive.vue';
+import driveFile from './drive-file.vue';
+import driveFolder from './drive-folder.vue';
+import driveNavFolder from './drive-nav-folder.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-header', uiHeader);
@@ -55,3 +59,7 @@ Vue.component('mk-post-form', postForm);
 Vue.component('mk-repost-form', repostForm);
 Vue.component('mk-follow-button', followButton);
 Vue.component('mk-post-preview', postPreview);
+Vue.component('mk-drive', drive);
+Vue.component('mk-drive-file', driveFile);
+Vue.component('mk-drive-folder', driveFolder);
+Vue.component('mk-drive-nav-folder', driveNavFolder);

src/web/app/desktop/views/components/input-dialog.vue

@@ -33,12 +33,6 @@ export default Vue.extend({
 		},
 		type: {
 			default: 'text'
-		},
-		onOk: {
-			type: Function
-		},
-		onCancel: {
-			type: Function
 		}
 	},
 	data() {
@@ -63,9 +57,9 @@ export default Vue.extend({
 		},
 		beforeClose() {
 			if (this.done) {
-				this.onOk(this.text);
+				this.$emit('done', this.text);
 			} else {
-				if (this.onCancel) this.onCancel();
+				this.$emit('canceled');
 			}
 		},
 		onKeydown(e) {

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

@@ -11,7 +11,6 @@ export default Vue.extend({
 	methods: {
 		navigate(user) {
 			document.body.appendChild(new MkMessagingRoomWindow({
-				parent: this,
 				propsData: {
 					user: user
 				}

src/web/app/desktop/views/components/mute-setting.vue

@@ -22,7 +22,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('mute/list').then(x => {
+		(this as any).api('mute/list').then(x => {
 			this.fetching = false;
 			this.users = x.users;
 		});

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

@@ -128,14 +128,14 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('notification', this.onNotification);
 
 		const max = 10;
 
-		this.$root.$data.os.api('i/notifications', {
+		(this as any).api('i/notifications', {
 			limit: max + 1
 		}).then(notifications => {
 			if (notifications.length == max + 1) {
@@ -149,7 +149,7 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		this.connection.off('notification', this.onNotification);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		fetchMoreNotifications() {
@@ -157,7 +157,7 @@ export default Vue.extend({
 
 			const max = 30;
 
-			this.$root.$data.os.api('i/notifications', {
+			(this as any).api('i/notifications', {
 				limit: max + 1,
 				until_id: this.notifications[this.notifications.length - 1].id
 			}).then(notifications => {

src/web/app/desktop/views/components/password-setting.vue

@@ -22,7 +22,7 @@ export default Vue.extend({
 							}]);
 							return;
 						}
-						this.$root.$data.os.api('i/change_password', {
+						(this as any).api('i/change_password', {
 							current_password: currentPassword,
 							new_password: newPassword
 						}).then(() => {

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

@@ -16,7 +16,7 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="post.ast" :ast="post.ast" :i="$root.$data.os.i"/>
+			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/>
 			<div class="media" v-if="post.media">
 				<mk-images images={ post.media }/>
 			</div>

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

@@ -35,7 +35,7 @@
 			</a>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="p.ast" :ast="p.ast" :i="$root.$data.os.i"/>
+			<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			<div class="media" v-if="p.media">
 				<mk-images images={ p.media }/>
@@ -117,7 +117,7 @@ export default Vue.extend({
 	mounted() {
 		// Get replies
 		if (!this.compact) {
-			this.$root.$data.os.api('posts/replies', {
+			(this as any).api('posts/replies', {
 				post_id: this.p.id,
 				limit: 8
 			}).then(replies => {
@@ -130,7 +130,7 @@ export default Vue.extend({
 			this.contextFetching = true;
 
 			// Fetch context
-			this.$root.$data.os.api('posts/context', {
+			(this as any).api('posts/context', {
 				post_id: this.p.reply_id
 			}).then(context => {
 				this.contextFetching = false;

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

@@ -113,18 +113,12 @@ export default Vue.extend({
 		chooseFile() {
 			(this.$refs.file as any).click();
 		},
-		chooseFileFromDrive() {/*
+		chooseFileFromDrive() {
-			const w = new MkDriveFileSelectorWindow({
+			(this as any).apis.chooseDriveFile({
-				propsData: {
+				multiple: true
-					multiple: true
+			}).then(files => {
-				}
-			}).$mount();
-
-			document.body.appendChild(w.$el);
-
-			w.$once('selected', files => {
 				files.forEach(this.attachMedia);
-			});*/
+			});
 		},
 		attachMedia(driveFile) {
 			this.files.push(driveFile);
@@ -196,7 +190,7 @@ export default Vue.extend({
 		post() {
 			this.posting = true;
 
-			this.$root.$data.os.api('posts/create', {
+			(this as any).api('posts/create', {
 				text: this.text == '' ? undefined : this.text,
 				media_ids: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				reply_id: this.reply ? this.reply.id : undefined,

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

@@ -32,7 +32,7 @@
 				<div class="text" ref="text">
 					<p class="channel" v-if="p.channel"><a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:</p>
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-post-html v-if="p.ast" :ast="p.ast" :i="$root.$data.os.i"/>
+					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/>
 					<a class="quote" v-if="p.repost">RP:</a>
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
@@ -133,24 +133,24 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 	},
 	mounted() {
 		this.capture(true);
 
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.on('_connected_', this.onStreamConnected);
 		}
 	},
 	beforeDestroy() {
 		this.decapture(true);
 		this.connection.off('_connected_', this.onStreamConnected);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		capture(withHandler = false) {
-			if (this.$root.$data.os.isSignedIn) {
+			if ((this as any).os.isSignedIn) {
 				this.connection.send({
 					type: 'capture',
 					id: this.post.id
@@ -159,7 +159,7 @@ export default Vue.extend({
 			}
 		},
 		decapture(withHandler = false) {
-			if (this.$root.$data.os.isSignedIn) {
+			if ((this as any).os.isSignedIn) {
 				this.connection.send({
 					type: 'decapture',
 					id: this.post.id
@@ -178,7 +178,7 @@ export default Vue.extend({
 		},
 		reply() {
 			document.body.appendChild(new MkPostFormWindow({
-				parent: this,
+
 				propsData: {
 					reply: this.p
 				}
@@ -186,7 +186,7 @@ export default Vue.extend({
 		},
 		repost() {
 			document.body.appendChild(new MkRepostFormWindow({
-				parent: this,
+
 				propsData: {
 					post: this.p
 				}
@@ -194,7 +194,7 @@ export default Vue.extend({
 		},
 		react() {
 			document.body.appendChild(new MkReactionPicker({
-				parent: this,
+
 				propsData: {
 					source: this.$refs.reactButton,
 					post: this.p
@@ -203,7 +203,7 @@ export default Vue.extend({
 		},
 		menu() {
 			document.body.appendChild(new MkPostMenu({
-				parent: this,
+
 				propsData: {
 					source: this.$refs.menuButton,
 					post: this.p

src/web/app/desktop/views/components/profile-setting.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-profile-setting">
 	<label class="avatar ui from group">
-		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" :src="`${$root.$data.os.i.avatar_url}?thumbnail&size=64`" alt="avatar"/>
+		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" :src="`${os.i.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		<button class="ui" @click="updateAvatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
 	</label>
 	<label class="ui from group">
@@ -32,18 +32,18 @@ import notify from '../../scripts/notify';
 export default Vue.extend({
 	data() {
 		return {
-			name: this.$root.$data.os.i.name,
+			name: (this as any).os.i.name,
-			location: this.$root.$data.os.i.location,
+			location: (this as any).os.i.location,
-			description: this.$root.$data.os.i.description,
+			description: (this as any).os.i.description,
-			birthday: this.$root.$data.os.i.birthday,
+			birthday: (this as any).os.i.birthday,
 		};
 	},
 	methods: {
 		updateAvatar() {
-			updateAvatar(this.$root.$data.os.i);
+			updateAvatar((this as any).os.i);
 		},
 		save() {
-			this.$root.$data.os.api('i/update', {
+			(this as any).api('i/update', {
 				name: this.name,
 				location: this.location || null,
 				description: this.description || null,

src/web/app/desktop/views/components/repost-form.vue

@@ -29,7 +29,7 @@ export default Vue.extend({
 	methods: {
 		ok() {
 			this.wait = true;
-			this.$root.$data.os.api('posts/create', {
+			(this as any).api('posts/create', {
 				repost_id: this.post.id
 			}).then(data => {
 				this.$emit('posted');

src/web/app/desktop/views/components/sub-post-content.vue

@@ -2,7 +2,7 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.reply_id">%fa:reply%</a>
-		<mk-post-html :ast="post.ast" :i="$root.$data.os.i"/>
+		<mk-post-html :ast="post.ast" :i="os.i"/>
 		<a class="quote" v-if="post.repost_id" :href="`/post:${post.repost_id}`">RP: ...</a>
 		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 	</div>

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

@@ -30,12 +30,12 @@ export default Vue.extend({
 	},
 	computed: {
 		alone(): boolean {
-			return this.$root.$data.os.i.following_count == 0;
+			return (this as any).os.i.following_count == 0;
 		}
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('post', this.onPost);
 		this.connection.on('follow', this.onChangeFollowing);
@@ -50,7 +50,7 @@ export default Vue.extend({
 		this.connection.off('post', this.onPost);
 		this.connection.off('follow', this.onChangeFollowing);
 		this.connection.off('unfollow', this.onChangeFollowing);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 
 		document.removeEventListener('keydown', this.onKeydown);
 		window.removeEventListener('scroll', this.onScroll);
@@ -59,7 +59,7 @@ export default Vue.extend({
 		fetch(cb?) {
 			this.fetching = true;
 
-			this.$root.$data.os.api('posts/timeline', {
+			(this as any).api('posts/timeline', {
 				until_date: this.date ? (this.date as any).getTime() : undefined
 			}).then(posts => {
 				this.fetching = false;
@@ -70,7 +70,7 @@ export default Vue.extend({
 		more() {
 			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
 			this.moreFetching = true;
-			this.$root.$data.os.api('posts/timeline', {
+			(this as any).api('posts/timeline', {
 				until_id: this.posts[this.posts.length - 1].id
 			}).then(posts => {
 				this.moreFetching = false;

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

@@ -1,13 +1,13 @@
 <template>
 <div class="mk-ui-header-account">
 	<button class="header" :data-active="isOpen" @click="toggle">
-		<span class="username">{{ $root.$data.os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
+		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
-		<img class="avatar" :src="`${ $root.$data.os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
+		<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
 	</button>
 	<div class="menu" v-if="isOpen">
 		<ul>
 			<li>
-				<a :href="`/${ $root.$data.os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
+				<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
 			</li>
 			<li @click="drive">
 				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>

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

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-ui-header-nav">
 	<ul>
-		<template v-if="$root.$data.os.isSignedIn">
+		<template v-if="os.isSignedIn">
 			<li class="home" :class="{ active: page == 'home' }">
 				<a href="/">
 					%fa:home%
@@ -44,15 +44,15 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
-			this.connection = this.$root.$data.os.stream.getConnection();
+			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = this.$root.$data.os.stream.use();
+			this.connectionId = (this as any).os.stream.use();
 
 			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
 			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
 
 			// Fetch count of unread messaging messages
-			this.$root.$data.os.api('messaging/unread').then(res => {
+			(this as any).api('messaging/unread').then(res => {
 				if (res.count > 0) {
 					this.hasUnreadMessagingMessages = true;
 				}
@@ -60,10 +60,10 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
 			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
-			this.$root.$data.os.stream.dispose(this.connectionId);
+			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {

src/web/app/desktop/views/components/ui-header-notifications.vue

@@ -23,15 +23,15 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
-			this.connection = this.$root.$data.os.stream.getConnection();
+			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = this.$root.$data.os.stream.use();
+			this.connectionId = (this as any).os.stream.use();
 
 			this.connection.on('read_all_notifications', this.onReadAllNotifications);
 			this.connection.on('unread_notification', this.onUnreadNotification);
 
 			// Fetch count of unread notifications
-			this.$root.$data.os.api('notifications/get_unread_count').then(res => {
+			(this as any).api('notifications/get_unread_count').then(res => {
 				if (res.count > 0) {
 					this.hasUnreadNotifications = true;
 				}
@@ -39,10 +39,10 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.off('read_all_notifications', this.onReadAllNotifications);
 			this.connection.off('unread_notification', this.onUnreadNotification);
-			this.$root.$data.os.stream.dispose(this.connectionId);
+			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {

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

@@ -10,9 +10,9 @@
 				</div>
 				<div class="right">
 					<mk-ui-header-search/>
-					<mk-ui-header-account v-if="$root.$data.os.isSignedIn"/>
+					<mk-ui-header-account v-if="os.isSignedIn"/>
-					<mk-ui-header-notifications v-if="$root.$data.os.isSignedIn"/>
+					<mk-ui-header-notifications v-if="os.isSignedIn"/>
-					<mk-ui-header-post-button v-if="$root.$data.os.isSignedIn"/>
+					<mk-ui-header-post-button v-if="os.isSignedIn"/>
 					<mk-ui-header-clock/>
 				</div>
 			</div>

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

@@ -4,7 +4,7 @@
 	<div class="content">
 		<slot></slot>
 	</div>
-	<mk-stream-indicator v-if="$root.$data.os.isSignedIn"/>
+	<mk-stream-indicator v-if="os.isSignedIn"/>
 </div>
 </template>
 

src/web/app/desktop/views/components/user-followers.vue

@@ -14,7 +14,7 @@ export default Vue.extend({
 	props: ['user'],
 	methods: {
 		fetch(iknow, limit, cursor, cb) {
-			this.$root.$data.os.api('users/followers', {
+			(this as any).api('users/followers', {
 				user_id: this.user.id,
 				iknow: iknow,
 				limit: limit,

src/web/app/desktop/views/components/user-following.vue

@@ -14,7 +14,7 @@ export default Vue.extend({
 	props: ['user'],
 	methods: {
 		fetch(iknow, limit, cursor, cb) {
-			this.$root.$data.os.api('users/following', {
+			(this as any).api('users/following', {
 				user_id: this.user.id,
 				iknow: iknow,
 				limit: limit,

src/web/app/desktop/views/components/user-preview.vue

@@ -21,7 +21,7 @@
 				<p>フォロワー</p><a>{{ u.followers_count }}</a>
 			</div>
 		</div>
-		<mk-follow-button v-if="$root.$data.os.isSignedIn && user.id != $root.$data.os.i.id" :user="u"/>
+		<mk-follow-button v-if="os.isSignedIn && user.id != os.i.id" :user="u"/>
 	</template>
 </div>
 </template>
@@ -49,7 +49,7 @@ export default Vue.extend({
 				this.open();
 			});
 		} else {
-			this.$root.$data.os.api('users/show', {
+			(this as any).api('users/show', {
 				user_id: this.user[0] == '@' ? undefined : this.user,
 				username: this.user[0] == '@' ? this.user.substr(1) : undefined
 			}).then(user => {

src/web/app/desktop/views/components/user-timeline.vue

@@ -60,7 +60,7 @@ export default Vue.extend({
 			}
 		},
 		fetch(cb?) {
-			this.$root.$data.os.api('users/posts', {
+			(this as any).api('users/posts', {
 				user_id: this.user.id,
 				until_date: this.date ? this.date.getTime() : undefined,
 				with_replies: this.mode == 'with-replies'
@@ -73,7 +73,7 @@ export default Vue.extend({
 		more() {
 			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
 			this.moreFetching = true;
-			this.$root.$data.os.api('users/posts', {
+			(this as any).api('users/posts', {
 				user_id: this.user.id,
 				with_replies: this.mode == 'with-replies',
 				until_id: this.posts[this.posts.length - 1].id

src/web/app/desktop/views/components/users-list.vue

@@ -3,7 +3,7 @@
 	<nav>
 		<div>
 			<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
-			<span v-if="$root.$data.os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
+			<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
 		</div>
 	</nav>
 	<div class="users" v-if="!fetching && users.length != 0">

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

@@ -80,7 +80,7 @@ export default Vue.extend({
 
 	created() {
 		// ウィンドウをウィンドウシステムに登録
-		this.$root.$data.os.windows.add(this);
+		(this as any).os.windows.add(this);
 	},
 
 	mounted() {
@@ -97,7 +97,7 @@ export default Vue.extend({
 
 	destroyed() {
 		// ウィンドウをウィンドウシステムから削除
-		this.$root.$data.os.windows.remove(this);
+		(this as any).os.windows.remove(this);
 
 		window.removeEventListener('resize', this.onBrowserResize);
 	},
@@ -191,7 +191,7 @@ export default Vue.extend({
 		top() {
 			let z = 0;
 
-			this.$root.$data.os.windows.getAll().forEach(w => {
+			(this as any).os.windows.getAll().forEach(w => {
 				if (w == this) return;
 				const m = w.$refs.main;
 				const mz = Number(document.defaultView.getComputedStyle(m, null).zIndex);

src/web/app/desktop/views/pages/home.vue

@@ -26,8 +26,8 @@ export default Vue.extend({
 	mounted() {
 		document.title = 'Misskey';
 
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('post', this.onStreamPost);
 		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
@@ -36,12 +36,12 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		this.connection.off('post', this.onStreamPost);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 	methods: {
 		onStreamPost(post) {
-			if (document.hidden && post.user_id != this.$root.$data.os.i.id) {
+			if (document.hidden && post.user_id != (this as any).os.i.id) {
 				this.unreadCount++;
 				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
 			}

src/web/app/desktop/views/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<component v-bind:is="$root.$data.os.isSignedIn ? 'home' : 'welcome'"></component>
+	<component v-bind:is="os.isSignedIn ? 'home' : 'welcome'"></component>
 </template>
 
 <script lang="ts">

src/web/app/desktop/views/pages/messaging-room.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 
 		document.documentElement.style.background = '#fff';
 
-		this.$root.$data.os.api('users/show', {
+		(this as any).api('users/show', {
 			username: this.username
 		}).then(user => {
 			this.fetching = false;

src/web/app/desktop/views/pages/post.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
 	mounted() {
 		Progress.start();
 
-		this.$root.$data.os.api('posts/show', {
+		(this as any).api('posts/show', {
 			post_id: this.postId
 		}).then(post => {
 			this.fetching = false;

src/web/app/desktop/views/pages/search.vue

@@ -44,7 +44,7 @@ export default Vue.extend({
 		document.addEventListener('keydown', this.onDocumentKeydown);
 		window.addEventListener('scroll', this.onScroll);
 
-		this.$root.$data.os.api('posts/search', parse(this.query)).then(posts => {
+		(this as any).api('posts/search', parse(this.query)).then(posts => {
 			this.fetching = false;
 			this.posts = posts;
 		});
@@ -65,7 +65,7 @@ export default Vue.extend({
 			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
 			this.offset += limit;
 			this.moreFetching = true;
-			return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
+			return (this as any).api('posts/search', Object.assign({}, parse(this.query), {
 				limit: limit,
 				offset: this.offset
 			})).then(posts => {

src/web/app/desktop/views/pages/user/user-followers-you-know.vue

@@ -22,7 +22,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('users/followers', {
+		(this as any).api('users/followers', {
 			user_id: this.user.id,
 			iknow: true,
 			limit: 16

src/web/app/desktop/views/pages/user/user-friends.vue

@@ -27,7 +27,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('users/get_frequently_replied_users', {
+		(this as any).api('users/get_frequently_replied_users', {
 			user_id: this.user.id,
 			limit: 4
 		}).then(docs => {

src/web/app/desktop/views/pages/user/user-header.vue

@@ -51,9 +51,9 @@ export default Vue.extend({
 		},
 
 		onBannerClick() {
-			if (!this.$root.$data.os.isSignedIn || this.$root.$data.os.i.id != this.user.id) return;
+			if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
 
-			updateBanner(this.$root.$data.os.i, i => {
+			updateBanner((this as any).os.i, i => {
 				this.user.banner_url = i.banner_url;
 			});
 		}

src/web/app/desktop/views/pages/user/user-home.vue

@@ -4,7 +4,7 @@
 		<div ref="left">
 			<mk-user-profile :user="user"/>
 			<mk-user-photos :user="user"/>
-			<mk-user-followers-you-know v-if="$root.$data.os.isSignedIn && $root.$data.os.i.id != user.id" :user="user"/>
+			<mk-user-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
 			<p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
 		</div>
 	</div>

src/web/app/desktop/views/pages/user/user-photos.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('users/posts', {
+		(this as any).api('users/posts', {
 			user_id: this.user.id,
 			with_media: true,
 			limit: 9

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

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-user-profile">
-	<div class="friend-form" v-if="$root.$data.os.isSignedIn && $root.$data.os.i.id != user.id">
+	<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
 		<mk-follow-button :user="user" size="big"/>
 		<p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p>
 		<p v-if="user.is_muted">%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
@@ -35,7 +35,7 @@ export default Vue.extend({
 	methods: {
 		showFollowing() {
 			document.body.appendChild(new MkUserFollowingWindow({
-				parent: this,
+
 				propsData: {
 					user: this.user
 				}
@@ -44,7 +44,7 @@ export default Vue.extend({
 
 		showFollowers() {
 			document.body.appendChild(new MkUserFollowersWindow({
-				parent: this,
+
 				propsData: {
 					user: this.user
 				}
@@ -52,7 +52,7 @@ export default Vue.extend({
 		},
 
 		mute() {
-			this.$root.$data.os.api('mute/create', {
+			(this as any).api('mute/create', {
 				user_id: this.user.id
 			}).then(() => {
 				this.user.is_muted = true;
@@ -62,7 +62,7 @@ export default Vue.extend({
 		},
 
 		unmute() {
-			this.$root.$data.os.api('mute/delete', {
+			(this as any).api('mute/delete', {
 				user_id: this.user.id
 			}).then(() => {
 				this.user.is_muted = false;

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

@@ -29,7 +29,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		Progress.start();
-		this.$root.$data.os.api('users/show', {
+		(this as any).api('users/show', {
 			username: this.username
 		}).then(user => {
 			this.fetching = false;

src/web/app/init.ts

@@ -78,37 +78,50 @@ if (localStorage.getItem('should-refresh') == 'true') {
 
 type API = {
 	chooseDriveFile: (opts: {
-		title: string;
+		title?: string;
-		currentFolder: any;
+		currentFolder?: any;
-		multiple: boolean;
+		multiple?: boolean;
 	}) => Promise<any>;
 
 	chooseDriveFolder: (opts: {
-		title: string;
+		title?: string;
-		currentFolder: any;
+		currentFolder?: any;
 	}) => Promise<any>;
+
+	dialog: (opts: {
+		title: string;
+		text: string;
+		actions: Array<{
+			text: string;
+			id: string;
+		}>;
+	}) => Promise<string>;
+
+	input: (opts: {
+		title: string;
+		placeholder?: string;
+		default?: string;
+	}) => Promise<string>;
 };
 
 // MiOSを初期化してコールバックする
 export default (callback: (launch: (api: API) => Vue) => void, sw = false) => {
-	const mios = new MiOS(sw);
+	const os = new MiOS(sw);
 
-	Vue.mixin({
+	os.init(() => {
-		data: {
-			$os: mios
-		}
-	});
-
-	mios.init(() => {
 		// アプリ基底要素マウント
 		document.body.innerHTML = '<div id="app"></div>';
 
 		const launch = (api: API) => {
+			Vue.mixin({
+				created() {
+					(this as any).os = os;
+					(this as any).api = os.api;
+					(this as any).apis = api;
+				}
+			});
+
 			return new Vue({
-				data: {
-					os: mios,
-					api: api
-				},
 				router: new VueRouter({
 					mode: 'history'
 				}),
@@ -124,7 +137,7 @@ export default (callback: (launch: (api: API) => Vue) => void, sw = false) => {
 
 		// 更新チェック
 		setTimeout(() => {
-			checkForUpdate(mios);
+			checkForUpdate(os);
 		}, 3000);
 	});
 };

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

@@ -87,8 +87,8 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.streams.driveStream.getConnection();
+		this.connection = (this as any).os.streams.driveStream.getConnection();
-		this.connectionId = this.$root.$data.os.streams.driveStream.use();
+		this.connectionId = (this as any).os.streams.driveStream.use();
 
 		this.connection.on('file_created', this.onStreamDriveFileCreated);
 		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
@@ -112,7 +112,7 @@ export default Vue.extend({
 		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
 		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
 		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
-		this.$root.$data.os.streams.driveStream.dispose(this.connectionId);
+		(this as any).os.streams.driveStream.dispose(this.connectionId);
 	},
 	methods: {
 		onStreamDriveFileCreated(file) {
@@ -158,7 +158,7 @@ export default Vue.extend({
 
 			this.fetching = true;
 
-			this.$root.$data.os.api('drive/folders/show', {
+			(this as any).api('drive/folders/show', {
 				folder_id: target
 			}).then(folder => {
 				this.folder = folder;
@@ -253,7 +253,7 @@ export default Vue.extend({
 			const filesMax = 20;
 
 			// フォルダ一覧取得
-			this.$root.$data.os.api('drive/folders', {
+			(this as any).api('drive/folders', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: foldersMax + 1
 			}).then(folders => {
@@ -266,7 +266,7 @@ export default Vue.extend({
 			});
 
 			// ファイル一覧取得
-			this.$root.$data.os.api('drive/files', {
+			(this as any).api('drive/files', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: filesMax + 1
 			}).then(files => {
@@ -296,7 +296,7 @@ export default Vue.extend({
 
 			if (this.folder == null) {
 				// Fetch addtional drive info
-				this.$root.$data.os.api('drive').then(info => {
+				(this as any).api('drive').then(info => {
 					this.info = info;
 				});
 			}
@@ -309,7 +309,7 @@ export default Vue.extend({
 			const max = 30;
 
 			// ファイル一覧取得
-			this.$root.$data.os.api('drive/files', {
+			(this as any).api('drive/files', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: max + 1,
 				until_id: this.files[this.files.length - 1].id
@@ -348,7 +348,7 @@ export default Vue.extend({
 
 			this.fetching = true;
 
-			this.$root.$data.os.api('drive/files/show', {
+			(this as any).api('drive/files/show', {
 				file_id: file
 			}).then(file => {
 				this.fetching = false;
@@ -394,7 +394,7 @@ export default Vue.extend({
 		createFolder() {
 			const name = window.prompt('フォルダー名');
 			if (name == null || name == '') return;
-			this.$root.$data.os.api('drive/folders/create', {
+			(this as any).api('drive/folders/create', {
 				name: name,
 				parent_id: this.folder ? this.folder.id : undefined
 			}).then(folder => {
@@ -409,7 +409,7 @@ export default Vue.extend({
 			}
 			const name = window.prompt('フォルダー名', this.folder.name);
 			if (name == null || name == '') return;
-			this.$root.$data.os.api('drive/folders/update', {
+			(this as any).api('drive/folders/update', {
 				name: name,
 				folder_id: this.folder.id
 			}).then(folder => {
@@ -424,7 +424,7 @@ export default Vue.extend({
 			}
 			const dialog = riot.mount(document.body.appendChild(document.createElement('mk-drive-folder-selector')))[0];
 			dialog.one('selected', folder => {
-				this.$root.$data.os.api('drive/folders/update', {
+				(this as any).api('drive/folders/update', {
 					parent_id: folder ? folder.id : null,
 					folder_id: this.folder.id
 				}).then(folder => {
@@ -436,7 +436,7 @@ export default Vue.extend({
 		urlUpload() {
 			const url = window.prompt('アップロードしたいファイルのURL');
 			if (url == null || url == '') return;
-			this.$root.$data.os.api('drive/files/upload_from_url', {
+			(this as any).api('drive/files/upload_from_url', {
 				url: url,
 				folder_id: this.folder ? this.folder.id : undefined
 			});

src/web/app/mobile/views/components/follow-button.vue

@@ -28,8 +28,8 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('follow', this.onFollow);
 		this.connection.on('unfollow', this.onUnfollow);
@@ -37,7 +37,7 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('follow', this.onFollow);
 		this.connection.off('unfollow', this.onUnfollow);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 
@@ -56,7 +56,7 @@ export default Vue.extend({
 		onClick() {
 			this.wait = true;
 			if (this.user.is_following) {
-				this.$root.$data.os.api('following/delete', {
+				(this as any).api('following/delete', {
 					user_id: this.user.id
 				}).then(() => {
 					this.user.is_following = false;
@@ -66,7 +66,7 @@ export default Vue.extend({
 					this.wait = false;
 				});
 			} else {
-				this.$root.$data.os.api('following/create', {
+				(this as any).api('following/create', {
 					user_id: this.user.id
 				}).then(() => {
 					this.user.is_following = true;

src/web/app/mobile/views/components/friends-maker.vue

@@ -32,7 +32,7 @@ export default Vue.extend({
 			this.fetching = true;
 			this.users = [];
 
-			this.$root.$data.os.api('users/recommendation', {
+			(this as any).api('users/recommendation', {
 				limit: this.limit,
 				offset: this.limit * this.page
 			}).then(users => {

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

@@ -42,14 +42,14 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('notification', this.onNotification);
 
 		const max = 10;
 
-		this.$root.$data.os.api('i/notifications', {
+		(this as any).api('i/notifications', {
 			limit: max + 1
 		}).then(notifications => {
 			if (notifications.length == max + 1) {
@@ -63,7 +63,7 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		this.connection.off('notification', this.onNotification);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		fetchMoreNotifications() {
@@ -71,7 +71,7 @@ export default Vue.extend({
 
 			const max = 30;
 
-			this.$root.$data.os.api('i/notifications', {
+			(this as any).api('i/notifications', {
 				limit: max + 1,
 				until_id: this.notifications[this.notifications.length - 1].id
 			}).then(notifications => {

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

@@ -33,7 +33,7 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="p.ast" :ast="p.ast" :i="$root.$data.os.i"/>
+			<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			<div class="media" v-if="p.media">
 				<mk-images images={ p.media }/>
@@ -116,7 +116,7 @@ export default Vue.extend({
 	mounted() {
 		// Get replies
 		if (!this.compact) {
-			this.$root.$data.os.api('posts/replies', {
+			(this as any).api('posts/replies', {
 				post_id: this.p.id,
 				limit: 8
 			}).then(replies => {
@@ -129,7 +129,7 @@ export default Vue.extend({
 			this.contextFetching = true;
 
 			// Fetch context
-			this.$root.$data.os.api('posts/context', {
+			(this as any).api('posts/context', {
 				post_id: this.p.reply_id
 			}).then(context => {
 				this.contextFetching = false;

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

@@ -106,24 +106,24 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 	},
 	mounted() {
 		this.capture(true);
 
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.on('_connected_', this.onStreamConnected);
 		}
 	},
 	beforeDestroy() {
 		this.decapture(true);
 		this.connection.off('_connected_', this.onStreamConnected);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		capture(withHandler = false) {
-			if (this.$root.$data.os.isSignedIn) {
+			if ((this as any).os.isSignedIn) {
 				this.connection.send({
 					type: 'capture',
 					id: this.post.id
@@ -132,7 +132,7 @@ export default Vue.extend({
 			}
 		},
 		decapture(withHandler = false) {
-			if (this.$root.$data.os.isSignedIn) {
+			if ((this as any).os.isSignedIn) {
 				this.connection.send({
 					type: 'decapture',
 					id: this.post.id

src/web/app/mobile/views/components/sub-post-content.vue

@@ -2,7 +2,7 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.reply_id">%fa:reply%</a>
-		<mk-post-html v-if="post.ast" :ast="post.ast" :i="$root.$data.os.i"/>
+		<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/>
 		<a class="quote" v-if="post.repost_id">RP: ...</a>
 	</div>
 	<details v-if="post.media">

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

@@ -37,12 +37,12 @@ export default Vue.extend({
 	},
 	computed: {
 		alone(): boolean {
-			return this.$root.$data.os.i.following_count == 0;
+			return (this as any).os.i.following_count == 0;
 		}
 	},
 	mounted() {
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('post', this.onPost);
 		this.connection.on('follow', this.onChangeFollowing);
@@ -54,13 +54,13 @@ export default Vue.extend({
 		this.connection.off('post', this.onPost);
 		this.connection.off('follow', this.onChangeFollowing);
 		this.connection.off('unfollow', this.onChangeFollowing);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
 		fetch(cb?) {
 			this.fetching = true;
 
-			this.$root.$data.os.api('posts/timeline', {
+			(this as any).api('posts/timeline', {
 				until_date: this.date ? (this.date as any).getTime() : undefined
 			}).then(posts => {
 				this.fetching = false;
@@ -71,7 +71,7 @@ export default Vue.extend({
 		more() {
 			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
 			this.moreFetching = true;
-			this.$root.$data.os.api('posts/timeline', {
+			(this as any).api('posts/timeline', {
 				until_id: this.posts[this.posts.length - 1].id
 			}).then(posts => {
 				this.moreFetching = false;

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

@@ -31,9 +31,9 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
-			this.connection = this.$root.$data.os.stream.getConnection();
+			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = this.$root.$data.os.stream.use();
+			this.connectionId = (this as any).os.stream.use();
 
 			this.connection.on('read_all_notifications', this.onReadAllNotifications);
 			this.connection.on('unread_notification', this.onUnreadNotification);
@@ -41,14 +41,14 @@ export default Vue.extend({
 			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
 
 			// Fetch count of unread notifications
-			this.$root.$data.os.api('notifications/get_unread_count').then(res => {
+			(this as any).api('notifications/get_unread_count').then(res => {
 				if (res.count > 0) {
 					this.hasUnreadNotifications = true;
 				}
 			});
 
 			// Fetch count of unread messaging messages
-			this.$root.$data.os.api('messaging/unread').then(res => {
+			(this as any).api('messaging/unread').then(res => {
 				if (res.count > 0) {
 					this.hasUnreadMessagingMessages = true;
 				}
@@ -56,12 +56,12 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.off('read_all_notifications', this.onReadAllNotifications);
 			this.connection.off('unread_notification', this.onUnreadNotification);
 			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
 			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
-			this.$root.$data.os.stream.dispose(this.connectionId);
+			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {

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

@@ -2,7 +2,7 @@
 <div class="mk-ui-nav" :style="{ display: isOpen ? 'block' : 'none' }">
 	<div class="backdrop" @click="parent.toggleDrawer"></div>
 	<div class="body">
-		<a class="me" v-if="$root.$data.os.isSignedIn" href={ '/' + I.username }>
+		<a class="me" v-if="os.isSignedIn" href={ '/' + I.username }>
 			<img class="avatar" src={ I.avatar_url + '?thumbnail&size=128' } alt="avatar"/>
 			<p class="name">{ I.name }</p>
 		</a>
@@ -41,9 +41,9 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
-			this.connection = this.$root.$data.os.stream.getConnection();
+			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = this.$root.$data.os.stream.use();
+			this.connectionId = (this as any).os.stream.use();
 
 			this.connection.on('read_all_notifications', this.onReadAllNotifications);
 			this.connection.on('unread_notification', this.onUnreadNotification);
@@ -51,14 +51,14 @@ export default Vue.extend({
 			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
 
 			// Fetch count of unread notifications
-			this.$root.$data.os.api('notifications/get_unread_count').then(res => {
+			(this as any).api('notifications/get_unread_count').then(res => {
 				if (res.count > 0) {
 					this.hasUnreadNotifications = true;
 				}
 			});
 
 			// Fetch count of unread messaging messages
-			this.$root.$data.os.api('messaging/unread').then(res => {
+			(this as any).api('messaging/unread').then(res => {
 				if (res.count > 0) {
 					this.hasUnreadMessagingMessages = true;
 				}
@@ -66,12 +66,12 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.off('read_all_notifications', this.onReadAllNotifications);
 			this.connection.off('unread_notification', this.onUnreadNotification);
 			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
 			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
-			this.$root.$data.os.stream.dispose(this.connectionId);
+			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {

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

@@ -7,7 +7,7 @@
 	<div class="content">
 		<slot></slot>
 	</div>
-	<mk-stream-indicator v-if="$root.$data.os.isSignedIn"/>
+	<mk-stream-indicator v-if="os.isSignedIn"/>
 </div>
 </template>
 
@@ -23,17 +23,17 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
-			this.connection = this.$root.$data.os.stream.getConnection();
+			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = this.$root.$data.os.stream.use();
+			this.connectionId = (this as any).os.stream.use();
 
 			this.connection.on('notification', this.onNotification);
 		}
 	},
 	beforeDestroy() {
-		if (this.$root.$data.os.isSignedIn) {
+		if ((this as any).os.isSignedIn) {
 			this.connection.off('notification', this.onNotification);
-			this.$root.$data.os.stream.dispose(this.connectionId);
+			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {

src/web/app/mobile/views/components/user-followers.vue

@@ -14,7 +14,7 @@ export default Vue.extend({
 	props: ['user'],
 	methods: {
 		fetch(iknow, limit, cursor, cb) {
-			this.$root.$data.os.api('users/followers', {
+			(this as any).api('users/followers', {
 				user_id: this.user.id,
 				iknow: iknow,
 				limit: limit,

src/web/app/mobile/views/components/user-following.vue

@@ -14,7 +14,7 @@ export default Vue.extend({
 	props: ['user'],
 	methods: {
 		fetch(iknow, limit, cursor, cb) {
-			this.$root.$data.os.api('users/following', {
+			(this as any).api('users/following', {
 				user_id: this.user.id,
 				iknow: iknow,
 				limit: limit,

src/web/app/mobile/views/components/user-timeline.vue

@@ -27,7 +27,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('users/posts', {
+		(this as any).api('users/posts', {
 			user_id: this.user.id,
 			with_media: this.withMedia
 		}).then(posts => {

src/web/app/mobile/views/components/users-list.vue

@@ -2,7 +2,7 @@
 <div class="mk-users-list">
 	<nav>
 		<span :data-is-active="mode == 'all'" @click="mode = 'all'">%i18n:mobile.tags.mk-users-list.all%<span>{{ count }}</span></span>
-		<span v-if="$root.$data.os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:mobile.tags.mk-users-list.known%<span>{{ youKnowCount }}</span></span>
+		<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:mobile.tags.mk-users-list.known%<span>{{ youKnowCount }}</span></span>
 	</nav>
 	<div class="users" v-if="!fetching && users.length != 0">
 		<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>

src/web/app/mobile/views/pages/followers.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
 	mounted() {
 		Progress.start();
 
-		this.$root.$data.os.api('users/show', {
+		(this as any).api('users/show', {
 			username: this.username
 		}).then(user => {
 			this.fetching = false;

src/web/app/mobile/views/pages/following.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
 	mounted() {
 		Progress.start();
 
-		this.$root.$data.os.api('users/show', {
+		(this as any).api('users/show', {
 			username: this.username
 		}).then(user => {
 			this.fetching = false;

src/web/app/mobile/views/pages/home.vue

@@ -23,8 +23,8 @@ export default Vue.extend({
 		document.title = 'Misskey';
 		document.documentElement.style.background = '#313a42';
 
-		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = this.$root.$data.os.stream.use();
+		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('post', this.onStreamPost);
 		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
@@ -33,7 +33,7 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		this.connection.off('post', this.onStreamPost);
-		this.$root.$data.os.stream.dispose(this.connectionId);
+		(this as any).os.stream.dispose(this.connectionId);
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 	methods: {
@@ -44,7 +44,7 @@ export default Vue.extend({
 			Progress.done();
 		},
 		onStreamPost(post) {
-			if (document.hidden && post.user_id !== this.$root.$data.os.i.id) {
+			if (document.hidden && post.user_id !== (this as any).os.i.id) {
 				this.unreadCount++;
 				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
 			}

src/web/app/mobile/views/pages/notification.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 			const ok = window.confirm('%i18n:mobile.tags.mk-notifications-page.read-all%');
 			if (!ok) return;
 
-			this.$root.$data.os.api('notifications/mark_as_read_all');
+			(this as any).api('notifications/mark_as_read_all');
 		},
 		onFetched() {
 			Progress.done();

src/web/app/mobile/views/pages/post.vue

@@ -29,7 +29,7 @@ export default Vue.extend({
 
 		Progress.start();
 
-		this.$root.$data.os.api('posts/show', {
+		(this as any).api('posts/show', {
 			post_id: this.postId
 		}).then(post => {
 			this.fetching = false;

src/web/app/mobile/views/pages/search.vue

@@ -35,7 +35,7 @@ export default Vue.extend({
 
 		Progress.start();
 
-		this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
+		(this as any).api('posts/search', Object.assign({}, parse(this.query), {
 			limit: limit
 		})).then(posts => {
 			this.posts = posts;
@@ -46,7 +46,7 @@ export default Vue.extend({
 	methods: {
 		more() {
 			this.offset += limit;
-			return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
+			return (this as any).api('posts/search', Object.assign({}, parse(this.query), {
 				limit: limit,
 				offset: this.offset
 			}));

src/web/app/mobile/views/pages/user.vue

@@ -9,7 +9,7 @@
 					<a class="avatar">
 						<img :src="`${user.avatar_url}?thumbnail&size=200`" alt="avatar"/>
 					</a>
-					<mk-follow-button v-if="$root.$data.os.isSignedIn && $root.$data.os.i.id != user.id" :user="user"/>
+					<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
 					<h1>{{ user.name }}</h1>
@@ -85,7 +85,7 @@ export default Vue.extend({
 		document.documentElement.style.background = '#313a42';
 		Progress.start();
 
-		this.$root.$data.os.api('users/show', {
+		(this as any).api('users/show', {
 			username: this.username
 		}).then(user => {
 			this.fetching = false;

src/web/app/mobile/views/pages/user/followers-you-know.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('users/followers', {
+		(this as any).api('users/followers', {
 			user_id: this.user.id,
 			iknow: true,
 			limit: 30

src/web/app/mobile/views/pages/user/home-activity.vue

@@ -28,7 +28,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('aggregation/users/activity', {
+		(this as any).api('aggregation/users/activity', {
 			user_id: this.user.id,
 			limit: 30
 		}).then(data => {

src/web/app/mobile/views/pages/user/home-friends.vue

@@ -19,7 +19,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.$root.$data.os.api('users/get_frequently_replied_users', {
+		(this as any).api('users/get_frequently_replied_users', {
 			user_id: this.user.id
 		}).then(res => {
 			this.fetching = false;