✌️
This commit is contained in:
tamaina
parent
035c98dc15
commit
ddb41bd0ba
5 changed files with 21 additions and 36 deletions
|
|
@ -102,10 +102,6 @@ const props = withDefaults(defineProps<{
|
|||
}>(), {
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'queue', count: number): void;
|
||||
}>();
|
||||
|
||||
let rootEl = $shallowRef<HTMLElement>();
|
||||
|
||||
/**
|
||||
|
|
@ -128,6 +124,7 @@ const items = ref<MisskeyEntityMap>(new Map());
|
|||
* 最新が最後（パフォーマンス上の理由でitemsと逆にした）
|
||||
*/
|
||||
const queue = ref<MisskeyEntityMap>(new Map());
|
||||
const queueSize = computed(() => queue.value.size);
|
||||
|
||||
const offset = ref(0);
|
||||
|
||||
|
|
@ -231,11 +228,6 @@ watch([$$(weakBacked), $$(contentEl)], () => {
|
|||
});
|
||||
//#endregion
|
||||
|
||||
watch(queue, (a, b) => {
|
||||
if (a.size === 0 && b.size === 0) return;
|
||||
emit('queue', queue.value.size);
|
||||
}, { deep: true });
|
||||
|
||||
/**
|
||||
* 初期化
|
||||
* scrollAfterInitなどの後処理もあるので、reload関数を使うべき
|
||||
|
|
@ -283,7 +275,12 @@ function scrollAfterInit() {
|
|||
if (props.pagination.reversed) {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (contentEl) scrollToBottom(contentEl);
|
||||
if (contentEl) {
|
||||
scrollToBottom(contentEl);
|
||||
// scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある
|
||||
weakBacked = false;
|
||||
backed = false;
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// scrollToBottomでmoreFetchingボタンが画面外まで出るまで
|
||||
|
|
@ -295,7 +292,11 @@ function scrollAfterInit() {
|
|||
} else {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (contentEl) scrollToTop(contentEl);
|
||||
scrollToTop(scrollableElement);
|
||||
// scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある
|
||||
weakBacked = false;
|
||||
backed = false;
|
||||
|
||||
moreFetching.value = false;
|
||||
}, 200);
|
||||
});
|
||||
|
|
@ -471,6 +472,7 @@ const prepend = (item: MisskeyEntity): void => {
|
|||
}
|
||||
|
||||
if (
|
||||
queueSize.value === 0 && // キューに残っている場合はキューに追加する
|
||||
!backed && // 先頭に表示されていない時はキューに追加する
|
||||
!isPausingUpdate && // タブがバックグラウンドの時はキューに追加する
|
||||
active.value // keepAliveで隠されている間はキューに追加する
|
||||
|
|
@ -566,6 +568,7 @@ defineExpose({
|
|||
queue,
|
||||
more,
|
||||
inited,
|
||||
queueSize,
|
||||
reload,
|
||||
prepend,
|
||||
append: appendItem,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
|
||||
<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -21,7 +21,6 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'note'): void;
|
||||
(ev: 'queue', count: number): void;
|
||||
}>();
|
||||
|
||||
provide('inChannel', computed(() => props.src === 'channel'));
|
||||
|
|
@ -169,5 +168,8 @@ defineExpose({
|
|||
reload: () => {
|
||||
tlComponent.pagingComponent?.reload();
|
||||
},
|
||||
queueSize: computed(() => {
|
||||
return tlComponent.pagingComponent?.queueSize ?? 0;
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,13 @@
|
|||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="800">
|
||||
<div ref="rootEl" v-hotkey.global="keymap">
|
||||
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
|
||||
<div v-if="tlEl?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
|
||||
<div :class="$style.tl">
|
||||
<MkTimeline
|
||||
ref="tlEl" :key="antennaId"
|
||||
src="antenna"
|
||||
:antenna="antennaId"
|
||||
:sound="true"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,17 +33,12 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
let antenna = $ref(null);
|
||||
let queue = $ref(0);
|
||||
let rootEl = $shallowRef<HTMLElement>();
|
||||
let tlEl = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
const keymap = $computed(() => ({
|
||||
't': focus,
|
||||
}));
|
||||
|
||||
function queueUpdated(q) {
|
||||
queue = q;
|
||||
}
|
||||
|
||||
function top() {
|
||||
tlEl?.reload();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@
|
|||
<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
|
||||
<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
|
||||
|
||||
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
|
||||
<div v-if="tlComponent?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
|
||||
<div :class="$style.tl">
|
||||
<MkTimeline
|
||||
ref="tlComponent"
|
||||
:key="src"
|
||||
:src="src"
|
||||
:sound="true"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +25,6 @@ import { defineAsyncComponent, computed, watch, provide } from 'vue';
|
|||
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import MkPostForm from '@/components/MkPostForm.vue';
|
||||
import { scroll } from '@/scripts/scroll';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
|
|
@ -47,16 +45,11 @@ const keymap = {
|
|||
const tlComponent = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
const rootEl = $shallowRef<HTMLElement>();
|
||||
|
||||
let queue = $ref(0);
|
||||
let srcWhenNotSignin = $ref(isLocalTimelineAvailable ? 'local' : 'global');
|
||||
const src = $computed({ get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin), set: (x) => saveSrc(x) });
|
||||
|
||||
watch ($$(src), () => queue = 0);
|
||||
|
||||
function queueUpdated(q: number): void {
|
||||
queue = q;
|
||||
}
|
||||
|
||||
function top(): void {
|
||||
tlComponent?.reload();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,13 @@
|
|||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="800">
|
||||
<div ref="rootEl">
|
||||
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
|
||||
<div v-if="tlEl?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
|
||||
<div :class="$style.tl">
|
||||
<MkTimeline
|
||||
ref="tlEl" :key="listId"
|
||||
src="list"
|
||||
:list="listId"
|
||||
:sound="true"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,7 +20,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, watch } from 'vue';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import { scroll } from '@/scripts/scroll';
|
||||
import * as os from '@/os';
|
||||
import { useRouter } from '@/router';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
|
|
@ -34,7 +32,6 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
let list = $ref(null);
|
||||
let queue = $ref(0);
|
||||
let tlEl = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
let rootEl = $shallowRef<HTMLElement>();
|
||||
|
||||
|
|
@ -44,10 +41,6 @@ watch(() => props.listId, async () => {
|
|||
});
|
||||
}, { immediate: true });
|
||||
|
||||
function queueUpdated(q) {
|
||||
queue = q;
|
||||
}
|
||||
|
||||
function top() {
|
||||
tlEl?.reload();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue