wip

src/web/app/mobile/script.ts

@@ -55,6 +55,7 @@ init((launch) => {
 		{ path: '/i/messaging/:username', component: MkMessagingRoom },
 		{ path: '/i/drive', component: MkDrive },
 		{ path: '/i/drive/folder/:folder', component: MkDrive },
+		{ path: '/i/drive/file/:file', component: MkDrive },
 		{ path: '/selectdrive', component: MkSelectDrive },
 		{ path: '/:user', component: MkUser }
 	]);

src/web/app/mobile/views/components/drive.file-detail.vue

@@ -66,8 +66,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import EXIF from 'exif-js';
-import hljs from 'highlight.js';
+import * as EXIF from 'exif-js';
+import * as hljs from 'highlight.js';
 import gcd from '../../../common/scripts/gcd';
 
 export default Vue.extend({

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

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-drive">
 	<nav ref="nav">
-		<a @click.prevent="goRoot" href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
+		<a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
 		<template v-for="folder in hierarchyFolders">
 			<span :key="folder.id + '>'">%fa:angle-right%</span>
 			<a :key="folder.id" @click.prevent="cd(folder)" :href="`/i/drive/folder/${folder.id}`">{{ folder.name }}</a>
@@ -158,7 +158,7 @@ export default Vue.extend({
 			this.file = null;
 
 			if (target == null) {
-				this.goRoot();
+				this.goRoot(silent);
 				return;
 			} else if (typeof target == 'object') {
 				target = target.id;
@@ -235,12 +235,12 @@ export default Vue.extend({
 			this.addFolder(folder, true);
 		},
 
-		goRoot() {
+		goRoot(silent = false) {
 			if (this.folder || this.file) {
 				this.file = null;
 				this.folder = null;
 				this.hierarchyFolders = [];
-				this.$emit('move-root');
+				this.$emit('move-root', silent);
 				this.fetch();
 			}
 		},

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

@@ -2,15 +2,15 @@
 <mk-ui :func="fn">
 	<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>
+		<template v-if="file"><mk-file-type-icon class="icon" :type="file.type"/>{{ file.name }}</template>
+		<template v-if="!folder && !file">%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%</template>
 	</span>
 	<template slot="funcIcon">%fa:ellipsis-h%</template>
 	<mk-drive
 		ref="browser"
-		:init-folder="folder"
-		:init-file="file"
-		is-naked
+		:init-folder="initFolder"
+		:init-file="initFile"
+		:is-naked="true"
 		:top="48"
 		@begin-fetch="Progress.start()"
 		@fetched-mid="Progress.set(0.5)"
@@ -31,21 +31,43 @@ export default Vue.extend({
 		return {
 			Progress,
 			folder: null,
-			file: null
+			file: null,
+			initFolder: null,
+			initFile: null
 		};
 	},
+	created() {
+		this.initFolder = this.$route.params.folder;
+		this.initFile = this.$route.params.file;
+
+		window.addEventListener('popstate', this.onPopState);
+	},
 	mounted() {
 		document.title = 'Misskey Drive';
 	},
+	beforeDestroy() {
+		window.removeEventListener('popstate', this.onPopState);
+	},
 	methods: {
+		onPopState() {
+			if (this.$route.params.folder) {
+				(this.$refs as any).browser.cd(this.$route.params.folder, true);
+			} else if (this.$route.params.file) {
+				(this.$refs as any).browser.cf(this.$route.params.file, true);
+			} else {
+				(this.$refs as any).browser.goRoot(true);
+			}
+		},
 		fn() {
 			(this.$refs as any).browser.openContextMenu();
 		},
-		onMoveRoot() {
+		onMoveRoot(silent) {
 			const title = 'Misskey Drive';
 
+			if (!silent) {
 				// Rewrite URL
 				history.pushState(null, title, '/i/drive');
+			}
 
 			document.title = title;