]>
Commit | Line | Data |
---|---|---|
362f9116 RBR |
1 | export function settingsContainer({id, label, level=2}) { |
2 | ||
6a87c253 | 3 | const container = document.createElement('section'); |
362f9116 RBR |
4 | container.id = id; |
5 | container.innerHTML = `<h${level}>${label}</h${level}>`; | |
6 | return container; | |
7 | }; | |
8 | ||
6a87c253 RBR |
9 | export function slider({ |
10 | id, | |
11 | min, | |
12 | max, | |
13 | step, | |
14 | shiftStep, | |
15 | get, | |
16 | set, | |
17 | label = '', | |
18 | className | |
19 | }) { | |
362f9116 | 20 | |
6a87c253 | 21 | const sliderContainer = document.createElement('section'); |
362f9116 RBR |
22 | sliderContainer.classList.add('slider'); |
23 | sliderContainer.classList.add(className); | |
24 | const labelElement = document.createElement('label'); | |
6a87c253 | 25 | labelElement.setAttribute('for', id); |
362f9116 RBR |
26 | labelElement.innerHTML = label; |
27 | const slider = document.createElement('input'); | |
6a87c253 | 28 | slider.id = id; |
362f9116 RBR |
29 | slider.type = 'range'; |
30 | slider.min = min; | |
31 | slider.max = max; | |
32 | slider.step = step; | |
33 | slider.value = get().toString(); | |
34 | ||
6a87c253 RBR |
35 | if (shiftStep) { |
36 | document.addEventListener('keydown', function(event) { | |
37 | if (event.shiftKey) { | |
38 | slider.classList.add('shifted'); | |
39 | slider.step = shiftStep; | |
40 | } | |
41 | }); | |
42 | ||
43 | document.addEventListener('keyup', function(event) { | |
44 | if (event.key === 'Shift') { | |
45 | slider.classList.remove('shifted'); | |
46 | slider.step = step; | |
47 | } | |
48 | }); | |
1924acb2 RBR |
49 | |
50 | document.addEventListener('touchstart', function(event) { | |
51 | if (event.touches.length == 3) { | |
52 | if (slider.classList.contains('shifted')) { | |
53 | slider.classList.remove('shifted'); | |
54 | slider.step = step; | |
55 | } else { | |
56 | slider.classList.add('shifted'); | |
57 | slider.step = shiftStep; | |
58 | } | |
59 | } | |
60 | }); | |
6a87c253 RBR |
61 | } |
62 | ||
362f9116 RBR |
63 | slider.addEventListener('input', () => set(slider.value)); |
64 | ||
65 | sliderContainer.appendChild(labelElement); | |
66 | sliderContainer.appendChild(slider); | |
67 | return sliderContainer; | |
68 | } |