laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aaaaaaaaaaa

Browse Source
This commit is contained in:
tamaina 2022-02-03 03:37:05 +09:00
parent 99d8172ae5
commit 90c6f15a72
20 changed files with 257 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/client/src/components/date-separated-list.vue
View File

@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, h, PropType, TransitionGroup } from 'vue'; import { defineComponent, getCurrentInstance, h, markRaw, onMounted, PropType, TransitionGroup } from 'vue';
import MkAd from '@/components/global/ad.vue'; import MkAd from '@/components/global/ad.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { MisskeyEntity } from '@/types/date-separated-list';
export default defineComponent({ export default defineComponent({
props: { props: {
items: { items: {
type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>, type: Array as PropType<MisskeyEntity[]>,
required: true, required: true,
}, },
direction: { direction: {
@ -30,9 +31,15 @@ export default defineComponent({
required: false, required: false,
default: false default: false
}, },
itemsContainer: {
type: Object as PropType<HTMLElement | null>,
required: false,
nullable: true,
default: null,
},
}, },
setup(props, { slots, expose }) { setup(props, { slots, expose, emit }) {
function getDateText(time: string) { function getDateText(time: string) {
const date = new Date(time).getDate(); const date = new Date(time).getDate();
const month = new Date(time).getMonth() + 1; const month = new Date(time).getMonth() + 1;
@ -90,6 +97,11 @@ export default defineComponent({
} }
}); });
onMounted(() => {
const el = getCurrentInstance()?.vnode.el;
emit('update:itemsContainer', el ? markRaw(el) : null);
});
function onBeforeLeave(el: HTMLElement) { function onBeforeLeave(el: HTMLElement) {
el.style.top = `${el.offsetTop}px`; el.style.top = `${el.offsetTop}px`;
el.style.left = `${el.offsetLeft}px`; el.style.left = `${el.offsetLeft}px`;

92
packages/client/src/components/global/sticky-container.vue
View File

@ -1,71 +1,63 @@
<template> <template>
<div ref="rootEl"> <div ref="rootEl">
<slot name="header"></slot> <slot name="header"></slot>
<div ref="bodyEl"> <div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onUnmounted } from 'vue';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { autoSticky?: boolean;
autoSticky: { }>(), {
type: Boolean, autoSticky: false,
required: false, })
default: false,
},
},
setup(props, context) { const rootEl = $ref<HTMLElement>();
const rootEl = ref<HTMLElement>(null); const bodyEl = $ref<HTMLElement>();
const bodyEl = ref<HTMLElement>(null);
const calc = () => { let headerHeight: string | undefined = $ref();
const currentStickyTop = getComputedStyle(rootEl.value).getPropertyValue('--stickyTop') || '0px';
const header = rootEl.value.children[0]; const calc = () => {
if (header === bodyEl.value) { const currentStickyTop = getComputedStyle(rootEl).getPropertyValue('--stickyTop') || '0px';
bodyEl.value.style.setProperty('--stickyTop', currentStickyTop);
} else {
bodyEl.value.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
if (props.autoSticky) { const header = rootEl.children[0] as HTMLElement;
header.style.setProperty('--stickyTop', currentStickyTop); if (header === bodyEl) {
header.style.position = 'sticky'; bodyEl.style.setProperty('--stickyTop', currentStickyTop);
header.style.top = 'var(--stickyTop)'; } else {
header.style.zIndex = '1'; bodyEl.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
} headerHeight = header.offsetHeight.toString();
}
};
onMounted(() => { if (props.autoSticky) {
calc(); header.style.setProperty('--stickyTop', currentStickyTop);
header.style.position = 'sticky';
header.style.top = 'var(--stickyTop)';
header.style.zIndex = '1';
}
}
};
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
window.setTimeout(() => { window.setTimeout(() => {
calc(); calc();
}, 100); }, 100);
}); });
observer.observe(rootEl.value, { onMounted(() => {
attributes: false, calc();
childList: true,
subtree: false,
});
onUnmounted(() => { observer.observe(rootEl, {
observer.disconnect(); attributes: false,
}); childList: true,
}); subtree: false,
});
});
return { onUnmounted(() => {
rootEl, observer.disconnect();
bodyEl,
};
},
}); });
</script> </script>

14
packages/client/src/components/notes.vue
View File

@ -7,9 +7,19 @@
</div> </div>
</template> </template>
<template #default="{ items: notes }"> <template #default="{ items: notes, itemsContainerWrapped }">
<div class="giivymft" :class="{ noGap }"> <div class="giivymft" :class="{ noGap }">
<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes"> <XList
ref="notes"
v-slot="{ item: note }"
:items="notes"
:direction="pagination.reversed ? 'up' : 'down'"
:reversed="pagination.reversed"
:no-gap="noGap"
:ad="true"
v-model:itemsContainer="itemsContainerWrapped.v.value"
class="notes"
>
<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/> <XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
</XList> </XList>
</div> </div>

6
packages/client/src/components/notifications.vue
View File

@ -7,8 +7,8 @@
</div> </div>
</template> </template>
<template #default="{ items: notifications }"> <template #default="{ items: notifications, itemsContainerWrapped }">
<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true"> <XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true" v-model:itemsContainer="itemsContainerWrapped.v.value">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/> <XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/> <XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
</XList> </XList>
@ -29,7 +29,7 @@ import { stream } from '@/stream';
import { $i } from '@/account'; import { $i } from '@/account';
const props = defineProps<{ const props = defineProps<{
includeTypes?: PropType<typeof notificationTypes[number][]>; includeTypes?: typeof notificationTypes[number][];
unreadOnly?: boolean; unreadOnly?: boolean;
}>(); }>();

126
packages/client/src/components/ui/pagination.vue
View File

@ -20,7 +20,7 @@
</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" :itemsContainer="itemsContainer" :itemsContainerWrapped="itemsContainerWrapped"></slot>
<div v-if="!pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap"> <div v-if="!pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore"> <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
{{ $ts.loadMore }} {{ $ts.loadMore }}
@ -32,12 +32,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, ComputedRef, isRef, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue'; import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { onScrollTop, isTopVisible, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll'; import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { MisskeyEntity } from '@/types/date-separated-list';
const SECOND_FETCH_LIMIT = 30; const SECOND_FETCH_LIMIT = 30;
@ -75,16 +76,40 @@ const emit = defineEmits<{
(e: 'queue', count: number): void; (e: 'queue', count: number): void;
}>(); }>();
type Item = { id: string; [another: string]: unknown; }; let rootEl = $ref<HTMLElement>();
const rootEl = $ref<HTMLElement>(); /*
const items = ref<Item[]>([]); * itemsContainer: itemsの実体DOMsの親コンテナ(=v-forの直上)のHTMLElement
const queue = ref<Item[]>([]); *
* IntersectionObserverを使用してスクロールのパフォーマンスを向上させるため必要
* この中の最初の要素を評価するので、順番を反転したり変えたりしてはいけない
*
* これがundefinedのままの場合はrootElにフォールバックする
* つまりrootElがitemsの実体DOMsの親であるとする
*
* 自動ロードやストリーミングでの追加がなければあまり関係ない
*/
let itemsContainer = $ref<HTMLElement | null>();
/*
* date-separated-listとやり取りするために入れ子にしたオブジェクトを用意する
* slotの中身から変数を直接書き込むことができないため
*/
const itemsContainerWrapped = { v: $$(itemsContainer) };
/*
* 遡り中かどうか
* ＝ (itemsContainer || rootEl).children.item(0) が画面内に入ったかどうか
*/
let backed = $ref(false);
let scrollRemove: (() => void) | null = $ref(null);
const items = ref<MisskeyEntity[]>([]);
const queue = ref<MisskeyEntity[]>([]);
const offset = ref(0); const offset = ref(0);
const fetching = ref(true); const fetching = ref(true);
const moreFetching = ref(false); const moreFetching = ref(false);
const more = ref(false); const more = ref(false);
const backed = ref(false); // 遡り中か否か
const isBackTop = ref(false); const isBackTop = ref(false);
const empty = computed(() => items.value.length === 0); const empty = computed(() => items.value.length === 0);
const error = ref(false); const error = ref(false);
@ -92,10 +117,57 @@ const {
enableInfiniteScroll enableInfiniteScroll
} = defaultStore.reactiveState; } = defaultStore.reactiveState;
let mounted = $ref(false);
const contentEl = $computed(() => props.pagination.pageEl || rootEl); const contentEl = $computed(() => props.pagination.pageEl || rootEl);
const scrollableElement = $computed(() => getScrollContainer(contentEl)); const scrollableElement = $computed(() => getScrollContainer(contentEl));
const init = async (): Promise<void> => { const observer = new IntersectionObserver(entries => {
if (entries.some(entry => entry.isIntersecting)) {
backed = false;
} else {
backed = true;
}
});
watch([items, $$(itemsContainer)], observeLatestElement);
function observeLatestElement() {
observer.disconnect();
nextTick(() => {
if (!mounted) return;
const latestEl = (itemsContainer || rootEl)?.children.item(0);
if (latestEl) observer.observe(latestEl);
});
}
watch($$(backed), () => {
if (!backed) {
if (!contentEl) return;
scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
if (queue.value.length === 0) return;
for (const item of queue.value) {
prepend(item, true);
}
queue.value = [];
});
} else {
if (scrollRemove) scrollRemove();
scrollRemove = null;
}
});
if (props.pagination.params && isRef(props.pagination.params)) {
watch(props.pagination.params, init, { deep: true });
}
watch(queue, (a, b) => {
if (a.length === 0 && b.length === 0) return;
emit('queue', queue.value.length);
}, { deep: true });
async function init(): Promise<void> {
queue.value = []; queue.value = [];
fetching.value = true; fetching.value = true;
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {}; const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
@ -133,7 +205,6 @@ const reload = (): Promise<void> => {
const fetchMore = async (): Promise<void> => { const fetchMore = async (): Promise<void> => {
if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return; if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
moreFetching.value = true; moreFetching.value = true;
backed.value = true;
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {}; const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
await os.api(props.pagination.endpoint, { await os.api(props.pagination.endpoint, {
...params, ...params,
@ -150,16 +221,16 @@ const fetchMore = async (): Promise<void> => {
} }
const reverseConcat = _res => { const reverseConcat = _res => {
const oldHeight = contentEl.scrollHeight; const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY; const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
items.value = items.value.concat(_res); items.value = items.value.concat(_res);
return nextTick(() => { return nextTick(() => {
if (scrollableElement) { if (scrollableElement) {
scroll(scrollableElement, { top: oldScroll + (contentEl.scrollHeight - oldHeight), behavior: 'instant' }); scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
} else { } else {
window.scrollY = oldScroll + (contentEl.scrollHeight - oldHeight); window.scroll({ top: oldScroll + (getBodyScrollHeight() - oldHeight), behavior: 'instant' });
} }
return nextTick(); return nextTick();
@ -225,7 +296,7 @@ const fetchMoreAhead = async (): Promise<void> => {
}); });
}; };
const prepend = (item: Item, force = false): void => { const prepend = (item: MisskeyEntity, force = false): void => {
// 初回表示時はunshiftだけでOK // 初回表示時はunshiftだけでOK
if (!rootEl) { if (!rootEl) {
items.value.unshift(item); items.value.unshift(item);
@ -249,33 +320,18 @@ const prepend = (item: Item, force = false): void => {
} }
} else { } else {
queue.value.push(item); queue.value.push(item);
(props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
for (const item of queue.value) {
prepend(item, true);
}
queue.value = [];
});
} }
}; };
const append = (item: Item): void => { const append = (item: MisskeyEntity): void => {
items.value.push(item); items.value.push(item);
}; };
const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => { const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
const i = items.value.findIndex(item => item.id === id); const i = items.value.findIndex(item => item.id === id);
items.value[i] = replacer(items.value[i]); items.value[i] = replacer(items.value[i]);
}; };
if (props.pagination.params && isRef(props.pagination.params)) {
watch(props.pagination.params, init, { deep: true });
}
watch(queue, (a, b) => {
if (a.length === 0 && b.length === 0) return;
emit('queue', queue.value.length);
}, { deep: true });
const inited = init(); const inited = init();
onActivated(() => { onActivated(() => {
@ -291,6 +347,8 @@ function toBottom() {
} }
onMounted(() => { onMounted(() => {
mounted = true;
inited.then(() => { inited.then(() => {
if (props.pagination.reversed) { if (props.pagination.reversed) {
nextTick(() => { nextTick(() => {
@ -304,7 +362,11 @@ onMounted(() => {
}); });
} }
}); });
}) });
onBeforeUnmount(() => {
observer.disconnect();
});
defineExpose({ defineExpose({
items, items,

4
packages/client/src/components/user-list.vue
View File

@ -7,8 +7,8 @@
</div> </div>
</template> </template>
<template #default="{ items: users }"> <template #default="{ items: users, itemsContainer }">
<div class="efvhhmdq"> <div class="efvhhmdq" ref="itemsContainer">
<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/> <MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
</div> </div>
</template> </template>

2
packages/client/src/directives/sticky-container.ts
View File

@ -5,8 +5,10 @@ export default {
//const query = binding.value; //const query = binding.value;
const header = src.children[0]; const header = src.children[0];
const body = src.children[1];
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px'; const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`); src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
header.style.setProperty('--stickyTop', currentStickyTop); header.style.setProperty('--stickyTop', currentStickyTop);
header.style.position = 'sticky'; header.style.position = 'sticky';
header.style.top = 'var(--stickyTop)'; header.style.top = 'var(--stickyTop)';

8
packages/client/src/pages/admin/emojis.vue
View File

@ -19,8 +19,8 @@
</div> </div>
<MkPagination ref="emojisPaginationComponent" :pagination="pagination"> <MkPagination ref="emojisPaginationComponent" :pagination="pagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template v-slot="{items}"> <template v-slot="{items, itemsContainer}">
<div class="ldhfsamy"> <div class="ldhfsamy" ref="itemsContainer">
<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)"> <button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
<img :src="emoji.url" class="img" :alt="emoji.name"/> <img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body"> <div class="body">
@ -45,8 +45,8 @@
</FormSplit> </FormSplit>
<MkPagination :pagination="remotePagination"> <MkPagination :pagination="remotePagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template v-slot="{items}"> <template v-slot="{items, itemsContainer}">
<div class="ldhfsamy"> <div class="ldhfsamy" ref="itemsContainer">
<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)"> <div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
<img :src="emoji.url" class="img" :alt="emoji.name"/> <img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body"> <div class="body">

4
packages/client/src/pages/favorites.vue
View File

@ -8,8 +8,8 @@
</div> </div>
</template> </template>
<template #default="{ items }"> <template #default="{ items, itemsContainerWrapped }">
<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false"> <XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false" v-model:itemsContainer="itemsContainerWrapped.v.value">
<XNote :key="item.id" :note="item.note" :class="$style.note"/> <XNote :key="item.id" :note="item.note" :class="$style.note"/>
</XList> </XList>
</template> </template>

4
packages/client/src/pages/federation.vue
View File

@ -41,8 +41,8 @@
</FormSplit> </FormSplit>
</div> </div>
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination"> <MkPagination v-slot="{items, itemsContainer}" ref="instances" :key="host + state" :pagination="pagination">
<div class="dqokceoi"> <div class="dqokceoi" ref="itemsContainer">
<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`"> <MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div> <div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
<div class="table"> <div class="table">

4
packages/client/src/pages/follow-requests.vue
View File

@ -7,8 +7,8 @@
<div>{{ $ts.noFollowRequests }}</div> <div>{{ $ts.noFollowRequests }}</div>
</div> </div>
</template> </template>
<template v-slot="{items}"> <template v-slot="{items, itemsContainer}">
<div class="mk-follow-requests"> <div class="mk-follow-requests" ref="itemsContainer">
<div v-for="req in items" :key="req.id" class="user _panel"> <div v-for="req in items" :key="req.id" class="user _panel">
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/> <MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
<div class="body"> <div class="body">

16
packages/client/src/pages/gallery/index.vue
View File

@ -9,32 +9,32 @@
<div v-if="tab === 'explore'"> <div v-if="tab === 'explore'">
<MkFolder class="_gap"> <MkFolder class="_gap">
<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template> <template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true"> <MkPagination v-slot="{items, itemsContainer}" :pagination="recentPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk"> <div class="vfpdbgtk" ref="itemsContainer">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>
</MkFolder> </MkFolder>
<MkFolder class="_gap"> <MkFolder class="_gap">
<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template> <template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true"> <MkPagination v-slot="{items, itemsContainer}" :pagination="popularPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk"> <div class="vfpdbgtk" ref="itemsContainer">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>
</MkFolder> </MkFolder>
</div> </div>
<div v-else-if="tab === 'liked'"> <div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPostsPagination"> <MkPagination v-slot="{items, itemsContainer}" :pagination="likedPostsPagination">
<div class="vfpdbgtk"> <div class="vfpdbgtk" ref="itemsContainer">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/> <MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'my'"> <div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA> <MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
<MkPagination v-slot="{items}" :pagination="myPostsPagination"> <MkPagination v-slot="{items, itemsContainer}" :pagination="myPostsPagination">
<div class="vfpdbgtk"> <div class="vfpdbgtk" ref="itemsContainer">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>

4
packages/client/src/pages/gallery/post.vue
View File

@ -36,8 +36,8 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="otherPostsPagination"> <MkPagination v-slot="{items, itemsContainer}" :pagination="otherPostsPagination">
<div class="sdrarzaf"> <div class="sdrarzaf" ref="itemsContainer">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>

12
packages/client/src/pages/messaging/messaging-room.vue
View File

@ -14,8 +14,16 @@
</div> </div>
</template> </template>
<template #default="{ items: messages, fetching }"> <template #default="{ items: messages, fetching, itemsContainerWrapped }">
<XList v-if="messages.length > 0" v-slot="{ item: message }" :class="{ messages: true, 'deny-move-transition': fetching }" :items="messages" direction="up" reversed> <XList
v-if="messages.length > 0"
v-slot="{ item: message }"
:class="{ messages: true, 'deny-move-transition': fetching }"
:items="messages"
v-model:itemsContainer="itemsContainerWrapped.v.value"
direction="up"
reversed
>
<XMessage :key="message.id" :message="message" :is-group="group != null"/> <XMessage :key="message.id" :message="message" :is-group="group != null"/>
</XList> </XList>
</template> </template>

4
packages/client/src/pages/settings/security.vue
View File

@ -13,8 +13,8 @@
<FormSection> <FormSection>
<template #label>{{ $ts.signinHistory }}</template> <template #label>{{ $ts.signinHistory }}</template>
<MkPagination :pagination="pagination"> <MkPagination :pagination="pagination">
<template v-slot="{items}"> <template v-slot="{items, itemsContainer}">
<div> <div ref="itemsContainer">
<div v-for="item in items" :key="item.id" v-panel class="timnmucd"> <div v-for="item in items" :key="item.id" v-panel class="timnmucd">
<header> <header>
<i v-if="item.success" class="fas fa-check icon succ"></i> <i v-if="item.success" class="fas fa-check icon succ"></i>

4
packages/client/src/pages/user/follow-list.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers"> <MkPagination v-slot="{items, itemsContainer}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
<div class="users _isolated"> <div class="users _isolated" ref="itemsContainer">
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/> <MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
</div> </div>
</MkPagination> </MkPagination>

4
packages/client/src/pages/user/gallery.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<MkPagination v-slot="{items}" :pagination="pagination"> <MkPagination v-slot="{items, itemsContainer}" :pagination="pagination">
<div class="jrnovfpt"> <div class="jrnovfpt" ref="itemsContainer">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>

55
packages/client/src/scripts/scroll.ts
View File

@ -12,20 +12,28 @@ export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
} }
} }
export function getStickyTop(el: HTMLElement, container: HTMLElement | null = null, top: number = 0) {
if (!el.parentElement) return top;
const data = el.dataset.stickyContainerHeaderHeight;
const newTop = data ? Number(data) + top : top;
if (el === container) return newTop;
return getStickyTop(el.parentElement, container, newTop);
}
export function getScrollPosition(el: HTMLElement | null): number { export function getScrollPosition(el: HTMLElement | null): number {
const container = getScrollContainer(el); const container = getScrollContainer(el);
return container == null ? window.scrollY : container.scrollTop; return container == null ? window.scrollY : container.scrollTop;
} }
export function isTopVisible(el: HTMLElement): boolean { export function onScrollTop(el: HTMLElement, cb: Function) {
const scrollTop = getScrollPosition(el); // とりあえず評価してみる
const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる if (isTopVisible(el)) {
cb();
return null;
}
return scrollTop <= topPosition;
}
export function onScrollTop(el: HTMLElement, cb) {
const container = getScrollContainer(el) || window; const container = getScrollContainer(el) || window;
const onScroll = ev => { const onScroll = ev => {
if (!document.body.contains(el)) return; if (!document.body.contains(el)) return;
if (isTopVisible(el)) { if (isTopVisible(el)) {
@ -33,13 +41,21 @@ export function onScrollTop(el: HTMLElement, cb) {
removeListener(); removeListener();
} }
}; };
function removeListener() { container.removeEventListener('scroll', onScroll) } function removeListener() { container.removeEventListener('scroll', onScroll) }
container.addEventListener('scroll', onScroll, { passive: true }); container.addEventListener('scroll', onScroll, { passive: true });
return removeListener; return removeListener;
} }
export function onScrollBottom(el: HTMLElement, cb) { export function onScrollBottom(el: HTMLElement, cb: Function) {
const container = getScrollContainer(el); const container = getScrollContainer(el);
// とりあえず評価してみる
if (isBottom(el, 1, container)) {
cb();
return null;
}
const containerOrWindow = container || window; const containerOrWindow = container || window;
const onScroll = ev => { const onScroll = ev => {
if (!document.body.contains(el)) return; if (!document.body.contains(el)) return;
@ -48,6 +64,7 @@ export function onScrollBottom(el: HTMLElement, cb) {
removeListener(); removeListener();
} }
}; };
function removeListener() { containerOrWindow.removeEventListener('scroll', onScroll) } function removeListener() { containerOrWindow.removeEventListener('scroll', onScroll) }
containerOrWindow.addEventListener('scroll', onScroll, { passive: true }); containerOrWindow.addEventListener('scroll', onScroll, { passive: true });
return removeListener; return removeListener;
@ -76,16 +93,32 @@ export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavio
* @param el Content element * @param el Content element
* @param options Scroll options * @param options Scroll options
* @param container Scroll container element * @param container Scroll container element
* @param addSticky To add sticky-top or not
*/ */
export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el)) { export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el), addSticky: boolean = true) {
const addStickyTop = addSticky ? getStickyTop(el, container) : 0;
if (container) { if (container) {
container.scroll({ top: el.scrollHeight - container.clientHeight || 0, ...options }); container.scroll({ top: el.scrollHeight - container.clientHeight + addStickyTop || 0, ...options });
} else { } else {
window.scroll({ top: el.scrollHeight - window.innerHeight || 0, ...options }); window.scroll({ top: el.scrollHeight - window.innerHeight + addStickyTop || 0, ...options });
} }
} }
export function isTopVisible(el: HTMLElement, asobi: number = 1): boolean {
const scrollTop = getScrollPosition(el);
return scrollTop <= asobi;
}
export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) { export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi; if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi;
return el.scrollHeight <= window.innerHeight + window.scrollY + asobi; return el.scrollHeight <= window.innerHeight + window.scrollY + asobi;
} }
// https://ja.javascript.info/size-and-scroll-window#ref-932
export function getBodyScrollHeight() {
return Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
}

7
packages/client/src/types/date-separated-list.ts Normal file
View File

@ -0,0 +1,7 @@
export type MisskeyEntity = {
id: string;
createdAt: string;
_shouldInsertAd_?:
boolean;
[x: string]: any;
};

2
packages/client/src/ui/visitor/a.vue
View File

@ -44,7 +44,6 @@ import { defineComponent, defineAsyncComponent } from 'vue';
import { host, instanceName } from '@/config'; import { host, instanceName } from '@/config';
import { search } from '@/scripts/search'; import { search } from '@/scripts/search';
import * as os from '@/os'; import * as os from '@/os';
import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import XHeader from './header.vue'; import XHeader from './header.vue';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
@ -55,7 +54,6 @@ const DESKTOP_THRESHOLD = 1100;
export default defineComponent({ export default defineComponent({
components: { components: {
XHeader, XHeader,
MkPagination,
MkButton, MkButton,
}, },