anki/ts/components/SpinBox.svelte
Matthias Metelka 1ab4ee38c6
Refactor SpinBox component (#2223)
this fixes the increment button not showing.
2022-12-01 15:34:54 +10:00

184 lines
4.5 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import IconConstrain from "./IconConstrain.svelte";
import { chevronLeft, chevronRight } from "./icons";
export let value: number;
export let step = 1;
export let min = 1;
export let max = 9999;
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
let input: HTMLInputElement;
let focused = false;
function decimalPlaces(value: number) {
if (Math.floor(value) === value) return 0;
return value.toString().split(".")[1].length || 0;
}
let stringValue: string;
$: if (value) stringValue = value.toFixed(decimalPlaces(step));
function update(this: HTMLInputElement): void {
value = Math.min(max, Math.max(min, parseFloat(this.value)));
if (value > max) {
value = max;
} else if (value < min) {
value = min;
}
}
function handleWheel(event: WheelEvent) {
if (focused) {
value += event.deltaY < 0 ? step : -step;
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}>
<button
class="decrement"
disabled={value == min}
tabindex="-1"
on:click={() => {
input.focus();
if (value > min) {
change(-step);
}
}}
on:mousedown={() =>
longPress(() => {
if (value > min) {
change(-step);
}
})}
on:mouseup={() => {
clearTimeout(pressTimer);
pressed = false;
}}
>
<IconConstrain>
{@html rtl ? chevronRight : chevronLeft}
</IconConstrain>
</button>
<input
type="number"
pattern="[0-9]*"
inputmode="numeric"
{min}
{max}
{step}
value={stringValue}
bind:this={input}
on:blur={update}
on:focusin={() => (focused = true)}
on:focusout={() => (focused = false)}
/>
<button
class="increment"
disabled={value == max}
tabindex="-1"
on:click={() => {
input.focus();
if (value < max) {
change(step);
}
}}
on:mousedown={() =>
longPress(() => {
if (value < max) {
change(step);
}
})}
on:mouseup={() => {
clearTimeout(pressTimer);
pressed = false;
}}
>
<IconConstrain>
{@html rtl ? chevronLeft : chevronRight}
</IconConstrain>
</button>
</div>
<style lang="scss">
@use "sass/button-mixins" as button;
.spin-box {
width: 100%;
background: var(--canvas-inset);
border: 1px solid var(--border);
border-radius: var(--border-radius);
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
input {
flex-grow: 1;
border: none;
outline: none;
text-align: center;
background: transparent;
&::-webkit-inner-spin-button {
display: none;
}
}
&:hover,
&:focus-within {
button {
visibility: visible;
}
input {
border-left: 1px solid var(--border-subtle);
border-right: 1px solid var(--border-subtle);
}
}
}
button {
visibility: hidden;
@include button.base($border: false);
border-radius: 0;
height: 100%;
&.decrement {
align-self: flex-start;
}
&.increment {
align-self: flex-end;
}
}
</style>