wip
This commit is contained in:
parent
322da7560c
commit
f8c8559089
6 changed files with 61 additions and 47 deletions
|
@ -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,
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
export default {
|
||||
props: ['post'],
|
||||
computed: {
|
||||
reactions: function() {
|
||||
reactions() {
|
||||
return this.post.reaction_counts;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
export default {
|
||||
props: ['stream'],
|
||||
created: function() {
|
||||
created() {
|
||||
if (this.stream.state == 'connected') {
|
||||
this.root.style.opacity = 0;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue