oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat(client): 自動でもっと見るオプション (#6403)

Browse source 
* wip

* ugokanai

* wip

* implement setting subscribing

* fix lint

* ✌️

* Update notifications.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
tamaina 2020-05-31 12:53:06 +09:00 • committed by GitHub
parent eda7d60c26
commit a1e0c866aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 96 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/client/pages/messaging/messaging-room.vue
View file

@ -16,7 +16,7 @@
<mk-loading v-if="fetching"/>
<p class="empty" v-if="!fetching && messages.length == 0"><fa :icon="faInfoCircle"/>{{ $t('noMessagesYet') }}</p>
<p class="no-history" v-if="!fetching && messages.length > 0 && !existMoreMessages"><fa :icon="faFlag"/>{{ $t('noMoreHistory') }}</p>
<button class="more _button" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
<button class="more _button" ref="loadMore" :class="{ fetching: fetchingMoreMessages }" v-show="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
<template v-if="fetchingMoreMessages"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('loading') : $t('loadMore') }}
</button>
<x-list class="messages" :items="messages" v-slot="{ item: message }" direction="up" reversed>
@ -40,7 +40,6 @@ import { faArrowCircleDown, faFlag, faUsers, faInfoCircle } from '@fortawesome/f
import XList from '../../components/date-separated-list.vue';
import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue';
import { url } from '../../config';
import parseAcct from '../../../misc/acct/parse';
export default Vue.extend({
@ -61,6 +60,13 @@ export default Vue.extend({
connection: null,
showIndicator: false,
timer: null,
ilObserver: new IntersectionObserver(
(entries) => entries.some((entry) => entry.isIntersecting)
&& !this.fetching
&& !this.fetchingMoreMessages
&& this.existMoreMessages
&& this.fetchMoreMessages()
),
faArrowCircleDown, faFlag, faUsers, faInfoCircle
};
},
@ -77,6 +83,9 @@ export default Vue.extend({
mounted() {
this.fetch();
if (this.$store.state.device.enableInfiniteScroll) {
this.$nextTick(() => this.ilObserver.observe(this.$refs.loadMore as Element));
}
},
beforeDestroy() {
@ -85,6 +94,8 @@ export default Vue.extend({
window.removeEventListener('scroll', this.onScroll);
document.removeEventListener('visibilitychange', this.onVisibilitychange);
this.ilObserver.disconnect();
},
methods: {
@ -112,8 +123,12 @@ export default Vue.extend({
document.addEventListener('visibilitychange', this.onVisibilitychange);
this.fetchMessages().then(() => {
this.fetching = false;
this.scrollToBottom();
// もっと見るの交差検知を発火させないためにfetchは
// スクロールが終わるまでfalseにしておく
// scrollendのようなイベントはないのでsetTimeoutで
setTimeout(() => this.fetching = false, 300);
});
},