mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
1<script lang="ts">
2 import { spring } from 'svelte/motion';
3
4 let count = 0;
5
6 const displayed_count = spring();
7 $: displayed_count.set(count);
8 $: offset = modulo($displayed_count, 1);
9
10 function modulo(n: number, m: number) {
11 // handle negative numbers
12 return ((n % m) + m) % m;
13 }
14</script>
15
16<div class="counter">
17 <button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
18 <svg aria-hidden="true" viewBox="0 0 1 1">
19 <path d="M0,0.5 L1,0.5" />
20 </svg>
21 </button>
22
23 <div class="counter-viewport">
24 <div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
25 <strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
26 <strong>{Math.floor($displayed_count)}</strong>
27 </div>
28 </div>
29
30 <button on:click={() => (count += 1)} aria-label="Increase the counter by one">
31 <svg aria-hidden="true" viewBox="0 0 1 1">
32 <path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
33 </svg>
34 </button>
35</div>
36
37<style>
38 .counter {
39 display: flex;
40 border-top: 1px solid rgba(0, 0, 0, 0.1);
41 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
42 margin: 1rem 0;
43 }
44
45 .counter button {
46 width: 2em;
47 padding: 0;
48 display: flex;
49 align-items: center;
50 justify-content: center;
51 border: 0;
52 background-color: transparent;
53 touch-action: manipulation;
54 font-size: 2rem;
55 }
56
57 .counter button:hover {
58 background-color: var(--color-bg-1);
59 }
60
61 svg {
62 width: 25%;
63 height: 25%;
64 }
65
66 path {
67 vector-effect: non-scaling-stroke;
68 stroke-width: 2px;
69 stroke: #444;
70 }
71
72 .counter-viewport {
73 width: 8em;
74 height: 4em;
75 overflow: hidden;
76 text-align: center;
77 position: relative;
78 }
79
80 .counter-viewport strong {
81 position: absolute;
82 display: flex;
83 width: 100%;
84 height: 100%;
85 font-weight: 400;
86 color: var(--color-theme-1);
87 font-size: 4rem;
88 align-items: center;
89 justify-content: center;
90 }
91
92 .counter-digits {
93 position: absolute;
94 width: 100%;
95 height: 100%;
96 }
97
98 .hidden {
99 top: -100%;
100 user-select: none;
101 }
102</style>