From eda7534e41c0e562af1acc3eceb24c2aac2b9667 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
 <syuilotan@yahoo.co.jp>
Date: Tue, 20 Feb 2018 13:58:25 +0900
Subject: [PATCH] wip

---
 src/web/app/mobile/tags/page/drive.tag   | 73 ---------------------
 src/web/app/mobile/views/pages/drive.vue | 83 ++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 73 deletions(-)
 delete mode 100644 src/web/app/mobile/tags/page/drive.tag
 create mode 100644 src/web/app/mobile/views/pages/drive.vue

diff --git a/src/web/app/mobile/tags/page/drive.tag b/src/web/app/mobile/tags/page/drive.tag
deleted file mode 100644
index 23185b14b8..0000000000
--- a/src/web/app/mobile/tags/page/drive.tag
+++ /dev/null
@@ -1,73 +0,0 @@
-<mk-drive-page>
-	<mk-ui ref="ui">
-		<mk-drive ref="browser" folder={ parent.opts.folder } file={ parent.opts.file } is-naked={ true } top={ 48 }/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import ui from '../../scripts/ui-event';
-		import Progress from '../../../common/scripts/loading';
-
-		this.on('mount', () => {
-			document.title = 'Misskey Drive';
-			ui.trigger('title', '%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%');
-
-			ui.trigger('func', () => {
-				this.$refs.ui.refs.browser.openContextMenu();
-			}, '%fa:ellipsis-h%');
-
-			this.$refs.ui.refs.browser.on('begin-fetch', () => {
-				Progress.start();
-			});
-
-			this.$refs.ui.refs.browser.on('fetched-mid', () => {
-				Progress.set(0.5);
-			});
-
-			this.$refs.ui.refs.browser.on('fetched', () => {
-				Progress.done();
-			});
-
-			this.$refs.ui.refs.browser.on('move-root', () => {
-				const title = 'Misskey Drive';
-
-				// Rewrite URL
-				history.pushState(null, title, '/i/drive');
-
-				document.title = title;
-				ui.trigger('title', '%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%');
-			});
-
-			this.$refs.ui.refs.browser.on('open-folder', (folder, silent) => {
-				const title = folder.name + ' | Misskey Drive';
-
-				if (!silent) {
-					// Rewrite URL
-					history.pushState(null, title, '/i/drive/folder/' + folder.id);
-				}
-
-				document.title = title;
-				// TODO: escape html characters in folder.name
-				ui.trigger('title', '%fa:R folder-open%' + folder.name);
-			});
-
-			this.$refs.ui.refs.browser.on('open-file', (file, silent) => {
-				const title = file.name + ' | Misskey Drive';
-
-				if (!silent) {
-					// Rewrite URL
-					history.pushState(null, title, '/i/drive/file/' + file.id);
-				}
-
-				document.title = title;
-				// TODO: escape html characters in file.name
-				ui.trigger('title', '<mk-file-type-icon class="icon"></mk-file-type-icon>' + file.name);
-				riot.mount('mk-file-type-icon', {
-					type: file.type
-				});
-			});
-		});
-	</script>
-</mk-drive-page>
diff --git a/src/web/app/mobile/views/pages/drive.vue b/src/web/app/mobile/views/pages/drive.vue
new file mode 100644
index 0000000000..0032068b6e
--- /dev/null
+++ b/src/web/app/mobile/views/pages/drive.vue
@@ -0,0 +1,83 @@
+<template>
+<mk-ui :func="fn" func-icon="%fa:ellipsis-h%">
+	<span slot="header">
+		<template v-if="folder">%fa:R folder-open%{{ folder.name }}</template>
+		<template v-if="file"><mk-file-type-icon class="icon"/>{{ file.name }}</template>
+		<template v-else>%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%</template>
+	</span>
+	<mk-drive
+		ref="browser"
+		:init-folder="folder"
+		:init-file="file"
+		is-naked
+		:top="48"
+		@begin-fetch="Progress.start()"
+		@fetched-mid="Progress.set(0.5);"
+		@fetched="Progress.done()"
+		@move-root="onMoveRoot"
+		@open-folder="onOpenFolder"
+		@open-file="onOpenFile"
+	/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			Progress,
+			folder: null,
+			file: null
+		};
+	},
+	mounted() {
+		document.title = 'Misskey Drive';
+	},
+	methods: {
+		fn() {
+			(this.$refs as any).browser.openContextMenu();
+		},
+		onMoveRoot() {
+			const title = 'Misskey Drive';
+
+			// Rewrite URL
+			history.pushState(null, title, '/i/drive');
+
+			document.title = title;
+
+			this.file = null;
+			this.folder = null;
+		},
+		onOpenFolder(folder, silent) {
+			const title = folder.name + ' | Misskey Drive';
+
+			if (!silent) {
+				// Rewrite URL
+				history.pushState(null, title, '/i/drive/folder/' + folder.id);
+			}
+
+			document.title = title;
+
+			this.file = null;
+			this.folder = folder;
+		},
+		onOpenFile(file, silent) {
+			const title = file.name + ' | Misskey Drive';
+
+			if (!silent) {
+				// Rewrite URL
+				history.pushState(null, title, '/i/drive/file/' + file.id);
+			}
+
+			document.title = title;
+
+			this.file = file;
+			this.folder = null;
+		}
+	}
+});
+</script>
+