]>
Commit | Line | Data |
---|---|---|
1 | export function settingsContainer({id, label, level=2}) { | |
2 | ||
3 | const container = document.createElement('section'); | |
4 | container.id = id; | |
5 | container.innerHTML = `<h${level}>${label}</h${level}>`; | |
6 | return container; | |
7 | }; | |
8 | ||
9 | export function slider({ | |
10 | id, | |
11 | min, | |
12 | max, | |
13 | step, | |
14 | shiftStep, | |
15 | get, | |
16 | set, | |
17 | label = '', | |
18 | className | |
19 | }) { | |
20 | ||
21 | const sliderContainer = document.createElement('section'); | |
22 | sliderContainer.classList.add('slider'); | |
23 | sliderContainer.classList.add(className); | |
24 | const labelElement = document.createElement('label'); | |
25 | labelElement.setAttribute('for', id); | |
26 | labelElement.innerHTML = label; | |
27 | const slider = document.createElement('input'); | |
28 | slider.id = id; | |
29 | slider.type = 'range'; | |
30 | slider.min = min; | |
31 | slider.max = max; | |
32 | slider.step = step; | |
33 | slider.value = get().toString(); | |
34 | ||
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 | }); | |
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 | }); | |
61 | } | |
62 | ||
63 | slider.addEventListener('input', () => set(slider.value)); | |
64 | ||
65 | sliderContainer.appendChild(labelElement); | |
66 | sliderContainer.appendChild(slider); | |
67 | return sliderContainer; | |
68 | } |