From f8c85590896c4b8d8d8eaca3e518288585d129b6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 8 Feb 2018 14:25:49 +0900
Subject: [PATCH] wip

---
 src/web/app/common/tags/reaction-picker.vue  | 22 ++++++----
 src/web/app/common/tags/reactions-viewer.vue |  2 +-
 src/web/app/common/tags/stream-indicator.vue |  2 +-
 src/web/app/common/tags/time.vue             | 42 +++++++++++---------
 src/web/app/common/tags/url-preview.vue      | 20 +++++-----
 src/web/app/common/tags/url.vue              | 20 +++++-----
 6 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/src/web/app/common/tags/reaction-picker.vue b/src/web/app/common/tags/reaction-picker.vue
index 28e151ce77..dd4d1380b7 100644
--- a/src/web/app/common/tags/reaction-picker.vue
+++ b/src/web/app/common/tags/reaction-picker.vue
@@ -21,15 +21,21 @@
 <script lang="typescript">
 	import anime from 'animejs';
 	import api from '../scripts/api';
+	import MkReactionIcon from './reaction-icon.vue';
 
 	const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
 
 	export default {
-		props: ['post', 'source', 'compact', 'cb'],
-		data: {
-			title: placeholder
+		components: {
+			MkReactionIcon
 		},
-		created: function() {
+		props: ['post', 'source', 'compact', 'cb'],
+		data() {
+			return {
+				title: placeholder
+			};
+		},
+		created() {
 			const rect = this.source.getBoundingClientRect();
 			const width = this.$refs.popover.offsetWidth;
 			const height = this.$refs.popover.offsetHeight;
@@ -60,7 +66,7 @@
 			});
 		},
 		methods: {
-			react: function(reaction) {
+			react(reaction) {
 				api('posts/reactions/create', {
 					post_id: this.post.id,
 					reaction: reaction
@@ -69,13 +75,13 @@
 					this.$destroy();
 				});
 			},
-			onMouseover: function(e) {
+			onMouseover(e) {
 				this.title = e.target.title;
 			},
-			onMouseout: function(e) {
+			onMouseout(e) {
 				this.title = placeholder;
 			},
-			clo1se: function() {
+			close() {
 				this.$refs.backdrop.style.pointerEvents = 'none';
 				anime({
 					targets: this.$refs.backdrop,
diff --git a/src/web/app/common/tags/reactions-viewer.vue b/src/web/app/common/tags/reactions-viewer.vue
index 32fa50801a..f6e37caa44 100644
--- a/src/web/app/common/tags/reactions-viewer.vue
+++ b/src/web/app/common/tags/reactions-viewer.vue
@@ -18,7 +18,7 @@
 	export default {
 		props: ['post'],
 		computed: {
-			reactions: function() {
+			reactions() {
 				return this.post.reaction_counts;
 			}
 		}
diff --git a/src/web/app/common/tags/stream-indicator.vue b/src/web/app/common/tags/stream-indicator.vue
index ea8fa5adfe..0721c77ad7 100644
--- a/src/web/app/common/tags/stream-indicator.vue
+++ b/src/web/app/common/tags/stream-indicator.vue
@@ -21,7 +21,7 @@
 
 	export default {
 		props: ['stream'],
-		created: function() {
+		created() {
 			if (this.stream.state == 'connected') {
 				this.root.style.opacity = 0;
 			}
diff --git a/src/web/app/common/tags/time.vue b/src/web/app/common/tags/time.vue
index 82d8ecbfd0..0239f5422e 100644
--- a/src/web/app/common/tags/time.vue
+++ b/src/web/app/common/tags/time.vue
@@ -9,11 +9,13 @@
 <script lang="typescript">
 	export default {
 		props: ['time', 'mode'],
-		data: {
-			mode: 'relative',
-			tickId: null,
+		data() {
+			return {
+				mode: 'relative',
+				tickId: null
+			};
 		},
-		created: function() {
+		created() {
 			this.absolute =
 				this.time.getFullYear()    + '年' +
 				(this.time.getMonth() + 1) + '月' +
@@ -27,25 +29,27 @@
 				this.tickId = setInterval(this.tick, 1000);
 			}
 		},
-		destroyed: function() {
+		destroyed() {
 			if (this.mode === 'relative' || this.mode === 'detail') {
 				clearInterval(this.tickId);
 			}
 		},
-		tick: function() {
-			const now = new Date();
-			const ago = (now - this.time) / 1000/*ms*/;
-			this.relative =
-				ago >= 31536000 ? '%i18n:common.time.years_ago%'  .replace('{}', ~~(ago / 31536000)) :
-				ago >= 2592000  ? '%i18n:common.time.months_ago%' .replace('{}', ~~(ago / 2592000)) :
-				ago >= 604800   ? '%i18n:common.time.weeks_ago%'  .replace('{}', ~~(ago / 604800)) :
-				ago >= 86400    ? '%i18n:common.time.days_ago%'   .replace('{}', ~~(ago / 86400)) :
-				ago >= 3600     ? '%i18n:common.time.hours_ago%'  .replace('{}', ~~(ago / 3600)) :
-				ago >= 60       ? '%i18n:common.time.minutes_ago%'.replace('{}', ~~(ago / 60)) :
-				ago >= 10       ? '%i18n:common.time.seconds_ago%'.replace('{}', ~~(ago % 60)) :
-				ago >= 0        ? '%i18n:common.time.just_now%' :
-				ago <  0        ? '%i18n:common.time.future%' :
-				'%i18n:common.time.unknown%';
+		methods: {
+			tick() {
+				const now = new Date();
+				const ago = (now - this.time) / 1000/*ms*/;
+				this.relative =
+					ago >= 31536000 ? '%i18n:common.time.years_ago%'  .replace('{}', ~~(ago / 31536000)) :
+					ago >= 2592000  ? '%i18n:common.time.months_ago%' .replace('{}', ~~(ago / 2592000)) :
+					ago >= 604800   ? '%i18n:common.time.weeks_ago%'  .replace('{}', ~~(ago / 604800)) :
+					ago >= 86400    ? '%i18n:common.time.days_ago%'   .replace('{}', ~~(ago / 86400)) :
+					ago >= 3600     ? '%i18n:common.time.hours_ago%'  .replace('{}', ~~(ago / 3600)) :
+					ago >= 60       ? '%i18n:common.time.minutes_ago%'.replace('{}', ~~(ago / 60)) :
+					ago >= 10       ? '%i18n:common.time.seconds_ago%'.replace('{}', ~~(ago % 60)) :
+					ago >= 0        ? '%i18n:common.time.just_now%' :
+					ago <  0        ? '%i18n:common.time.future%' :
+					'%i18n:common.time.unknown%';
+			}
 		}
 	};
 </script>
diff --git a/src/web/app/common/tags/url-preview.vue b/src/web/app/common/tags/url-preview.vue
index 45a718d3ec..88158db845 100644
--- a/src/web/app/common/tags/url-preview.vue
+++ b/src/web/app/common/tags/url-preview.vue
@@ -17,7 +17,17 @@
 <script lang="typescript">
 	export default {
 		props: ['url'],
-		created: function() {
+		data() {
+			return {
+				fetching: true,
+				title: null,
+				description: null,
+				thumbnail: null,
+				icon: null,
+				sitename: null
+			};
+		},
+		created() {
 			fetch('/api:url?url=' + this.url).then(res => {
 				res.json().then(info => {
 					this.title = info.title;
@@ -29,14 +39,6 @@
 					this.fetching = false;
 				});
 			});
-		},
-		data: {
-			fetching: true,
-			title: null,
-			description: null,
-			thumbnail: null,
-			icon: null,
-			sitename: null
 		}
 	};
 </script>
diff --git a/src/web/app/common/tags/url.vue b/src/web/app/common/tags/url.vue
index fdc8a1cb2a..4cc76f7e24 100644
--- a/src/web/app/common/tags/url.vue
+++ b/src/web/app/common/tags/url.vue
@@ -13,7 +13,17 @@
 <script lang="typescript">
 	export default {
 		props: ['url', 'target'],
-		created: function() {
+		data() {
+			return {
+				schema: null,
+				hostname: null,
+				port: null,
+				pathname: null,
+				query: null,
+				hash: null
+			};
+		},
+		created() {
 			const url = new URL(this.url);
 
 			this.schema = url.protocol;
@@ -22,14 +32,6 @@
 			this.pathname = url.pathname;
 			this.query = url.search;
 			this.hash = url.hash;
-		},
-		data: {
-			schema: null,
-			hostname: null,
-			port: null,
-			pathname: null,
-			query: null,
-			hash: null
 		}
 	};
 </script>