]>
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 | }); | |
49 | } | |
50 | ||
362f9116 RBR |
51 | slider.addEventListener('input', () => set(slider.value)); |
52 | ||
53 | sliderContainer.appendChild(labelElement); | |
54 | sliderContainer.appendChild(slider); | |
55 | return sliderContainer; | |
56 | } |