Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tweak MkPullToRefresh

Browse source
This commit is contained in:
syuilo 2023-10-30 15:16:59 +09:00
parent 7015cc937b
commit 52dbab56a4
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/MkPullToRefresh.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl">
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight / 3}px;`">
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`">
<div :class="$style.frameContent">
<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>
@ -29,13 +29,15 @@ import { i18n } from '@/i18n.js';
const SCROLL_STOP = 10;
const MAX_PULL_DISTANCE = Infinity;
const FIRE_THRESHOLD = 200;
const FIRE_THRESHOLD = 230;
const RELEASE_TRANSITION_DURATION = 200;
const PULL_BRAKE_BASE = 2;
const PULL_BRAKE_FACTOR = 200;
let isPullStart = $ref(false);
let isPullEnd = $ref(false);
let isRefreshing = $ref(false);
let currentHeight = $ref(0);
let pullDistance = $ref(0);
let supportPointerDesktop = false;
let startScreenY: number | null = null;
@ -72,14 +74,14 @@ function moveStart(event) {
if (!isPullStart && !isRefreshing && !disabled) {
isPullStart = true;
startScreenY = getScreenY(event);
currentHeight = 0;
pullDistance = 0;
}
}
function moveBySystem(to: number): Promise<void> {
return new Promise(r => {
const startHeight = currentHeight;
const overHeight = currentHeight - to;
const startHeight = pullDistance;
const overHeight = pullDistance - to;
if (overHeight < 1) {
r();
return;
@ -88,26 +90,26 @@ function moveBySystem(to: number): Promise<void> {
let intervalId = setInterval(() => {
const time = Date.now() - startTime;
if (time > RELEASE_TRANSITION_DURATION) {
currentHeight = to;
pullDistance = to;
clearInterval(intervalId);
r();
return;
}
const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time;
if (currentHeight < nextHeight) return;
currentHeight = nextHeight;
if (pullDistance < nextHeight) return;
pullDistance = nextHeight;
}, 1);
});
}
async function fixOverContent() {
if (currentHeight > FIRE_THRESHOLD) {
if (pullDistance > FIRE_THRESHOLD) {
await moveBySystem(FIRE_THRESHOLD);
}
}
async function closeContent() {
if (currentHeight > 0) {
if (pullDistance > 0) {
await moveBySystem(0);
}
}
@ -131,8 +133,8 @@ function moving(event) {
if (!scrollEl) {
scrollEl = getScrollableParentElement(rootEl);
}
if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + currentHeight)) {
currentHeight = 0;
if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
pullDistance = 0;
isPullEnd = false;
moveEnd();
return;
@ -144,9 +146,9 @@ function moving(event) {
const moveScreenY = getScreenY(event);
const moveHeight = moveScreenY - startScreenY!;
currentHeight = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
isPullEnd = currentHeight >= FIRE_THRESHOLD;
isPullEnd = pullDistance >= FIRE_THRESHOLD;
}
/**