mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 04:26:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

factor out SkLazy

Browse source
This commit is contained in:
Hazelnoot 2025-04-13 19:27:44 -04:00
parent 7e9e018b09
commit d647daae0e
3 changed files with 16 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/components/global/MkLazy.vue
View file

@ -16,6 +16,8 @@ import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, useTemplateRef
const rootEl = useTemplateRef('rootEl'); const rootEl = useTemplateRef('rootEl');
const showing = ref(false); const showing = ref(false);
defineExpose({ rootEl, showing });
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'show'): void, (ev: 'show'): void,
}>(); }>();
@ -36,13 +38,17 @@ const observer = new IntersectionObserver(
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
observer.observe(rootEl.value!); if (rootEl.value) {
observer.observe(rootEl.value);
}
}); });
}); });
onActivated(() => { onActivated(() => {
nextTick(() => { nextTick(() => {
observer.observe(rootEl.value!); if (rootEl.value) {
observer.observe(rootEl.value);
}
}); });
}); });

57
packages/frontend/src/components/global/SkLazy.vue
View file

@ -1,57 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<!-- Based on MkLazy.vue -->
<template>
<div ref="rootEl" :class="$style.root">
<slot v-if="showing"></slot>
<div v-else :class="$style.placeholder"></div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
const rootEl = shallowRef<HTMLDivElement>();
const showing = ref(false);
defineExpose({ rootEl, showing });
const observer = new IntersectionObserver(entries =>
showing.value = entries.some((entry) => entry.isIntersecting),
);
onMounted(() => {
nextTick(() => {
if (rootEl.value) {
observer.observe(rootEl.value);
}
});
});
onActivated(() => {
nextTick(() => {
if (rootEl.value) {
observer.observe(rootEl.value);
}
});
});
onBeforeUnmount(() => {
observer.disconnect();
});
</script>
<style lang="scss" module>
.root {
display: block;
}
.placeholder {
display: block;
min-height: 150px;
}
</style>

16
packages/frontend/src/pages/following-feed.vue
View file

@ -16,16 +16,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkHorizontalSwipe> </MkHorizontalSwipe>
</div> </div>
<SkLazy ref="userScroll" :class="$style.user"> <MkLazy ref="userScroll" :class="$style.user">
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="userList" :tabs="headerTabs"> <MkHorizontalSwipe v-if="selectedUserId" v-model:tab="userList" :tabs="headerTabs">
<SkUserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles"/> <SkUserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
</MkHorizontalSwipe> </MkHorizontalSwipe>
</SkLazy> </MkLazy>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, shallowRef } from 'vue'; import { computed, ref, useTemplateRef } from 'vue';
import type { ComputedRef, Ref } from 'vue'; import type { ComputedRef, Ref } from 'vue';
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue'; import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
import type { PageHeaderItem } from '@/types/page-header.js'; import type { PageHeaderItem } from '@/types/page-header.js';
@ -34,11 +34,11 @@ import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
import MkPageHeader from '@/components/global/MkPageHeader.vue'; import MkPageHeader from '@/components/global/MkPageHeader.vue';
import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue'; import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
import { createModel, createHeaderItem, followingFeedTabs, followingTabIcon, followingTabName, followingTab } from '@/utility/following-feed-utils.js'; import { createModel, createHeaderItem, followingFeedTabs, followingTabIcon, followingTabName, followingTab } from '@/utility/following-feed-utils.js';
import SkLazy from '@/components/global/SkLazy.vue';
import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue'; import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
import SkRemoteFollowersWarning from '@/components/SkRemoteFollowersWarning.vue'; import SkRemoteFollowersWarning from '@/components/SkRemoteFollowersWarning.vue';
import { useRouter } from '@/router'; import { useRouter } from '@/router';
import { definePage } from '@/page'; import { definePage } from '@/page';
import MkLazy from '@/components';
const model = createModel(); const model = createModel();
const { const {
@ -52,10 +52,10 @@ const {
const router = useRouter(); const router = useRouter();
const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>(); const userRecentNotes = useTemplateRef('userRecentNotes');
const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNotes>>(); const followingRecentNotes = useTemplateRef('followingRecentNotes');
const userScroll = shallowRef<InstanceType<typeof SkLazy>>(); const userScroll = useTemplateRef('userScroll');
const noteScroll = shallowRef<HTMLElement>(); const noteScroll = useTemplateRef('noteScroll');
const selectedUserId: Ref<string | null> = ref(null); const selectedUserId: Ref<string | null> = ref(null);