enhance: MisskeyIO#529 の追加修正 (MisskeyIO#536)

Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
This commit is contained in:
まっちゃとーにゅ 2024-03-19 06:33:47 +09:00 committed by GitHub
parent da9530a8f7
commit e332c1f9a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 18 additions and 22 deletions

View file

@ -134,7 +134,6 @@ export default defineComponent({
const classes = { const classes = {
[$style['date-separated-list']]: true, [$style['date-separated-list']]: true,
[$style['date-separated-list-nogap']]: props.noGap, [$style['date-separated-list-nogap']]: props.noGap,
[$style['reversed']]: props.reversed,
[$style['direction-down']]: props.direction === 'down', [$style['direction-down']]: props.direction === 'down',
[$style['direction-up']]: props.direction === 'up', [$style['direction-up']]: props.direction === 'up',
}; };
@ -211,11 +210,6 @@ export default defineComponent({
} }
} }
.reversed {
display: flex;
flex-direction: column-reverse;
}
.separator { .separator {
text-align: center; text-align: center;
} }

View file

@ -25,14 +25,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div v-else ref="rootEl"> <div v-else ref="rootEl">
<div v-show="pagination.reversed && more" key="_more_" class="_margin"> <div v-show="pagination.prepend && more" key="_more_" class="_margin">
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMoreAhead : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMoreAhead"> <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMoreAhead : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMoreAhead">
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
</MkButton> </MkButton>
<MkLoading v-else class="loading"/> <MkLoading v-else class="loading"/>
</div> </div>
<slot :items="items" :fetching="fetching || moreFetching"></slot> <slot :items="items" :fetching="fetching || moreFetching"></slot>
<div v-show="!pagination.reversed && more" key="_more_" class="_margin"> <div v-show="!pagination.prepend && more" key="_more_" class="_margin">
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore"> <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore">
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
</MkButton> </MkButton>
@ -67,9 +67,9 @@ export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints>
noPaging?: boolean; noPaging?: boolean;
/** /**
* items 配列の中身を逆順にする(新しい方が最後) * fetchの際に items 配列を上方向に追加していくappend, prepend等の関数には影響しない
*/ */
reversed?: boolean; prepend?: boolean;
offsetMode?: boolean; offsetMode?: boolean;
@ -126,14 +126,14 @@ const BACKGROUND_PAUSE_WAIT_SEC = 10;
// https://qiita.com/mkataigi/items/0154aefd2223ce23398e // https://qiita.com/mkataigi/items/0154aefd2223ce23398e
const scrollObserver = ref<IntersectionObserver>(); const scrollObserver = ref<IntersectionObserver>();
watch([() => props.pagination.reversed, scrollableElement], () => { watch([() => props.pagination.prepend, scrollableElement], () => {
if (scrollObserver.value) scrollObserver.value.disconnect(); if (scrollObserver.value) scrollObserver.value.disconnect();
scrollObserver.value = new IntersectionObserver(entries => { scrollObserver.value = new IntersectionObserver(entries => {
backed.value = entries[0].isIntersecting; backed.value = entries[0].isIntersecting;
}, { }, {
root: scrollableElement.value, root: scrollableElement.value,
rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px', rootMargin: props.pagination.prepend ? '-100% 0px 100% 0px' : '100% 0px -100% 0px',
threshold: 0.01, threshold: 0.01,
}); });
}, { immediate: true }); }, { immediate: true });
@ -149,7 +149,7 @@ watch([backed, contentEl], () => {
if (!backed.value) { if (!backed.value) {
if (!contentEl.value) return; if (!contentEl.value) return;
scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE); scrollRemove.value = (props.pagination.prepend ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE);
} else { } else {
if (scrollRemove.value) scrollRemove.value(); if (scrollRemove.value) scrollRemove.value();
scrollRemove.value = null; scrollRemove.value = null;
@ -187,7 +187,7 @@ async function init(): Promise<void> {
items.value = res; items.value = res;
more.value = false; more.value = false;
} else { } else {
if (props.pagination.reversed) moreFetching.value = true; if (props.pagination.prepend) moreFetching.value = true;
items.value = res; items.value = res;
more.value = true; more.value = true;
} }
@ -242,7 +242,7 @@ const fetchMore = async (): Promise<void> => {
}; };
if (res.length === 0) { if (res.length === 0) {
if (props.pagination.reversed) { if (props.pagination.prepend) {
reverseConcat(res).then(() => { reverseConcat(res).then(() => {
more.value = false; more.value = false;
moreFetching.value = false; moreFetching.value = false;
@ -253,7 +253,7 @@ const fetchMore = async (): Promise<void> => {
moreFetching.value = false; moreFetching.value = false;
} }
} else { } else {
if (props.pagination.reversed) { if (props.pagination.prepend) {
reverseConcat(res).then(() => { reverseConcat(res).then(() => {
more.value = true; more.value = true;
moreFetching.value = false; moreFetching.value = false;
@ -280,14 +280,14 @@ const fetchMoreAhead = async (): Promise<void> => {
...(props.pagination.offsetMode ? { ...(props.pagination.offsetMode ? {
offset: offset.value, offset: offset.value,
} : { } : {
sinceId: items.value[items.value.length - 1].id, sinceId: items.value[0].id,
}), }),
}).then(res => { }).then(res => {
if (res.length === 0) { if (res.length === 0) {
items.value = items.value.concat(res); items.value = res.concat(items.value);
more.value = false; more.value = false;
} else { } else {
items.value = items.value.concat(res); items.value = res.concat(items.value);
more.value = true; more.value = true;
} }
offset.value += res.length; offset.value += res.length;
@ -297,7 +297,7 @@ const fetchMoreAhead = async (): Promise<void> => {
}); });
}; };
const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl.value!, TOLERANCE); const isTop = (): boolean => isBackTop.value || (props.pagination.prepend ? isBottomVisible : isTopVisible)(contentEl.value!, TOLERANCE);
watch(visibility, () => { watch(visibility, () => {
if (visibility.value === 'hidden') { if (visibility.value === 'hidden') {
@ -369,7 +369,7 @@ onActivated(() => {
}); });
onDeactivated(() => { onDeactivated(() => {
isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl.value ? rootEl.value.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; isBackTop.value = props.pagination.prepend ? window.scrollY >= (rootEl.value ? rootEl.value.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
}); });
function toBottom() { function toBottom() {
@ -378,7 +378,7 @@ function toBottom() {
onBeforeMount(() => { onBeforeMount(() => {
init().then(() => { init().then(() => {
if (props.pagination.reversed) { if (props.pagination.prepend) {
nextTick(() => { nextTick(() => {
setTimeout(toBottom, 800); setTimeout(toBottom, 800);

View file

@ -85,6 +85,7 @@ const prevUserPagination: Paging = {
}; };
const nextUserPagination: Paging = { const nextUserPagination: Paging = {
prepend: true,
endpoint: 'users/notes', endpoint: 'users/notes',
limit: 10, limit: 10,
params: computed(() => note.value ? ({ params: computed(() => note.value ? ({
@ -103,6 +104,7 @@ const prevChannelPagination: Paging = {
}; };
const nextChannelPagination: Paging = { const nextChannelPagination: Paging = {
prepend: true,
endpoint: 'channels/timeline', endpoint: 'channels/timeline',
limit: 10, limit: 10,
params: computed(() => note.value ? ({ params: computed(() => note.value ? ({