misskey/src/client/app/desktop/views/components/timeline.vue

161 lines
3.8 KiB
Vue
Raw Normal View History

2018-02-11 08:52:37 +01:00
<template>
2018-02-13 00:31:03 +01:00
<div class="mk-timeline">
2018-02-19 11:46:31 +01:00
<mk-friends-maker v-if="alone"/>
2018-02-20 01:48:30 +01:00
<div class="fetching" v-if="fetching">
2018-02-13 01:12:54 +01:00
<mk-ellipsis-icon/>
</div>
2018-04-07 19:30:37 +02:00
<p class="empty" v-if="notes.length == 0 && !fetching">
2018-04-15 13:50:53 +02:00
%fa:R comments%%i18n:@empty%
2018-02-22 12:52:39 +01:00
</p>
2018-04-07 19:30:37 +02:00
<mk-notes :notes="notes" ref="timeline">
2018-03-05 12:09:26 +01:00
<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
2018-04-15 13:50:53 +02:00
<template v-if="!moreFetching">%i18n:@load-more%</template>
2018-02-22 12:52:39 +01:00
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
2018-03-05 12:09:26 +01:00
</button>
2018-04-07 19:30:37 +02:00
</mk-notes>
2018-02-11 15:26:35 +01:00
</div>
2018-02-11 08:52:37 +01:00
</template>
2018-02-11 09:04:03 +01:00
<script lang="ts">
import Vue from 'vue';
2018-03-04 10:50:30 +01:00
import { url } from '../../../config';
2018-02-11 08:52:37 +01:00
2018-02-11 09:04:03 +01:00
export default Vue.extend({
2018-02-13 01:12:54 +01:00
data() {
return {
fetching: true,
moreFetching: false,
2018-02-25 16:39:05 +01:00
existMore: false,
2018-04-07 19:30:37 +02:00
notes: [],
2018-02-13 01:12:54 +01:00
connection: null,
2018-02-19 10:26:20 +01:00
connectionId: null,
2018-04-15 13:50:53 +02:00
date: null,
isTop: true
2018-02-13 01:12:54 +01:00
};
},
2018-02-11 09:04:03 +01:00
computed: {
2018-02-13 01:12:54 +01:00
alone(): boolean {
2018-03-29 07:48:47 +02:00
return (this as any).os.i.followingCount == 0;
2018-02-11 09:04:03 +01:00
}
},
2018-02-13 01:12:54 +01:00
mounted() {
2018-02-18 04:35:18 +01:00
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
2018-02-13 01:12:54 +01:00
2018-04-07 19:30:37 +02:00
this.connection.on('note', this.onNote);
2018-02-13 01:12:54 +01:00
this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing);
document.addEventListener('keydown', this.onKeydown);
window.addEventListener('scroll', this.onScroll);
this.fetch();
},
beforeDestroy() {
2018-04-07 19:30:37 +02:00
this.connection.off('note', this.onNote);
2018-02-13 01:12:54 +01:00
this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing);
2018-02-18 04:35:18 +01:00
(this as any).os.stream.dispose(this.connectionId);
2018-02-13 01:12:54 +01:00
document.removeEventListener('keydown', this.onKeydown);
window.removeEventListener('scroll', this.onScroll);
},
2018-02-11 09:04:03 +01:00
methods: {
2018-02-13 01:12:54 +01:00
fetch(cb?) {
this.fetching = true;
2018-04-07 19:30:37 +02:00
(this as any).api('notes/timeline', {
2018-02-25 16:39:05 +01:00
limit: 11,
2018-03-29 07:48:47 +02:00
untilDate: this.date ? this.date.getTime() : undefined
2018-04-07 19:30:37 +02:00
}).then(notes => {
if (notes.length == 11) {
notes.pop();
2018-02-25 16:39:05 +01:00
this.existMore = true;
}
2018-04-07 19:30:37 +02:00
this.notes = notes;
2018-02-19 15:37:09 +01:00
this.fetching = false;
2018-02-20 17:12:18 +01:00
this.$emit('loaded');
2018-02-13 01:12:54 +01:00
if (cb) cb();
});
},
more() {
2018-04-07 19:30:37 +02:00
if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return;
2018-02-13 01:12:54 +01:00
this.moreFetching = true;
2018-04-07 19:30:37 +02:00
(this as any).api('notes/timeline', {
2018-02-25 16:39:05 +01:00
limit: 11,
2018-04-07 19:30:37 +02:00
untilId: this.notes[this.notes.length - 1].id
}).then(notes => {
if (notes.length == 11) {
notes.pop();
2018-02-25 16:39:05 +01:00
} else {
this.existMore = false;
}
2018-04-07 19:30:37 +02:00
this.notes = this.notes.concat(notes);
2018-02-13 01:12:54 +01:00
this.moreFetching = false;
});
},
2018-04-07 19:30:37 +02:00
onNote(note) {
2018-03-04 10:50:30 +01:00
// サウンドを再生する
if ((this as any).os.isEnableSounds) {
2018-04-08 10:15:07 +02:00
const sound = new Audio(`${url}/assets/post.mp3`);
sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
2018-03-06 10:06:45 +01:00
sound.play();
2018-03-04 10:50:30 +01:00
}
2018-04-15 13:57:30 +02:00
if (this.isTop) this.notes.pop();
2018-04-07 19:30:37 +02:00
this.notes.unshift(note);
2018-02-13 01:12:54 +01:00
},
onChangeFollowing() {
this.fetch();
},
onScroll() {
2018-04-07 20:58:11 +02:00
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
2018-03-05 12:09:26 +01:00
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more();
}
2018-04-15 13:50:53 +02:00
if (window.scrollY > 100) this.isTop = false;
else this.isTop = true;
2018-02-13 01:12:54 +01:00
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
(this.$refs.timeline as any).focus();
}
}
2018-02-19 10:26:20 +01:00
},
warp(date) {
this.date = date;
this.fetch();
2018-02-11 09:04:03 +01:00
}
}
2018-02-11 08:52:37 +01:00
});
</script>
<style lang="stylus" scoped>
.mk-timeline
2018-02-13 01:12:54 +01:00
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
2018-02-11 08:52:37 +01:00
2018-02-22 12:52:39 +01:00
> .mk-friends-maker
2018-02-13 01:12:54 +01:00
border-bottom solid 1px #eee
2018-02-11 08:52:37 +01:00
2018-02-20 01:48:30 +01:00
> .fetching
2018-02-13 01:12:54 +01:00
padding 64px 0
2018-02-11 08:52:37 +01:00
2018-02-13 01:12:54 +01:00
> .empty
display block
margin 0 auto
padding 32px
max-width 400px
2018-02-11 08:52:37 +01:00
text-align center
2018-02-13 01:12:54 +01:00
color #999
> [data-fa]
display block
margin-bottom 16px
font-size 3em
color #ccc
2018-02-11 08:52:37 +01:00
</style>