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 09:52:06 +09:00
parent 4ee5811c2f
commit 84fe933863
1 changed files with 72 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="rootEl"> <div ref="rootEl">
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`"> <div v-if="isPulling" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`">
<div :class="$style.frameContent"> <div :class="$style.frameContent">
<MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/> <MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/>
<i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPullEnd }]"></i> <i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPulledEnough }]"></i>
<div :class="$style.text"> <div :class="$style.text">
<template v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</template> <template v-if="isPulledEnough">{{ i18n.ts.releaseToRefresh }}</template>
<template v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</template> <template v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</template>
<template v-else>{{ i18n.ts.pullDownToRefresh }}</template> <template v-else>{{ i18n.ts.pullDownToRefresh }}</template>
</div> </div>
@ -34,8 +34,8 @@ const RELEASE_TRANSITION_DURATION = 200;
const PULL_BRAKE_BASE = 1.5; const PULL_BRAKE_BASE = 1.5;
const PULL_BRAKE_FACTOR = 170; const PULL_BRAKE_FACTOR = 170;
const isPullStart = ref(false); const isPulling = ref(false);
const isPullEnd = ref(false); const isPulledEnough = ref(false);
const isRefreshing = ref(false); const isRefreshing = ref(false);
const pullDistance = ref(0); const pullDistance = ref(0);
@ -44,8 +44,6 @@ let startScreenY: number | null = null;
const rootEl = useTemplateRef('rootEl'); const rootEl = useTemplateRef('rootEl');
let scrollEl: HTMLElement | null = null; let scrollEl: HTMLElement | null = null;
let disabled = false;
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
refresher: () => Promise<void>; refresher: () => Promise<void>;
}>(), { }>(), {
@ -56,7 +54,7 @@ const emit = defineEmits<{
(ev: 'refresh'): void; (ev: 'refresh'): void;
}>(); }>();
function getScreenY(event) { function getScreenY(event: TouchEvent | MouseEvent): 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 {
@ -64,21 +62,46 @@ function getScreenY(event) {
} }
} }
function moveStart(event) { // When at the top of the page, disable vertical overscroll so passive touch listeners can take over.
if (!isPullStart.value && !isRefreshing.value && !disabled) { function lockDownScroll() {
isPullStart.value = true; scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
startScreenY = getScreenY(event); scrollEl!.style.overscrollBehavior = 'none';
pullDistance.value = 0; }
function unlockDownScroll() {
scrollEl!.style.touchAction = 'auto';
scrollEl!.style.overscrollBehavior = 'contain';
}
function moveStart(event: TouchEvent) {
const scrollPos = scrollEl!.scrollTop;
if (scrollPos === 0) {
lockDownScroll();
if (!isPulling.value && !isRefreshing.value) {
isPulling.value = true;
startScreenY = getScreenY(event);
pullDistance.value = 0;
rootEl.value.addEventListener('touchmove', moving, { passive: true });
rootEl.value.addEventListener('touchend', () => {
rootEl.value.removeEventListener('touchmove', moving);
onPullRelease();
}, { passive: true, once: true });
}
} else {
unlockDownScroll();
} }
} }
function moveStartByMouse(event: MouseEvent) { function moveStartByMouse(event: MouseEvent) {
if (!isPullStart.value && !isRefreshing.value && !disabled) { if (!isPulling.value && !isRefreshing.value) {
isPullStart.value = true; isPulling.value = true;
startScreenY = event.screenY; startScreenY = event.screenY;
pullDistance.value = 0; pullDistance.value = 0;
window.addEventListener('mousemove', moving, { passive: false }); window.addEventListener('mousemove', moving, { passive: true });
window.addEventListener('mouseup', moveEnd, { passive: true, once: true }); window.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', moving);
onPullRelease();
}, { passive: true, once: true });
} }
} }
@ -118,31 +141,38 @@ async function closeContent() {
} }
} }
function moveEnd() { function onPullRelease() {
if (isPullStart.value && !isRefreshing.value) { startScreenY = null;
startScreenY = null; if (isPulledEnough.value) {
if (isPullEnd.value) { isPulledEnough.value = false;
isPullEnd.value = false; isRefreshing.value = true;
isRefreshing.value = true; fixOverContent().then(() => {
fixOverContent().then(() => { emit('refresh');
emit('refresh'); props.refresher().then(() => {
props.refresher().then(() => { refreshFinished();
refreshFinished();
});
}); });
} else { });
closeContent().then(() => isPullStart.value = false); } else {
} closeContent().then(() => isPulling.value = false);
}
}
function toggleScrollLockOnTouchEnd() {
const scrollPos = scrollEl!.scrollTop;
if (scrollPos === 0) {
lockDownScroll();
} else {
unlockDownScroll();
} }
} }
function moving(event: TouchEvent | PointerEvent | MouseEvent) { function moving(event: TouchEvent | PointerEvent | MouseEvent) {
if (!isPullStart.value || isRefreshing.value || disabled) 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) {
pullDistance.value = 0; pullDistance.value = 0;
isPullEnd.value = false; isPulledEnough.value = false;
moveEnd(); onPullRelease();
return; return;
} }
@ -154,15 +184,7 @@ function moving(event: TouchEvent | PointerEvent | MouseEvent) {
const moveHeight = moveScreenY - startScreenY!; const moveHeight = moveScreenY - startScreenY!;
pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE); pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
if (pullDistance.value > 0) { isPulledEnough.value = pullDistance.value >= FIRE_THRESHOLD;
if (event.cancelable) event.preventDefault();
}
if (pullDistance.value > SCROLL_STOP) {
event.stopPropagation();
}
isPullEnd.value = pullDistance.value >= FIRE_THRESHOLD;
} }
/** /**
@ -172,64 +194,25 @@ function moving(event: TouchEvent | PointerEvent | MouseEvent) {
*/ */
function refreshFinished() { function refreshFinished() {
closeContent().then(() => { closeContent().then(() => {
isPullStart.value = false; isPulling.value = false;
isRefreshing.value = false; isRefreshing.value = false;
}); });
} }
function setDisabled(value) {
disabled = value;
}
function onScrollContainerScroll() {
const scrollPos = scrollEl!.scrollTop;
// When at the top of the page, disable vertical overscroll so passive touch listeners can take over.
if (scrollPos === 0) {
scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
registerEventListenersForReadyToPull();
} else {
scrollEl!.style.touchAction = 'auto';
unregisterEventListenersForReadyToPull();
}
}
function registerEventListenersForReadyToPull() {
if (rootEl.value == null) return;
rootEl.value.addEventListener('mousedown', moveStartByMouse, { passive: true });
rootEl.value.addEventListener('touchstart', moveStart, { passive: true });
rootEl.value.addEventListener('touchmove', moving, { passive: false }); // passive: falseにしないとpreventDefaultが使えない
}
function unregisterEventListenersForReadyToPull() {
if (rootEl.value == null) return;
rootEl.value.removeEventListener('mousedown', moveStartByMouse);
rootEl.value.removeEventListener('touchstart', moveStart);
rootEl.value.removeEventListener('touchmove', moving);
window.removeEventListener('mousemove', moving);
}
onMounted(() => { onMounted(() => {
if (rootEl.value == null) return; if (rootEl.value == null) return;
scrollEl = getScrollContainer(rootEl.value); scrollEl = getScrollContainer(rootEl.value);
if (scrollEl == null) return;
scrollEl.addEventListener('scroll', onScrollContainerScroll, { passive: true }); rootEl.value.addEventListener('mousedown', moveStartByMouse, { passive: true });
rootEl.value.addEventListener('touchstart', moveStart, { passive: true });
rootEl.value.addEventListener('touchend', moveEnd, { passive: true }); rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true });
registerEventListenersForReadyToPull();
}); });
onUnmounted(() => { onUnmounted(() => {
if (scrollEl) scrollEl.removeEventListener('scroll', onScrollContainerScroll); rootEl.value.removeEventListener('mousedown', moveStartByMouse);
rootEl.value.removeEventListener('touchstart', moveStart);
unregisterEventListenersForReadyToPull(); rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd);
});
defineExpose({
setDisabled,
}); });
</script> </script>