langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Increasingly increment/decrement SpinBox value on long press (#2163)

Browse Source 
* Increasingly increment/decrement SpinBox value on long press

* Make increment/decrement speedup a bit more programmatic
This commit is contained in:
Matthias Metelka 2022-11-02 11:41:15 +01:00 committed by GitHub
parent 0a3ac591e6
commit a580b9d20d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ts/components/SpinBox.svelte
View File

@ -39,6 +39,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
event.preventDefault();
}
}
function change(step: number): void {
value += step;
if (pressed) {
setTimeout(() => change(step), timeout);
}
}
const progression = [1500, 1250, 1000, 750, 500, 250];
async function longPress(func: Function): Promise<void> {
pressed = true;
timeout = 128;
pressTimer = setTimeout(func, 250);
for (const delay of progression) {
timeout = await new Promise((resolve) =>
setTimeout(() => resolve(pressed ? timeout / 2 : 128), delay),
);
}
}
let pressed = false;
let timeout: number;
let pressTimer: any;
</script>
<div class="spin-box" on:wheel={handleWheel}>
@ -48,11 +73,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:click={() => {
input.focus();
if (rtl && value < max) {
value += step;
change(step);
} else if (value > min) {
value -= step;
change(-step);
}
}}
on:mousedown={() =>
longPress(() => {
if (rtl && value < max) {
change(step);
} else if (value > min) {
change(-step);
}
})}
on:mouseup={() => {
clearTimeout(pressTimer);
pressed = false;
}}
>
<IconConstrain>
{@html chevronLeft}
@ -77,11 +114,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:click={() => {
input.focus();
if (rtl && value > min) {
value -= step;
change(-step);
} else if (value < max) {
value += step;
change(step);
}
}}
on:mousedown={() =>
longPress(() => {
if (rtl && value > min) {
change(-step);
} else if (value < max) {
change(step);
}
})}
on:mouseup={() => {
clearTimeout(pressTimer);
pressed = false;
}}
>
<IconConstrain>
{@html chevronRight}