From 161a91a69f2cf4a640243c0869a724dcfd414d48 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 20 Feb 2018 12:38:45 +0900
Subject: [PATCH] wip

---
 .eslintrc                                     |   3 +-
 src/web/app/mobile/tags/drive/file-viewer.tag | 282 -----------------
 .../views/components/drive.file-detail.vue    | 290 ++++++++++++++++++
 src/web/app/mobile/views/components/drive.vue |   2 +-
 4 files changed, 293 insertions(+), 284 deletions(-)
 delete mode 100644 src/web/app/mobile/tags/drive/file-viewer.tag
 create mode 100644 src/web/app/mobile/views/components/drive.file-detail.vue

diff --git a/.eslintrc b/.eslintrc
index d30cf2aa56..6caf8f532a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,6 +12,7 @@
 		"vue/html-indent": false,
 		"vue/html-self-closing": false,
 		"vue/no-unused-vars": false,
-		"no-console": 0
+		"no-console": 0,
+		"no-unused-vars": 0
 	}
 }
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
deleted file mode 100644
index e9a89493e1..0000000000
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ /dev/null
@@ -1,282 +0,0 @@
-<mk-drive-file-viewer>
-	<div class="preview">
-		<img v-if="kind == 'image'" ref="img"
-			src={ file.url }
-			alt={ file.name }
-			title={ file.name }
-			onload={ onImageLoaded }
-			style="background-color:rgb({ file.properties.average_color.join(',') })">
-		<template v-if="kind != 'image'">%fa:file%</template>
-		<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
-			<span class="size">
-				<span class="width">{ file.properties.width }</span>
-				<span class="time">×</span>
-				<span class="height">{ file.properties.height }</span>
-				<span class="px">px</span>
-			</span>
-			<span class="separator"></span>
-			<span class="aspect-ratio">
-				<span class="width">{ file.properties.width / gcd(file.properties.width, file.properties.height) }</span>
-				<span class="colon">:</span>
-				<span class="height">{ file.properties.height / gcd(file.properties.width, file.properties.height) }</span>
-			</span>
-		</footer>
-	</div>
-	<div class="info">
-		<div>
-			<span class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</span>
-			<span class="separator"></span>
-			<span class="data-size">{ bytesToSize(file.datasize) }</span>
-			<span class="separator"></span>
-			<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time time={ file.created_at }/></span>
-		</div>
-	</div>
-	<div class="menu">
-		<div>
-			<a href={ file.url + '?download' } download={ file.name }>
-				%fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
-			</a>
-			<button @click="rename">
-				%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
-			</button>
-			<button @click="move">
-				%fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
-			</button>
-		</div>
-	</div>
-	<div class="exif" show={ exif }>
-		<div>
-			<p>
-				%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
-			</p>
-			<pre ref="exif" class="json">{ exif ? JSON.stringify(exif, null, 2) : '' }</pre>
-		</div>
-	</div>
-	<div class="hash">
-		<div>
-			<p>
-				%fa:hashtag%%i18n:mobile.tags.mk-drive-file-viewer.hash%
-			</p>
-			<code>{ file.md5 }</code>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .preview
-				padding 8px
-				background #f0f0f0
-
-				> img
-					display block
-					max-width 100%
-					max-height 300px
-					margin 0 auto
-					box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
-
-				> footer
-					padding 8px 8px 0 8px
-					font-size 0.8em
-					color #888
-					text-align center
-
-					> .separator
-						display inline
-						padding 0 4px
-
-					> .size
-						display inline
-
-						.time
-							margin 0 2px
-
-						.px
-							margin-left 4px
-
-					> .aspect-ratio
-						display inline
-						opacity 0.7
-
-						&:before
-							content "("
-
-						&:after
-							content ")"
-
-			> .info
-				padding 14px
-				font-size 0.8em
-				border-top solid 1px #dfdfdf
-
-				> div
-					max-width 500px
-					margin 0 auto
-
-					> .separator
-						padding 0 4px
-						color #cdcdcd
-
-					> .type
-					> .data-size
-						color #9d9d9d
-
-						> mk-file-type-icon
-							margin-right 4px
-
-					> .created-at
-						color #bdbdbd
-
-						> [data-fa]
-							margin-right 2px
-
-			> .menu
-				padding 14px
-				border-top solid 1px #dfdfdf
-
-				> div
-					max-width 500px
-					margin 0 auto
-
-					> *
-						display block
-						width 100%
-						padding 10px 16px
-						margin 0 0 12px 0
-						color #333
-						font-size 0.9em
-						text-align center
-						text-decoration none
-						text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
-						background-image linear-gradient(#fafafa, #eaeaea)
-						border 1px solid #ddd
-						border-bottom-color #cecece
-						border-radius 3px
-
-						&:last-child
-							margin-bottom 0
-
-						&:active
-							background-color #767676
-							background-image none
-							border-color #444
-							box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
-
-						> [data-fa]
-							margin-right 4px
-
-			> .hash
-				padding 14px
-				border-top solid 1px #dfdfdf
-
-				> div
-					max-width 500px
-					margin 0 auto
-
-					> p
-						display block
-						margin 0
-						padding 0
-						color #555
-						font-size 0.9em
-
-						> [data-fa]
-							margin-right 4px
-
-					> code
-						display block
-						width 100%
-						margin 6px 0 0 0
-						padding 8px
-						white-space nowrap
-						overflow auto
-						font-size 0.8em
-						color #222
-						border solid 1px #dfdfdf
-						border-radius 2px
-						background #f5f5f5
-
-			> .exif
-				padding 14px
-				border-top solid 1px #dfdfdf
-
-				> div
-					max-width 500px
-					margin 0 auto
-
-					> p
-						display block
-						margin 0
-						padding 0
-						color #555
-						font-size 0.9em
-
-						> [data-fa]
-							margin-right 4px
-
-					> pre
-						display block
-						width 100%
-						margin 6px 0 0 0
-						padding 8px
-						height 128px
-						overflow auto
-						font-size 0.9em
-						border solid 1px #dfdfdf
-						border-radius 2px
-						background #f5f5f5
-
-	</style>
-	<script lang="typescript">
-		import EXIF from 'exif-js';
-		import hljs from 'highlight.js';
-		import bytesToSize from '../../../common/scripts/bytes-to-size';
-		import gcd from '../../../common/scripts/gcd';
-
-		this.bytesToSize = bytesToSize;
-		this.gcd = gcd;
-
-		this.mixin('api');
-
-		this.file = this.opts.file;
-		this.kind = this.file.type.split('/')[0];
-
-		this.onImageLoaded = () => {
-			const self = this;
-			EXIF.getData(this.$refs.img, function() {
-				const allMetaData = EXIF.getAllTags(this);
-				self.update({
-					exif: allMetaData
-				});
-				hljs.highlightBlock(self.refs.exif);
-			});
-		};
-
-		this.rename = () => {
-			const name = window.prompt('名前を変更', this.file.name);
-			if (name == null || name == '' || name == this.file.name) return;
-			this.$root.$data.os.api('drive/files/update', {
-				file_id: this.file.id,
-				name: name
-			}).then(() => {
-				this.parent.cf(this.file, true);
-			});
-		};
-
-		this.move = () => {
-			const dialog = riot.mount(document.body.appendChild(document.createElement('mk-drive-folder-selector')))[0];
-			dialog.one('selected', folder => {
-				this.$root.$data.os.api('drive/files/update', {
-					file_id: this.file.id,
-					folder_id: folder == null ? null : folder.id
-				}).then(() => {
-					this.parent.cf(this.file, true);
-				});
-			});
-		};
-
-		this.showCreatedAt = () => {
-			alert(new Date(this.file.created_at).toLocaleString());
-		};
-	</script>
-</mk-drive-file-viewer>
diff --git a/src/web/app/mobile/views/components/drive.file-detail.vue b/src/web/app/mobile/views/components/drive.file-detail.vue
new file mode 100644
index 0000000000..db0c3c7019
--- /dev/null
+++ b/src/web/app/mobile/views/components/drive.file-detail.vue
@@ -0,0 +1,290 @@
+<template>
+<div class="file-detail">
+	<div class="preview">
+		<img v-if="kind == 'image'" ref="img"
+			:src="file.url"
+			:alt="file.name"
+			:title="file.name"
+			@load="onImageLoaded"
+			:style="`background-color:rgb(${ file.properties.average_color.join(',') })`">
+		<template v-if="kind != 'image'">%fa:file%</template>
+		<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
+			<span class="size">
+				<span class="width">{{ file.properties.width }}</span>
+				<span class="time">×</span>
+				<span class="height">{{ file.properties.height }}</span>
+				<span class="px">px</span>
+			</span>
+			<span class="separator"></span>
+			<span class="aspect-ratio">
+				<span class="width">{{ file.properties.width / gcd(file.properties.width, file.properties.height) }}</span>
+				<span class="colon">:</span>
+				<span class="height">{{ file.properties.height / gcd(file.properties.width, file.properties.height) }}</span>
+			</span>
+		</footer>
+	</div>
+	<div class="info">
+		<div>
+			<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
+			<span class="separator"></span>
+			<span class="data-size">{{ file.datasize | bytes }}</span>
+			<span class="separator"></span>
+			<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time :time="file.created_at"/></span>
+		</div>
+	</div>
+	<div class="menu">
+		<div>
+			<a :href="`${file.url}?download`" :download="file.name">
+				%fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
+			</a>
+			<button @click="rename">
+				%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
+			</button>
+			<button @click="move">
+				%fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
+			</button>
+		</div>
+	</div>
+	<div class="exif" v-show="exif">
+		<div>
+			<p>
+				%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
+			</p>
+			<pre ref="exif" class="json">{{ exif ? JSON.stringify(exif, null, 2) : '' }}</pre>
+		</div>
+	</div>
+	<div class="hash">
+		<div>
+			<p>
+				%fa:hashtag%%i18n:mobile.tags.mk-drive-file-viewer.hash%
+			</p>
+			<code>{{ file.md5 }}</code>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import EXIF from 'exif-js';
+import hljs from 'highlight.js';
+import gcd from '../../../common/scripts/gcd';
+
+export default Vue.extend({
+	props: ['file'],
+	data() {
+		return {
+			gcd,
+			exif: null
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		},
+		kind(): string {
+			return this.file.type.split('/')[0];
+		}
+	},
+	methods: {
+		rename() {
+			const name = window.prompt('名前を変更', this.file.name);
+			if (name == null || name == '' || name == this.file.name) return;
+			(this as any).api('drive/files/update', {
+				file_id: this.file.id,
+				name: name
+			}).then(() => {
+				this.browser.cf(this.file, true);
+			});
+		},
+		move() {
+			(this as any).apis.chooseDriveFolder().then(folder => {
+				(this as any).api('drive/files/update', {
+					file_id: this.file.id,
+					folder_id: folder == null ? null : folder.id
+				}).then(() => {
+					this.browser.cf(this.file, true);
+				});
+			});
+		},
+		showCreatedAt() {
+			alert(new Date(this.file.created_at).toLocaleString());
+		},
+		onImageLoaded() {
+			const self = this;
+			EXIF.getData(this.$refs.img, function(this: any) {
+				const allMetaData = EXIF.getAllTags(this);
+				self.exif = allMetaData;
+				hljs.highlightBlock(self.$refs.exif);
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.file-detail
+
+	> .preview
+		padding 8px
+		background #f0f0f0
+
+		> img
+			display block
+			max-width 100%
+			max-height 300px
+			margin 0 auto
+			box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
+
+		> footer
+			padding 8px 8px 0 8px
+			font-size 0.8em
+			color #888
+			text-align center
+
+			> .separator
+				display inline
+				padding 0 4px
+
+			> .size
+				display inline
+
+				.time
+					margin 0 2px
+
+				.px
+					margin-left 4px
+
+			> .aspect-ratio
+				display inline
+				opacity 0.7
+
+				&:before
+					content "("
+
+				&:after
+					content ")"
+
+	> .info
+		padding 14px
+		font-size 0.8em
+		border-top solid 1px #dfdfdf
+
+		> div
+			max-width 500px
+			margin 0 auto
+
+			> .separator
+				padding 0 4px
+				color #cdcdcd
+
+			> .type
+			> .data-size
+				color #9d9d9d
+
+				> mk-file-type-icon
+					margin-right 4px
+
+			> .created-at
+				color #bdbdbd
+
+				> [data-fa]
+					margin-right 2px
+
+	> .menu
+		padding 14px
+		border-top solid 1px #dfdfdf
+
+		> div
+			max-width 500px
+			margin 0 auto
+
+			> *
+				display block
+				width 100%
+				padding 10px 16px
+				margin 0 0 12px 0
+				color #333
+				font-size 0.9em
+				text-align center
+				text-decoration none
+				text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
+				background-image linear-gradient(#fafafa, #eaeaea)
+				border 1px solid #ddd
+				border-bottom-color #cecece
+				border-radius 3px
+
+				&:last-child
+					margin-bottom 0
+
+				&:active
+					background-color #767676
+					background-image none
+					border-color #444
+					box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
+
+				> [data-fa]
+					margin-right 4px
+
+	> .hash
+		padding 14px
+		border-top solid 1px #dfdfdf
+
+		> div
+			max-width 500px
+			margin 0 auto
+
+			> p
+				display block
+				margin 0
+				padding 0
+				color #555
+				font-size 0.9em
+
+				> [data-fa]
+					margin-right 4px
+
+			> code
+				display block
+				width 100%
+				margin 6px 0 0 0
+				padding 8px
+				white-space nowrap
+				overflow auto
+				font-size 0.8em
+				color #222
+				border solid 1px #dfdfdf
+				border-radius 2px
+				background #f5f5f5
+
+	> .exif
+		padding 14px
+		border-top solid 1px #dfdfdf
+
+		> div
+			max-width 500px
+			margin 0 auto
+
+			> p
+				display block
+				margin 0
+				padding 0
+				color #555
+				font-size 0.9em
+
+				> [data-fa]
+					margin-right 4px
+
+			> pre
+				display block
+				width 100%
+				margin 6px 0 0 0
+				padding 8px
+				height 128px
+				overflow auto
+				font-size 0.9em
+				border solid 1px #dfdfdf
+				border-radius 2px
+				background #f5f5f5
+
+</style>
diff --git a/src/web/app/mobile/views/components/drive.vue b/src/web/app/mobile/views/components/drive.vue
index 0e54563323..59b2c256d5 100644
--- a/src/web/app/mobile/views/components/drive.vue
+++ b/src/web/app/mobile/views/components/drive.vue
@@ -47,7 +47,7 @@
 		</div>
 	</div>
 	<input ref="file" type="file" multiple="multiple" @change="onChangeLocalFile"/>
-	<mk-drive-file-viewer v-if="file != null" :file="file"/>
+	<mk-drive-file-detail v-if="file != null" :file="file"/>
 </div>
 </template>