This commit is contained in:
syuilo 2018-02-08 14:25:49 +09:00
parent 322da7560c
commit f8c8559089
6 changed files with 61 additions and 47 deletions

View file

@ -21,15 +21,21 @@
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import anime from 'animejs';
import api from '../scripts/api'; import api from '../scripts/api';
import MkReactionIcon from './reaction-icon.vue';
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%'; const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
export default { export default {
props: ['post', 'source', 'compact', 'cb'], components: {
data: { MkReactionIcon
title: placeholder
}, },
created: function() { props: ['post', 'source', 'compact', 'cb'],
data() {
return {
title: placeholder
};
},
created() {
const rect = this.source.getBoundingClientRect(); const rect = this.source.getBoundingClientRect();
const width = this.$refs.popover.offsetWidth; const width = this.$refs.popover.offsetWidth;
const height = this.$refs.popover.offsetHeight; const height = this.$refs.popover.offsetHeight;
@ -60,7 +66,7 @@
}); });
}, },
methods: { methods: {
react: function(reaction) { react(reaction) {
api('posts/reactions/create', { api('posts/reactions/create', {
post_id: this.post.id, post_id: this.post.id,
reaction: reaction reaction: reaction
@ -69,13 +75,13 @@
this.$destroy(); this.$destroy();
}); });
}, },
onMouseover: function(e) { onMouseover(e) {
this.title = e.target.title; this.title = e.target.title;
}, },
onMouseout: function(e) { onMouseout(e) {
this.title = placeholder; this.title = placeholder;
}, },
clo1se: function() { close() {
this.$refs.backdrop.style.pointerEvents = 'none'; this.$refs.backdrop.style.pointerEvents = 'none';
anime({ anime({
targets: this.$refs.backdrop, targets: this.$refs.backdrop,

View file

@ -18,7 +18,7 @@
export default { export default {
props: ['post'], props: ['post'],
computed: { computed: {
reactions: function() { reactions() {
return this.post.reaction_counts; return this.post.reaction_counts;
} }
} }

View file

@ -21,7 +21,7 @@
export default { export default {
props: ['stream'], props: ['stream'],
created: function() { created() {
if (this.stream.state == 'connected') { if (this.stream.state == 'connected') {
this.root.style.opacity = 0; this.root.style.opacity = 0;
} }

View file

@ -9,11 +9,13 @@
<script lang="typescript"> <script lang="typescript">
export default { export default {
props: ['time', 'mode'], props: ['time', 'mode'],
data: { data() {
mode: 'relative', return {
tickId: null, mode: 'relative',
tickId: null
};
}, },
created: function() { created() {
this.absolute = this.absolute =
this.time.getFullYear() + '年' + this.time.getFullYear() + '年' +
(this.time.getMonth() + 1) + '月' + (this.time.getMonth() + 1) + '月' +
@ -27,25 +29,27 @@
this.tickId = setInterval(this.tick, 1000); this.tickId = setInterval(this.tick, 1000);
} }
}, },
destroyed: function() { destroyed() {
if (this.mode === 'relative' || this.mode === 'detail') { if (this.mode === 'relative' || this.mode === 'detail') {
clearInterval(this.tickId); clearInterval(this.tickId);
} }
}, },
tick: function() { methods: {
const now = new Date(); tick() {
const ago = (now - this.time) / 1000/*ms*/; const now = new Date();
this.relative = const ago = (now - this.time) / 1000/*ms*/;
ago >= 31536000 ? '%i18n:common.time.years_ago%' .replace('{}', ~~(ago / 31536000)) : this.relative =
ago >= 2592000 ? '%i18n:common.time.months_ago%' .replace('{}', ~~(ago / 2592000)) : ago >= 31536000 ? '%i18n:common.time.years_ago%' .replace('{}', ~~(ago / 31536000)) :
ago >= 604800 ? '%i18n:common.time.weeks_ago%' .replace('{}', ~~(ago / 604800)) : ago >= 2592000 ? '%i18n:common.time.months_ago%' .replace('{}', ~~(ago / 2592000)) :
ago >= 86400 ? '%i18n:common.time.days_ago%' .replace('{}', ~~(ago / 86400)) : ago >= 604800 ? '%i18n:common.time.weeks_ago%' .replace('{}', ~~(ago / 604800)) :
ago >= 3600 ? '%i18n:common.time.hours_ago%' .replace('{}', ~~(ago / 3600)) : ago >= 86400 ? '%i18n:common.time.days_ago%' .replace('{}', ~~(ago / 86400)) :
ago >= 60 ? '%i18n:common.time.minutes_ago%'.replace('{}', ~~(ago / 60)) : ago >= 3600 ? '%i18n:common.time.hours_ago%' .replace('{}', ~~(ago / 3600)) :
ago >= 10 ? '%i18n:common.time.seconds_ago%'.replace('{}', ~~(ago % 60)) : ago >= 60 ? '%i18n:common.time.minutes_ago%'.replace('{}', ~~(ago / 60)) :
ago >= 0 ? '%i18n:common.time.just_now%' : ago >= 10 ? '%i18n:common.time.seconds_ago%'.replace('{}', ~~(ago % 60)) :
ago < 0 ? '%i18n:common.time.future%' : ago >= 0 ? '%i18n:common.time.just_now%' :
'%i18n:common.time.unknown%'; ago < 0 ? '%i18n:common.time.future%' :
'%i18n:common.time.unknown%';
}
} }
}; };
</script> </script>

View file

@ -17,7 +17,17 @@
<script lang="typescript"> <script lang="typescript">
export default { export default {
props: ['url'], 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 => { fetch('/api:url?url=' + this.url).then(res => {
res.json().then(info => { res.json().then(info => {
this.title = info.title; this.title = info.title;
@ -29,14 +39,6 @@
this.fetching = false; this.fetching = false;
}); });
}); });
},
data: {
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null
} }
}; };
</script> </script>

View file

@ -13,7 +13,17 @@
<script lang="typescript"> <script lang="typescript">
export default { export default {
props: ['url', 'target'], 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); const url = new URL(this.url);
this.schema = url.protocol; this.schema = url.protocol;
@ -22,14 +32,6 @@
this.pathname = url.pathname; this.pathname = url.pathname;
this.query = url.search; this.query = url.search;
this.hash = url.hash; this.hash = url.hash;
},
data: {
schema: null,
hostname: null,
port: null,
pathname: null,
query: null,
hash: null
} }
}; };
</script> </script>