Merge pull request #1479 from tamaina/master

タイムラインで古い投稿から順に画面から消していく
This commit is contained in:
syuilo 2018-04-17 04:47:46 +09:00 committed by GitHub
commit fdfbd1d202
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 5 deletions

View file

@ -5,11 +5,11 @@
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p class="empty" v-if="notes.length == 0 && !fetching"> <p class="empty" v-if="notes.length == 0 && !fetching">
%fa:R comments%自分の投稿や自分がフォローしているユーザーの投稿が表示されます %fa:R comments%%i18n:@empty%
</p> </p>
<mk-notes :notes="notes" ref="timeline"> <mk-notes :notes="notes" ref="timeline">
<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">もっと見る</template> <template v-if="!moreFetching">%i18n:@load-more%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template> <template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
</button> </button>
</mk-notes> </mk-notes>
@ -29,7 +29,8 @@ export default Vue.extend({
notes: [], notes: [],
connection: null, connection: null,
connectionId: null, connectionId: null,
date: null date: null,
isTop: true
}; };
}, },
computed: { computed: {
@ -101,6 +102,7 @@ export default Vue.extend({
sound.play(); sound.play();
} }
if (this.isTop) this.notes.pop();
this.notes.unshift(note); this.notes.unshift(note);
}, },
onChangeFollowing() { onChangeFollowing() {
@ -111,6 +113,7 @@ export default Vue.extend({
const current = window.scrollY + window.innerHeight; const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more(); if (current > document.body.offsetHeight - 8) this.more();
} }
this.isTop = window.scrollY < 100;
}, },
onKeydown(e) { onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') { if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {

View file

@ -37,7 +37,8 @@ export default Vue.extend({
notes: [], notes: [],
existMore: false, existMore: false,
connection: null, connection: null,
connectionId: null connectionId: null,
isTop: true
}; };
}, },
computed: { computed: {
@ -53,13 +54,18 @@ export default Vue.extend({
this.connection.on('follow', this.onChangeFollowing); this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing); this.connection.on('unfollow', this.onChangeFollowing);
window.addEventListener('scroll', this.onScroll);
this.fetch(); this.fetch();
}, },
beforeDestroy() { beforeDestroy() {
this.connection.off('note', this.onNote); this.connection.off('note', this.onNote);
this.connection.off('follow', this.onChangeFollowing); this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing); this.connection.off('unfollow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing);
(this as any).os.stream.dispose(this.connectionId); (this as any).os.stream.dispose(this.connectionId);
window.removeEventListener('scroll', this.onScroll);
}, },
methods: { methods: {
fetch(cb?) { fetch(cb?) {
@ -95,10 +101,18 @@ export default Vue.extend({
}); });
}, },
onNote(note) { onNote(note) {
this.notes.unshift(note); this.isTop = window.scrollY < 100;
}, },
onChangeFollowing() { onChangeFollowing() {
this.fetch(); this.fetch();
},
onScroll() {
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more();
}
if (window.scrollY > 100) this.isTop = false;
else this.isTop = true;
} }
} }
}); });