Hold Button

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { Button } from '$lib/components/ui/button';
4	import type { Snippet } from 'svelte';
5 
6	type Direction = 'top' | 'bottom' | 'left' | 'right';
7 
8	let {
9		duration = 1500,
10		onComplete,
11		class: className,
12		children,
13		fillColor = 'bg-black/10',
14		from = 'bottom',
15		onmousedown,
16		onmouseup,
17		ontouchstart,
18		ontouchend,
19		...rest
20	}: {
21		duration?: number;
22		onComplete?: () => void;
23		class?: string;
24		children: Snippet;
25		fillColor?: string;
26		from?: Direction;
27		onmousedown?: (e: MouseEvent) => void;
28		onmouseup?: (e: MouseEvent) => void;
29		ontouchstart?: (e: TouchEvent) => void;
30		ontouchend?: (e: TouchEvent) => void;
31		[key: string]: any;
32	} = $props();
33 
34	let isHolding = $state(false);
35	let completed = $state(false);
36	let timer: ReturnType<typeof setTimeout> | null = null;
37 
38	function startHold(e: any) {
39		if (completed) return;
40		isHolding = true;
41 
42		timer = setTimeout(() => {
43			if (isHolding) {
44				completed = true;
45				onComplete?.();
46				setTimeout(() => {
47					isHolding = false;
48					completed = false;
49				}, 200);
50			}
51		}, duration);
52	}
53 
54	function cancelHold(e: any) {
55		if (completed) return;
56		isHolding = false;
57		if (timer) {
58			clearTimeout(timer);
59			timer = null;
60		}
61	}
62 
63	const transformStyles = $derived.by(() => {
64		switch (from) {
65			case 'top':
66				return {
67					origin: 'origin-top',
68					transform: `scaleY(${isHolding ? 1 : 0})`
69				};
70			case 'left':
71				return {
72					origin: 'origin-left',
73					transform: `scaleX(${isHolding ? 1 : 0})`
74				};
75			case 'right':
76				return {
77					origin: 'origin-right',
78					transform: `scaleX(${isHolding ? 1 : 0})`
79				};
80			case 'bottom':
81			default:
82				return {
83					origin: 'origin-bottom',
84					transform: `scaleY(${isHolding ? 1 : 0})`
85				};
86		}
87	});
88</script>
89 
90<Button
91	class={cn('relative overflow-hidden select-none', className)}
92	onmousedown={(e) => {
93		startHold(e);
94		onmousedown?.(e);
95	}}
96	onmouseup={(e) => {
97		cancelHold(e);
98		onmouseup?.(e);
99	}}
100	onmouseleave={cancelHold}
101	ontouchstart={(e) => {
102		if (e.cancelable) e.preventDefault();
103		startHold(e);
104		ontouchstart?.(e);
105	}}
106	ontouchend={(e) => {
107		cancelHold(e);
108		ontouchend?.(e);
109	}}
110	{...rest}
111>
112	<div
113		class={cn('absolute inset-0 pointer-events-none z-0', transformStyles.origin, fillColor)}
114		style:transform={transformStyles.transform}
115		style:transition="transform {isHolding ? duration : 100}ms linear"
116	></div>
117 
118// … truncated