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