usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update MkPullToRefresh.vue

This commit is contained in:
syuilo 2025-05-03 10:01:59 +09:00
parent 84fe933863
commit bfbcc71008
1 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/frontend/src/components/MkPullToRefresh.vue
View File

@ -54,7 +54,7 @@ const emit = defineEmits<{
(ev: 'refresh'): void; (ev: 'refresh'): void;
}>(); }>();
function getScreenY(event: TouchEvent | MouseEvent): number { function getScreenY(event: TouchEvent | MouseEvent | PointerEvent): number {
if (event.touches && event.touches[0] && event.touches[0].screenY != null) { if (event.touches && event.touches[0] && event.touches[0].screenY != null) {
return event.touches[0].screenY; return event.touches[0].screenY;
} else { } else {
@ -73,7 +73,7 @@ function unlockDownScroll() {
scrollEl!.style.overscrollBehavior = 'contain'; scrollEl!.style.overscrollBehavior = 'contain';
} }
function moveStart(event: TouchEvent) { function moveStart(event: PointerEvent) {
const scrollPos = scrollEl!.scrollTop; const scrollPos = scrollEl!.scrollTop;
if (scrollPos === 0) { if (scrollPos === 0) {
lockDownScroll(); lockDownScroll();
@ -81,30 +81,27 @@ function moveStart(event: TouchEvent) {
isPulling.value = true; isPulling.value = true;
startScreenY = getScreenY(event); startScreenY = getScreenY(event);
pullDistance.value = 0; pullDistance.value = 0;
rootEl.value.addEventListener('touchmove', moving, { passive: true });
rootEl.value.addEventListener('touchend', () => { // タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける
rootEl.value.removeEventListener('touchmove', moving); if (event.pointerType === 'mouse') {
onPullRelease(); window.addEventListener('mousemove', moving, { passive: true });
}, { passive: true, once: true }); window.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', moving);
onPullRelease();
}, { passive: true, once: true });
} else {
window.addEventListener('touchmove', moving, { passive: true });
window.addEventListener('touchend', () => {
window.removeEventListener('touchmove', moving);
onPullRelease();
}, { passive: true, once: true });
}
} }
} else { } else {
unlockDownScroll(); unlockDownScroll();
} }
} }
function moveStartByMouse(event: MouseEvent) {
if (!isPulling.value && !isRefreshing.value) {
isPulling.value = true;
startScreenY = event.screenY;
pullDistance.value = 0;
window.addEventListener('mousemove', moving, { passive: true });
window.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', moving);
onPullRelease();
}, { passive: true, once: true });
}
}
function moveBySystem(to: number): Promise<void> { function moveBySystem(to: number): Promise<void> {
return new Promise(r => { return new Promise(r => {
const startHeight = pullDistance.value; const startHeight = pullDistance.value;
@ -166,7 +163,7 @@ function toggleScrollLockOnTouchEnd() {
} }
} }
function moving(event: TouchEvent | PointerEvent | MouseEvent) { function moving(event: MouseEvent | TouchEvent) {
if (!isPulling.value || isRefreshing.value) return; if (!isPulling.value || isRefreshing.value) return;
if ((scrollEl?.scrollTop ?? 0) > SCROLL_STOP + pullDistance.value || isHorizontalSwipeSwiping.value) { if ((scrollEl?.scrollTop ?? 0) > SCROLL_STOP + pullDistance.value || isHorizontalSwipeSwiping.value) {
@ -204,14 +201,12 @@ onMounted(() => {
scrollEl = getScrollContainer(rootEl.value); scrollEl = getScrollContainer(rootEl.value);
rootEl.value.addEventListener('mousedown', moveStartByMouse, { passive: true }); rootEl.value.addEventListener('pointerdown', moveStart, { passive: true });
rootEl.value.addEventListener('touchstart', moveStart, { passive: true });
rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true }); rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true });
}); });
onUnmounted(() => { onUnmounted(() => {
rootEl.value.removeEventListener('mousedown', moveStartByMouse); rootEl.value.removeEventListener('pointerdown', moveStart);
rootEl.value.removeEventListener('touchstart', moveStart);
rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd); rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd);
}); });
</script> </script>