enhance: MisskeyIO#529 の追加修正 (MisskeyIO#536)
Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
This commit is contained in:
parent
da9530a8f7
commit
e332c1f9a2
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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 ? ({
|
||||||
|
|
Loading…
Reference in a new issue