Compare commits

...

6 commits

Author SHA1 Message Date
thislight
49b7f2891b
PullDownToRefresh: reset the state if invisible
All checks were successful
/ depoly (push) Successful in 1m13s
2024-10-09 15:15:22 +08:00
thislight
ee39cf8651
PullDownToRefresh: fix trigger many refreshings
This commit fixes that the wheel event path may
trigger too many refreshings.
2024-10-09 14:51:32 +08:00
thislight
40a785a538
PullDownToRefresh: rewrite spring animation
- fix #12
2024-10-09 14:38:25 +08:00
thislight
dbb93fd76c
MediaAttachmentGrid: improve layout as length % 2 2024-10-08 17:43:33 +08:00
thislight
eefe2812df
*Toot: fix missing preview card 2024-10-08 17:33:52 +08:00
thislight
4fa7449d71
TootComposer: don't switch the random placeholder 2024-10-08 17:18:27 +08:00
5 changed files with 79 additions and 38 deletions

View file

@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/package",
"name": "tutu",
"version": "1.0.7",
"version": "1.0.8",
"description": "",
"private": true,
"type": "module",

View file

@ -51,9 +51,19 @@ const MediaAttachmentGrid: Component<{
setViewerIndex(index);
};
const columnCount = () => {
if (props.attachments.length === 1) {
return 1;
} else if (props.attachments.length % 2 === 0) {
return 2;
} else {
return 3;
}
};
css`
.attachments {
column-count: ${(props.attachments.length === 1 ? 1 : 3).toString()};
column-count: ${columnCount.toString()};
}
`;
return (
@ -104,17 +114,17 @@ const MediaAttachmentGrid: Component<{
/>
);
case "gifv": // Later we can handle the preview
return (
<video
src={item.url || undefined}
style={style()}
onLoadedMetadata={[setLoaded, true]}
autoplay={false}
controls
playsinline /* or safari on iOS will play in full-screen */
loop
/>
);
return (
<video
src={item.url || undefined}
style={style()}
onLoadedMetadata={[setLoaded, true]}
autoplay={false}
controls
playsinline /* or safari on iOS will play in full-screen */
loop
/>
);
case "audio":
case "unknown":

View file

@ -28,11 +28,13 @@ const PullDownToRefresh: Component<{
let rootElement: HTMLDivElement;
const [pullDown, setPullDown] = createSignal(0);
const pullDownDistance = () => {
const stopPos = () => 160;
const indicatorOfsY = () => {
if (props.loading) {
return 140;
return stopPos() * 0.875;
}
return Math.max(Math.min(160, pullDown()), 0);
return pullDown();
};
const obvx = createVisibilityObserver({
@ -41,46 +43,66 @@ const PullDownToRefresh: Component<{
const rootVisible = obvx(() => rootElement);
createEffect(() => {
if (!rootVisible()) setPullDown(0);
});
let released = true;
let v = 0;
let lts = -1;
let ds = 0;
let holding = false;
const M = 1;
const K = -10;
const D = -10;
const K = 10;
const updatePullDown = (ts: number) => {
released = false;
try {
const x = untrack(pullDown);
const dt = lts !== -1 ? ts - lts : 1 / 60;
const fs = (ds / Math.pow(dt, 2)) * M;
const fh = (x + ds) * K + D * v;
const f = fs + fh;
const a = f / M;
v += a * dt;
if (holding && v < 0) {
v = 0
}
setPullDown(x + v * dt);
const vspring = holding ? 0 : K * x * dt;
v = ds / dt - vspring;
setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0));
if (Math.abs(x) > 1 || Math.abs(v) > 1) {
requestAnimationFrame(updatePullDown);
} else {
v = 0;
lts = -1;
}
if (!holding && untrack(pullDownDistance) >= 160 && !props.loading && props.onRefresh) {
setTimeout(props.onRefresh, 0)
if (
!holding &&
untrack(pullDown) >= stopPos() &&
!props.loading &&
props.onRefresh
) {
setTimeout(props.onRefresh, 0);
}
} finally {
ds = 0;
released = true;
}
};
let wheelTimeout: ReturnType<typeof setTimeout> | undefined;
const onWheelNotUpdated = () => {
wheelTimeout = undefined;
holding = false;
};
const handleLinkedWheel = (event: WheelEvent) => {
const scrollTop = (event.target as HTMLElement).scrollTop;
if (scrollTop >= 0 && scrollTop < 1) {
ds = -(event.deltaY / window.devicePixelRatio / 4);
const d = untrack(pullDown);
if (event.deltaY <= 0 || d > 0) event.preventDefault();
ds = -(event.deltaY / window.devicePixelRatio / 2);
holding = d < stopPos();
if (wheelTimeout) {
clearTimeout(wheelTimeout);
}
wheelTimeout = setTimeout(onWheelNotUpdated, 200);
if (released) {
released = false;
requestAnimationFrame(updatePullDown);
@ -107,11 +129,13 @@ const PullDownToRefresh: Component<{
return;
}
const item = event.targetTouches.item(0)!;
if (untrack(pullDown) > 0) event.preventDefault();
if (lastTouchId && item.identifier !== lastTouchId) {
lastTouchId = undefined;
lastTouchScreenY = 0;
return;
}
holding = true;
if (lastTouchScreenY !== 0) {
ds = item.screenY - lastTouchScreenY;
@ -127,7 +151,11 @@ const PullDownToRefresh: Component<{
lastTouchId = undefined;
lastTouchScreenY = 0;
holding = false;
if (untrack(pullDownDistance) >= 160 && !props.loading && props.onRefresh) {
if (
untrack(indicatorOfsY) >= stopPos() &&
!props.loading &&
props.onRefresh
) {
setTimeout(props.onRefresh, 0);
} else {
if (released) {
@ -169,14 +197,14 @@ const PullDownToRefresh: Component<{
aspect-ratio: 1/1;
width: 2rem;
color: var(--tutu-color-primary);
transform: translateY(${`${pullDownDistance() - 2}px`});
transform: translateY(${`${indicatorOfsY() - 2}px`});
will-change: transform;
z-index: var(--tutu-zidx-nav);
background-color: var(--tutu-color-surface);
> :global(.refresh-icon) {
transform: rotate(
${`${((pullDownDistance() / 160) * 180).toString()}deg`}
${`${((indicatorOfsY() / 160) * 180).toString()}deg`}
);
will-change: transform;
}

View file

@ -1,5 +1,6 @@
import {
createEffect,
createMemo,
createSignal,
createUniqueId,
onMount,
@ -212,6 +213,10 @@ const TootComposer: Component<{
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
const appLanguage = useLanguage();
const randomPlaceholder = createMemo(() =>
randomChoose(Math.random(), ["What's happening?", "What do your think?"]),
);
createEffect(() => {
const lang = appLanguage().split("-")[0];
setLanguage(lang);
@ -311,10 +316,7 @@ const TootComposer: Component<{
placeholder={
props.replyToDisplayName
? `Reply to ${props.replyToDisplayName}...`
: randomChoose(Math.random(), [
"What's happening?",
"What do your think?",
])
: randomPlaceholder()
}
style={{ width: "100%", border: "none" }}
disabled={sending()}

View file

@ -3,6 +3,7 @@
--card-gut: 16px;
--toot-avatar-size: 40px;
margin-block: 0;
position: relative;
&.toot {
/* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */