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