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 28e151ce7..dd4d1380b 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 32fa50801..f6e37caa4 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 ea8fa5adf..0721c77ad 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 82d8ecbfd..0239f5422 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 45a718d3e..88158db84 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 fdc8a1cb2..4cc76f7e2 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>