enhance(frontend): improve pull to refresh
This commit is contained in:
parent
cd0b6c1729
commit
d0d32e8846
@ -4,7 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
<MkPullToRefresh :refresher="() => reload()">
|
||||||
|
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<div class="_fullinfo">
|
<div class="_fullinfo">
|
||||||
<img :src="infoImageUrl" class="_ghost"/>
|
<img :src="infoImageUrl" class="_ghost"/>
|
||||||
@ -18,11 +19,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||||||
<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
|
<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
|
||||||
</MkDateSeparatedList>
|
</MkDateSeparatedList>
|
||||||
</template>
|
</template>
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
|
</MkPullToRefresh>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onUnmounted, onDeactivated, onMounted, computed, shallowRef } from 'vue';
|
import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
|
||||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||||
import XNotification from '@/components/MkNotification.vue';
|
import XNotification from '@/components/MkNotification.vue';
|
||||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||||
@ -33,6 +35,7 @@ import { i18n } from '@/i18n.js';
|
|||||||
import { notificationTypes } from '@/const.js';
|
import { notificationTypes } from '@/const.js';
|
||||||
import { infoImageUrl } from '@/instance.js';
|
import { infoImageUrl } from '@/instance.js';
|
||||||
import { defaultStore } from '@/store.js';
|
import { defaultStore } from '@/store.js';
|
||||||
|
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
excludeTypes?: typeof notificationTypes[number][];
|
excludeTypes?: typeof notificationTypes[number][];
|
||||||
@ -54,7 +57,7 @@ const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
|
|||||||
})),
|
})),
|
||||||
};
|
};
|
||||||
|
|
||||||
const onNotification = (notification) => {
|
function onNotification(notification) {
|
||||||
const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
|
const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
|
||||||
if (isMuted || document.visibilityState === 'visible') {
|
if (isMuted || document.visibilityState === 'visible') {
|
||||||
useStream().send('readNotification');
|
useStream().send('readNotification');
|
||||||
@ -63,7 +66,15 @@ const onNotification = (notification) => {
|
|||||||
if (!isMuted) {
|
if (!isMuted) {
|
||||||
pagingComponent.value.prepend(notification);
|
pagingComponent.value.prepend(notification);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
function reload() {
|
||||||
|
return new Promise<void>((res) => {
|
||||||
|
pagingComponent.value?.reload().then(() => {
|
||||||
|
res();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
let connection;
|
let connection;
|
||||||
|
|
||||||
@ -72,6 +83,12 @@ onMounted(() => {
|
|||||||
connection.on('notification', onNotification);
|
connection.on('notification', onNotification);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onActivated(() => {
|
||||||
|
pagingComponent.value?.reload();
|
||||||
|
connection = useStream().useChannel('main');
|
||||||
|
connection.on('notification', onNotification);
|
||||||
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (connection) connection.dispose();
|
if (connection) connection.dispose();
|
||||||
});
|
});
|
||||||
|
@ -47,7 +47,13 @@ let scrollEl: HTMLElement | null = null;
|
|||||||
|
|
||||||
let disabled = false;
|
let disabled = false;
|
||||||
|
|
||||||
const emits = defineEmits<{
|
const props = withDefaults(defineProps<{
|
||||||
|
refresher: () => Promise<void>;
|
||||||
|
}>(), {
|
||||||
|
refresher: () => Promise.resolve(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
(ev: 'refresh'): void;
|
(ev: 'refresh'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
@ -120,7 +126,12 @@ function moveEnd() {
|
|||||||
if (isPullEnd) {
|
if (isPullEnd) {
|
||||||
isPullEnd = false;
|
isPullEnd = false;
|
||||||
isRefreshing = true;
|
isRefreshing = true;
|
||||||
fixOverContent().then(() => emits('refresh'));
|
fixOverContent().then(() => {
|
||||||
|
emit('refresh');
|
||||||
|
props.refresher().then(() => {
|
||||||
|
refreshFinished();
|
||||||
|
});
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
closeContent().then(() => isPullStart = false);
|
closeContent().then(() => isPullStart = false);
|
||||||
}
|
}
|
||||||
@ -188,7 +199,6 @@ onUnmounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
refreshFinished,
|
|
||||||
setDisabled,
|
setDisabled,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MkPullToRefresh ref="prComponent" @refresh="() => reloadTimeline(true)">
|
<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
|
||||||
<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
|
<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
|
||||||
</MkPullToRefresh>
|
</MkPullToRefresh>
|
||||||
</template>
|
</template>
|
||||||
@ -196,25 +196,18 @@ const pagination = {
|
|||||||
params: query,
|
params: query,
|
||||||
};
|
};
|
||||||
|
|
||||||
const reloadTimeline = (fromPR = false) => {
|
function reloadTimeline() {
|
||||||
|
return new Promise<void>((res) => {
|
||||||
tlNotesCount = 0;
|
tlNotesCount = 0;
|
||||||
|
|
||||||
tlComponent.pagingComponent?.reload().then(() => {
|
tlComponent.pagingComponent?.reload().then(() => {
|
||||||
reloadStream();
|
reloadStream();
|
||||||
if (fromPR) prComponent.refreshFinished();
|
res();
|
||||||
});
|
});
|
||||||
};
|
});
|
||||||
|
}
|
||||||
//const pullRefresh = () => reloadTimeline(true);
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
reloadTimeline,
|
reloadTimeline,
|
||||||
});
|
});
|
||||||
|
|
||||||
/* TODO
|
|
||||||
const timetravel = (date?: Date) => {
|
|
||||||
this.date = date;
|
|
||||||
this.$refs.tl.reload();
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user